From b9edd0ecc782e52dfce9c471ba7b14a3dab7648f Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Sun, 12 May 2019 10:11:41 +0200
Subject: [PATCH] tabs simplification

---
 src/public/javascripts/services/tab_row.js | 28 ++++++++--------------
 src/public/stylesheets/desktop.css         |  4 ++--
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/src/public/javascripts/services/tab_row.js b/src/public/javascripts/services/tab_row.js
index d89fc937d..1de08fa07 100644
--- a/src/public/javascripts/services/tab_row.js
+++ b/src/public/javascripts/services/tab_row.js
@@ -9,7 +9,6 @@
 
 const Draggabilly = window.Draggabilly;
 
-const TAB_CONTENT_MARGIN = 0;
 const TAB_CONTENT_OVERLAP_DISTANCE = 1;
 
 const TAB_CONTENT_MIN_WIDTH = 24;
@@ -40,8 +39,7 @@ const tabTemplate = `
     <div class="note-tab-drag-handle"></div>
     <div class="note-tab-close"><span>×</span></div>
   </div>
-</div>
-`;
+</div>`;
 
 const defaultTapProperties = {
     title: 'New tab'
@@ -62,7 +60,6 @@ class TabRow {
         this.el.setAttribute('data-note-tab-row-instance-id', this.instanceId);
         instanceId += 1;
 
-        this.setupCustomProperties();
         this.setupStyleEl();
         this.setupEvents();
         this.layoutTabs();
@@ -81,10 +78,6 @@ class TabRow {
         }
     }
 
-    setupCustomProperties() {
-        this.el.style.setProperty('--tab-content-margin', `${ TAB_CONTENT_MARGIN }px`);
-    }
-
     setupStyleEl() {
         this.styleEl = document.createElement('style');
         this.el.appendChild(this.styleEl);
@@ -115,10 +108,10 @@ class TabRow {
         const numberOfTabs = this.tabEls.length;
         const tabsContentWidth = this.tabContentEl.clientWidth;
         const tabsCumulativeOverlappedWidth = (numberOfTabs - 1) * TAB_CONTENT_OVERLAP_DISTANCE;
-        const targetWidth = (tabsContentWidth - (2 * TAB_CONTENT_MARGIN) + tabsCumulativeOverlappedWidth) / numberOfTabs;
+        const targetWidth = (tabsContentWidth + tabsCumulativeOverlappedWidth) / numberOfTabs;
         const clampedTargetWidth = Math.max(TAB_CONTENT_MIN_WIDTH, Math.min(TAB_CONTENT_MAX_WIDTH, targetWidth));
         const flooredClampedTargetWidth = Math.floor(clampedTargetWidth);
-        const totalTabsWidthUsingTarget = (flooredClampedTargetWidth * numberOfTabs) + (2 * TAB_CONTENT_MARGIN) - tabsCumulativeOverlappedWidth;
+        const totalTabsWidthUsingTarget = (flooredClampedTargetWidth * numberOfTabs) - tabsCumulativeOverlappedWidth;
         const totalExtraWidthDueToFlooring = tabsContentWidth - totalTabsWidthUsingTarget;
 
         const widths = [];
@@ -129,14 +122,14 @@ class TabRow {
             if (extraWidthRemaining > 0) extraWidthRemaining -= 1;
         }
 
-        return widths
+        return widths;
     }
 
     get tabContentPositions() {
         const positions = [];
         const tabContentWidths = this.tabContentWidths;
 
-        let position = TAB_CONTENT_MARGIN;
+        let position = 0;
         tabContentWidths.forEach((width, i) => {
             const offset = i * TAB_CONTENT_OVERLAP_DISTANCE;
             positions.push(position - offset);
@@ -150,7 +143,7 @@ class TabRow {
         const positions = [];
 
         this.tabContentPositions.forEach((contentPosition) => {
-            positions.push(contentPosition - TAB_CONTENT_MARGIN);
+            positions.push(contentPosition);
         });
 
         return positions;
@@ -160,17 +153,16 @@ class TabRow {
         const tabContentWidths = this.tabContentWidths;
 
         this.tabEls.forEach((tabEl, i) => {
-            const contentWidth = tabContentWidths[i];
-            const width = contentWidth + (2 * TAB_CONTENT_MARGIN);
+            const width = tabContentWidths[i];
 
             tabEl.style.width = width + 'px';
             tabEl.removeAttribute('is-small');
             tabEl.removeAttribute('is-smaller');
             tabEl.removeAttribute('is-mini');
 
-            if (contentWidth < TAB_SIZE_SMALL) tabEl.setAttribute('is-small', '');
-            if (contentWidth < TAB_SIZE_SMALLER) tabEl.setAttribute('is-smaller', '');
-            if (contentWidth < TAB_SIZE_MINI) tabEl.setAttribute('is-mini', '');
+            if (width < TAB_SIZE_SMALL) tabEl.setAttribute('is-small', '');
+            if (width < TAB_SIZE_SMALLER) tabEl.setAttribute('is-smaller', '');
+            if (width < TAB_SIZE_MINI) tabEl.setAttribute('is-mini', '');
         });
 
         let styleHTML = '';
diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css
index 5a181d095..69e7c44ba 100644
--- a/src/public/stylesheets/desktop.css
+++ b/src/public/stylesheets/desktop.css
@@ -218,8 +218,8 @@ li.dropdown-submenu:hover > ul.dropdown-menu {
     display: flex;
     top: 0;
     bottom: 0;
-    left: var(--tab-content-margin);
-    right: var(--tab-content-margin);
+    left: 0;
+    right: 0;
     padding: 5px 8px;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;