feat(snippets): retrieve snippets from store, update style

massCodeIO · Mar 25, 2022 · 88e7546 · 88e7546
1 parent 9120886
commit 88e7546
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 14 deletions.
diff --git a/src/renderer/components/snippets/SnippetList.vue b/src/renderer/components/snippets/SnippetList.vue
@@ -5,14 +5,28 @@
     </div>
     <div class="body">
       <SnippetListItem
-        v-for="i in 30"
-        :key="i"
+        v-for="i in snippetStore.snippets"
+        :key="i.id"
+        :folder="i.folder.name"
+        :date="i.updatedAt"
+        :name="i.name"
+        :is-selected="i.id === snippetStore.selectedId"
+        @click="onClickSnippet(i.id)"
       />
     </div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useSnippetStore } from '@/store/snippets'
+
+const snippetStore = useSnippetStore()
+
+const onClickSnippet = (id: string) => {
+  snippetStore.fragment = 0
+  snippetStore.getSnippetsById(id)
+}
+</script>
 
 <style lang="scss" scoped>
 .list {
@@ -21,10 +35,12 @@
   grid-template-rows: 50px 1fr;
 }
 .header {
+  margin-top: 12px;
   display: flex;
 }
 .body {
   overflow-y: scroll;
+  padding: var(--spacing-xs) 0;
   height: calc(100vh - 50px);
 }
 </style>
diff --git a/src/renderer/components/snippets/SnippetListActionBar.vue b/src/renderer/components/snippets/SnippetListActionBar.vue
@@ -2,7 +2,9 @@
   <div class="action">
     <UniconsSearch />
     <input placeholder="Search...">
-    <UniconsPlus />
+    <AppActionButton class="add">
+      <UniconsPlus />
+    </AppActionButton>
   </div>
 </template>
 
@@ -12,7 +14,7 @@
 .action {
   display: flex;
   align-items: center;
-  padding: var(--spacing-xs);
+  padding: var(--spacing-sm);
   input {
     outline: none;
     border: none;
@@ -22,5 +24,9 @@
   :deep(svg) {
     flex-shrink: 0;
   }
+  .add {
+    position: relative;
+    right: -8px;
+  }
 }
 </style>
diff --git a/src/renderer/components/snippets/SnippetListItem.vue b/src/renderer/components/snippets/SnippetListItem.vue
@@ -1,34 +1,104 @@
 <template>
-  <div class="item">
+  <div
+    ref="itemRef"
+    class="item"
+    :class="{
+      'is-selected': !isFocused && isSelected,
+      'is-focused': isFocused
+    }"
+    @click="isFocused = true"
+  >
     <div class="header">
       <div class="name">
-        <span> snippet name </span>
+        <span>
+          {{ name }}
+        </span>
       </div>
     </div>
     <div class="footer">
       <div class="folder">
-        folder
+        {{ folder }}
       </div>
       <div class="date">
-        19/03/2022
+        {{ date }}
       </div>
     </div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { onClickOutside } from '@vueuse/core'
+import { ref } from 'vue'
+
+interface Props {
+  name: string
+  folder: string
+  date: number | string
+  isSelected: boolean
+}
+
+defineProps<Props>()
+
+const itemRef = ref()
+const isFocused = ref(false)
+
+onClickOutside(itemRef, () => {
+  isFocused.value = false
+})
+</script>
 
 <style lang="scss" scoped>
 .item {
-  // height: 100px;
-  padding: var(--spacing-xs);
-  border-bottom: 1px solid var(--color-border);
+  padding: var(--spacing-xs) var(--spacing-sm);
+  position: relative;
+  z-index: 2;
+  &::after {
+    content: '';
+    height: 1px;
+    background-color: var(--color-border);
+    position: absolute;
+    width: calc(100% - calc(var(--spacing-sm) * 2));
+    bottom: 1px;
+  }
+  &.is-focused,
+  &.is-selected {
+    &::before {
+      content: '';
+      position: absolute;
+      top: -2px;
+      left: 8px;
+      right: 8px;
+      bottom: 0px;
+      border-radius: 5px;
+      z-index: 1;
+    }
+  }
+  &.is-focused {
+    &::before {
+      background-color: var(--color-primary);
+    }
+    .name,
+    .footer {
+      color: #fff;
+    }
+  }
+  &.is-selected {
+    &::before {
+      background-color: var(--color-contrast-lower-alt);
+    }
+    .name,
+    .footer {
+      color: var(--color-text);
+    }
+  }
 }
 .name {
   display: table;
   table-layout: fixed;
   width: 100%;
   overflow: hidden;
+  position: relative;
+  z-index: 1;
   span {
     display: -webkit-box;
     -webkit-line-clamp: 1;
@@ -38,8 +108,10 @@
 .footer {
   font-size: 11px;
   display: flex;
+  position: relative;
+  z-index: 1;
   justify-content: space-between;
   color: var(--color-contrast-medium);
-  padding-top: var(--spacing-xs);
+  padding-top: var(--spacing-sm);
 }
 </style>