enhance(directive-editor): add an info icon to open the expand panel of comments #660

app/src/views/site/ngx_conf/directive/DirectiveEditorItem.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import type { NgxDirective } from '@/api/ngx'
-
 import config from '@/api/config'
 import CodeEditor from '@/components/CodeEditor'
-import { DeleteOutlined, HolderOutlined } from '@ant-design/icons-vue'
+import { DeleteOutlined, HolderOutlined, InfoCircleOutlined } from '@ant-design/icons-vue'
 import { message } from 'ant-design-vue'
-import { type ComputedRef, ref, watch } from 'vue'
 
 const props = defineProps<{
   index: number
@@ -13,17 +11,17 @@ const props = defineProps<{
   context?: string
 }>()
 
-const ngx_directives = inject('ngx_directives') as ComputedRef<NgxDirective[]>
+const ngxDirectives = inject('ngx_directives') as ComputedRef<NgxDirective[]>
 
 function remove(index: number) {
-  ngx_directives.value.splice(index, 1)
+  ngxDirectives.value.splice(index, 1)
 }
 
 const content = ref('')
 
 function init() {
-  if (ngx_directives.value[props.index].directive === 'include') {
-    config.get(ngx_directives.value[props.index].params).then(r => {
+  if (ngxDirectives.value[props.index].directive === 'include') {
+    config.get(ngxDirectives.value[props.index].params).then(r => {
       content.value = r.content
     })
   }
@@ -34,7 +32,7 @@ init()
 watch(props, init)
 
 function save() {
-  config.save(ngx_directives.value[props.index].params, { content: content.value }).then(r => {
+  config.save(ngxDirectives.value[props.index].params, { content: content.value }).then(r => {
     content.value = r.content
     message.success($gettext('Saved successfully'))
   }).catch(r => {
@@ -42,44 +40,51 @@ function save() {
   })
 }
 
-const currentIdx = inject('current_idx')
+const currentIdx = inject<Ref<number>>('current_idx')!
+
+const onHover = ref(false)
+const showComment = ref(false)
 </script>
 
 <template>
   <div
-    v-if="ngx_directives[props.index]"
+    v-if="ngxDirectives[props.index]"
     class="dir-editor-item"
   >
-    <div class="input-wrapper">
+    <div class="input-wrapper" @mouseenter="onHover = true" @mouseleave="onHover = false">
       <div
-        v-if="ngx_directives[props.index].directive === ''"
+        v-if="ngxDirectives[props.index].directive === ''"
         class="code-editor-wrapper"
       >
-        <HolderOutlined style="padding: 5px" />
+        <HolderOutlined class="pa-2" />
         <CodeEditor
-          v-model:content="ngx_directives[props.index].params"
+          v-model:content="ngxDirectives[props.index].params"
           default-height="100px"
-          style="width: 100%;"
+          class="w-full"
         />
       </div>
 
       <AInput
         v-else
-        v-model:value="ngx_directives[props.index].params"
+        v-model:value="ngxDirectives[props.index].params"
         @click="currentIdx = index"
       >
         <template #addonBefore>
           <HolderOutlined />
-          {{ ngx_directives[props.index].directive }}
+          {{ ngxDirectives[props.index].directive }}
         </template>
-        <template
-          v-if="$slots.suffix"
-          #suffix
-        >
+        <template #suffix>
           <slot
             name="suffix"
-            :directive="ngx_directives[props.index]"
+            :directive="ngxDirectives[props.index]"
           />
+
+          <!-- Comments Entry -->
+          <Transition name="fade">
+            <div v-show="onHover" class="ml-3 cursor-pointer" @click="showComment = !showComment">
+              <InfoCircleOutlined />
+            </div>
+          </Transition>
         </template>
       </AInput>
 
@@ -98,16 +103,16 @@ const currentIdx = inject('current_idx')
       </APopconfirm>
     </div>
     <div
-      v-if="currentIdx === index"
+      v-if="showComment"
       class="directive-editor-extra"
     >
       <div class="extra-content">
         <AForm layout="vertical">
           <AFormItem :label="$gettext('Comments')">
-            <ATextarea v-model:value="ngx_directives[props.index].comments" />
+            <ATextarea v-model:value="ngxDirectives[props.index].comments" />
           </AFormItem>
           <AFormItem
-            v-if="ngx_directives[props.index].directive === 'include'"
+            v-if="ngxDirectives[props.index].directive === 'include'"
             :label="$gettext('Content')"
           >
             <CodeEditor
@@ -166,4 +171,13 @@ const currentIdx = inject('current_idx')
   gap: 10px;
   align-items: center;
 }
+
+.fade-enter-active, .fade-leave-active {
+  transition: all .2s ease-in-out;
+}
+
+.fade-enter-from, .fade-enter-to, .fade-leave-to
+  /* .fade-leave-active for below version 2.1.8 */ {
+  opacity: 0;
+}
 </style>