From dddb02a28645151be376b92c9c596fac625b1ccc Mon Sep 17 00:00:00 2001 From: zadam Date: Tue, 20 Aug 2019 23:30:19 +0200 Subject: [PATCH] sorting widgets in options WIP --- libraries/sortable.min.js | 3 +++ src/public/javascripts/dialogs/options.js | 17 +++++++++++++- .../javascripts/services/library_loader.js | 5 +++- src/public/stylesheets/desktop.css | 12 ++++++++++ src/views/dialogs/options/appearance.ejs | 4 ++-- src/views/dialogs/options/note_revisions.ejs | 2 +- .../dialogs/options/protected_session.ejs | 2 +- src/views/dialogs/options/sidebar.ejs | 23 +++++++++++++++++-- 8 files changed, 60 insertions(+), 8 deletions(-) create mode 100644 libraries/sortable.min.js diff --git a/libraries/sortable.min.js b/libraries/sortable.min.js new file mode 100644 index 000000000..3dcf767c3 --- /dev/null +++ b/libraries/sortable.min.js @@ -0,0 +1,3 @@ +/*! Sortable 1.9.0 - MIT | git://github.com/SortableJS/Sortable.git */ + +!function(t){"use strict";"function"==typeof define&&define.amd?define(t):"undefined"!=typeof module&&void 0!==module.exports?module.exports=t():window.Sortable=t()}(function(){"use strict";if("undefined"==typeof window||!window.document)return function(){throw new Error("Sortable.js requires a window with a document")};function A(t,e){if(!t||!t.getBoundingClientRect)return ut();var o=t,n=!1;do{if(o.clientWidth=n.left-i&&t<=n.right+i,a=e>=n.top-i&&e<=n.bottom+i;if(i&&r&&a)return d[o]}}((t=t.touches?t.touches[0]:t).clientX,t.clientY);if(e){var o={};for(var n in t)o[n]=t[n];o.target=o.rootEl=e,o.preventDefault=void 0,o.stopPropagation=void 0,e[Q]._onDragOver(o)}}}var mt;function bt(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable: `el` must be HTMLElement, not "+{}.toString.call(t);this.el=t,this.options=e=Ot({},e),t[Q]=this;var o={group:null,sort:!0,disabled:!1,store:null,handle:null,scroll:!0,scrollSensitivity:30,scrollSpeed:10,bubbleScroll:!0,draggable:/[uo]l/i.test(t.nodeName)?">li":">*",swapThreshold:1,invertSwap:!1,invertedSwapThreshold:null,removeCloneOnHide:!0,direction:function(){return ht(t,this.options)},ghostClass:"sortable-ghost",chosenClass:"sortable-chosen",dragClass:"sortable-drag",ignore:"a, img",filter:null,preventOnFilter:!0,animation:0,easing:null,setData:function(t,e){t.setData("Text",e.textContent)},dropBubble:!1,dragoverBubble:!1,dataIdAttr:"data-id",delay:0,delayOnTouchOnly:!1,touchStartThreshold:D(window.devicePixelRatio,10)||1,forceFallback:!1,fallbackClass:"sortable-fallback",fallbackOnBody:!1,fallbackTolerance:0,fallbackOffset:{x:0,y:0},supportPointer:!1!==bt.supportPointer&&"PointerEvent"in window,emptyInsertThreshold:5};for(var n in o)!(n in e)&&(e[n]=o[n]);for(var i in vt(e),this)"_"===i.charAt(0)&&"function"==typeof this[i]&&(this[i]=this[i].bind(this));this.nativeDraggable=!e.forceFallback&&nt,this.nativeDraggable&&(this.options.touchStartThreshold=1),e.supportPointer?_t(t,"pointerdown",this._onTapStart):(_t(t,"mousedown",this._onTapStart),_t(t,"touchstart",this._onTapStart)),this.nativeDraggable&&(_t(t,"dragover",this),_t(t,"dragenter",this)),d.push(this.el),e.store&&e.store.get&&this.sort(e.store.get(this)||[])}function wt(t,e,o,n){if(t){o=o||J;do{if(null!=e&&(">"===e[0]?t.parentNode===o&&It(t,e):It(t,e))||n&&t===o)return t;if(t===o)break}while(t=(i=t).host&&i!==J&&i.host.nodeType?i.host:i.parentNode)}var i;return null}function _t(t,e,o){t.addEventListener(e,o,!T&&h)}function yt(t,e,o){t.removeEventListener(e,o,!T&&h)}function Dt(t,e,o){if(t&&e)if(t.classList)t.classList[o?"add":"remove"](e);else{var n=(" "+t.className+" ").replace(a," ").replace(" "+e+" "," ");t.className=(n+(o?" "+e:"")).replace(a," ")}}function Tt(t,e,o){var n=t&&t.style;if(n){if(void 0===o)return J.defaultView&&J.defaultView.getComputedStyle?o=J.defaultView.getComputedStyle(t,""):t.currentStyle&&(o=t.currentStyle),void 0===e?o:o[e];e in n||-1!==e.indexOf("webkit")||(e="-webkit-"+e),n[e]=o+("string"==typeof o?"":"px")}}function St(t){var e="";do{var o=Tt(t,"transform");o&&"none"!==o&&(e=o+" "+e)}while(t=t.parentNode);return window.DOMMatrix?new DOMMatrix(e):window.WebKitCSSMatrix?new WebKitCSSMatrix(e):window.CSSMatrix?new CSSMatrix(e):void 0}function Ct(t,e,o){if(t){var n=t.getElementsByTagName(e),i=0,r=n.length;if(o)for(;i"===e[0]&&(e=e.substring(1)),t)try{if(t.matches)return t.matches(e);if(t.msMatchesSelector)return t.msMatchesSelector(e);if(t.webkitMatchesSelector)return t.webkitMatchesSelector(e)}catch(t){return!1}return!1}}function t(o,n){return function(){if(!mt){var t=arguments,e=this;mt=$(function(){1===t.length?o.call(e,t[0]):o.apply(e,t),mt=void 0},n)}}}function Ot(t,e){if(t&&e)for(var o in e)e.hasOwnProperty(o)&&(t[o]=e[o]);return t}function Ht(t){return o&&o.dom?o.dom(t).cloneNode(!0):e?e(t).clone(!0)[0]:t.cloneNode(!0)}function Bt(t){return $(t,0)}function Rt(t){return clearTimeout(t)}function Lt(t,e,o,n){if(t.getBoundingClientRect||t===y){var i,r,a,l,s,c,d;if(d=t!==y&&t!==ut()?(r=(i=t.getBoundingClientRect()).top,a=i.left,l=i.bottom,s=i.right,c=i.height,i.width):(a=r=0,l=window.innerHeight,s=window.innerWidth,c=window.innerHeight,window.innerWidth),n&&t!==y&&(o=o||t.parentNode,!T))do{if(o&&o.getBoundingClientRect&&"none"!==Tt(o,"transform")){var h=o.getBoundingClientRect();r-=h.top+D(Tt(o,"border-top-width")),a-=h.left+D(Tt(o,"border-left-width")),l=r+i.height,s=a+i.width;break}}while(o=o.parentNode);if(e&&t!==y){var u=St(o||t),f=u&&u.a,p=u&&u.d;u&&(l=(r/=p)+(c/=p),s=(a/=f)+(d/=f))}return{top:r,left:a,bottom:l,right:s,width:d,height:c}}}function Wt(t,e){for(var o=A(t,!0),n=Lt(t)[e];o;){var i=Lt(o)[e];if(!("top"===e||"left"===e?i<=n:n<=i))return o;if(o===ut())break;o=A(o,!1)}return!1}function Ft(t){var e=0,o=0,n=ut();if(t)do{var i=St(t),r=i.a,a=i.d;e+=t.scrollLeft*r,o+=t.scrollTop*a}while(t!==n&&(t=t.parentNode));return[e,o]}return bt.prototype={constructor:bt,_computeIsAligned:function(t){var e;if(p&&!it?(u(),e=J.elementFromPoint(t.clientX,t.clientY),f()):e=t.target,e=wt(e,this.options.draggable,this.el,!1),!at&&E&&E.parentNode===this.el){for(var o,n,i,r,a,l,s,c,d=this.el.children,h=0;h=Math.floor(this.options.touchStartThreshold/(this.nativeDraggable&&window.devicePixelRatio||1))&&this._disableDelayedDrag()},_disableDelayedDrag:function(){E&&Mt(E),clearTimeout(this._dragStartTimer),this._disableDelayedDragEvents()},_disableDelayedDragEvents:function(){var t=this.el.ownerDocument;yt(t,"mouseup",this._disableDelayedDrag),yt(t,"touchend",this._disableDelayedDrag),yt(t,"touchcancel",this._disableDelayedDrag),yt(t,"mousemove",this._delayedDragTouchMoveHandler),yt(t,"touchmove",this._delayedDragTouchMoveHandler),yt(t,"pointermove",this._delayedDragTouchMoveHandler)},_triggerDragStart:function(t,e){e=e||("touch"==t.pointerType?t:null),!this.nativeDraggable||e?this.options.supportPointer?_t(J,"pointermove",this._onTouchMove):_t(J,e?"touchmove":"mousemove",this._onTouchMove):(_t(E,"dragend",this),_t(M,"dragstart",this._onDragStart));try{J.selection?Bt(function(){J.selection.empty()}):window.getSelection().removeAllRanges()}catch(t){}},_dragStarted:function(t,e){if(w=!1,M&&E){this.nativeDraggable&&(_t(J,"dragover",this._handleAutoScroll),_t(J,"dragover",n));var o=this.options;!t&&Dt(E,o.dragClass,!1),Dt(E,o.ghostClass,!0),Tt(E,"transform",""),bt.active=this,t&&this._appendGhost(),Et(this,M,"start",E,M,M,P,void 0,O,void 0,e)}else this._nulling()},_emulateDragOver:function(t){if(R){if(this._lastX===R.clientX&&this._lastY===R.clientY&&!t)return;this._lastX=R.clientX,this._lastY=R.clientY,u();for(var e=J.elementFromPoint(R.clientX,R.clientY),o=e;e&&e.shadowRoot&&(e=e.shadowRoot.elementFromPoint(R.clientX,R.clientY))!==o;)o=e;if(o)do{if(o[Q])if(o[Q]._onDragOver({clientX:R.clientX,clientY:R.clientY,target:e,rootEl:o})&&!this.options.dragoverBubble)break;e=o}while(o=o.parentNode);E.parentNode[Q]._computeIsAligned(R),f()}},_onTouchMove:function(t,e){if(m){var o=this.options,n=o.fallbackTolerance,i=o.fallbackOffset,r=t.touches?t.touches[0]:t,a=p&&St(p),l=p&&a&&a.a,s=p&&a&&a.d,c=et&&b&&Ft(b),d=(r.clientX-m.clientX+i.x)/(l||1)+(c?c[0]-_[0]:0)/(l||1),h=(r.clientY-m.clientY+i.y)/(s||1)+(c?c[1]-_[1]:0)/(s||1),u=t.touches?"translate3d("+d+"px,"+h+"px,0)":"translate("+d+"px,"+h+"px)";if(!bt.active&&!w){if(n&&st(lt(r.clientX-this._lastX),lt(r.clientY-this._lastY)) cssLoader.requireCss(cssUrl)); @@ -82,5 +84,6 @@ export default { COMMONMARK, RELATION_MAP, LINK_MAP, - PRINT_THIS + PRINT_THIS, + SORTABLE } \ No newline at end of file diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css index 012b56a5a..4ccc181d4 100644 --- a/src/public/stylesheets/desktop.css +++ b/src/public/stylesheets/desktop.css @@ -343,4 +343,16 @@ body { .note-tab-row.note-tab-row-is-sorting .note-tab:not(.note-tab-is-dragging), .note-tab-row:not(.note-tab-row-is-sorting) .note-tab.note-tab-was-just-dragged { transition: transform 120ms ease-in-out; +} + +#widgets-configuration { + margin: 0; +} + +#widgets-configuration h5 { + text-align: center; +} + +#widgets-configuration .list-group-item { + background: transparent; } \ No newline at end of file diff --git a/src/views/dialogs/options/appearance.ejs b/src/views/dialogs/options/appearance.ejs index 0be29c4bd..1f981dca9 100644 --- a/src/views/dialogs/options/appearance.ejs +++ b/src/views/dialogs/options/appearance.ejs @@ -25,7 +25,7 @@

Zooming can be controlled with CTRL-+ and CTRL-= shortcuts as well.

-

Font sizes

+

Font sizes

@@ -64,7 +64,7 @@

Note that tree and detail font sizing is relative to the main font size setting.

-

Left pane sizing

+

Left pane sizing

diff --git a/src/views/dialogs/options/note_revisions.ejs b/src/views/dialogs/options/note_revisions.ejs index 09e538a6f..376bdd085 100644 --- a/src/views/dialogs/options/note_revisions.ejs +++ b/src/views/dialogs/options/note_revisions.ejs @@ -1,5 +1,5 @@
-

Note revisions snapshot interval

+

Note revisions snapshot interval

Note revision snapshot time interval is time in seconds after which new note revision will be created for the note.

diff --git a/src/views/dialogs/options/protected_session.ejs b/src/views/dialogs/options/protected_session.ejs index ca361c9ef..da8c212ad 100644 --- a/src/views/dialogs/options/protected_session.ejs +++ b/src/views/dialogs/options/protected_session.ejs @@ -1,5 +1,5 @@
-

Protected session timeout

+

Protected session timeout

Protected session timeout is a time period after which the protected session is wiped out from browser's memory. This is measured from the last interaction with protected notes.

diff --git a/src/views/dialogs/options/sidebar.ejs b/src/views/dialogs/options/sidebar.ejs index 4fcd15dd0..eaec79449 100644 --- a/src/views/dialogs/options/sidebar.ejs +++ b/src/views/dialogs/options/sidebar.ejs @@ -1,5 +1,5 @@
-

Show sidebar in new tab

+

Show sidebar in new tab

@@ -8,7 +8,7 @@
-

Sidebar sizing

+

Sidebar sizing

@@ -37,4 +37,23 @@

Sidebar width is calculated from the percent of the detail pane, if this is smaller than minimum width, then minimum width is used. If you want to have fixed width sidebar, set minimum width to the desired width and set percent to 0.

+ +

Widgets

+ +
+
Active widgets
+ +
Inactive widgets
+ +
+
Item 1
+
Item 2
+
Item 3
+
Item 4
+
+ +
+
Item 1
+
+
\ No newline at end of file