lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf: moved all labels in form item to the top for adjust long text

This commit is contained in:
tiny-craft 2023-08-23 12:00:02 +08:00
parent fa9d1850c7
commit bb3316a67a
13 changed files with 32 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/content_value/ContentValueString.vue
View File

@ -199,7 +199,7 @@ const onSaveValue = async () => {
<template #icon>
<n-icon :component="Close" size="18" />
</template>
{{ $t('cancel_update') }}
{{ $t('cancel') }}
</n-button>
</n-button-group>
</div>

10
frontend/src/components/dialogs/AddFieldsDialog.vue
View File

@ -24,7 +24,6 @@ const newForm = reactive({
reload: true,
})
const formLabelWidth = '60px'
const addValueComponent = {
[types.STRING]: NewStringValue,
[types.HASH]: AddHashValue,
@ -202,14 +201,7 @@ const onClose = () => {
@negative-click="onClose"
>
<n-scrollbar style="max-height: 500px">
<n-form
:label-width="formLabelWidth"
:model="newForm"
:show-require-mark="false"
label-align="right"
label-placement="left"
style="padding-right: 15px"
>
<n-form :model="newForm" :show-require-mark="false" label-placement="top" style="padding-right: 15px">
<n-form-item :label="$t('key')" path="key" required>
<n-input v-model:value="newForm.key" placeholder="" readonly />
</n-form-item>

21
frontend/src/components/dialogs/ConnectionDialog.vue
View File

@ -52,19 +52,6 @@ const tab = ref('general')
const testing = ref(false)
const showTestResult = ref(false)
const testResult = ref('')
const showTestConnSuccResult = computed(() => {
return isEmpty(testResult.value) && showTestResult.value === true
})
const showTestConnFailResult = computed(() => {
return !isEmpty(testResult.value) && showTestResult.value === true
})
const formLabelWidth = computed(() => {
// compatible with long english word
if (tab.value === 'advanced' && i18n.locale.value === 'en') {
return '140px'
}
return '80px'
})
const predefineColors = ref(['', '#F75B52', '#F7A234', '#F7CE33', '#4ECF60', '#348CF7', '#B270D3'])
const generalFormRef = ref(null)
const advanceFormRef = ref(null)
@ -163,12 +150,10 @@ const onClose = () => {
<n-tab-pane :tab="$t('general')" display-directive="show" name="general">
<n-form
ref="generalFormRef"
:label-width="formLabelWidth"
:model="generalForm"
:rules="generalFormRules()"
:show-require-mark="false"
label-align="right"
label-placement="left"
label-placement="top"
>
<n-form-item :label="$t('conn_name')" path="name" required>
<n-input v-model:value="generalForm.name" :placeholder="$t('conn_name_tip')" />
@ -203,12 +188,10 @@ const onClose = () => {
<n-tab-pane :tab="$t('advanced')" display-directive="show" name="advanced">
<n-form
ref="advanceFormRef"
:label-width="formLabelWidth"
:model="generalForm"
:rules="generalFormRules()"
:show-require-mark="false"
label-align="right"
label-placement="left"
label-placement="top"
>
<n-form-item :label="$t('conn_advn_filter')" path="defaultFilter">
<n-input

8
frontend/src/components/dialogs/DeleteKeyDialog.vue
View File

@ -79,13 +79,7 @@ const onClose = () => {
preset="dialog"
transform-origin="center"
>
<n-form
:model="deleteForm"
:show-require-mark="false"
label-align="right"
label-placement="left"
label-width="auto"
>
<n-form :model="deleteForm" :show-require-mark="false" label-placement="top">
<n-form-item :label="$t('server')">
<n-input :value="deleteForm.server" readonly />
</n-form-item>

8
frontend/src/components/dialogs/GroupDialog.vue
View File

@ -80,13 +80,7 @@ const onClose = () => {
@positive-click="onConfirm"
@negative-click="onClose"
>
<n-form
:model="groupForm"
:show-require-mark="false"
label-align="left"
label-placement="left"
label-width="auto"
>
<n-form :model="groupForm" :show-label="false" :show-require-mark="false" label-placement="top">
<n-form-item :label="$t('group_name')" required>
<n-input v-model:value="groupForm.name" placeholder="" />
</n-form-item>

5
frontend/src/components/dialogs/KeyFilterDialog.vue
View File

@ -25,7 +25,6 @@ const typeOptions = computed(() => {
return options
})
const formLabelWidth = '100px'
const dialogStore = useDialog()
watch(
() => dialogStore.keyFilterDialogVisible,
@ -72,11 +71,9 @@ const onClose = () => {
>
<n-form
ref="filterFormRef"
:label-width="formLabelWidth"
:model="filterForm"
:show-require-mark="false"
label-align="right"
label-placement="left"
label-placement="top"
style="padding-right: 15px"
>
<n-form-item :label="$t('server')" path="key">

5
frontend/src/components/dialogs/NewKeyDialog.vue
View File

@ -41,7 +41,6 @@ const dbOptions = computed(() =>
const newFormRef = ref(null)
const subFormRef = ref(null)
const formLabelWidth = '100px'
const options = computed(() => {
return Object.keys(types).map((t) => ({
value: t,
@ -157,12 +156,10 @@ const onClose = () => {
<n-scrollbar style="max-height: 500px">
<n-form
ref="newFormRef"
:label-width="formLabelWidth"
:model="newForm"
:rules="formRules"
:show-require-mark="false"
label-align="right"
label-placement="left"
label-placement="top"
style="padding-right: 15px"
>
<n-form-item :label="$t('key')" path="key" required>

23
frontend/src/components/dialogs/PreferencesDialog.vue
View File

@ -9,7 +9,6 @@ const prefStore = usePreferencesStore()
const prevPreferences = ref({})
const tab = ref('general')
const formLabelWidth = '80px'
const dialogStore = useDialog()
const i18n = useI18n()
const message = useMessage()
@ -76,14 +75,7 @@ const onClose = () => {
<!-- <n-spin :show="loading"> -->
<n-tabs v-model:value="tab" animated type="line">
<n-tab-pane :tab="$t('general')" display-directive="show" name="general">
<n-form
:disabled="loading"
:label-width="formLabelWidth"
:model="prefStore.general"
:show-require-mark="false"
label-align="right"
label-placement="left"
>
<n-form :disabled="loading" :model="prefStore.general" :show-require-mark="false" label-placement="top">
<n-form-item :label="$t('theme')" required>
<n-radio-group v-model:value="prefStore.general.theme" name="theme" size="medium">
<n-radio-button v-for="opt in prefStore.themeOption" :key="opt.value" :value="opt.value">
@ -123,14 +115,7 @@ const onClose = () => {
</n-tab-pane>
<n-tab-pane :tab="$t('editor')" display-directive="show" name="editor">
<n-form
:disabled="loading"
:label-width="formLabelWidth"
:model="prefStore.editor"
:show-require-mark="false"
label-align="right"
label-placement="left"
>
<n-form :disabled="loading" :model="prefStore.editor" :show-require-mark="false" label-placement="top">
<n-form-item :label="$t('font')" required>
<n-select v-model:value="prefStore.editor.font" :options="prefStore.fontOption" filterable />
</n-form-item>
@ -144,8 +129,8 @@ const onClose = () => {
<template #action>
<div class="flex-item-expand">
<n-button :disabled="loading" @click="prefStore.restorePreferences"
>{{ $t('restore_defaults') }}
<n-button :disabled="loading" @click="prefStore.restorePreferences">
{{ $t('restore_defaults') }}
</n-button>
</div>
<div class="flex-item n-dialog__action">

4
frontend/src/components/dialogs/RenameKeyDialog.vue
View File

@ -70,9 +70,9 @@ const onClose = () => {
<n-form
:model="renameForm"
:show-require-mark="false"
:show-label="false"
label-align="left"
label-placement="left"
label-width="auto"
label-placement="top"
>
<n-form-item :label="$t('new_key_name')" required>
<n-input v-model:value="renameForm.newKey" />

9
frontend/src/components/dialogs/SetTtlDialog.vue
View File

@ -8,7 +8,6 @@ const ttlForm = reactive({
ttl: -1,
})
const formLabelWidth = '80px'
const dialogStore = useDialog()
const connectionStore = useConnectionStore()
const tabStore = useTabStore()
@ -74,13 +73,7 @@ const onConfirm = async () => {
preset="dialog"
transform-origin="center"
>
<n-form
:label-width="formLabelWidth"
:model="ttlForm"
:show-require-mark="false"
label-align="right"
label-placement="left"
>
<n-form :model="ttlForm" :show-require-mark="false" label-placement="top">
<n-form-item :label="$t('key')">
<n-input :value="currentKey" readonly />
</n-form-item>

1
frontend/src/langs/en.json
View File

@ -32,7 +32,6 @@
"copy_value": "Copy Value",
"edit_value": "Edit Value",
"save_update": "Save Update",
"cancel_update": "Cancel Update",
"score_filter_tip": "Support operator list below:\n= equal\n!= not equal\n> greater than\n>= greater than or equal to\n< less than\n<= less than or equal to\nfor example you want to filter results which greater than 3, input: >3",
"add_row": "Add Row",
"edit_row": "Edit Row",

1
frontend/src/langs/zh-cn.json
View File

@ -32,7 +32,6 @@
"copy_value": "复制值",
"edit_value": "修改值",
"save_update": "保存修改",
"cancel_update": "取消修改",
"score_filter_tip": "支持如下运算符比较匹配范围\n＝：等于\n!=：不等于\n>：大于\n<：小于\n>=：大于等于\n<=：小于等于\n如查询分值大于3的结果，则输入：>3",
"add_row": "插入行",
"edit_row": "编辑行",

17
frontend/src/utils/theme.js
View File

@ -21,4 +21,21 @@ export const themeOverrides = {
tabGapMediumCard: '1px',
tabGapLargeCard: '1px',
},
Form: {
labelFontSizeTopSmall: '12px',
labelFontSizeTopMedium: '13px',
labelFontSizeTopLarge: '13px',
labelHeightSmall: '18px',
labelHeightMedium: '18px',
labelHeightLarge: '18px',
labelPaddingVertical: '0 0 5px 2px',
feedbackHeightSmall: '18px',
feedbackHeightMedium: '18px',
feedbackHeightLarge: '20px',
feedbackFontSizeSmall: '11px',
feedbackFontSizeMedium: '12px',
feedbackFontSizeLarge: '12px',
labelTextColor: 'rgb(113,120,128)',
labelFontWeight: '450',
},
}