diff --git a/src/public/javascripts/services/tab_row.js b/src/public/javascripts/services/tab_row.js index 1d5b4048b..870da284a 100644 --- a/src/public/javascripts/services/tab_row.js +++ b/src/public/javascripts/services/tab_row.js @@ -29,6 +29,7 @@ const tabTemplate = ` `; const newTabButtonTemplate = `
+
`; +const fillerTemplate = `
`; class TabRow { constructor(el) { @@ -40,9 +41,10 @@ class TabRow { this.setupStyleEl(); this.setupEvents(); - this.layoutTabs(); this.setupDraggabilly(); this.setupNewButton(); + this.setupFiller(); + this.layoutTabs(); this.setVisibility(); } @@ -109,12 +111,17 @@ class TabRow { const widths = []; let extraWidthRemaining = totalExtraWidthDueToFlooring; + for (let i = 0; i < numberOfTabs; i += 1) { const extraWidth = flooredClampedTargetWidth < TAB_CONTENT_MAX_WIDTH && extraWidthRemaining > 0 ? 1 : 0; widths.push(flooredClampedTargetWidth + extraWidth); if (extraWidthRemaining > 0) extraWidthRemaining -= 1; } + if (this.fillerEl) { + this.fillerEl.style.width = extraWidthRemaining + "px"; + } + return widths; } @@ -129,8 +136,9 @@ class TabRow { }); const newTabPosition = position; + const fillerPosition = position + 32; - return {tabPositions, newTabPosition}; + return {tabPositions, newTabPosition, fillerPosition}; } layoutTabs() { @@ -151,13 +159,14 @@ class TabRow { let styleHTML = ''; - const {tabPositions, newTabPosition} = this.getTabPositions(); + const {tabPositions, newTabPosition, fillerPosition} = this.getTabPositions(); tabPositions.forEach((position, i) => { styleHTML += `.note-tab:nth-child(${ i + 1 }) { transform: translate3d(${ position }px, 0, 0)} `; }); styleHTML += `.note-new-tab { transform: translate3d(${ newTabPosition }px, 0, 0) } `; + styleHTML += `.tab-row-filler { transform: translate3d(${ fillerPosition }px, 0, 0) } `; this.styleEl.innerHTML = styleHTML; } @@ -387,11 +396,18 @@ class TabRow { this.newTabEl = div.firstElementChild; this.tabContentEl.appendChild(this.newTabEl); - this.layoutTabs(); this.newTabEl.addEventListener('click', _ => this.emit('newTab')); } + setupFiller() { + const div = document.createElement('div'); + div.innerHTML = fillerTemplate; + this.fillerEl = div.firstElementChild; + + this.tabContentEl.appendChild(this.fillerEl); + } + closest(value, array) { let closest = Infinity; let closestIndex = -1; diff --git a/src/public/javascripts/services/tree.js b/src/public/javascripts/services/tree.js index 58aface6e..d56f79108 100644 --- a/src/public/javascripts/services/tree.js +++ b/src/public/javascripts/services/tree.js @@ -368,7 +368,7 @@ async function treeInitialized() { const notePath = location.hash.substr(1); const noteId = treeUtils.getNoteIdFromNotePath(notePath); - if (await treeCache.noteExists(noteId)) { + if (noteId && await treeCache.noteExists(noteId)) { for (const tab of openTabs) { tab.active = false; } diff --git a/src/public/javascripts/services/tree_cache.js b/src/public/javascripts/services/tree_cache.js index 02bfcbfe4..b72617eea 100644 --- a/src/public/javascripts/services/tree_cache.js +++ b/src/public/javascripts/services/tree_cache.js @@ -144,7 +144,7 @@ class TreeCache { else { return this.notes[noteId]; } - }).filter(note => note !== null); + }).filter(note => !!note); } /** @return {Promise} */ diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css index 5e52a1cb3..1a041df1b 100644 --- a/src/public/stylesheets/desktop.css +++ b/src/public/stylesheets/desktop.css @@ -68,6 +68,11 @@ body { margin-bottom: 2px; margin-top: 2px; margin-right: 8px; + border-color: transparent !important; +} + +#header button:hover { + border-color: var(--button-border-color) !important; } #history-navigation { @@ -215,7 +220,7 @@ body { .note-new-tab { position: absolute; left: 0; - height: 32px; + height: 33px; width: 32px; border: 0; margin: 0; @@ -223,6 +228,7 @@ body { text-align: center; font-size: 24px; cursor: pointer; + border-bottom: 1px solid var(--button-border-color); } .note-new-tab:hover { @@ -230,6 +236,14 @@ body { border-radius: 5px; } +.tab-row-filler { + position: absolute; + left: 0; + background: linear-gradient(to right, var(--button-border-color), transparent); + height: 1px; + margin-top: 32px; +} + .note-tab-row .note-tab[active] { z-index: 5; } @@ -244,6 +258,7 @@ body { top: 10px; animation: note-tab-was-just-added 120ms forwards ease-in-out; } + .note-tab-row .note-tab .note-tab-wrapper { position: absolute; display: flex; @@ -271,6 +286,7 @@ body { padding-left: 2px; padding-right: 2px; } + .note-tab-row .note-tab .note-tab-title { flex: 1; vertical-align: top; @@ -278,12 +294,15 @@ body { white-space: nowrap; color: var(--muted-text-color); } + .note-tab-row .note-tab[is-small] .note-tab-title { margin-left: 0; } + .note-tab-row .note-tab[active] .note-tab-title { color: var(--main-text-color); } + .note-tab-row .note-tab .note-tab-drag-handle { position: absolute; top: 0; @@ -293,6 +312,7 @@ body { border-top-left-radius: 8px; border-top-right-radius: 8px; } + .note-tab-row .note-tab .note-tab-close { flex-grow: 0; flex-shrink: 0;