mirrors/dbgate
1
0
Fork 0
mirror of https://github.com/dbgate/dbgate synced 2024-11-07 20:26:23 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

custom editor size #345

Browse Source
This commit is contained in:
Jan Prochazka 2022-08-19 15:10:04 +02:00
parent f80c6fec99
commit 7c87baf451
3 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/web/src/forms/TextField.svelte
View File

@ -14,6 +14,7 @@
bind:value
on:change
on:input
on:click
bind:this={domEditor}
on:keydown
autocomplete="new-password"

3
packages/web/src/query/AceEditor.svelte
View File

@ -49,6 +49,7 @@
{ label: '15', value: '15' },
{ label: '16', value: '16' },
{ label: '17', value: '17' },
{ label: 'Custom', value: 'custom' },
];
</script>
@ -433,7 +434,7 @@
});
defaultFontSize = editor.getFontSize();
if ($currentEditorFontSize) {
editor.setFontSize($currentEditorFontSize);
editor.setFontSize(parseInt($currentEditorFontSize) || 12);
}
editor.on('changeSelection', () => {

20
packages/web/src/settings/SettingsModal.svelte
View File

@ -11,6 +11,7 @@
import FormValues from '../forms/FormValues.svelte';
import SelectField from '../forms/SelectField.svelte';
import SettingsFormProvider from '../forms/SettingsFormProvider.svelte';
import TextField from '../forms/TextField.svelte';
import FontIcon from '../icons/FontIcon.svelte';
import ModalBase from '../modals/ModalBase.svelte';
@ -128,7 +129,7 @@ ORDER BY
<div class="heading">Editor theme</div>
<div class="flex">
<div class="col-4">
<div class="col-3">
<FormFieldTemplateLarge label="Theme" type="combo">
<SelectField
isNative
@ -140,19 +141,30 @@ ORDER BY
</FormFieldTemplateLarge>
</div>
<div class="col-4">
<div class="col-3">
<FormFieldTemplateLarge label="Font size " type="combo">
<SelectField
isNative
notSelected="(default)"
options={FONT_SIZES}
value={$currentEditorFontSize}
value={FONT_SIZES.find(x => x.value == $currentEditorFontSize) ? $currentEditorFontSize : 'custom'}
on:change={e => ($currentEditorFontSize = e.detail)}
/>
</FormFieldTemplateLarge>
</div>
<div class="col-4">
<div class="col-3">
<FormFieldTemplateLarge label="Custom size " type="text">
<TextField
value={$currentEditorFontSize == 'custom' ? '' : $currentEditorFontSize}
on:change={e => ($currentEditorFontSize = e.target['value'])}
disabled={!!FONT_SIZES.find(x => x.value == $currentEditorFontSize) &&
$currentEditorFontSize != 'custom'}
/>
</FormFieldTemplateLarge>
</div>
<div class="col-3">
<FormTextField name="editor.fontFamily" label="Editor font family" />
</div>
</div>