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;