diff --git a/src/public/javascripts/services/tab_context.js b/src/public/javascripts/services/tab_context.js
index d27ccde6c..c8243246b 100644
--- a/src/public/javascripts/services/tab_context.js
+++ b/src/public/javascripts/services/tab_context.js
@@ -42,8 +42,6 @@ class TabContext {
this.tab = this.tabRow.addTab({
title: '', // will be set later
id: this.tabId
- }, {
- background: true
});
this.$tabContent = $(".note-tab-content-template").clone();
diff --git a/src/public/javascripts/services/tab_row.js b/src/public/javascripts/services/tab_row.js
index 9d11cc20d..3bd6426d8 100644
--- a/src/public/javascripts/services/tab_row.js
+++ b/src/public/javascripts/services/tab_row.js
@@ -11,25 +11,12 @@ const Draggabilly = window.Draggabilly;
const TAB_CONTENT_MIN_WIDTH = 24;
const TAB_CONTENT_MAX_WIDTH = 240;
+const NEW_TAB_WIDTH = 32;
const TAB_SIZE_SMALL = 84;
const TAB_SIZE_SMALLER = 60;
const TAB_SIZE_MINI = 48;
-const closest = (value, array) => {
- let closest = Infinity;
- let closestIndex = -1;
-
- array.forEach((v, i) => {
- if (Math.abs(value - v) < closest) {
- closest = Math.abs(value - v);
- closestIndex = i
- }
- });
-
- return closestIndex;
-};
-
const tabTemplate = `
@@ -39,6 +26,8 @@ const tabTemplate = `
`;
+const newTabButtonTemplate = `+
`;
+
const defaultTapProperties = {
title: 'New tab'
};
@@ -62,6 +51,7 @@ class TabRow {
this.setupEvents();
this.layoutTabs();
this.setupDraggabilly();
+ this.setupNewButton();
this.setVisibility();
}
@@ -104,7 +94,7 @@ class TabRow {
get tabContentWidths() {
const numberOfTabs = this.tabEls.length;
- const tabsContentWidth = this.tabContentEl.clientWidth;
+ const tabsContentWidth = this.tabContentEl.clientWidth - NEW_TAB_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);
@@ -122,27 +112,19 @@ class TabRow {
return widths;
}
- get tabContentPositions() {
- const positions = [];
+ getTabPositions() {
+ const tabPositions = [];
const tabContentWidths = this.tabContentWidths;
let position = 0;
tabContentWidths.forEach(width => {
- positions.push(position);
+ tabPositions.push(position);
position += width;
});
- return positions;
- }
+ const newTabPosition = position;
- get tabPositions() {
- const positions = [];
-
- this.tabContentPositions.forEach((contentPosition) => {
- positions.push(contentPosition);
- });
-
- return positions;
+ return {tabPositions, newTabPosition};
}
layoutTabs() {
@@ -162,7 +144,10 @@ class TabRow {
});
let styleHTML = '';
- this.tabPositions.forEach((position, i) => {
+
+ const {tabPositions, newTabPosition} = this.getTabPositions();
+
+ tabPositions.forEach((position, i) => {
styleHTML += `
.note-tab-row[data-note-tab-row-instance-id="${ this.instanceId }"] .note-tab:nth-child(${ i + 1 }) {
transform: translate3d(${ position }px, 0, 0)
@@ -170,25 +155,24 @@ class TabRow {
`
});
+ styleHTML += `.note-new-tab { transform: translate3d(${ newTabPosition }px, 0, 0) }`;
+
this.styleEl.innerHTML = styleHTML;
}
- addTab(tabProperties, { animate = true, background = false } = {}) {
+ addTab(tabProperties) {
const div = document.createElement('div');
div.innerHTML = tabTemplate;
const tabEl = div.firstElementChild;
- if (animate) {
- tabEl.classList.add('note-tab-was-just-added');
- setTimeout(() => tabEl.classList.remove('note-tab-was-just-added'), 500);
- }
+ tabEl.classList.add('note-tab-was-just-added');
+ setTimeout(() => tabEl.classList.remove('note-tab-was-just-added'), 500);
tabProperties = Object.assign({}, defaultTapProperties, tabProperties);
this.tabContentEl.appendChild(tabEl);
this.setVisibility();
this.setTabCloseEventListener(tabEl);
this.updateTab(tabEl, tabProperties);
- if (!background) this.setCurrentTab(tabEl);
this.cleanUpPreviouslyDraggedTabs();
this.layoutTabs();
this.setupDraggabilly();
@@ -294,7 +278,7 @@ class TabRow {
setupDraggabilly() {
const tabEls = this.tabEls;
- const tabPositions = this.tabPositions;
+ const {tabPositions} = this.getTabPositions();
if (this.isDragging) {
this.isDragging = false;
@@ -363,7 +347,7 @@ class TabRow {
const currentIndex = tabEls.indexOf(tabEl);
const currentTabPositionX = originalTabPositionX + moveVector.x;
- const destinationIndexTarget = closest(currentTabPositionX, tabPositions);
+ const destinationIndexTarget = this.closest(currentTabPositionX, tabPositions);
const destinationIndex = Math.max(0, Math.min(tabEls.length, destinationIndexTarget));
if (currentIndex !== destinationIndex) {
@@ -382,6 +366,29 @@ class TabRow {
await this.emit('tabReorder', { tabEl, originIndex, destinationIndex });
this.layoutTabs();
}
+
+ setupNewButton() {
+ const div = document.createElement('div');
+ div.innerHTML = newTabButtonTemplate;
+ this.newTabEl = div.firstElementChild;
+
+ this.tabContentEl.appendChild(this.newTabEl);
+ this.layoutTabs();
+ }
+
+ closest(value, array) {
+ let closest = Infinity;
+ let closestIndex = -1;
+
+ array.forEach((v, i) => {
+ if (Math.abs(value - v) < closest) {
+ closest = Math.abs(value - v);
+ closestIndex = i
+ }
+ });
+
+ return closestIndex;
+ };
}
const noteTabRowEl = document.querySelector('.note-tab-row');
diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css
index 69e7c44ba..b928e15bf 100644
--- a/src/public/stylesheets/desktop.css
+++ b/src/public/stylesheets/desktop.css
@@ -199,6 +199,24 @@ li.dropdown-submenu:hover > ul.dropdown-menu {
pointer-events: none;
}
+.note-new-tab {
+ position: absolute;
+ left: 0;
+ height: 32px;
+ width: 32px;
+ border: 0;
+ margin: 0;
+ z-index: 1;
+ text-align: center;
+ font-size: 24px;
+ cursor: pointer;
+}
+
+.note-new-tab:hover {
+ background-color: var(--accented-background-color);
+ border-radius: 5px;
+}
+
.note-tab-row .note-tab[active] {
z-index: 5;
}