From 7c8e7a3f4b548a962ee8dbdb8d0e4aef35c27067 Mon Sep 17 00:00:00 2001 From: zadam Date: Mon, 23 Dec 2019 11:52:45 +0100 Subject: [PATCH] frameless design with tabs on top, split for left panel --- electron.js | 1 + libraries/split.min.js | 3 + .../javascripts/services/entrypoints.js | 5 ++ src/public/javascripts/services/tab_row.js | 9 +- src/public/stylesheets/desktop.css | 26 ++++++ src/views/desktop.ejs | 84 ++++++++++--------- src/views/tabs.ejs | 4 - 7 files changed, 87 insertions(+), 45 deletions(-) create mode 100644 libraries/split.min.js diff --git a/electron.js b/electron.js index 7553b2736..235b2c8c2 100644 --- a/electron.js +++ b/electron.js @@ -52,6 +52,7 @@ async function createMainWindow() { webPreferences: { nodeIntegration: true }, + frame: false, icon: path.join(__dirname, 'images/app-icons/png/256x256' + (env.isDev() ? '-dev' : '') + '.png') }); diff --git a/libraries/split.min.js b/libraries/split.min.js new file mode 100644 index 000000000..6739874b3 --- /dev/null +++ b/libraries/split.min.js @@ -0,0 +1,3 @@ +/*! Split.js - v1.5.11 */ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.Split=t()}(this,function(){"use strict";var L=window,T=L.document,N="addEventListener",R="removeEventListener",q="getBoundingClientRect",H="horizontal",I=function(){return!1},W=L.attachEvent&&!L[N],i=["","-webkit-","-moz-","-o-"].filter(function(e){var t=T.createElement("div");return t.style.cssText="width:"+e+"calc(9px)",!!t.style.length}).shift()+"calc",s=function(e){return"string"==typeof e||e instanceof String},X=function(e){if(s(e)){var t=T.querySelector(e);if(!t)throw new Error("Selector "+e+" did not match a DOM element");return t}return e},Y=function(e,t,n){var r=e[t];return void 0!==r?r:n},G=function(e,t,n,r){if(t){if("end"===r)return 0;if("center"===r)return e/2}else if(n){if("start"===r)return 0;if("center"===r)return e/2}return e},J=function(e,t){var n=T.createElement("div");return n.className="gutter gutter-"+t,n},K=function(e,t,n){var r={};return s(t)?r[e]=t:r[e]=W?t+"%":i+"("+t+"% - "+n+"px)",r},P=function(e,t){var n;return(n={})[e]=t+"px",n};return function(e,i){void 0===i&&(i={});var u,t,s,o,r,a,l=e;Array.from&&(l=Array.from(l));var c=X(l[0]).parentNode,n=getComputedStyle?getComputedStyle(c):null,f=n?n.flexDirection:null,m=Y(i,"sizes")||l.map(function(){return 100/l.length}),h=Y(i,"minSize",100),d=Array.isArray(h)?h:l.map(function(){return h}),g=Y(i,"expandToMin",!1),v=Y(i,"gutterSize",10),p=Y(i,"gutterAlign","center"),y=Y(i,"snapOffset",30),z=Y(i,"dragInterval",1),S=Y(i,"direction",H),b=Y(i,"cursor",S===H?"col-resize":"row-resize"),_=Y(i,"gutter",J),E=Y(i,"elementStyle",K),w=Y(i,"gutterStyle",P);function k(t,e,n,r){var i=E(u,e,n,r);Object.keys(i).forEach(function(e){t.style[e]=i[e]})}function x(){return a.map(function(e){return e.size})}function M(e){return"touches"in e?e.touches[0][t]:e[t]}function U(e){var t=a[this.a],n=a[this.b],r=t.size+n.size;t.size=e/this.size*r,n.size=r-e/this.size*r,k(t.element,t.size,this._b,t.i),k(n.element,n.size,this._c,n.i)}function O(){var e=a[this.a].element,t=a[this.b].element,n=e[q](),r=t[q]();this.size=n[u]+r[u]+this._b+this._c,this.start=n[s],this.end=n[o]}function C(s){var o=function(e){if(!getComputedStyle)return null;var t=getComputedStyle(e);if(!t)return null;var n=e[r];return 0===n?null:n-=S===H?parseFloat(t.paddingLeft)+parseFloat(t.paddingRight):parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)}(c);if(null===o)return s;if(d.reduce(function(e,t){return e+t},0)>o)return s;var a=0,u=[],e=s.map(function(e,t){var n=o*e/100,r=G(v,0===t,t===s.length-1,p),i=d[t]+r;return n=this.size-(r.minSize+y+this._c)&&(t=this.size-(r.minSize+this._c)),U.call(this,t),Y(i,"onDrag",I)())}.bind(t),t.stop=function(){var e=this,t=a[e.a].element,n=a[e.b].element;e.dragging&&Y(i,"onDragEnd",I)(x()),e.dragging=!1,L[R]("mouseup",e.stop),L[R]("touchend",e.stop),L[R]("touchcancel",e.stop),L[R]("mousemove",e.move),L[R]("touchmove",e.move),e.stop=null,e.move=null,t[R]("selectstart",I),t[R]("dragstart",I),n[R]("selectstart",I),n[R]("dragstart",I),t.style.userSelect="",t.style.webkitUserSelect="",t.style.MozUserSelect="",t.style.pointerEvents="",n.style.userSelect="",n.style.webkitUserSelect="",n.style.MozUserSelect="",n.style.pointerEvents="",e.gutter.style.cursor="",e.parent.style.cursor="",T.body.style.cursor=""}.bind(t),L[N]("mouseup",t.stop),L[N]("touchend",t.stop),L[N]("touchcancel",t.stop),L[N]("mousemove",t.move),L[N]("touchmove",t.move),n[N]("selectstart",I),n[N]("dragstart",I),r[N]("selectstart",I),r[N]("dragstart",I),n.style.userSelect="none",n.style.webkitUserSelect="none",n.style.MozUserSelect="none",n.style.pointerEvents="none",r.style.userSelect="none",r.style.webkitUserSelect="none",r.style.MozUserSelect="none",r.style.pointerEvents="none",t.gutter.style.cursor=b,t.parent.style.cursor=b,T.body.style.cursor=b,O.call(t),t.dragOffset=M(e)-t.end}}S===H?(u="width",t="clientX",s="left",o="right",r="clientWidth"):"vertical"===S&&(u="height",t="clientY",s="top",o="bottom",r="clientHeight"),m=C(m);var A=[];function j(e){var t=e.i===A.length,n=t?A[e.i-1]:A[e.i];O.call(n);var r=t?n.size-e.minSize-n._c:e.minSize+n._b;U.call(n,r)}function F(e){var s=C(e);s.forEach(function(e,t){if(0`; const newTabButtonTemplate = `
+
`; -const fillerTemplate = `
`; +const fillerTemplate = `
+
+
`; class TabRow { constructor(el) { @@ -102,7 +105,7 @@ class TabRow { get tabContentWidths() { const numberOfTabs = this.tabEls.length; - const tabsContentWidth = this.tabContentEl.clientWidth - NEW_TAB_WIDTH; + const tabsContentWidth = this.tabContentEl.clientWidth - NEW_TAB_WIDTH - MIN_FILLER_WIDTH; const targetWidth = tabsContentWidth / numberOfTabs; const clampedTargetWidth = Math.max(TAB_CONTENT_MIN_WIDTH, Math.min(TAB_CONTENT_MAX_WIDTH, targetWidth)); const flooredClampedTargetWidth = Math.floor(clampedTargetWidth); @@ -119,7 +122,7 @@ class TabRow { } if (this.fillerEl) { - this.fillerEl.style.width = extraWidthRemaining + "px"; + this.fillerEl.style.width = (extraWidthRemaining + MIN_FILLER_WIDTH) + "px"; } return widths; diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css index 88036196e..ed7eb2025 100644 --- a/src/public/stylesheets/desktop.css +++ b/src/public/stylesheets/desktop.css @@ -14,13 +14,31 @@ body { display: none !important; } +.gutter { + background-color: var(--accented-background-color); +} + +.gutter:hover { + background-color: var(--main-border-color); +} + +.gutter.gutter-horizontal { + cursor: col-resize; +} + +.gutter.gutter-vertical { + cursor: row-resize; +} + #center-pane { display: flex; + flex-direction: column; } #note-tab-container { min-height: 0; padding-left: 10px; + width: 100%; } #search-box { @@ -195,6 +213,8 @@ body { box-sizing: border-box; position: relative; height: 33px; + min-height: 33px; + width: 100%; background: var(--main-background-color); border-radius: 5px 5px 0 0; overflow: hidden; @@ -240,8 +260,14 @@ body { } .tab-row-filler { + -webkit-app-region: drag; position: absolute; left: 0; + height: 33px; +} + +.tab-row-filler .tab-row-border { + position: relative; background: linear-gradient(to right, var(--main-border-color), transparent); height: 1px; margin-top: 32px; diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs index e31287082..18f76509f 100644 --- a/src/views/desktop.ejs +++ b/src/views/desktop.ejs @@ -11,44 +11,9 @@