pref: support text alignment config for HASH/LIST/SET/ZSET (#264)

backend/types/preferences.go

@@ -32,6 +32,7 @@ func NewPreferences() Preferences {
 			ShowFolding:    true,
 			DropText:       true,
 			Links:          true,
+			EntryTextAlign: 0,
 		},
 		Cli: PreferencesCli{
 			FontSize:    consts.DEFAULT_FONT_SIZE,
@@ -74,6 +75,7 @@ type PreferencesEditor struct {
 	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 {

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"

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"

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"

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"

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"

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>

frontend/src/components/icons/AlignLeft.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="M42 9H6"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M34 19H6"
+            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="M34 39H6"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+    </svg>
+</template>
+
+<style lang="scss" scoped></style>

frontend/src/consts/text_align_type.js

@@ -0,0 +1,8 @@
+/**
+ * all types of text alignment
+ * @enum {number}
+ */
+export const TextAlignType = {
+    Center: 0,
+    Left: 1,
+}

frontend/src/langs/en-us.json

@@ -126,6 +126,8 @@
     "length": "Length",
     "entries": "Entries",
     "memory_usage": "Memory Usage",
+    "text_align_left": "Text Align Left",
+    "text_align_center": "Text Align Center",
     "view_as": "View As",
     "decode_with": "Decode / Decompress",
     "custom_decoder": "New Custom Decoder",

frontend/src/langs/es-es.json

@@ -126,6 +126,8 @@
     "length": "Longitud",
     "entries": "Entradas",
     "memory_usage": "Uso de memoria",
+    "text_align_left": "Alinear a la izquierda",
+    "text_align_center": "Centrar",
     "view_as": "Ver como",
     "decode_with": "Decodificar / Descomprimir",
     "custom_decoder": "Nuevo decodificador personalizado",

frontend/src/langs/fr-fr.json

@@ -126,6 +126,8 @@
     "length": "Longueur",
     "entries": "Entrées",
     "memory_usage": "Utilisation de la mémoire",
+    "text_align_left": "Aligner à gauche",
+    "text_align_center": "Centrer",
     "view_as": "Voir comme",
     "decode_with": "Décoder / Décompresser",
     "custom_decoder": "Nouveau décodeur personnalisé",

frontend/src/langs/ja-jp.json

@@ -126,6 +126,8 @@
     "length": "長さ",
     "entries": "エントリ",
     "memory_usage": "メモリ使用量",
+    "text_align_left": "左揃え",
+    "text_align_center": "中央揃え",
     "view_as": "表示形式",
     "decode_with": "デコード/解凍",
     "custom_decoder": "新しいカスタムデコーダー",

frontend/src/langs/ko-kr.json

@@ -126,6 +126,8 @@
     "length": "길이",
     "entries": "항목 수",
     "memory_usage": "메모리 사용량",
+    "text_align_left": "텍스트 왼쪽 정렬",
+    "text_align_center": "텍스트 가운데 정렬",
     "view_as": "보기",
     "decode_with": "디코딩/압축 해제",
     "custom_decoder": "새 사용자 정의 디코더",

frontend/src/langs/pt-br.json

@@ -126,6 +126,8 @@
     "length": "Tamanho",
     "entries": "Entradas",
     "memory_usage": "Uso de Memória",
+    "text_align_left": "Alinhar à esquerda",
+    "text_align_center": "Centralizar",
     "view_as": "Visualizar Como",
     "decode_with": "Decodificar / Descompressão",
     "custom_decoder": "Novo Decodificador Personalizado",

frontend/src/langs/ru-ru.json

@@ -126,6 +126,8 @@
     "length": "Длина",
     "entries": "Записи",
     "memory_usage": "Использование памяти",
+    "text_align_left": "Выравнивание по левому краю",
+    "text_align_center": "Выравнивание по центру",
     "view_as": "Вид",
     "decode_with": "Декодировать/Распаковать",
     "custom_decoder": "Новый пользовательский декодер",

frontend/src/langs/zh-cn.json

@@ -126,6 +126,8 @@
     "length": "长度",
     "entries": "条目",
     "memory_usage": "内存占用",
+    "text_align_left": "文本居左",
+    "text_align_center": "文本居中",
     "view_as": "查看方式",
     "decode_with": "解码/解压方式",
     "custom_decoder": "添加自定义解码",

frontend/src/langs/zh-tw.json

@@ -126,6 +126,8 @@
     "length": "長度",
     "entries": "條目",
     "memory_usage": "記憶體使用量",
+    "text_align_left": "文字靠左",
+    "text_align_center": "文字置中",
     "view_as": "檢視方式",
     "decode_with": "解碼/解壓方式",
     "custom_decoder": "新增自定義解碼",

frontend/src/stores/preferences.js

@@ -15,6 +15,7 @@ import { enUS, NButton, NSpace, useOsTheme, zhCN } from 'naive-ui'
 import { h, nextTick } from 'vue'
 import { compareVersion } from '@/utils/version.js'
 import { typesIconStyle } from '@/consts/support_redis_type.js'
+import { TextAlignType } from '@/consts/text_align_type.js'
 
 const osTheme = useOsTheme()
 const usePreferencesStore = defineStore('preferences', {
@@ -63,6 +64,7 @@ const usePreferencesStore = defineStore('preferences', {
             showFolding: true,
             dropText: true,
             links: true,
+            entryTextAlign: TextAlignType.Center,
         },
         cli: {
             fontFamily: [],
@@ -271,6 +273,10 @@ const usePreferencesStore = defineStore('preferences', {
         keyIconType() {
             return get(this.general, 'keyIconStyle', typesIconStyle.SHORT)
         },
+
+        entryTextAlign() {
+            return get(this.editor, 'entryTextAlign', TextAlignType.Center)
+        },
     },
     actions: {
         _applyPreferences(data) {