add tab scrolling and drag&drop (marktext#953)

* add tab scrolling and drag&drop

* fix tab maximal width without side bar

* use dragula instead of vue-draggable

* Update changelog

* fix issues with maximal side bar width

If the side bar is resized more than 50vw then issues occur because the
commited width is not limited to 50vw or if the window is resized.

* reordered tabs after dropping and some improvements

Author: fxha

.github/CHANGELOG.md

@@ -5,6 +5,8 @@
 **:cactus:Feature**
 
 - The cursor jump to the end of format or to the next brackets when press `tab`(#976)
+- Tab drag & drop inside the window
+- Scrollable tabs
 
 **:butterfly:Optimization**
 

package.json

@@ -170,7 +170,9 @@
     "codemirror": "^5.46.0",
     "command-exists": "^1.2.8",
     "dayjs": "^1.8.13",
+    "dom-autoscroller": "^2.3.4",
     "dompurify": "^1.0.10",
+    "dragula": "^3.7.2",
     "electron-is-accelerator": "^0.1.2",
     "element-resize-detector": "^1.2.0",
     "element-ui": "^2.8.2",

src/renderer/app.vue

@@ -152,6 +152,9 @@
 
       // prevent Chromium's default behavior and try to open the first file
       window.addEventListener('dragover', e => {
+        // Cancel to allow tab drag&drop.
+        if (!e.dataTransfer.types.length) return
+
         e.preventDefault()
         if (e.dataTransfer.types.indexOf('Files') >= 0) {
           if (e.dataTransfer.items.length === 1 && /png|jpg|jpeg|gif/.test(e.dataTransfer.items[0].type)) {
@@ -201,6 +204,7 @@
   }
   .editor-middle {
     display: flex;
+    flex-direction: column;
     flex: 1;
     min-height: 100vh;
     position: relative;

src/renderer/assets/themes/dark.theme.css

@@ -48,9 +48,27 @@
 }
 
 .editor-tabs {
-  border-bottom: 1px solid #1d1d1d;
   box-shadow: none !important;
 }
+.editor-tabs:after {
+  position: absolute;
+  content: '';
+  border-bottom: 1px solid #1d1d1d;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+.editor-tabs ul.tabs-container:after {
+  position: absolute;
+  content: '';
+  border-bottom: 1px solid #1d1d1d;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+}
+
 .tabs-container > li,
 .tabs-container > li.active {
   background: var(--editorBgColor) !important;

src/renderer/assets/themes/graphite.theme.css

@@ -27,15 +27,32 @@
   --editorAreaWidth: 700px;
 }
 
-.title-bar.tabs-visible {
-  background: #f3f3f3 !important;
-}
-
 .editor-tabs {
   background: #f3f3f3 !important;
-  border-bottom: 1px solid #dddddd !important;
   box-shadow: none !important;
 }
+.editor-tabs:after {
+  position: absolute;
+  content: '';
+  border-bottom: 1px solid #dddddd;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+.editor-tabs ul.tabs-container:after {
+  position: absolute;
+  content: '';
+  border-bottom: 1px solid #dddddd;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+}
+.title-bar-editor-bg.tabs-visible {
+  background: #f3f3f3 !important;
+}
+
 .tabs-container > li {
   background: none !important;
 }
@@ -45,7 +62,7 @@
   border-bottom: none;
   background: var(--floatBgColor) !important;
 }
-.tabs-container > li.active:not(:last-child):after {
+.tabs-container > li.active:after {
   top: 0 !important;
   bottom: auto !important;
   background: var(--themeColor) !important;

src/renderer/assets/themes/one-dark.theme.css

@@ -110,9 +110,27 @@
 }
 
 .editor-tabs {
-  border-bottom: 1px solid #181a1f;
   box-shadow: none !important;
 }
+.editor-tabs:after {
+  position: absolute;
+  content: '';
+  border-bottom: 1px solid #181a1f;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+.editor-tabs ul.tabs-container:after {
+  position: absolute;
+  content: '';
+  border-bottom: 1px solid #181a1f;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2;
+}
+
 .tabs-container > li,
 .tabs-container > li.active {
   background: var(--editorBgColor) !important;
@@ -121,7 +139,7 @@
   border: 1px solid #181a1f;
   border-bottom: none;
 }
-.tabs-container > li.active:not(:last-child):after {
+.tabs-container > li.active:after {
   top: 0 !important;
   right: auto !important;
   width: 2px !important;

src/renderer/assets/themes/ulysses.theme.css

@@ -31,7 +31,7 @@
   box-shadow: none !important;
 }
 
-.tabs-container > li:not(:last-child) {
+.tabs-container > li {
   border-right: 1px solid #e5e5e5 !important;
   background: var(--editorBgColor) !important;
 }

src/renderer/components/editorWithTabs/index.vue

@@ -68,13 +68,12 @@
 
 <style scoped>
   .editor-with-tabs {
-    width: 100%;
+    position: relative;
     height: 100%;
-    padding-top: var(--titleBarHeight);
     flex: 1;
     display: flex;
     flex-direction: column;
-    
+
     overflow: hidden;
     background: var(--editorBgColor);
     & > .container {