refactor: hide the custom annotations form by defaults

ui/src/components/form/AnnotationsForm.vue

@@ -1,11 +1,14 @@
 <script lang="ts" setup>
 import {
- reset,
- submitForm,
  type FormKitNode,
  type FormKitSchemaCondition,
  type FormKitSchemaNode,
+ reset,
+ submitForm,
 } from "@formkit/core";
+
+import { IconArrowRight } from "@halo-dev/components";
+
 import { computed, nextTick, onMounted, ref, watch } from "vue";
 import { apiClient } from "@/utils/api-client";
 import type { AnnotationSetting } from "@halo-dev/api-client";
@@ -196,6 +199,12 @@ defineExpose({
  annotations,
  customAnnotations,
 });
+
+const showCustomForm = ref(false);
+
+function onCustomFormToggle(e: Event) {
+ showCustomForm.value = (e.target as HTMLDetailsElement).open;
+}
 </script>
 
 <template>
@@ -219,34 +228,73 @@ defineExpose({
  />
  </template>
  </FormKit>
- <FormKit
- v-if="annotations"
- :id="customFormId"
- type="form"
- :preserve="true"
- :form-class="`${avaliableAnnotationSettings.length ? 'py-4' : ''}`"
- @submit-invalid="onCustomFormSubmitCheck"
- @submit="customFormInvalid = false"
+
+ <details
+ :open="showCustomForm"
+ class="flex cursor-pointer space-y-4 py-4 transition-all first:pt-0"
+ @toggle="onCustomFormToggle"
  >
+ <summary class="group flex items-center justify-between">
+ <div class="block text-sm font-medium text-gray-700">
+ {{
+ $t(
+ showCustomForm
+ ? "core.components.annotations_form.buttons.collapse"
+ : "core.components.annotations_form.buttons.expand"
+ )
+ }}
+ </div>
+ <div
+ class="-mr-1 inline-flex items-center justify-center rounded-full p-1 group-hover:bg-gray-100"
+ :class="{ 'bg-gray-100': showCustomForm }"
+ >
+ <IconArrowRight
+ :class="{ 'rotate-90 !text-gray-900': showCustomForm }"
+ class="text-gray-600 transition-all"
+ />
+ </div>
+ </summary>
+
  <FormKit
- v-model="customAnnotationsState"
- type="repeater"
- :label="$t('core.components.annotations_form.custom_fields.label')"
+ v-if="annotations"
+ :id="customFormId"
+ type="form"
+ :preserve="true"
+ :form-class="`${avaliableAnnotationSettings.length ? 'py-4' : ''}`"
+ @submit-invalid="onCustomFormSubmitCheck"
+ @submit="customFormInvalid = false"
  >
  <FormKit
- type="text"
- label="Key"
- name="key"
- validation="required:trim|keyValidationRule"
- :validation-rules="{ keyValidationRule }"
- :validation-messages="{
- keyValidationRule: $t(
- 'core.components.annotations_form.custom_fields.validation'
- ),
- }"
- ></FormKit>
- <FormKit type="text" label="Value" name="value" value=""></FormKit>
+ v-model="customAnnotationsState"
+ type="repeater"
+ :label="$t('core.components.annotations_form.custom_fields.label')"
+ >
+ <FormKit
+ type="text"
+ label="Key"
+ name="key"
+ validation="required:trim|keyValidationRule"
+ :validation-rules="{ keyValidationRule }"
+ :validation-messages="{
+ keyValidationRule: $t(
+ 'core.components.annotations_form.custom_fields.validation'
+ ),
+ }"
+ ></FormKit>
+ <FormKit type="text" label="Value" name="value" value=""></FormKit>
+ </FormKit>
  </FormKit>
- </FormKit>
+ </details>
  </div>
 </template>
+
+<style scoped>
+details > summary {
+ list-style: none;
+}
+
+/** Hide the default marker **/
+details > summary::-webkit-details-marker {
+ display: none;
+}
+</style>

ui/src/locales/en.yaml

@@ -1381,6 +1381,9 @@ core:
  custom_fields:
  label: Custom
  validation: The current Key is already in use
+ buttons:
+ expand: View more
+ collapse: Collapse
  default_editor:
  tabs:
  toc:
@@ -1464,14 +1467,14 @@ core:
  disallow: The content format is different and cannot be switched
  uppy:
  image_editor:
- revert: "Revert"
- rotate: "Rotate"
- zoom_in: "Zoom in"
- zoom_out: "Zoom out"
- flip_horizontal: "Flip horizontal"
- aspect_ratio_square: "Crop square"
- aspect_ratio_landscape: "Crop landscape (16:9)"
- aspect_ratio_portrait: "Crop portrait (9:16)"
+ revert: Revert
+ rotate: Rotate
+ zoom_in: Zoom in
+ zoom_out: Zoom out
+ flip_horizontal: Flip horizontal
+ aspect_ratio_square: Crop square
+ aspect_ratio_landscape: Crop landscape (16:9)
+ aspect_ratio_portrait: Crop portrait (9:16)
  composables:
  content_cache:
  toast_recovered: Recovered unsaved content from cache

ui/src/locales/zh-CN.yaml

@@ -1329,6 +1329,9 @@ core:
  custom_fields:
  label: 自定义
  validation: 当前 Key 已被占用
+ buttons:
+ expand: 查看更多
+ collapse: 收起
  default_editor:
  tabs:
  toc:
@@ -1410,14 +1413,14 @@ core:
  disallow: 内容格式不同，无法切换
  uppy:
  image_editor:
- revert: "恢复"
- rotate: "旋转"
- zoom_in: "放大"
- zoom_out: "缩小"
- flip_horizontal: "水平翻转"
- aspect_ratio_square: "裁剪为正方形"
- aspect_ratio_landscape: "裁剪为横向 (16:9)"
- aspect_ratio_portrait: "裁剪为纵向 (9:16)"
+ revert: 恢复
+ rotate: 旋转
+ zoom_in: 放大
+ zoom_out: 缩小
+ flip_horizontal: 水平翻转
+ aspect_ratio_square: 裁剪为正方形
+ aspect_ratio_landscape: 裁剪为横向 (16:9)
+ aspect_ratio_portrait: 裁剪为纵向 (9:16)
  composables:
  content_cache:
  toast_recovered: 已从缓存中恢复未保存的内容

ui/src/locales/zh-TW.yaml

@@ -1295,6 +1295,9 @@ core:
  custom_fields:
  label: 自定義
  validation: 當前 Key 已被占用
+ buttons:
+ expand: 查看更多
+ collapse: 收起
  default_editor:
  tabs:
  toc:
@@ -1376,14 +1379,14 @@ core:
  disallow: 內容格式不同，無法切換
  uppy:
  image_editor:
- revert: "還原"
- rotate: "旋轉"
- zoom_in: "放大"
- zoom_out: "縮小"
- flip_horizontal: "水平翻轉"
- aspect_ratio_square: "裁剪為正方形"
- aspect_ratio_landscape: "裁剪為橫向 (16:9)"
- aspect_ratio_portrait: "裁剪為縱向 (9:16)"
+ revert: 還原
+ rotate: 旋轉
+ zoom_in: 放大
+ zoom_out: 縮小
+ flip_horizontal: 水平翻轉
+ aspect_ratio_square: 裁剪為正方形
+ aspect_ratio_landscape: 裁剪為橫向 (16:9)
+ aspect_ratio_portrait: 裁剪為縱向 (9:16)
  composables:
  content_cache:
  toast_recovered: 已從緩存中恢復未保存的內容