Refactor SQL editor settings layout and update word wrap field type

This commit is contained in:
Stela Augustinova
2025-12-15 13:02:11 +01:00
parent a503898b21
commit 4682255d5f

View File

@@ -15,8 +15,6 @@
<div class="wrapper"> <div class="wrapper">
<div class="heading">{_t('settings.sqlEditor', { defaultMessage: 'SQL editor' })}</div> <div class="heading">{_t('settings.sqlEditor', { defaultMessage: 'SQL editor' })}</div>
<div class="flex">
<div class="col-3">
<FormSelectField <FormSelectField
label={_t('settings.sqlEditor.sqlCommandsCase', { defaultMessage: 'SQL commands case' })} label={_t('settings.sqlEditor.sqlCommandsCase', { defaultMessage: 'SQL commands case' })}
name="sqlEditor.sqlCommandsCase" name="sqlEditor.sqlCommandsCase"
@@ -28,8 +26,6 @@
]} ]}
data-testid="SQLEditorSettings_sqlCommandsCase" data-testid="SQLEditorSettings_sqlCommandsCase"
/> />
</div>
<div class="col-3">
<FormFieldTemplateLarge <FormFieldTemplateLarge
label={_t('settings.editor.keybinds', { defaultMessage: 'Editor keybinds' })} label={_t('settings.editor.keybinds', { defaultMessage: 'Editor keybinds' })}
type="combo" type="combo"
@@ -42,19 +38,15 @@
on:change={e => ($currentEditorKeybindigMode = e.detail)} on:change={e => ($currentEditorKeybindigMode = e.detail)}
/> />
</FormFieldTemplateLarge> </FormFieldTemplateLarge>
</div>
<div class="col-3">
<FormFieldTemplateLarge <FormFieldTemplateLarge
label={_t('settings.editor.wordWrap', { defaultMessage: 'Enable word wrap' })} label={_t('settings.editor.wordWrap', { defaultMessage: 'Enable word wrap' })}
type="combo" type="checkbox"
> >
<CheckboxField <CheckboxField
checked={$currentEditorWrapEnabled} checked={$currentEditorWrapEnabled}
on:change={e => ($currentEditorWrapEnabled = e.target.checked)} on:change={e => ($currentEditorWrapEnabled = e.target.checked)}
/> />
</FormFieldTemplateLarge> </FormFieldTemplateLarge>
</div>
</div>
<FormTextField <FormTextField
name="sqlEditor.limitRows" name="sqlEditor.limitRows"
@@ -102,4 +94,8 @@ defaultValue={false}
.wrapper :global(input){ .wrapper :global(input){
max-width: 400px; max-width: 400px;
} }
.wrapper :global(select) {
max-width: 400px;
}
</style> </style>