Support more than 5 tabs. (#60)

Zilliqa · Jun 13, 2024 · e845986 · e845986
1 parent 05333d2
commit e845986
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 36 deletions.
diff --git a/src/pages/EditorPage.vue b/src/pages/EditorPage.vue
@@ -1,37 +1,42 @@
 <template>
   <q-page class="column">
-    <q-tabs
-      v-model="tab"
-      dense
-      class="bg-grey-2"
-      active-class="bg-grey-4"
-      active-color="grey-10"
-      indicator-color="orange"
-      align="left"
-      no-caps
-      switch-indicator
-      @update:model-value="updateSelectedFile"
+    <q-scroll-area
+      class="full-width"
+      style="height: 38px"
+      :thumb-style="thumbStyle"
     >
-      <q-tab
-        class="q-pa-none q-pl-sm"
-        v-for="file in filesStore.openFiles"
-        :name="file"
-        :key="file"
+      <q-tabs
+        v-model="tab"
+        dense
+        class="bg-grey-2"
+        active-class="bg-grey-4"
+        active-color="grey-10"
+        indicator-color="orange"
+        align="left"
+        no-caps
+        @update:model-value="updateSelectedFile"
       >
-        <div class="row items-center">
-          {{ file }}
-          <q-btn
-            round
-            dense
-            flat
-            icon="close"
-            size="xs"
-            class="q-ml-xs"
-            @click="closeFile(file)"
-          />
-        </div>
-      </q-tab>
-    </q-tabs>
+        <q-tab
+          class="q-pa-none q-pl-sm"
+          v-for="file in filesStore.openFiles"
+          :name="file"
+          :key="file"
+        >
+          <div class="items-center">
+            {{ file }}
+            <q-btn
+              round
+              dense
+              flat
+              icon="close"
+              size="xs"
+              class="q-ml-xs"
+              @click="closeFile(file)"
+            />
+          </div>
+        </q-tab>
+      </q-tabs>
+    </q-scroll-area>
     <q-separator color="grey-4" />
 
     <div
@@ -64,6 +69,11 @@ const closeFile = (file: string) => {
   console.log(tab.value);
 };
 
+const thumbStyle = {
+  backgroundColor: 'grey-1',
+  height: '5px',
+};
+
 onMounted(() => {
   eventBus.on('scilla-file-selected', (file: ScillaFile) => {
     tab.value = file.name;

diff --git a/src/stores/files.ts b/src/stores/files.ts
@@ -23,12 +23,6 @@ export const useFilesStore = defineStore('files', {
         return; // File already added
       }
 
-      if (this.openFiles.length === 5) {
-        throw new Error(
-          'We only support 5 open files. Close one of your files!'
-        );
-      }
-
       this.openFiles.push(name);
     },
     setSelected(name: string) {