Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: hide the custom annotations form by defaults #5595

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 74 additions & 26 deletions ui/src/components/form/AnnotationsForm.vue
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -196,6 +199,12 @@ defineExpose({
annotations,
customAnnotations,
});

const showCustomForm = ref(false);

function onCustomFormToggle(e: Event) {
showCustomForm.value = (e.target as HTMLDetailsElement).open;
}
</script>

<template>
Expand All @@ -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>
19 changes: 11 additions & 8 deletions ui/src/locales/en.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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
Expand Down
19 changes: 11 additions & 8 deletions ui/src/locales/zh-CN.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -1329,6 +1329,9 @@ core:
custom_fields:
label: 自定义
validation: 当前 Key 已被占用
buttons:
expand: 查看更多
collapse: 收起
default_editor:
tabs:
toc:
Expand Down Expand Up @@ -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: 已从缓存中恢复未保存的内容
Expand Down
19 changes: 11 additions & 8 deletions ui/src/locales/zh-TW.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -1295,6 +1295,9 @@ core:
custom_fields:
label: 自定義
validation: 當前 Key 已被占用
buttons:
expand: 查看更多
collapse: 收起
default_editor:
tabs:
toc:
Expand Down Expand Up @@ -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: 已從緩存中恢復未保存的內容
Expand Down