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;
}