Redesign Settings Page & Add Tooltips (#19)

Author: kadiryazici

.eslintrc.cjs

@@ -5,6 +5,7 @@ module.exports = {
     'no-console': 'off',
     'vue/attribute-hyphenation': 'off',
     'vue/v-on-event-hyphenation': 'off',
+    '@typescript-eslint/no-unused-vars': 'error',
     'vue/custom-event-name-casing': 'off',
     'vue/max-attributes-per-line': ['error', {
       singleline: {

src/assets/main.scss

@@ -10,13 +10,16 @@
   --white-faded: rgb(190, 190, 190);
   --white: rgb(255, 255, 255);
   --content-bg: rgba(30, 30, 30, .8);
+  --page-header-bg: rgba(43, 43, 43, .6);
   --popover-bg: rgba(40, 40, 40, .6);
+  --popover-bg-solid: rgba(40, 40, 40);
   --bottom-bar-bg: rgba(21, 21, 21, 0.2);
   --sidebar-bg: rgba(50, 50, 50, .75);
   --app-border: rgb(90, 90, 90);
   --item-bg: rgba(80, 80, 80, .3);
   --item-hover-bg: rgba(80, 80, 80, .75);
   --item-border-color: rgb(22, 22, 22, .3);
+  --accent-color: rgb(60, 175, 252);
 }
 
 * {
@@ -68,9 +71,3 @@ button, a {
   @include borderRadiusOverflowHidden(8px);
 }
 
-.icon:not(.no-stroke) {
-  stroke: black;
-  stroke-width: 1px;
-  stroke-linejoin: round;
-  paint-order: stroke;
-}

src/assets/mixins.scss

@@ -4,9 +4,6 @@
   mask-image: -webkit-radial-gradient(white, black);
 }
 
-@mixin text-outline($size: 1px) {
-  text-shadow: 0 0 $size black, 0 0 $size black, 0 0 $size black, 0 0 $size black;
-}
 
 @keyframes outline-anim {
   0% {

src/components/AppButton.vue

@@ -3,6 +3,7 @@ interface Props {
   loading?: boolean
   paddingless?: boolean
   square?: boolean
+  ghost?: boolean
 }
 interface Emits {
   (name: 'click', event: MouseEvent): void
@@ -31,6 +32,7 @@ function handleClick(e: MouseEvent) {
       'button-loading': loading,
       'button-paddingless': paddingless,
       'button-square': square,
+      'button-ghost': ghost,
     }"
     @click="handleClick"
   >
@@ -53,15 +55,26 @@ function handleClick(e: MouseEvent) {
   height: 35px;
   font-size: 14px;
   padding: 8px 12px;
-  border: 1px solid var(--item-border-color);
-  background-color: var(--item-bg);
   position: relative;
   overflow: hidden;
   color: var(--white);
   border-radius: 8px;
-  @include text-outline();
   vertical-align: middle;
 
+  &-content {
+    display: flex;
+    flex-direction: row;
+    white-space: nowrap;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  &:not(.button-ghost) {
+    background-color: var(--item-bg);
+  }
+
   &-paddingless, &-square {
     padding: 0px;
   }
@@ -83,13 +96,9 @@ function handleClick(e: MouseEvent) {
   &:not(.button-loading) {
     @include focus-visible;
 
-    &:active {
+    &:active, &:hover {
       background-color: var(--item-hover-bg);
     }
-
-    &:hover {
-      border-color: var(--item-hover-bg);;
-    }
   }
 }
 

src/components/AppSidebar.vue

@@ -10,6 +10,8 @@ import { Icons } from './Icons'
 import SidebarButton from './SidebarButton.vue'
 import Popover from './Popover.vue'
 import MenuItems, { menuItem } from './MenuItems.vue'
+import Tooltip from './Tooltip.vue'
+import SlotRef from './SlotRef.vue'
 
 const store = useStore()
 
@@ -44,60 +46,91 @@ const moreItems = computed(() => [
 <template>
   <nav class="nav">
     <div class="upper">
-      <button
-        class="nav-logo"
-        @click="open(REPO_LINK)"
-      >
-        <img
-          title="Go to Gitification repository"
-          draggable="false"
-          src="/src/assets/img/icon.png"
-        >
-      </button>
+      <SlotRef>
+        <template #default>
+          <button
+            class="nav-logo"
+            @click="open(REPO_LINK)"
+          >
+            <img
+              title="Go to Gitification repository"
+              draggable="false"
+              src="/src/assets/img/icon.png"
+            >
+          </button>
+        </template>
+
+        <template #ref="{ el }">
+          <Tooltip
+            :target="el"
+            position="right"
+            text="Navigate to repository"
+          />
+        </template>
+      </SlotRef>
     </div>
+
     <div class="lower">
-      <SidebarButton
-        v-if="store.newRelease != null"
-        highlight
-        title="An update is available"
-        @click="open(`${REPO_RELEASES_LINK}/tag/${store.newRelease!.tag_name}`)"
-      >
-        <Icons.Download16 />
-      </SidebarButton>
-
-      <SidebarButton
-        :disabled="store.currentPage !== Page.Home"
-        title="Reload notifications"
-        @click="store.fetchNotifications(true)"
-      >
-        <Icons.Sync16 />
-      </SidebarButton>
-
-      <!-- <SidebarButton
-        :disabled="store.currentPage === Page.Settings"
-        title="Go to settings"
-        @click="store.setPage(Page.Settings)"
-      >
-        <Icons.Gear16 />
-      </SidebarButton> -->
-
-      <Popover
-        :wowerlayOptions="{
-          position: 'right-end',
-          noBackground: true,
-          style: 'display: flex; flex-direction: column: flex-wrap: nowrap: gap: 5px; padding: 5px;',
-        }"
-      >
+      <SlotRef v-if="store.newRelease != null">
         <template #default>
-          <SidebarButton title="More">
+          <SidebarButton
+            highlight
+            @click="open(`${REPO_RELEASES_LINK}/tag/${store.newRelease!.tag_name}`)"
+          >
+            <Icons.Download16 />
+          </SidebarButton>
+        </template>
+
+        <template #ref="{ el }">
+          <Tooltip
+            :target="el"
+            position="right"
+            text="A new version is available"
+          />
+        </template>
+      </SlotRef>
+
+      <SlotRef>
+        <template #default>
+          <SidebarButton
+            :disabled="store.currentPage !== Page.Home"
+            @click="store.fetchNotifications(true)"
+          >
+            <Icons.Sync16 />
+          </SidebarButton>
+        </template>
+
+        <template #ref="{ el }">
+          <Tooltip
+            :target="el"
+            position="right"
+            text="Reload notifications"
+          />
+        </template>
+      </SlotRef>
+
+      <SlotRef>
+        <template #default>
+          <SidebarButton>
             <Icons.More />
           </SidebarButton>
         </template>
 
-        <template #content>
-          <MenuItems :items="moreItems" />
+        <template #ref="{ el }">
+          <Tooltip
+            position="right"
+            :target="el"
+            text="More"
+          />
+
+          <Popover
+            :target="el"
+            :wowerlayOptions="{ position: 'right-end' }"
+          >
+            <MenuItems :items="moreItems" />
+          </Popover>
         </template>
-      </Popover>
+      </SlotRef>
     </div>
   </nav>
 </template>
@@ -134,10 +167,10 @@ const moreItems = computed(() => [
 .nav-logo {
   opacity: .8;
   @include focus-visible;
-  border:1px solid black;
   border-radius: 50%;
   width: 30px;
   height: 30px;
+  overflow: hidden;
 
   img {
     border-radius: 50%;

src/components/Icons.ts

@@ -11,6 +11,7 @@ import GithubIcon from 'virtual:icons/octicon/mark-github-16'
 import UnmuteIcon from 'virtual:icons/octicon/unmute-24'
 import PullRequestIcon from 'virtual:icons/octicon/git-pull-request-24'
 import CheckIcon from 'virtual:icons/octicon/check-24'
+import CheckIcon16 from 'virtual:icons/octicon/check-16'
 import CheckFillIcon from 'virtual:icons/octicon/check-circle-fill-12'
 import XIcon from 'virtual:icons/octicon/x-16'
 import BellIcon from 'virtual:icons/octicon/bell-24'
@@ -61,4 +62,5 @@ export const Icons = {
   Command: markRaw(CommandIcon),
   BellSlash: markRaw(BellSlashIcon),
   Info16: markRaw(InfoIcon16),
+  Check16: markRaw(CheckIcon16),
 }

src/components/MenuItems.vue

@@ -1,5 +1,10 @@
 <script lang="ts">
-import { type Context, Item, type ItemRenderList, SelectableItems, createItemDefaults, item } from 'vue-selectable-items'
+import {
+  type Context,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type Item,
+  type ItemRenderList, SelectableItems, createItemDefaults, item,
+} from 'vue-selectable-items'
 import { useKey } from '../composables/useKey'
 import { type Icons } from './Icons'
 import { usePopoverContext } from './Popover.vue'
@@ -61,10 +66,7 @@ const setupHandle = (ctx: Context) => {
   >
     <template #render="{ meta }: Item<ItemMeta>">
       <div class="item-icon">
-        <component
-          :is="meta!.icon"
-          class="no-stroke"
-        />
+        <component :is="meta!.icon" />
       </div>
       <div class="item-text">
         {{ meta!.text }}

src/components/NotificationItem.vue

@@ -140,7 +140,6 @@ function handleRepoClick(repo: MinimalRepository, event: MouseEvent | KeyboardEv
 
   &-title {
     @include focus-visible;
-    @include text-outline();
     border-radius: 8px;
     padding: 5px 10px 5px 16px;
     width: 100%;
@@ -191,7 +190,6 @@ function handleRepoClick(repo: MinimalRepository, event: MouseEvent | KeyboardEv
     text-align: left;
     line-height: 20px;
     @include focus-visible;
-    @include text-outline($size: 1px);
     margin-top: 5px;
 
     &-read {

src/components/Popover.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { type InjectionKey, type Ref, inject, provide, ref, watch } from 'vue'
 import { Wowerlay, type WowerlayTransitionFn } from 'wowerlay'
-import { useSlotWithRef } from '../composables/useSlotWithRef'
+import { useEventListener } from '@vueuse/core'
 import { useKey } from '../composables/useKey'
 
 interface PopoverContext {
@@ -25,12 +25,12 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 defineSlots<{
-  content: (props: SlotProps) => any
   default: (props: SlotProps) => any
 }>()
 
 interface Props {
   wowerlayOptions?: Partial<Omit<InstanceType<typeof Wowerlay>['$props'], 'visible' | 'target'>>
+  target?: HTMLElement | null
 }
 
 const visible = ref(false)
@@ -80,35 +80,37 @@ watch(visible, (value) => {
   }
 })
 
-const { renderSlot, element: target } = useSlotWithRef('default', {
-  slotPropsGetter: () => ({ visible: visible.value }),
-})
+useEventListener(
+  () => props.target,
+  'click',
+  () => {
+    visible.value = !visible.value
+  },
+  { passive: true },
+)
 </script>
 
 <template>
-  <Component
-    :is="renderSlot"
-    @click="visible = !visible"
-  />
-
   <Wowerlay
     v-model:visible="visible"
+    class="popover"
     tabindex="-1"
     :target="target"
     v-bind="props.wowerlayOptions"
     :gap="2"
+    noBackground
     :transition="handleTransition"
     @update:el="(el) => popoverEl = el"
   >
     <slot
-      name="content"
+      name="default"
       :visible="visible"
     />
   </Wowerlay>
 </template>
 
 <style lang="scss">
-.wowerlay {
+.popover {
   outline: none;
   background-color: var(--popover-bg);
   min-width: 150px;
@@ -119,6 +121,7 @@ const { renderSlot, element: target } = useSlotWithRef('default', {
   display: flex;
   flex-direction: column;
   padding: 4px;
+  --wowerlay-z: 1500;
 
   > * + * {
     margin-top: 2px;