feat: option to toggle line wrap mode

This commit is contained in:
Fabio Di Stasio 2020-12-24 15:33:51 +01:00
parent 3b4f1475df
commit d94b49febf
4 changed files with 43 additions and 3 deletions

View File

@ -114,6 +114,21 @@
</div>
</div>
</div>
<div class="column col-8 col-sm-12">
<div class="form-group">
<div class="col-6 col-sm-12">
<label class="form-label">
{{ $t('message.wrapLongLines') }}:
</label>
</div>
<div class="col-6 col-sm-12">
<label class="form-switch d-inline-block" @click.prevent="toggleLineWrap">
<input type="checkbox" :checked="selectedLineWrap">
<i class="form-icon" />
</label>
</div>
</div>
</div>
</form>
</div>
</div>
@ -280,6 +295,7 @@ export default {
selectedSettingTab: 'application/selectedSettingTab',
selectedLocale: 'settings/getLocale',
selectedAutoComplete: 'settings/getAutoComplete',
selectedLineWrap: 'settings/getLineWrap',
notificationsTimeout: 'settings/getNotificationsTimeout',
applicationTheme: 'settings/getApplicationTheme',
editorTheme: 'settings/getEditorTheme',
@ -333,6 +349,7 @@ ORDER BY
closeModal: 'application/hideSettingModal',
changeLocale: 'settings/changeLocale',
changeAutoComplete: 'settings/changeAutoComplete',
changeLineWrap: 'settings/changeLineWrap',
changeEditorTheme: 'settings/changeEditorTheme',
updateNotificationsTimeout: 'settings/updateNotificationsTimeout'
}),
@ -355,6 +372,9 @@ ORDER BY
},
toggleAutoComplete () {
this.changeAutoComplete(!this.selectedAutoComplete);
},
toggleLineWrap () {
this.changeLineWrap(!this.selectedLineWrap);
}
}
};

View File

@ -35,7 +35,8 @@ export default {
computed: {
...mapGetters({
editorTheme: 'settings/getEditorTheme',
autoComplete: 'settings/getAutoComplete'
autoComplete: 'settings/getAutoComplete',
lineWrap: 'settings/getLineWrap'
}),
tables () {
return this.workspace
@ -100,6 +101,13 @@ export default {
enableLiveAutocompletion: this.autoComplete
});
}
},
lineWrap () {
if (this.editor) {
this.editor.setOptions({
wrap: this.lineWrap
});
}
}
},
mounted () {
@ -114,6 +122,7 @@ export default {
this.editor.setOptions({
enableBasicAutocompletion: true,
wrap: this.lineWrap,
enableSnippets: true,
enableLiveAutocompletion: this.autoComplete
});

View File

@ -67,7 +67,8 @@ module.exports = {
dark: 'Dark',
autoCompletion: 'Auto Completion',
application: 'Application',
editor: 'Editor'
editor: 'Editor',
view: 'View'
},
message: {
appWelcome: 'Welcome to Antares SQL Client!',
@ -131,7 +132,8 @@ module.exports = {
invalidDefault: 'Invalid default',
onDelete: 'On delete',
applicationTheme: 'Application Theme',
editorTheme: 'Editor Theme'
editorTheme: 'Editor Theme',
wrapLongLines: 'Wrap long lines'
},
// Date and Time
short: {

View File

@ -11,6 +11,7 @@ export default {
explorebar_size: persistentStore.get('explorebar_size') || null,
notifications_timeout: persistentStore.get('notifications_timeout') || 5,
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'
},
@ -19,6 +20,7 @@ export default {
getExplorebarSize: state => state.explorebar_size,
getNotificationsTimeout: state => state.notifications_timeout,
getAutoComplete: state => state.auto_complete,
getLineWrap: state => state.line_wrap,
getApplicationTheme: state => state.application_theme,
getEditorTheme: state => state.editor_theme
},
@ -36,6 +38,10 @@ export default {
state.auto_complete = val;
persistentStore.set('auto_complete', state.auto_complete);
},
SET_LINE_WRAP (state, val) {
state.line_wrap = val;
persistentStore.set('line_wrap', state.line_wrap);
},
SET_EXPLOREBAR_SIZE (state, size) {
state.explorebar_size = size;
persistentStore.set('explorebar_size', state.explorebar_size);
@ -57,6 +63,9 @@ export default {
changeAutoComplete ({ commit }, val) {
commit('SET_AUTO_COMPLETE', val);
},
changeLineWrap ({ commit }, val) {
commit('SET_LINE_WRAP', val);
},
changeEditorTheme ({ commit }, theme) {
commit('SET_EDITOR_THEME', theme);
}