perf: add drag and drop text option in preferences. #140
This commit is contained in:
parent
450e451781
commit
ce1b9b706f
|
@ -29,6 +29,7 @@ func NewPreferences() Preferences {
|
||||||
FontSize: consts.DEFAULT_FONT_SIZE,
|
FontSize: consts.DEFAULT_FONT_SIZE,
|
||||||
ShowLineNum: true,
|
ShowLineNum: true,
|
||||||
ShowFolding: true,
|
ShowFolding: true,
|
||||||
|
DropText: true,
|
||||||
},
|
},
|
||||||
Cli: PreferencesCli{
|
Cli: PreferencesCli{
|
||||||
FontSize: consts.DEFAULT_FONT_SIZE,
|
FontSize: consts.DEFAULT_FONT_SIZE,
|
||||||
|
@ -67,6 +68,7 @@ type PreferencesEditor struct {
|
||||||
FontSize int `json:"fontSize" yaml:"font_size"`
|
FontSize int `json:"fontSize" yaml:"font_size"`
|
||||||
ShowLineNum bool `json:"showLineNum" yaml:"show_line_num"`
|
ShowLineNum bool `json:"showLineNum" yaml:"show_line_num"`
|
||||||
ShowFolding bool `json:"showFolding" yaml:"show_folding"`
|
ShowFolding bool `json:"showFolding" yaml:"show_folding"`
|
||||||
|
DropText bool `json:"dropText" yaml:"drop_text"`
|
||||||
}
|
}
|
||||||
|
|
||||||
type PreferencesCli struct {
|
type PreferencesCli struct {
|
||||||
|
|
|
@ -18,14 +18,6 @@ const props = defineProps({
|
||||||
loading: {
|
loading: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
},
|
},
|
||||||
showLineNum: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
showFolding: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
border: {
|
border: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
|
@ -63,13 +55,14 @@ onMounted(async () => {
|
||||||
// value: props.content,
|
// value: props.content,
|
||||||
theme: pref.isDark ? 'rdm-dark' : 'rdm-light',
|
theme: pref.isDark ? 'rdm-dark' : 'rdm-light',
|
||||||
language: props.language,
|
language: props.language,
|
||||||
lineNumbers: props.showLineNum ? 'on' : 'off',
|
lineNumbers: pref.showLineNum ? 'on' : 'off',
|
||||||
readOnly: readonlyValue.value,
|
readOnly: readonlyValue.value,
|
||||||
colorDecorators: true,
|
colorDecorators: true,
|
||||||
accessibilitySupport: 'off',
|
accessibilitySupport: 'off',
|
||||||
wordWrap: 'on',
|
wordWrap: 'on',
|
||||||
tabSize: 2,
|
tabSize: 2,
|
||||||
folding: props.showFolding !== false,
|
folding: pref.showFolding,
|
||||||
|
dragAndDrop: pref.dropText,
|
||||||
fontFamily,
|
fontFamily,
|
||||||
fontSize,
|
fontSize,
|
||||||
scrollBeyondLastLine: false,
|
scrollBeyondLastLine: false,
|
||||||
|
@ -151,37 +144,20 @@ watch(
|
||||||
)
|
)
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => pref.editorFont,
|
() => pref.editor,
|
||||||
({ fontSize, fontFamily }) => {
|
({ showLineNum = true, showFolding = true, dropText = true }) => {
|
||||||
if (editorNode != null) {
|
if (editorNode != null) {
|
||||||
|
const { fontSize, fontFamily } = pref.editorFont
|
||||||
editorNode.updateOptions({
|
editorNode.updateOptions({
|
||||||
fontSize,
|
fontSize,
|
||||||
fontFamily,
|
fontFamily,
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
)
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => pref.showLineNum,
|
|
||||||
(showLineNum) => {
|
|
||||||
if (editorNode != null) {
|
|
||||||
editorNode.updateOptions({
|
|
||||||
lineNumbers: showLineNum ? 'on' : 'off',
|
lineNumbers: showLineNum ? 'on' : 'off',
|
||||||
|
folding: showFolding,
|
||||||
|
dragAndDrop: dropText,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
)
|
{ deep: true },
|
||||||
|
|
||||||
watch(
|
|
||||||
() => pref.showFolding,
|
|
||||||
(showFolding) => {
|
|
||||||
if (editorNode != null) {
|
|
||||||
editorNode.updateOptions({
|
|
||||||
folding: showFolding !== false,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
)
|
)
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
|
|
|
@ -12,7 +12,6 @@ import WindowClose from '@/components/icons/WindowClose.vue'
|
||||||
import Pin from '@/components/icons/Pin.vue'
|
import Pin from '@/components/icons/Pin.vue'
|
||||||
import OffScreen from '@/components/icons/OffScreen.vue'
|
import OffScreen from '@/components/icons/OffScreen.vue'
|
||||||
import ContentEditor from '@/components/content_value/ContentEditor.vue'
|
import ContentEditor from '@/components/content_value/ContentEditor.vue'
|
||||||
import usePreferencesStore from 'stores/preferences.js'
|
|
||||||
import { toString } from 'lodash'
|
import { toString } from 'lodash'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
@ -47,7 +46,6 @@ const props = defineProps({
|
||||||
|
|
||||||
const themeVars = useThemeVars()
|
const themeVars = useThemeVars()
|
||||||
const browserStore = useBrowserStore()
|
const browserStore = useBrowserStore()
|
||||||
const prefStore = usePreferencesStore()
|
|
||||||
const emit = defineEmits([
|
const emit = defineEmits([
|
||||||
'update:field',
|
'update:field',
|
||||||
'update:value',
|
'update:value',
|
||||||
|
@ -176,8 +174,6 @@ const onSave = () => {
|
||||||
:border="true"
|
:border="true"
|
||||||
:content="displayValue"
|
:content="displayValue"
|
||||||
:language="viewLanguage"
|
:language="viewLanguage"
|
||||||
:show-folding="prefStore.showFolding"
|
|
||||||
:show-line-num="prefStore.showLineNum"
|
|
||||||
class="flex-item-expand"
|
class="flex-item-expand"
|
||||||
@input="onInput"
|
@input="onInput"
|
||||||
@reset="onInput"
|
@reset="onInput"
|
||||||
|
|
|
@ -12,7 +12,6 @@ import useBrowserStore from 'stores/browser.js'
|
||||||
import { decodeRedisKey } from '@/utils/key_convert.js'
|
import { decodeRedisKey } from '@/utils/key_convert.js'
|
||||||
import FormatSelector from '@/components/content_value/FormatSelector.vue'
|
import FormatSelector from '@/components/content_value/FormatSelector.vue'
|
||||||
import ContentEditor from '@/components/content_value/ContentEditor.vue'
|
import ContentEditor from '@/components/content_value/ContentEditor.vue'
|
||||||
import usePreferencesStore from 'stores/preferences.js'
|
|
||||||
import { formatBytes } from '@/utils/byte_convert.js'
|
import { formatBytes } from '@/utils/byte_convert.js'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
|
@ -35,7 +34,6 @@ const props = defineProps({
|
||||||
|
|
||||||
const i18n = useI18n()
|
const i18n = useI18n()
|
||||||
const themeVars = useThemeVars()
|
const themeVars = useThemeVars()
|
||||||
const prefStore = usePreferencesStore()
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
|
@ -205,8 +203,6 @@ defineExpose({
|
||||||
:content="displayValue"
|
:content="displayValue"
|
||||||
:language="viewLanguage"
|
:language="viewLanguage"
|
||||||
:loading="props.loading"
|
:loading="props.loading"
|
||||||
:show-folding="prefStore.showFolding"
|
|
||||||
:show-line-num="prefStore.showLineNum"
|
|
||||||
class="flex-item-expand"
|
class="flex-item-expand"
|
||||||
style="height: 100%"
|
style="height: 100%"
|
||||||
@input="onInput"
|
@input="onInput"
|
||||||
|
|
|
@ -181,6 +181,7 @@ const onClose = () => {
|
||||||
placement="left"
|
placement="left"
|
||||||
tab-style="justify-content: right; font-weight: 420;"
|
tab-style="justify-content: right; font-weight: 420;"
|
||||||
type="line">
|
type="line">
|
||||||
|
<!-- general pane -->
|
||||||
<n-tab-pane :tab="$t('preferences.general.name')" display-directive="show" name="general">
|
<n-tab-pane :tab="$t('preferences.general.name')" display-directive="show" name="general">
|
||||||
<n-form :disabled="loading" :model="prefStore.general" :show-require-mark="false" label-placement="top">
|
<n-form :disabled="loading" :model="prefStore.general" :show-require-mark="false" label-placement="top">
|
||||||
<n-grid :x-gap="10">
|
<n-grid :x-gap="10">
|
||||||
|
@ -257,6 +258,7 @@ const onClose = () => {
|
||||||
</n-form>
|
</n-form>
|
||||||
</n-tab-pane>
|
</n-tab-pane>
|
||||||
|
|
||||||
|
<!-- editor pane -->
|
||||||
<n-tab-pane :tab="$t('preferences.editor.name')" display-directive="show" name="editor">
|
<n-tab-pane :tab="$t('preferences.editor.name')" display-directive="show" name="editor">
|
||||||
<n-form :disabled="loading" :model="prefStore.editor" :show-require-mark="false" label-placement="top">
|
<n-form :disabled="loading" :model="prefStore.editor" :show-require-mark="false" label-placement="top">
|
||||||
<n-grid :x-gap="10">
|
<n-grid :x-gap="10">
|
||||||
|
@ -294,10 +296,16 @@ const onClose = () => {
|
||||||
{{ $t('preferences.editor.show_folding') }}
|
{{ $t('preferences.editor.show_folding') }}
|
||||||
</n-checkbox>
|
</n-checkbox>
|
||||||
</n-form-item-gi>
|
</n-form-item-gi>
|
||||||
|
<n-form-item-gi :show-feedback="false" :show-label="false" :span="24">
|
||||||
|
<n-checkbox v-model:checked="prefStore.editor.dropText">
|
||||||
|
{{ $t('preferences.editor.drop_text') }}
|
||||||
|
</n-checkbox>
|
||||||
|
</n-form-item-gi>
|
||||||
</n-grid>
|
</n-grid>
|
||||||
</n-form>
|
</n-form>
|
||||||
</n-tab-pane>
|
</n-tab-pane>
|
||||||
|
|
||||||
|
<!-- cli pane -->
|
||||||
<n-tab-pane :tab="$t('preferences.cli.name')" display-directive="show" name="cli">
|
<n-tab-pane :tab="$t('preferences.cli.name')" display-directive="show" name="cli">
|
||||||
<n-form :disabled="loading" :model="prefStore.cli" :show-require-mark="false" label-placement="top">
|
<n-form :disabled="loading" :model="prefStore.cli" :show-require-mark="false" label-placement="top">
|
||||||
<n-grid :x-gap="10">
|
<n-grid :x-gap="10">
|
||||||
|
@ -339,7 +347,7 @@ const onClose = () => {
|
||||||
</n-form>
|
</n-form>
|
||||||
</n-tab-pane>
|
</n-tab-pane>
|
||||||
|
|
||||||
<!-- Custom decoder pane -->
|
<!-- custom decoder pane -->
|
||||||
<n-tab-pane :tab="$t('preferences.decoder.name')" display-directive="show:lazy" name="decoder">
|
<n-tab-pane :tab="$t('preferences.decoder.name')" display-directive="show:lazy" name="decoder">
|
||||||
<n-space>
|
<n-space>
|
||||||
<n-button @click="dialogStore.openDecoderDialog()">
|
<n-button @click="dialogStore.openDecoderDialog()">
|
||||||
|
|
|
@ -54,7 +54,8 @@
|
||||||
"editor": {
|
"editor": {
|
||||||
"name": "Editor",
|
"name": "Editor",
|
||||||
"show_linenum": "Show Line Numbers",
|
"show_linenum": "Show Line Numbers",
|
||||||
"show_folding": "Enable Code Folding"
|
"show_folding": "Enable Code Folding",
|
||||||
|
"drop_text": "Allow Drag and Drop Text"
|
||||||
},
|
},
|
||||||
"cli": {
|
"cli": {
|
||||||
"name": "Command Line",
|
"name": "Command Line",
|
||||||
|
|
|
@ -54,7 +54,8 @@
|
||||||
"editor": {
|
"editor": {
|
||||||
"name": "编辑器",
|
"name": "编辑器",
|
||||||
"show_linenum": "显示行号",
|
"show_linenum": "显示行号",
|
||||||
"show_folding": "启用代码折叠"
|
"show_folding": "启用代码折叠",
|
||||||
|
"drop_text": "允许拖放文本"
|
||||||
},
|
},
|
||||||
"cli": {
|
"cli": {
|
||||||
"name": "命令行",
|
"name": "命令行",
|
||||||
|
|
|
@ -58,6 +58,7 @@ const usePreferencesStore = defineStore('preferences', {
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
showLineNum: true,
|
showLineNum: true,
|
||||||
showFolding: true,
|
showFolding: true,
|
||||||
|
dropText: true,
|
||||||
},
|
},
|
||||||
cli: {
|
cli: {
|
||||||
fontFamily: [],
|
fontFamily: [],
|
||||||
|
@ -254,6 +255,10 @@ const usePreferencesStore = defineStore('preferences', {
|
||||||
return get(this.editor, 'showFolding', true)
|
return get(this.editor, 'showFolding', true)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
dropText() {
|
||||||
|
return get(this.editor, 'dropText', true)
|
||||||
|
},
|
||||||
|
|
||||||
keyIconType() {
|
keyIconType() {
|
||||||
return get(this.general, 'keyIconStyle', typesIconStyle.SHORT)
|
return get(this.general, 'keyIconStyle', typesIconStyle.SHORT)
|
||||||
},
|
},
|
||||||
|
@ -283,6 +288,10 @@ const usePreferencesStore = defineStore('preferences', {
|
||||||
if (showFolding === undefined) {
|
if (showFolding === undefined) {
|
||||||
set(data, 'editor.showFolding', true)
|
set(data, 'editor.showFolding', true)
|
||||||
}
|
}
|
||||||
|
const dropText = get(data, 'editor.dropText')
|
||||||
|
if (dropText === undefined) {
|
||||||
|
set(data, 'editor.dropText', true)
|
||||||
|
}
|
||||||
i18nGlobal.locale.value = this.currentLanguage
|
i18nGlobal.locale.value = this.currentLanguage
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue