feat: add close button to FixedFloat component and update ViewLinks i…

…ntegration
purocean · Dec 17, 2024 · 2e41d20 · 2e41d20
1 parent d656889
commit 2e41d20
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 25 deletions.
diff --git a/src/renderer/components/FixedFloat.vue b/src/renderer/components/FixedFloat.vue
@@ -17,18 +17,29 @@
         left: props.left,
       }"
     >
+      <div v-if="closeBtn" class="close-btn" @click="close" :title="$t('close') + ' ' + getKeyLabel(Escape)">
+        <svg-icon name="times" width="14px" height="14px" />
+      </div>
       <slot />
     </div>
   </teleport>
 </template>
 
 <script lang="ts" setup>
+import SvgIcon from '@fe/components/SvgIcon.vue'
+import { useFixedFloat } from '@fe/support/ui/fixed-float'
+import { getKeyLabel, Escape } from '@fe/core/keybinding'
+import { useI18n } from '@fe/services/i18n'
+
+useI18n()
+
 interface Props {
   top?: string
   right?: string
   bottom?: string
   left?: string
   disableAutoFocus?: boolean
+  closeBtn?: boolean
 }
 
 const props = defineProps<Props>()
@@ -38,6 +49,10 @@ const emits = defineEmits<{
   (e: 'close', byClickSelf: boolean): void
   (e: 'blur', byClickSelf: boolean): void
 }>()
+
+function close () {
+  useFixedFloat().hide()
+}
 </script>
 
 <style lang="scss" scoped>
@@ -57,5 +72,27 @@ const emits = defineEmits<{
   border-radius: var(--g-border-radius);
   overflow: hidden;
   backdrop-filter: var(--g-backdrop-filter);
+
+  .close-btn {
+    position: absolute;
+    right: 3px;
+    top: 3px;
+    width: 20px;
+    height: 20px;
+    padding: 3px;
+    box-sizing: border-box;
+    color: var(--g-color-30);
+    z-index: 10;
+
+    &:hover {
+      color: var(--g-color-0);
+      background-color: var(--g-color-80);
+      border-radius: 50%;
+    }
+
+    .svg-icon {
+      display: block;
+    }
+  }
 }
 </style>
diff --git a/src/renderer/plugins/view-links/ViewLinksComponent.vue b/src/renderer/plugins/view-links/ViewLinksComponent.vue
@@ -1,8 +1,5 @@
 <template>
   <index-status style="width: 300px" :title="title">
-    <div class="close-btn" @click="close" :title="$t('close') + ' ' + getKeyLabel(Escape)">
-      <svg-icon name="times" width="14px" height="14px" />
-    </div>
     <div class="header">
       <group-tabs :tabs="[
         { value: 'links', label: $t('view-links.links') },
@@ -32,7 +29,6 @@
 import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
 import { basename } from '@fe/utils/path'
 import { registerHook, removeHook } from '@fe/core/hook'
-import { Escape, getKeyLabel } from '@fe/core/keybinding'
 import { useFixedFloat } from '@fe/support/ui/fixed-float'
 import { getDocumentsManager } from '@fe/services/indexer'
 import { switchDoc } from '@fe/services/document'
@@ -173,27 +169,6 @@ onBeforeUnmount(() => {
   font-size: 14px;
 }
 
-.close-btn {
-  position: absolute;
-  right: 3px;
-  top: 3px;
-  width: 20px;
-  height: 20px;
-  padding: 3px;
-  box-sizing: border-box;
-  color: var(--g-color-30);
-
-  &:hover {
-    color: var(--g-color-0);
-    background-color: var(--g-color-80);
-    border-radius: 50%;
-  }
-
-  .svg-icon {
-    display: block;
-  }
-}
-
 .list {
   max-height: 60vh;
   overflow-y: auto;

diff --git a/src/renderer/plugins/view-links/index.ts b/src/renderer/plugins/view-links/index.ts
@@ -13,6 +13,7 @@ export default {
         top: ctx.env.isElectron ? '66px' : '36px',
         component: ViewLinksComponent,
         closeOnBlur: false,
+        closeBtn: true,
         onBlur (byClickSelf) {
           if (!byClickSelf && ctx.store.state.currentRepoIndexStatus?.repo !== ctx.store.state.currentFile?.repo) {
             ctx.ui.useFixedFloat().hide()

diff --git a/src/renderer/types.ts b/src/renderer/types.ts
@@ -203,6 +203,7 @@ export namespace Components {
       right?: string | undefined;
       bottom?: string | undefined;
       left?: string | undefined;
+      closeBtn?: boolean;
     }
   }