fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-03-13 18:00:10 +01:00
Code Issues Releases Wiki Activity

feat(UI): option to change query editors font size, closes #77

Browse Source
This commit is contained in:
Fabio Di Stasio 2021-06-19 11:54:15 +02:00
parent 3829b94bf7
commit e579f37438
7 changed files with 80 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/renderer/components/BaseTextEditor.vue
View File

@ -34,6 +34,7 @@ export default {
computed: {
...mapGetters({
editorTheme: 'settings/getEditorTheme',
editorFontSize: 'settings/getEditorFontSize',
autoComplete: 'settings/getAutoComplete',
lineWrap: 'settings/getLineWrap'
})
@ -47,6 +48,19 @@ export default {
if (this.editor)
this.editor.setTheme(`ace/theme/${this.editorTheme}`);
},
editorFontSize () {
const sizes = {
small: '12px',
medium: '14px',
large: '16px'
};
if (this.editor) {
this.editor.setOptions({
fontSize: sizes[this.editorFontSize]
});
}
},
autoComplete () {
if (this.editor) {
this.editor.setOptions({

27
src/renderer/components/ModalSettings.vue
View File

@ -222,6 +222,31 @@
</optgroup>
</select>
</div>
<div class="column col-6 mb-4">
<div class="btn-group btn-group-block">
<button
class="btn btn-dark cut-text"
:class="{'active': editorFontSize === 'small'}"
@click="changeEditorFontSize('small')"
>
{{ $t('word.small') }}
</button>
<button
class="btn btn-dark cut-text"
:class="{'active': editorFontSize === 'medium'}"
@click="changeEditorFontSize('medium')"
>
{{ $t('word.medium') }}
</button>
<button
class="btn btn-dark cut-text"
:class="{'active': editorFontSize === 'large'}"
@click="changeEditorFontSize('large')"
>
{{ $t('word.large') }}
</button>
</div>
</div>
<div class="column col-12">
<BaseTextEditor
:value="exampleQuery"
@ -346,6 +371,7 @@ export default {
notificationsTimeout: 'settings/getNotificationsTimeout',
applicationTheme: 'settings/getApplicationTheme',
editorTheme: 'settings/getEditorTheme',
editorFontSize: 'settings/getEditorFontSize',
updateStatus: 'application/getUpdateStatus',
selectedWorkspace: 'workspaces/getSelected',
getWorkspace: 'workspaces/getWorkspace'
@ -401,6 +427,7 @@ ORDER BY
changeLineWrap: 'settings/changeLineWrap',
changeApplicationTheme: 'settings/changeApplicationTheme',
changeEditorTheme: 'settings/changeEditorTheme',
changeEditorFontSize: 'settings/changeEditorFontSize',
updateNotificationsTimeout: 'settings/updateNotificationsTimeout'
}),
selectTab (tab) {

14
src/renderer/components/QueryEditor.vue
View File

@ -38,6 +38,7 @@ export default {
computed: {
...mapGetters({
editorTheme: 'settings/getEditorTheme',
editorFontSize: 'settings/getEditorFontSize',
autoComplete: 'settings/getAutoComplete',
lineWrap: 'settings/getLineWrap',
baseCompleter: 'application/getBaseCompleter'
@ -158,6 +159,19 @@ export default {
if (this.editor)
this.editor.setTheme(`ace/theme/${this.editorTheme}`);
},
editorFontSize () {
const sizes = {
small: '12px',
medium: '14px',
large: '16px'
};
if (this.editor) {
this.editor.setOptions({
fontSize: sizes[this.editorFontSize]
});
}
},
autoComplete () {
if (this.editor) {
this.editor.setOptions({

5
src/renderer/i18n/en-US.js
View File

@ -106,7 +106,10 @@ module.exports = {
array: 'Array',
changelog: 'Changelog',
format: 'Format',
structure: 'Structure'
structure: 'Structure',
small: 'Small',
medium: 'Medium',
large: 'Large'
},
message: {
appWelcome: 'Welcome to Antares SQL Client!',

10
src/renderer/scss/themes/dark-theme.scss
View File

@ -58,6 +58,10 @@
&:hover {
background: $bg-color-gray;
}
&.active {
background-color: $primary-color;
}
}
}
@ -211,10 +215,8 @@
}
.bg-checkered {
background-image:
linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),
linear-gradient(to right, black 50%, white 50%),
linear-gradient(to bottom, black 50%, white 50%);
background-image: linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),
linear-gradient(to right, black 50%, white 50%), linear-gradient(to bottom, black 50%, white 50%);
background-blend-mode: normal, difference, normal;
background-size: 2em 2em;
}

4
src/renderer/scss/themes/light-theme.scss
View File

@ -62,6 +62,10 @@
&:hover {
background: $bg-color-gray;
}
&.active {
background-color: $primary-color;
}
}
}

13
src/renderer/store/modules/settings.store.js
View File

@ -15,7 +15,8 @@ export default {
auto_complete: persistentStore.get('auto_complete', true),
line_wrap: persistentStore.get('line_wrap', true),
application_theme: persistentStore.get('application_theme', 'dark'),
editor_theme: persistentStore.get('editor_theme', 'twilight')
editor_theme: persistentStore.get('editor_theme', 'twilight'),
editor_font_size: persistentStore.get('editor_font_size', 'medium')
},
getters: {
getLocale: state => state.locale,
@ -26,7 +27,8 @@ export default {
getAutoComplete: state => state.auto_complete,
getLineWrap: state => state.line_wrap,
getApplicationTheme: state => state.application_theme,
getEditorTheme: state => state.editor_theme
getEditorTheme: state => state.editor_theme,
getEditorFontSize: state => state.editor_font_size
},
mutations: {
SET_LOCALE (state, locale) {
@ -65,6 +67,10 @@ export default {
SET_EDITOR_THEME (state, theme) {
state.editor_theme = theme;
persistentStore.set('editor_theme', state.editor_theme);
},
SET_EDITOR_FONT_SIZE (state, size) {
state.editor_font_size = size;
persistentStore.set('editor_font_size', state.editor_font_size);
}
},
actions: {
@ -94,6 +100,9 @@ export default {
},
changeEditorTheme ({ commit }, theme) {
commit('SET_EDITOR_THEME', theme);
},
changeEditorFontSize ({ commit }, size) {
commit('SET_EDITOR_FONT_SIZE', size);
}
}
};