feat(sidebar): add focus, selected state

massCodeIO · Apr 1, 2022 · bc7f2d3 · bc7f2d3
1 parent 7297274
commit bc7f2d3
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 6 deletions.
diff --git a/src/renderer/components/sidebar/SidebarList.vue b/src/renderer/components/sidebar/SidebarList.vue
@@ -86,11 +86,6 @@ const onClickTab = (tab: Tab) => {
   &__action {
     display: inline-block;
   }
-  .body {
-    &.is-system {
-      padding: 0 var(--spacing-sm);
-    }
-  }
   .tab-header {
     color: var(--color-contrast-low-alt);
     padding: var(--spacing-xs) 0;

diff --git a/src/renderer/components/sidebar/SidebarListItem.vue b/src/renderer/components/sidebar/SidebarListItem.vue
@@ -1,5 +1,14 @@
 <template>
-  <div class="item">
+  <div
+    ref="itemRef"
+    class="item"
+    :class="{
+      'is-selected': isSelected,
+      'is-focused': isFocused,
+      'is-system': system
+    }"
+    @click="isFocused = true"
+  >
     <span class="icon">
       <Component
         :is="AngleRight"
@@ -15,21 +24,31 @@
 
 <script setup lang="ts">
 import type { FunctionalComponent } from 'vue'
+import { ref } from 'vue'
 import Folder from '~icons/unicons/folder'
 import AngleRight from '~icons/unicons/angle-right'
+import { onClickOutside } from '@vueuse/core'
 
 interface Props {
   icon?: FunctionalComponent
   system?: boolean
   nested?: boolean
   open?: boolean
+  isSelected?: boolean
 }
 
 withDefaults(defineProps<Props>(), {
   system: false,
   nested: false,
   open: false
 })
+
+const isFocused = ref(false)
+const itemRef = ref()
+
+onClickOutside(itemRef, () => {
+  isFocused.value = false
+})
 </script>
 
 <style lang="scss" scoped>
@@ -39,6 +58,41 @@ withDefaults(defineProps<Props>(), {
   padding: 4px 0;
   position: relative;
   width: 100%;
+  z-index: 2;
+  user-select: none;
+  &.is-system {
+    padding-left: var(--spacing-sm);
+    padding-right: var(--spacing-sm);
+  }
+  &.is-focused,
+  &.is-selected,
+  &.is-highlighted {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      right: 0px;
+      bottom: 0px;
+      border-radius: 5px;
+      z-index: -1;
+    }
+  }
+
+  &.is-selected {
+    &::before {
+      background-color: var(--color-sidebar-item-selected);
+    }
+  }
+  &.is-focused {
+    &::before {
+      background-color: var(--color-primary);
+    }
+    color: #fff;
+    :deep(svg) {
+      fill: #fff;
+    }
+  }
   .icon {
     margin-right: var(--spacing-xs);
     display: flex;