feat: networks tab ui, remove scroll components

enkryptcom · Nov 22, 2024 · 1be1d3d · 1be1d3d
1 parent 2bea8d7
commit 1be1d3d
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 89 deletions.
diff --git a/packages/extension/src/ui/action/App.vue b/packages/extension/src/ui/action/App.vue
@@ -29,6 +29,10 @@
         :is-border="false"
         @update:value="updateSearchValue"
       />
+      <app-menu-tab
+        :active-category="activeCategory"
+        @update:category="setActiveCategory"
+      />
       <app-menu
         :networks="displayNetworks"
         :pinnedNetworks="pinnedNetworks"
@@ -38,45 +42,6 @@
         @update:network="setNetwork"
         @update:gradient="updateGradient"
       />
-      <!-- network list type logic -->
-      <div class="tab__container">
-        <div
-          :class="[
-            'tab__container-tab',
-            activeCategory === NetworksCategory.Popular ? 'active' : '',
-          ]"
-          @click="setActiveCategory(NetworksCategory.Popular)"
-        >
-          Popular
-        </div>
-        <div
-          :class="[
-            'tab__container-tab',
-            activeCategory === NetworksCategory.All ? 'active' : '',
-          ]"
-          @click="setActiveCategory(NetworksCategory.All)"
-        >
-          All
-        </div>
-        <div
-          :class="[
-            'tab__container-tab',
-            activeCategory === NetworksCategory.Pinned ? 'active' : '',
-          ]"
-          @click="setActiveCategory(NetworksCategory.Pinned)"
-        >
-          Pinned
-        </div>
-        <div
-          :class="[
-            'tab__container-tab',
-            activeCategory === NetworksCategory.New ? 'active' : '',
-          ]"
-          @click="setActiveCategory(NetworksCategory.New)"
-        >
-          New
-        </div>
-      </div>
     </div>
 
     <div v-show="!isLoading" class="app__content">
@@ -164,6 +129,7 @@ import { useRoute, useRouter } from 'vue-router';
 import Browser from 'webextension-polyfill';
 import AccountsHeader from './components/accounts-header/index.vue';
 import AppMenu from './components/app-menu/index.vue';
+import AppMenuTab from './components/app-menu/components/app-menu-tab.vue';
 import BaseSearch from './components/base-search/index.vue';
 import NetworkMenu from './components/network-menu/index.vue';
 import MoreIcon from './icons/actions/more.vue';
@@ -184,13 +150,7 @@ import { trackBuyEvents, trackNetworkSelected } from '@/libs/metrics';
 import { getLatestEnkryptVersion } from '@action/utils/browser';
 import { gt as semverGT } from 'semver';
 import { BuyEventType, NetworkChangeEvents } from '@/libs/metrics/types';
-
-const NetworksCategory = {
-  All: 'all',
-  Popular: 'popular',
-  Pinned: 'pinned',
-  New: 'new',
-};
+import { NetworksCategory } from '@action/types/network-category';
 
 const domainState = new DomainState();
 const networksState = new NetworksState();
@@ -211,8 +171,7 @@ const router = useRouter();
 const route = useRoute();
 const transitionName = 'fade';
 const searchInput = ref('');
-//TODO: MAKE THIS A CONST
-const activeCategory = ref('all');
+const activeCategory = ref<NetworksCategory>(NetworksCategory.All);
 const networks = ref<BaseNetwork[]>([]);
 const pinnedNetworks = ref<BaseNetwork[]>([]);
 const defaultNetwork = DEFAULT_EVM_NETWORK;
@@ -229,10 +188,6 @@ const isLoading = ref(true);
 const currentVersion = __PACKAGE_VERSION__;
 const latestVersion = ref('');
 
-const setActiveCategory = (category: string) => {
-  activeCategory.value = category;
-};
-
 const setActiveNetworks = async () => {
   const pinnedNetworkNames = await networksState.getPinnedNetworkNames();
   const allNetworks = await getAllNetworks();
@@ -497,17 +452,22 @@ const isLocked = computed(() => {
   return route.name == 'lock-screen';
 });
 
+/**-------------------
+ * Network Categories
+ -------------------*/
+const setActiveCategory = (category: NetworksCategory) => {
+  activeCategory.value = category;
+};
+
 /**
  * Display Networks
- * Categories: All, Popular, Pinned, New
+ * Categories: All, Pinned, New
  */
 const displayNetworks = computed<BaseNetwork[]>(() => {
   switch (activeCategory.value) {
     case NetworksCategory.All:
       // TODO: FILTER OUT TESTNETS THAT ARE NOT ENABLED
       return networks.value;
-    // case 'popular':
-    //   return networks.value.filter(net => POPULAR_NAMES.includes(net.name));
     case NetworksCategory.Pinned:
       return pinnedNetworks.value;
     // case 'new':
@@ -631,7 +591,7 @@ body {
     box-sizing: border-box;
     z-index: 1;
     background: @defaultGradient;
-
+    box-shadow: inset -1px 0px 2px 0px rgba(0, 0, 0, 0.16);
     &-logo {
       margin-left: 8px;
     }

diff --git a/packages/extension/src/ui/action/components/accounts-header/index.vue b/packages/extension/src/ui/action/components/accounts-header/index.vue
@@ -81,9 +81,7 @@ const toggleAccounts = () => {
   background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(50px);
   -webkit-backdrop-filter: blur(50px);
-  box-shadow:
-    0px 0px 6px rgba(0, 0, 0, 0.05),
-    0px 0px 1px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.16);
   z-index: 2;
 }
 </style>
diff --git a/packages/extension/src/ui/action/components/app-menu/components/app-menu-tab.vue b/packages/extension/src/ui/action/components/app-menu/components/app-menu-tab.vue
@@ -0,0 +1,91 @@
+<template>
+  <!-- network list type logic -->
+  <div class="network-tab__container">
+    <div
+      :class="[
+        'network-tab__container-tab hover-transition-no-bg',
+        activeCategory === NetworksCategory.All ? 'active' : '',
+      ]"
+      @click="setActiveCategory(NetworksCategory.All)"
+    >
+      All
+    </div>
+    <div
+      :class="[
+        'network-tab__container-tab hover-transition-no-bg',
+        activeCategory === NetworksCategory.Pinned ? 'active' : '',
+      ]"
+      @click="setActiveCategory(NetworksCategory.Pinned)"
+    >
+      Pinned
+    </div>
+    <div
+      :class="[
+        'network-tab__container-tab hover-transition-no-bg',
+        activeCategory === NetworksCategory.New ? 'active' : '',
+      ]"
+      @click="setActiveCategory(NetworksCategory.New)"
+    >
+      New
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+import { NetworksCategory } from '@action/types/network-category';
+
+defineProps({
+  activeCategory: {
+    type: String as PropType<NetworksCategory>,
+    required: true,
+  },
+});
+const emit = defineEmits<{
+  (e: 'update:category', category: NetworksCategory): void;
+}>();
+const setActiveCategory = (category: NetworksCategory) => {
+  emit('update:category', category);
+};
+</script>
+
+<style lang="less">
+@import '@action/styles/theme.less';
+.network-tab__container {
+  padding: 6px;
+  background: @black004;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+  border-radius: 10px;
+  padding: 4px;
+  gap: 1px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+
+  &-tab {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 32px;
+    width: 100%;
+    padding: 4px 8px;
+    cursor: pointer;
+    border-radius: 6px;
+    font-size: 14px;
+    letter-spacing: 0.25px;
+    font-weight: 500;
+    text-align: center;
+
+    &.active {
+      color: @primary;
+      background: @primaryBg;
+      box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.16);
+      &:hover {
+        background: @primaryBg;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/extension/src/ui/action/components/app-menu/index.vue b/packages/extension/src/ui/action/components/app-menu/index.vue
@@ -1,13 +1,13 @@
 <template>
   <div :class="['app-menu', { 'has-bg': isScrolling }]">
-    <custom-scrollbar
+    <div
       v-if="!!networks"
-      :class="'app-menu__scroll-area'"
-      @changeIsScrolling="setIsScrolling"
+      class="app-menu__scroll-area"
+      @scroll="setIsScrolling"
     >
       <draggable v-model="searchNetworks" item-key="name" :animation="300">
-        <!-- NOTE: WHATS seletced props is for, it is not in the component-->
         <template #item="{ element }">
+          <!-- NOTE: WHATS seletced props is for, it is not in the component-->
           <app-menu-item
             v-bind="$attrs"
             :network="element"
@@ -18,18 +18,18 @@
           />
         </template>
       </draggable>
-    </custom-scrollbar>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { PropType, ref } from 'vue';
+import { PropType, ref, onBeforeUnmount } from 'vue';
 import AppMenuItem from './components/app-menu-item.vue';
-import CustomScrollbar from '@action/components/custom-scrollbar/index.vue';
 import draggable from 'vuedraggable';
 import NetworksState from '@/libs/networks-state';
 import { BaseNetwork } from '@/types/base-network';
 import { computed } from 'vue';
+
 const networksState = new NetworksState();
 const props = defineProps({
   networks: {
@@ -77,39 +77,65 @@ const searchNetworks = computed({
     }
   },
 });
-
+/** ------------------
+ * Scroll
+ -------------------*/
+const scrollTimeout = ref<number | null>(null);
 const isScrolling = ref(false);
-const setIsScrolling = (val: boolean) => {
-  isScrolling.value = val;
+const setIsScrolling = () => {
+  isScrolling.value = true;
+  if (scrollTimeout.value) {
+    clearTimeout(scrollTimeout.value);
+  }
+  scrollTimeout.value = window.setTimeout(() => {
+    isScrolling.value = false;
+  }, 1500);
 };
+
+onBeforeUnmount(() => {
+  if (scrollTimeout.value) {
+    clearTimeout(scrollTimeout.value);
+  }
+});
 </script>
 
 <style lang="less">
 @import '@action/styles/theme.less';
 
 .app-menu {
-  margin-top: 8px;
   overflow-y: auto;
   transition: background-color 0.5s ease-in-out;
   background-color: transparent;
+  box-shadow: none;
   margin: 0px -12px 0px -12px;
-  padding: 10px 10px 0px 10px;
-
+  padding: 4px 10px 0px 10px;
+  transition:
+    background-color 0.4s ease-in-out,
+    box-shadow 0.4s ease-in-out;
   &__scroll-area {
     position: relative;
     margin: auto;
     width: 100%;
     max-height: 452px;
-
-    &.ps--active-y {
-      padding-right: 0 !important;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    overflow-y: scroll;
+    scroll-behavior: smooth;
+    margin-right: -4px;
+    padding-right: 4px;
+    &::-webkit-scrollbar {
+      width: 4px;
     }
-    .ps__rail-y {
-      right: 4px !important;
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.36);
+      border-radius: 20px;
     }
   }
 }
 .has-bg {
-  background: rgba(247, 239, 244, 1);
+  background-color: rgba(247, 239, 244, 1);
+  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(40px);
 }
 </style>
diff --git a/packages/extension/src/ui/action/components/custom-scrollbar/index.vue b/packages/extension/src/ui/action/components/custom-scrollbar/index.vue
@@ -37,7 +37,6 @@ export default {
   data() {
     return {
       ps: null,
-      scrollTimeout: 0,
     };
   },
   watch: {
@@ -76,20 +75,10 @@ export default {
   },
   beforeUnmount() {
     this.__uninit();
-    if (this.scrollTimeout) {
-      clearTimeout(this.scrollTimeout);
-    }
   },
   methods: {
     scrollHandle: function (evt: Event) {
       this.$emit(evt.type, evt);
-      this.$emit('changeIsScrolling', true);
-      if (this.scrollTimeout) {
-        clearTimeout(this.scrollTimeout);
-      }
-      this.scrollTimeout = window.setTimeout(() => {
-        this.$emit('changeIsScrolling', false);
-      }, 1500);
     },
     update: function () {
       if (this.ps) {

diff --git a/packages/extension/src/ui/action/types/network-category.ts b/packages/extension/src/ui/action/types/network-category.ts
@@ -0,0 +1,5 @@
+export enum NetworksCategory {
+  All = 'all',
+  Pinned = 'pinned',
+  New = 'new',
+};