From aef0e552a09e70ed2fe99a824a29899779a05d14 Mon Sep 17 00:00:00 2001 From: zadam Date: Tue, 7 May 2019 21:04:07 +0200 Subject: [PATCH] ctrl+tab and ctrl+shift+tab can be used to switch tabs --- libraries/chrome-tabs/chrome-tabs.css | 38 +++++-------- libraries/chrome-tabs/chrome-tabs.js | 57 ++++++++++++++----- .../javascripts/services/note_detail.js | 17 ++++++ src/public/stylesheets/style.css | 4 ++ 4 files changed, 78 insertions(+), 38 deletions(-) diff --git a/libraries/chrome-tabs/chrome-tabs.css b/libraries/chrome-tabs/chrome-tabs.css index b7dd59644..9a2b7380d 100644 --- a/libraries/chrome-tabs/chrome-tabs.css +++ b/libraries/chrome-tabs/chrome-tabs.css @@ -88,34 +88,24 @@ .chrome-tabs .chrome-tab .chrome-tab-close { flex-grow: 0; flex-shrink: 0; - position: relative; - top: 3px; - width: 16px; - height: 16px; border-radius: 50%; - background-image: url("data:image/svg+xml;utf8,"); - background-position: center center; - background-repeat: no-repeat; - background-size: 8px 8px; + z-index: 100; + width: 24px; + height: 24px; + text-align: center; } -@media (hover: hover) { - .chrome-tabs .chrome-tab .chrome-tab-close:hover { - background-color: var(--more-accented-background-color); - } - .chrome-tabs .chrome-tab .chrome-tab-close:hover:active { - background-color: var(--more-accented-background-color); - } + +.chrome-tabs .chrome-tab .chrome-tab-close span { + font-size: 24px; + position: relative; + top: -6px; } -@media not all and (hover: hover) { - .chrome-tabs .chrome-tab .chrome-tab-close:active { - background-color: #dadce0; - } -} -@media (hover: hover) { - .chrome-tabs .chrome-tab:not([active]) .chrome-tab-close:not(:hover):not(:active) { - opacity: 0.8; - } + +.chrome-tabs .chrome-tab .chrome-tab-close:hover { + background-color: var(--hover-item-background-color); + color: var(--hover-item-text-color); } + .chrome-tabs .chrome-tab[is-smaller] .chrome-tab-close { margin-left: auto; } diff --git a/libraries/chrome-tabs/chrome-tabs.js b/libraries/chrome-tabs/chrome-tabs.js index 789d76e13..011967e6a 100644 --- a/libraries/chrome-tabs/chrome-tabs.js +++ b/libraries/chrome-tabs/chrome-tabs.js @@ -8,14 +8,11 @@ !function(i,e){"function"==typeof define&&define.amd?define("jquery-bridget/jquery-bridget",["jquery"],function(t){return e(i,t)}):"object"==typeof module&&module.exports?module.exports=e(i,require("jquery")):i.jQueryBridget=e(i,i.jQuery)}(window,function(t,i){"use strict";var c=Array.prototype.slice,e=t.console,p=void 0===e?function(){}:function(t){e.error(t)};function n(d,o,u){(u=u||i||t.jQuery)&&(o.prototype.option||(o.prototype.option=function(t){u.isPlainObject(t)&&(this.options=u.extend(!0,this.options,t))}),u.fn[d]=function(t){if("string"==typeof t){var i=c.call(arguments,1);return s=i,a="$()."+d+'("'+(r=t)+'")',(e=this).each(function(t,i){var e=u.data(i,d);if(e){var n=e[r];if(n&&"_"!=r.charAt(0)){var o=n.apply(e,s);h=void 0===h?o:h}else p(a+" is not a valid method")}else p(d+" not initialized. Cannot call methods, i.e. "+a)}),void 0!==h?h:e}var e,r,s,h,a,n;return n=t,this.each(function(t,i){var e=u.data(i,d);e?(e.option(n),e._init()):(e=new o(i,n),u.data(i,d,e))}),this},r(u))}function r(t){!t||t&&t.bridget||(t.bridget=n)}return r(i||t.jQuery),n}),function(t,i){"use strict";"function"==typeof define&&define.amd?define("get-size/get-size",[],function(){return i()}):"object"==typeof module&&module.exports?module.exports=i():t.getSize=i()}(window,function(){"use strict";function m(t){var i=parseFloat(t);return-1==t.indexOf("%")&&!isNaN(i)&&i}var e="undefined"==typeof console?function(){}:function(t){console.error(t)},y=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"],b=y.length;function E(t){var i=getComputedStyle(t);return i||e("Style returned "+i+". Are you running this code in a hidden iframe on Firefox? See http://bit.ly/getsizebug1"),i}var _,x=!1;function P(t){if(function(){if(!x){x=!0;var t=document.createElement("div");t.style.width="200px",t.style.padding="1px 2px 3px 4px",t.style.borderStyle="solid",t.style.borderWidth="1px 2px 3px 4px",t.style.boxSizing="border-box";var i=document.body||document.documentElement;i.appendChild(t);var e=E(t);P.isBoxSizeOuter=_=200==m(e.width),i.removeChild(t)}}(),"string"==typeof t&&(t=document.querySelector(t)),t&&"object"==typeof t&&t.nodeType){var i=E(t);if("none"==i.display)return function(){for(var t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},i=0;i
-
+
×
` @@ -93,10 +90,6 @@ this.layoutTabs() }) - this.el.addEventListener('dblclick', event => { - if ([this.el, this.tabContentEl].includes(event.target)) this.addTab() - }) - this.tabEls.forEach((tabEl) => this.setTabCloseEventListener(tabEl)) } @@ -217,6 +210,46 @@ return this.el.querySelector('.chrome-tab[active]') } + get previousTabEl() { + const tabEls = this.tabEls; + + if (tabEls.length <= 1) { + return null; + } + + let prev = tabEls[tabEls.length - 1]; + + for (const tabEl of tabEls) { + if (tabEl.hasAttribute("active")) { + return prev; + } + + prev = tabEl; + } + + return null; + } + + get nextTabEl() { + const tabEls = this.tabEls; + + if (tabEls.length <= 1) { + return null; + } + + let prev = tabEls[tabEls.length - 1]; + + for (const tabEl of tabEls) { + if (prev.hasAttribute("active")) { + return tabEl; + } + + prev = tabEl; + } + + return null; + } + hasActiveTab() { return !!this.activeTabEl } @@ -348,9 +381,5 @@ } } - if (isNodeContext) { - module.exports = ChromeTabs - } else { - window.ChromeTabs = ChromeTabs - } + window.ChromeTabs = ChromeTabs })() diff --git a/src/public/javascripts/services/note_detail.js b/src/public/javascripts/services/note_detail.js index f01454a08..f1f1a31a2 100644 --- a/src/public/javascripts/services/note_detail.js +++ b/src/public/javascripts/services/note_detail.js @@ -47,6 +47,7 @@ async function reloadAllTabs() { const note = await loadNote(noteContext.note.noteId); await loadNoteDetailToContext(noteContext, note); + } } @@ -271,6 +272,22 @@ if (utils.isElectron()) { chromeTabs.removeTab(chromeTabs.activeTabEl); }); + + utils.bindShortcut('ctrl+tab', () => { + const nextTab = chromeTabs.nextTabEl; + + if (nextTab) { + chromeTabs.setCurrentTab(nextTab); + } + }); + + utils.bindShortcut('ctrl+shift+tab', () => { + const prevTab = chromeTabs.previousTabEl; + + if (prevTab) { + chromeTabs.setCurrentTab(prevTab); + } + }); } // this makes sure that when user e.g. reloads the page or navigates away from the page, the note's content is saved diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 49fc9e175..c3e128014 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -39,6 +39,10 @@ button.close { color: var(--main-text-color); } +button.close:hover { + color: var(--hover-item-text-color); +} + .modal-content { background-color: var(--modal-background-color) !important; }