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 2 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
95 changes: 69 additions & 26 deletions ui/src/components/form/AnnotationsForm.vue
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
<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";
import { cloneDeep } from "lodash-es";
import { getValidationMessages } from "@formkit/validation";
import { useThemeStore } from "@console/stores/theme";
import { randomUUID } from "@/utils/id";
import { useSessionStorage } from "@vueuse/core";

const themeStore = useThemeStore();

Expand Down Expand Up @@ -196,6 +200,12 @@ defineExpose({
annotations,
customAnnotations,
});

const showCustomForm = useSessionStorage("annotations-show-custom-form", false);

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

<template>
Expand All @@ -219,34 +229,67 @@ 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("core.common.buttons.view_more") }}
</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>
17 changes: 9 additions & 8 deletions ui/src/locales/en.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -1464,14 +1464,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 Expand Up @@ -1524,6 +1524,7 @@ core:
verify: Verify
modify: Modify
access: Access
view_more: View more
radio:
"yes": "Yes"
"no": "No"
Expand Down
17 changes: 9 additions & 8 deletions ui/src/locales/zh-CN.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -1410,14 +1410,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 Expand Up @@ -1470,6 +1470,7 @@ core:
verify: 验证
modify: 修改
access: 访问
view_more: 查看更多
radio:
"yes": 是
"no": 否
Expand Down
17 changes: 9 additions & 8 deletions ui/src/locales/zh-TW.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -1376,14 +1376,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 Expand Up @@ -1436,6 +1436,7 @@ core:
modify: 修改
verify: 驗證
access: 訪問
view_more: 查看更多
radio:
"yes": 是
"no": 否
Expand Down