pref: support text alignment config for HASH/LIST/SET/ZSET (tiny-craf…

…t#264)
fansenhua · Jul 26, 2024 · 5deb6ce · 5deb6ce
1 parent ee398d4
commit 5deb6ce
Show file tree

Hide file tree

Showing 19 changed files with 201 additions and 31 deletions.
diff --git a/backend/types/preferences.go b/backend/types/preferences.go
@@ -27,11 +27,12 @@ func NewPreferences() Preferences {
 			AllowTrack:   true,
 		},
 		Editor: PreferencesEditor{
-			FontSize:    consts.DEFAULT_FONT_SIZE,
-			ShowLineNum: true,
-			ShowFolding: true,
-			DropText:    true,
-			Links:       true,
+			FontSize:       consts.DEFAULT_FONT_SIZE,
+			ShowLineNum:    true,
+			ShowFolding:    true,
+			DropText:       true,
+			Links:          true,
+			EntryTextAlign: 0,
 		},
 		Cli: PreferencesCli{
 			FontSize:    consts.DEFAULT_FONT_SIZE,
@@ -67,13 +68,14 @@ type PreferencesGeneral struct {
 }
 
 type PreferencesEditor struct {
-	Font        string   `json:"font" yaml:"font,omitempty"`
-	FontFamily  []string `json:"fontFamily" yaml:"font_family,omitempty"`
-	FontSize    int      `json:"fontSize" yaml:"font_size"`
-	ShowLineNum bool     `json:"showLineNum" yaml:"show_line_num"`
-	ShowFolding bool     `json:"showFolding" yaml:"show_folding"`
-	DropText    bool     `json:"dropText" yaml:"drop_text"`
-	Links       bool     `json:"links" yaml:"links"`
+	Font           string   `json:"font" yaml:"font,omitempty"`
+	FontFamily     []string `json:"fontFamily" yaml:"font_family,omitempty"`
+	FontSize       int      `json:"fontSize" yaml:"font_size"`
+	ShowLineNum    bool     `json:"showLineNum" yaml:"show_line_num"`
+	ShowFolding    bool     `json:"showFolding" yaml:"show_folding"`
+	DropText       bool     `json:"dropText" yaml:"drop_text"`
+	Links          bool     `json:"links" yaml:"links"`
+	EntryTextAlign int      `json:"entryTextAlign" yaml:"entry_text_align"`
 }
 
 type PreferencesCli struct {

diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue
@@ -19,6 +19,10 @@ import { decodeRedisKey } from '@/utils/key_convert.js'
 import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue'
 import { formatBytes } from '@/utils/byte_convert.js'
 import copy from 'copy-text-to-clipboard'
+import SwitchButton from '@/components/common/SwitchButton.vue'
+import AlignLeft from '@/components/icons/AlignLeft.vue'
+import AlignCenter from '@/components/icons/AlignCenter.vue'
+import { TextAlignType } from '@/consts/text_align_type.js'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -45,9 +49,10 @@ const props = defineProps({
     decode: String,
     end: Boolean,
     loading: Boolean,
+    textAlign: Number,
 })
 
-const emit = defineEmits(['loadmore', 'loadall', 'reload', 'match'])
+const emit = defineEmits(['loadmore', 'loadall', 'reload', 'match', 'update:textAlign'])
 
 /**
  *
@@ -78,7 +83,7 @@ const fieldFilterOption = ref(null)
 const fieldColumn = computed(() => ({
     key: 'key',
     title: () => i18n.t('common.field'),
-    align: 'center',
+    align: props.textAlign !== TextAlignType.Left ? 'center' : 'left',
     titleAlign: 'center',
     resizable: true,
     ellipsis: {
@@ -111,7 +116,7 @@ const isCode = computed(() => {
 const valueColumn = computed(() => ({
     key: 'value',
     title: () => i18n.t('common.value'),
-    align: isCode.value ? 'left' : 'center',
+    align: isCode.value ? 'left' : props.textAlign !== TextAlignType.Left ? 'center' : 'left',
     titleAlign: 'center',
     resizable: true,
     ellipsis: isCode.value
@@ -264,7 +269,7 @@ const columns = computed(() => {
                 key: 'no',
                 title: '#',
                 width: 80,
-                align: 'center',
+                align: props.textAlign !== TextAlignType.Left ? 'center' : 'left',
                 titleAlign: 'center',
                 render: (row, index) => {
                     return index + 1
@@ -280,7 +285,7 @@ const columns = computed(() => {
                 key: 'no',
                 title: '#',
                 width: 80,
-                align: 'center',
+                align: props.textAlign !== TextAlignType.Left ? 'center' : 'left',
                 titleAlign: 'center',
                 render: (row, index) => {
                     if (index + 1 === currentEditRow.no) {
@@ -442,6 +447,13 @@ defineExpose({
             <n-divider v-if="showMemoryUsage" vertical />
             <n-text v-if="showMemoryUsage">{{ $t('interface.memory_usage') }}: {{ formatBytes(props.size) }}</n-text>
             <div class="flex-item-expand"></div>
+            <switch-button
+                :icons="[AlignCenter, AlignLeft]"
+                :stroke-width="3.5"
+                :t-tooltips="['interface.text_align_center', 'interface.text_align_left']"
+                :value="props.textAlign"
+                unselect-stroke-width="3"
+                @update:value="(val) => emit('update:textAlign', val)" />
             <format-selector
                 v-show="!inEdit"
                 :decode="props.decode"

diff --git a/frontend/src/components/content_value/ContentValueList.vue b/frontend/src/components/content_value/ContentValueList.vue
@@ -18,6 +18,10 @@ import Edit from '@/components/icons/Edit.vue'
 import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue'
 import { formatBytes } from '@/utils/byte_convert.js'
 import copy from 'copy-text-to-clipboard'
+import { TextAlignType } from '@/consts/text_align_type.js'
+import AlignLeft from '@/components/icons/AlignLeft.vue'
+import AlignCenter from '@/components/icons/AlignCenter.vue'
+import SwitchButton from '@/components/common/SwitchButton.vue'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -51,9 +55,10 @@ const props = defineProps({
     },
     end: Boolean,
     loading: Boolean,
+    textAlign: Number,
 })
 
-const emit = defineEmits(['loadmore', 'loadall', 'reload', 'match'])
+const emit = defineEmits(['loadmore', 'loadall', 'reload', 'match', 'update:textAlign'])
 
 /**
  *
@@ -84,7 +89,7 @@ const valueFilterOption = ref(null)
 const valueColumn = computed(() => ({
     key: 'value',
     title: () => i18n.t('common.value'),
-    align: isCode.value ? 'left' : 'center',
+    align: isCode.value ? 'left' : props.textAlign !== TextAlignType.Left ? 'center' : 'left',
     titleAlign: 'center',
     ellipsis: isCode.value
         ? false
@@ -214,7 +219,7 @@ const columns = computed(() => {
                 key: 'no',
                 title: '#',
                 width: 80,
-                align: 'center',
+                align: props.textAlign !== TextAlignType.Left ? 'center' : 'left',
                 titleAlign: 'center',
                 render: (row, index) => {
                     return index + 1
@@ -229,7 +234,7 @@ const columns = computed(() => {
                 key: 'no',
                 title: '#',
                 width: 80,
-                align: 'center',
+                align: props.textAlign !== TextAlignType.Left ? 'center' : 'left',
                 titleAlign: 'center',
                 render: (row, index) => {
                     if (index + 1 === currentEditRow.no) {
@@ -391,6 +396,13 @@ defineExpose({
             <n-divider v-if="showMemoryUsage" vertical />
             <n-text v-if="showMemoryUsage">{{ $t('interface.memory_usage') }}: {{ formatBytes(props.size) }}</n-text>
             <div class="flex-item-expand"></div>
+            <switch-button
+                :icons="[AlignCenter, AlignLeft]"
+                :stroke-width="3.5"
+                :t-tooltips="['interface.text_align_center', 'interface.text_align_left']"
+                :value="props.textAlign"
+                unselect-stroke-width="3"
+                @update:value="(val) => emit('update:textAlign', val)" />
             <format-selector
                 v-show="!inEdit"
                 :decode="props.decode"

diff --git a/frontend/src/components/content_value/ContentValueSet.vue b/frontend/src/components/content_value/ContentValueSet.vue
@@ -18,6 +18,10 @@ import FormatSelector from '@/components/content_value/FormatSelector.vue'
 import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue'
 import { formatBytes } from '@/utils/byte_convert.js'
 import copy from 'copy-text-to-clipboard'
+import AlignLeft from '@/components/icons/AlignLeft.vue'
+import AlignCenter from '@/components/icons/AlignCenter.vue'
+import SwitchButton from '@/components/common/SwitchButton.vue'
+import { TextAlignType } from '@/consts/text_align_type.js'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -50,9 +54,10 @@ const props = defineProps({
     },
     end: Boolean,
     loading: Boolean,
+    textAlign: Number,
 })
 
-const emit = defineEmits(['loadmore', 'loadall', 'reload', 'match'])
+const emit = defineEmits(['loadmore', 'loadall', 'reload', 'match', 'update:textAlign'])
 
 /**
  *
@@ -83,7 +88,7 @@ const valueFilterOption = ref(null)
 const valueColumn = computed(() => ({
     key: 'value',
     title: () => i18n.t('common.value'),
-    align: isCode.value ? 'left' : 'center',
+    align: isCode.value ? 'left' : props.textAlign !== TextAlignType.Left ? 'center' : 'left',
     titleAlign: 'center',
     ellipsis: isCode.value
         ? false
@@ -211,7 +216,7 @@ const columns = computed(() => {
                 key: 'no',
                 title: '#',
                 width: 80,
-                align: 'center',
+                align: props.textAlign !== TextAlignType.Left ? 'center' : 'left',
                 titleAlign: 'center',
                 render: (row, index) => {
                     return index + 1
@@ -226,7 +231,7 @@ const columns = computed(() => {
                 key: 'no',
                 title: '#',
                 width: 80,
-                align: 'center',
+                align: props.textAlign !== TextAlignType.Left ? 'center' : 'left',
                 titleAlign: 'center',
                 render: (row, index) => {
                     if (index + 1 === currentEditRow.no) {
@@ -388,6 +393,13 @@ defineExpose({
             <n-divider v-if="showMemoryUsage" vertical />
             <n-text v-if="showMemoryUsage">{{ $t('interface.memory_usage') }}: {{ formatBytes(props.size) }}</n-text>
             <div class="flex-item-expand"></div>
+            <switch-button
+                :icons="[AlignCenter, AlignLeft]"
+                :stroke-width="3.5"
+                :t-tooltips="['interface.text_align_center', 'interface.text_align_left']"
+                :value="props.textAlign"
+                unselect-stroke-width="3"
+                @update:value="(val) => emit('update:textAlign', val)" />
             <format-selector
                 v-show="!inEdit"
                 :decode="props.decode"

diff --git a/frontend/src/components/content_value/ContentValueWrapper.vue b/frontend/src/components/content_value/ContentValueWrapper.vue
@@ -14,10 +14,13 @@ import useDialogStore from 'stores/dialog.js'
 import { useI18n } from 'vue-i18n'
 import ContentToolbar from '@/components/content_value/ContentToolbar.vue'
 import ContentValueJson from '@/components/content_value/ContentValueJson.vue'
+import usePreferencesStore from 'stores/preferences.js'
+import { TextAlignType } from '@/consts/text_align_type.js'
 
 const themeVars = useThemeVars()
 const browserStore = useBrowserStore()
 const dialogStore = useDialogStore()
+const prefStore = usePreferencesStore()
 
 const props = defineProps({
     blank: Boolean,
@@ -178,6 +181,11 @@ const onMatch = (match) => {
     loadData(true, false, match || '')
 }
 
+const onEntryTextAlignChanged = (align) => {
+    prefStore.editor.entryTextAlign = align !== TextAlignType.Left ? TextAlignType.Center : TextAlignType.Left
+    prefStore.savePreferences()
+}
+
 const contentRef = ref(null)
 const initContent = async () => {
     // onReload()
@@ -225,12 +233,14 @@ watch(() => data.value?.keyPath, initContent)
         :ttl="data.ttl"
         :value="data.value"
         tabindex="0"
+        :text-align="prefStore.entryTextAlign"
         @delete="onDelete"
         @keydown="onKeyShortcut"
         @loadall="onLoadAll"
         @loadmore="onLoadMore"
         @match="onMatch"
-        @reload="onReload">
+        @reload="onReload"
+        @update:text-align="onEntryTextAlignChanged">
         <template #toolbar>
             <content-toolbar
                 :db="data.db"

diff --git a/frontend/src/components/content_value/ContentValueZSet.vue b/frontend/src/components/content_value/ContentValueZSet.vue
@@ -18,6 +18,10 @@ import Edit from '@/components/icons/Edit.vue'
 import ContentSearchInput from '@/components/content_value/ContentSearchInput.vue'
 import { formatBytes } from '@/utils/byte_convert.js'
 import copy from 'copy-text-to-clipboard'
+import { TextAlignType } from '@/consts/text_align_type.js'
+import AlignLeft from '@/components/icons/AlignLeft.vue'
+import AlignCenter from '@/components/icons/AlignCenter.vue'
+import SwitchButton from '@/components/common/SwitchButton.vue'
 
 const i18n = useI18n()
 const themeVars = useThemeVars()
@@ -50,9 +54,10 @@ const props = defineProps({
     },
     end: Boolean,
     loading: Boolean,
+    textAlign: Number,
 })
 
-const emit = defineEmits(['loadmore', 'loadall', 'reload', 'match'])
+const emit = defineEmits(['loadmore', 'loadall', 'reload', 'match', 'update:textAlign'])
 
 /**
  *
@@ -82,7 +87,7 @@ const fullEdit = ref(false)
 const scoreColumn = computed(() => ({
     key: 'score',
     title: () => i18n.t('common.score'),
-    align: 'center',
+    align: props.textAlign !== TextAlignType.Left ? 'center' : 'left',
     titleAlign: 'center',
     resizable: true,
     sorter: (row1, row2) => row1.s - row2.s,
@@ -131,7 +136,7 @@ const valueFilterOption = ref(null)
 const valueColumn = computed(() => ({
     key: 'value',
     title: () => i18n.t('common.value'),
-    align: isCode.value ? 'left' : 'center',
+    align: isCode.value ? 'left' : props.textAlign !== TextAlignType.Left ? 'center' : 'left',
     titleAlign: 'center',
     resizable: true,
     ellipsis: isCode.value
@@ -256,7 +261,7 @@ const columns = computed(() => {
                 key: 'no',
                 title: '#',
                 width: 80,
-                align: 'center',
+                align: props.textAlign !== TextAlignType.Left ? 'center' : 'left',
                 titleAlign: 'center',
                 render: (row, index) => {
                     return index + 1
@@ -272,7 +277,7 @@ const columns = computed(() => {
                 key: 'no',
                 title: '#',
                 width: 80,
-                align: 'center',
+                align: props.textAlign !== TextAlignType.Left ? 'center' : 'left',
                 titleAlign: 'center',
                 render: (row, index) => {
                     if (index + 1 === currentEditRow.no) {
@@ -421,6 +426,13 @@ defineExpose({
             <n-divider v-if="showMemoryUsage" vertical />
             <n-text v-if="showMemoryUsage">{{ $t('interface.memory_usage') }}: {{ formatBytes(props.size) }}</n-text>
             <div class="flex-item-expand"></div>
+            <switch-button
+                :icons="[AlignCenter, AlignLeft]"
+                :stroke-width="3.5"
+                :t-tooltips="['interface.text_align_center', 'interface.text_align_left']"
+                :value="props.textAlign"
+                unselect-stroke-width="3"
+                @update:value="(val) => emit('update:textAlign', val)" />
             <format-selector
                 v-show="!inEdit"
                 :decode="props.decode"

diff --git a/frontend/src/components/icons/AlignCenter.vue b/frontend/src/components/icons/AlignCenter.vue
@@ -0,0 +1,39 @@
+<script setup>
+const props = defineProps({
+    strokeWidth: {
+        type: [Number, String],
+        default: 3,
+    },
+})
+</script>
+
+<template>
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M36 19H12"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M42 9H6"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M42 29H6"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M36 39H12"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+    </svg>
+</template>
+
+<style lang="scss" scoped></style>