fix(added-vertical-spacing): Implemented changed to code to add more …

…vertical spacing to the notebook
Zero-True · Nov 22, 2024 · ff66f37 · ff66f37
1 parent 91dd35f
commit ff66f37
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 47 deletions.
diff --git a/zt_frontend/src/App.vue b/zt_frontend/src/App.vue
@@ -1082,14 +1082,14 @@ export default {
 <style lang="scss" scoped>
 @import "@/styles/mixins.scss";
 .zt-app-bar {
-  padding-top: 6px;
-  padding-bottom: 6px;
+  padding-top: 3px;
+  padding-bottom: 3px;
 }
 
 .logo-btn {
   & :deep(.v-icon) {
-    width: 1.5em;
-    height: 1.5em;
+    width: 1.2em;
+    height: 1.2em;
   }
 }
 

diff --git a/zt_frontend/src/components/AddCell.vue b/zt_frontend/src/components/AddCell.vue
@@ -1,11 +1,13 @@
 <template>
   <v-menu transition="scale-transition" minWidth="0" target="cursor">
     <template v-slot:activator="{ props }">
-      <div v-bind="cellId ? { ...props, id: 'addCell' + cellId } : props" class="activator-area">
-        <div class="divider">
-          <v-divider class="divider__divider-line" color="bluegrey-darken-2"></v-divider>
-          <v-btn :prepend-icon="`ztIcon:${ztAliases.circleAdd}`" variant="plain" density="compact" :ripple="false"
-            class="divider__btn bg-background">Add cell</v-btn>
+      <div v-bind="cellId ? { ...props, id: 'addCell' + cellId } : props" class="activator-area-push">
+        <div class="divider-container">
+          <div class="divider">
+            <v-divider class="divider__divider-line" color="bluegrey-darken-2"></v-divider>
+            <v-btn :prepend-icon="`ztIcon:${ztAliases.circleAdd}`" variant="plain" density="compact" :ripple="false"
+              class="divider__btn bg-background">Add cell</v-btn>
+          </div>
         </div>
       </div>
     </template>
@@ -20,6 +22,7 @@
     </v-list>
   </v-menu>
 </template>
+
 <script setup lang="ts">
 import { ref } from 'vue'
 import { ztAliases } from '@/iconsets/ztIcon'
@@ -45,10 +48,32 @@ const addCellItems = ref<{
   { title: 'Text', cellType: 'text', icon: `ztIcon:${ztAliases.text}` },
 ])
 </script>
+
 <style lang="scss" scoped>
+.activator-area-push {
+  margin: 0;
+  padding: 0;
+  height: 2px; // Small detection area
+  transition: height 0.2s ease;
+
+  &:hover {
+    height: 24px; // Expand to full height on hover
+  }
+}
+
+.divider-container {
+  height: 100%;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+
+  .activator-area-push:hover & {
+    opacity: 1;
+  }
+}
+
 .divider {
   position: relative;
-  height: 24px;
+  height: 100%;
 
   &__divider-line {
     position: absolute;
@@ -62,19 +87,17 @@ const addCellItems = ref<{
     top: 0;
     left: 50%;
     transform: translateX(-50%);
-    opacity: 1;
   }
 }
 
+// Hover effects
 .divider:hover {
-  cursor: pointer;
-}
-
-.divider:hover .divider__divider-line {
-  background-color: white;
-}
+  .divider__divider-line {
+    background-color: white;
+  }
 
-.divider:hover .divider__btn {
-  color: white !important;
+  .divider__btn {
+    color: white !important;
+  }
 }
 </style>
diff --git a/zt_frontend/src/components/Cell.vue b/zt_frontend/src/components/Cell.vue
@@ -243,7 +243,7 @@
       </div>
       <div
         :class="['outcome', { 'outcome--dev': isDevMode }]"
-        v-if="!(isDevMode && !isAppRoute && cellType === 'text')"
+        v-if="!(isDevMode && !isAppRoute && cellType === 'text') && cellHasOutput"
       >
         <slot name="outcome"></slot>
       </div>
@@ -264,6 +264,7 @@
     v-if="isDevMode"
     :cell-id="cellId"
     @createCodeCell="(e) => $emit('addCell', e)"
+
   />
 </template>
 <script setup lang="ts">
@@ -331,6 +332,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  cellHasOutput:{
+    type: Boolean,
+    default:false
+  }
 });
 const emits = defineEmits<{
   (e: "delete"): void;
@@ -453,11 +458,11 @@ const saveCellName = async () => {
 
 <style lang="scss" scoped>
 .cell {
-  padding: 18px;
+  padding: 5px;
   display: flex;
   margin-bottom: 2px;
   &--dev {
-    margin-bottom: 16px;
+    margin-bottom: 6px;
   }
 }
 .message-btn {
@@ -489,21 +494,21 @@ const saveCellName = async () => {
 .header {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 16px;
+  margin-bottom: 2px;
 }
 
 .code,
 .outcome {
   padding: 0px;
   &--dev {
     border: 1px solid rgba(var(--v-theme-bluegrey));
-    border-radius: 4px;
-    padding: 12px;
+    border-radius: 3px;
+    padding: 6px;
   }
 }
 
 .code {
-  margin-bottom: 16px;
+  margin-bottom: 10px;
 }
 
 .click-edit {

diff --git a/zt_frontend/src/components/CodeComponent.vue b/zt_frontend/src/components/CodeComponent.vue
@@ -7,6 +7,7 @@
     :expand-code="(cellData.expandCode as boolean)"
     :non-reactive="(cellData.nonReactive as boolean)"
     :cell-name="(cellData.cellName as string)"
+    :cell-has-output="hasCellContent"
     :currentlyExecutingCell="currentlyExecutingCell"
     :isCodeRunning="isCodeRunning"
     :is-dev-mode="$devMode && !isAppRoute && !isMobile"
@@ -71,11 +72,6 @@
         :code="cellData.code"
         :id="'codeMirrorDev' + cellData.id"
       />
-      <div v-if="$devMode && !isAppRoute && !isMobile">
-        <p class="text-caption text-disabled text-right">
-          {{ shortcutText }} to run
-        </p>
-      </div>
     </template>
     <template v-slot:outcome>
       <div :id="'outputContainer_' + cellData.id">
@@ -235,9 +231,14 @@ export default {
       return route.path === "/app";
     },
     isMobile() {
-      return this.$vuetify.display.mobile;
+      return this.$vuetify.display.mobile
     },
-    extensions() {
+    hasCellContent() {
+    const hasOutput = Boolean(this.cellData.output?.trim());
+    const hasComponents = Boolean(this.cellData.components?.length > 0);
+    return hasOutput || hasComponents;
+  },
+    extensions(){
       const handleCtrlEnter = () => {
         this.runCode(false, "", "");
       };
@@ -444,11 +445,6 @@ export default {
         (comp) => !placedComponentIds.includes(comp.id)
       );
     },
-    shortcutText() {
-      return navigator.userAgent.indexOf("Mac") !== -1
-        ? "CTRL+Return"
-        : "CTRL+Enter";
-    },
   },
 
   mounted() {

diff --git a/zt_frontend/src/components/MarkdownComponent.vue b/zt_frontend/src/components/MarkdownComponent.vue
@@ -5,6 +5,7 @@
     :is-dev-mode="$devMode && !isAppRoute && !isMobile"
     :hide-cell="(cellData.hideCell as boolean)"
     :cell-name="(cellData.cellName as string)"
+    :cell-has-output=hasCellContent
     @delete="deleteCell"
     @save="saveCell"
     @addCell="e => createCell(e)"
@@ -47,6 +48,10 @@ export default {
     "codemirror": Codemirror,
   },
   computed: {
+    hasCellContent() {
+    const hasOutput = Boolean(this.cellData.code?.trim());
+    return hasOutput
+  },
     extensions() {return [markdown(), oneDark, autocompletion({ override: [] })]},
 
     compiledMarkdown() {

diff --git a/zt_frontend/src/components/SQLComponent.vue b/zt_frontend/src/components/SQLComponent.vue
@@ -8,6 +8,7 @@
     :non-reactive="(cellData.nonReactive as boolean)"
     :showTable="(cellData.showTable as boolean)"
     :cell-name="(cellData.cellName as string)"
+    :cell-has-output="hasCellContent"
     :currentlyExecutingCell="currentlyExecutingCell"
     :isCodeRunning="isCodeRunning"
     :is-dev-mode="$devMode && !isAppRoute && !isMobile"
@@ -62,10 +63,6 @@
         :extensions="extensions"
         @keyup="saveCell"
       />
-
-      <div v-if="$devMode && !isAppRoute && !isMobile">
-        <p class="text-caption text-disabled text-right">{{ shortcutText }} to run</p>
-      </div>
     </template>
     <template v-slot:outcome>
       <v-container
@@ -118,6 +115,11 @@ export default {
     isMobile() {
       return this.$vuetify.display.mobile
     },
+    hasCellContent() {
+    const hasOutput = Boolean(this.cellData.output?.trim());
+    const hasComponents = Boolean(this.cellData.components?.length > 0);
+    return hasOutput || hasComponents;
+  },
     extensions() {
       const handleCtrlEnter = () => {
         this.runCode();
@@ -149,11 +151,6 @@ export default {
         autocompletion({ override: [] }),
       ];
     },
-    shortcutText() {
-      return navigator.userAgent.indexOf("Mac") !== -1
-        ? 'CTRL+Return'
-        : 'CTRL+Enter';
-    },
   },
   inheritAttrs: false,
   emits: ['runCode', 'deleteCell', 'createCell', 'saveCell'],