Add a placeholder for adding new cells (#131)

* Add a placeholder for adding new cells * Run linters --------- Co-authored-by: Lint Bot <[email protected]>
kuzudb · Apr 1, 2024 · 0c1b603 · 0c1b603
1 parent 50d6874
commit 0c1b603
Showing 1 changed file with 23 additions and 0 deletions.
diff --git a/src/components/ShellView/ShellMainView.vue b/src/components/ShellView/ShellMainView.vue
@@ -3,6 +3,14 @@
     class="shell-main-view__wrapper"
     :style="{ height: `${containerHeight}px` }"
   >
+    <div class="shell-main-view__placeholder">
+      <a
+        href="#"
+        @click="addCell"
+      >
+        <i class="fa-lg fa-solid fa-plus" />
+        Click here to add a new cell</a>
+    </div>
     <ShellCell
       v-for="(cell, index) in shellCell"
       v-show="index === maximizedCellIndex || maximizedCellIndex < 0"
@@ -174,5 +182,20 @@ export default {
 .shell-main-view__wrapper {
   width: 100%;
   overflow-y: scroll;
+  .shell-main-view__placeholder {
+    margin: 20px;
+    margin-top: 20px;
+    padding: 8px;
+    border: 2px solid $gray-300;
+    a {
+      font-style: italic;
+      font-weight: 400;
+      color: $body-tertiary-color;
+      text-decoration: none;
+      i {
+        margin-right: 24px;
+      }
+    }
+  }
 }
 </style>