mirror of
https://github.com/Fabio286/antares.git
synced 2025-03-31 11:40:07 +02:00
Added setting modal
This commit is contained in:
parent
5dc901a75c
commit
d9dbf8e462
@ -18,7 +18,7 @@ function createMainWindow () {
|
||||
width: 1600,
|
||||
height: 1000,
|
||||
minHeight: 550,
|
||||
minWidth: 450,
|
||||
minWidth: 900,
|
||||
title: 'Antares',
|
||||
autoHideMenuBar: true,
|
||||
icon: path.join(__static, 'logo-32.png'),
|
||||
|
@ -15,6 +15,7 @@
|
||||
<TheNotificationsBoard />
|
||||
<ModalNewConnection v-if="isNewConnModal" />
|
||||
<ModalEditConnection v-if="isEditModal" />
|
||||
<ModalSettings v-if="isSettingModal" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -27,6 +28,7 @@ import TheAppWelcome from '@/components/TheAppWelcome';
|
||||
import DatabaseWorkspace from '@/components/DatabaseWorkspace';
|
||||
import ModalNewConnection from '@/components/ModalNewConnection';
|
||||
import ModalEditConnection from '@/components/ModalEditConnection';
|
||||
import ModalSettings from '@/components/ModalSettings';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
@ -37,7 +39,8 @@ export default {
|
||||
TheAppWelcome,
|
||||
DatabaseWorkspace,
|
||||
ModalNewConnection,
|
||||
ModalEditConnection
|
||||
ModalEditConnection,
|
||||
ModalSettings
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
@ -46,14 +49,15 @@ export default {
|
||||
computed: {
|
||||
...mapGetters({
|
||||
isLoading: 'application/isLoading',
|
||||
isNewConnModal: 'connections/isNewModal',
|
||||
isEditModal: 'connections/isEditModal',
|
||||
isNewConnModal: 'application/isNewModal',
|
||||
isEditModal: 'application/isEditModal',
|
||||
isSettingModal: 'application/isSettingModal',
|
||||
connections: 'connections/getConnections'
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
showNewConnModal: 'connections/showNewConnModal'
|
||||
showNewConnModal: 'application/showNewConnModal'
|
||||
})
|
||||
}
|
||||
};
|
||||
|
@ -2,7 +2,7 @@
|
||||
<div class="modal modal-sm active">
|
||||
<a class="modal-overlay" @click="hideModal" />
|
||||
<div class="modal-container">
|
||||
<div v-if="hasHeader" class="modal-header text-light">
|
||||
<div v-if="hasHeader" class="modal-header">
|
||||
<div class="modal-title h6">
|
||||
<slot name="header" />
|
||||
</div>
|
||||
|
@ -2,7 +2,7 @@
|
||||
<div class="modal active modal-sm">
|
||||
<a class="modal-overlay" />
|
||||
<div class="modal-container p-0">
|
||||
<div class="modal-header text-light">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title h6">
|
||||
{{ $t('word.credentials') }}
|
||||
</div>
|
||||
|
@ -2,7 +2,7 @@
|
||||
<div class="modal active">
|
||||
<a class="modal-overlay c-hand" @click="closeModal" />
|
||||
<div class="modal-container">
|
||||
<div class="modal-header text-light">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title h6">
|
||||
{{ $t('message.editConnection') }}
|
||||
</div>
|
||||
@ -151,7 +151,7 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
connection: 'connections/getSelectedConnection'
|
||||
connection: 'application/getSelectedConnection'
|
||||
})
|
||||
},
|
||||
created () {
|
||||
@ -159,7 +159,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
closeModal: 'connections/hideEditConnModal',
|
||||
closeModal: 'application/hideEditConnModal',
|
||||
editConnection: 'connections/editConnection'
|
||||
}),
|
||||
async startTest () {
|
||||
|
@ -2,7 +2,7 @@
|
||||
<div class="modal active">
|
||||
<a class="modal-overlay c-hand" @click="closeModal" />
|
||||
<div class="modal-container">
|
||||
<div class="modal-header text-light">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title h6">
|
||||
{{ $t('message.createNewConnection') }}
|
||||
</div>
|
||||
@ -164,7 +164,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
closeModal: 'connections/hideNewConnModal',
|
||||
closeModal: 'application/hideNewConnModal',
|
||||
addConnection: 'connections/addConnection'
|
||||
}),
|
||||
setDefaults () {
|
||||
|
145
src/renderer/components/ModalSettings.vue
Normal file
145
src/renderer/components/ModalSettings.vue
Normal file
@ -0,0 +1,145 @@
|
||||
<template>
|
||||
<div id="settings" class="modal active">
|
||||
<a class="modal-overlay c-hand" @click="closeModal" />
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title h5">
|
||||
{{ $t('word.settings') }}
|
||||
</div>
|
||||
<a class="btn btn-clear c-hand" @click="closeModal" />
|
||||
</div>
|
||||
<div class="modal-body p-0">
|
||||
<div class="panel">
|
||||
<div class="panel-nav">
|
||||
<ul class="tab tab-block">
|
||||
<li
|
||||
class="tab-item"
|
||||
:class="{'active': selectedTab === 'general'}"
|
||||
@click="selectTab('general')"
|
||||
>
|
||||
<a class="c-hand">{{ $t('word.general') }}</a>
|
||||
</li>
|
||||
<li
|
||||
class="tab-item"
|
||||
:class="{'active': selectedTab === 'themes'}"
|
||||
@click="selectTab('themes')"
|
||||
>
|
||||
<a class="c-hand">{{ $t('word.themes') }}</a>
|
||||
</li>
|
||||
<li
|
||||
class="tab-item"
|
||||
:class="{'active': selectedTab === 'update'}"
|
||||
@click="selectTab('update')"
|
||||
>
|
||||
<a class="c-hand" :class="{'badge': isUpdate}">{{ $t('word.update') }}</a>
|
||||
</li>
|
||||
<li
|
||||
class="tab-item"
|
||||
:class="{'active': selectedTab === 'about'}"
|
||||
@click="selectTab('about')"
|
||||
>
|
||||
<a class="c-hand">{{ $t('word.about') }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="selectedTab === 'general'" class="panel-body py-4">
|
||||
<form class="form-horizontal">
|
||||
<div class="col-6 col-sm-12">
|
||||
<div class="form-group">
|
||||
<div class="col-6 col-sm-12">
|
||||
<label class="form-label">{{ $t('word.language') }}:</label>
|
||||
</div>
|
||||
<div class="col-6 col-sm-12">
|
||||
<select
|
||||
v-model="localLocale"
|
||||
class="form-select"
|
||||
@change="changeLocale(localLocale)"
|
||||
>
|
||||
<option v-for="(locale, key) in locales" :key="key">
|
||||
{{ locale }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div v-if="selectedTab === 'themes'" class="panel-body py-4">
|
||||
<!-- -->
|
||||
</div>
|
||||
<div v-if="selectedTab === 'update'" class="panel-body py-4">
|
||||
<!-- -->
|
||||
</div>
|
||||
<div v-if="selectedTab === 'about'" class="panel-body py-4">
|
||||
<div class="text-center">
|
||||
<img src="logo.svg" width="128">
|
||||
<h4>{{ appName }}</h4>
|
||||
<p>
|
||||
{{ $t('word.version') }}: 0.0.0<br>
|
||||
<a class="c-hand" @click="openOutside('https://github.com/Fabio286/antares')">GitHub</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex';
|
||||
const { shell } = require('electron');
|
||||
|
||||
export default {
|
||||
name: 'ModalSettings',
|
||||
data () {
|
||||
return {
|
||||
isUpdate: false,
|
||||
localLocale: null,
|
||||
selectedTab: 'general'
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
appName: 'application/appName',
|
||||
selectedLocale: 'settings/getLocale'
|
||||
}),
|
||||
locales () {
|
||||
return this.$i18n.availableLocales;
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.localLocale = this.selectedLocale;
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
closeModal: 'application/hideSettingModal',
|
||||
changeLocale: 'settings/changeLocale'
|
||||
}),
|
||||
selectTab (tab) {
|
||||
this.selectedTab = tab;
|
||||
},
|
||||
openOutside (link) {
|
||||
shell.openExternal(link);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#settings{
|
||||
.modal-body{
|
||||
overflow: hidden;
|
||||
|
||||
.panel-body{
|
||||
height: calc(70vh - 70px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.badge::after{
|
||||
background: #32b643;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
@ -50,7 +50,7 @@ export default {
|
||||
methods: {
|
||||
...mapActions({
|
||||
deleteConnection: 'connections/deleteConnection',
|
||||
showEditModal: 'connections/showEditConnModal'
|
||||
showEditModal: 'application/showEditConnModal'
|
||||
}),
|
||||
showConfirmModal () {
|
||||
this.isConfirmModal = true;
|
||||
|
@ -34,7 +34,11 @@
|
||||
|
||||
<div class="settingbar-bottom-elements">
|
||||
<ul class="settingbar-elements">
|
||||
<li class="settingbar-element btn btn-link tooltip tooltip-right mb-2" :data-tooltip="$t('word.settings')">
|
||||
<li
|
||||
class="settingbar-element btn btn-link tooltip tooltip-right mb-2"
|
||||
:data-tooltip="$t('word.settings')"
|
||||
@click="showSettingModal"
|
||||
>
|
||||
<i class="settingbar-element-icon material-icons text-light">settings</i>
|
||||
</li>
|
||||
</ul>
|
||||
@ -79,7 +83,8 @@ export default {
|
||||
methods: {
|
||||
...mapActions({
|
||||
updateConnections: 'connections/updateConnections',
|
||||
showNewConnModal: 'connections/showNewConnModal',
|
||||
showNewConnModal: 'application/showNewConnModal',
|
||||
showSettingModal: 'application/showSettingModal',
|
||||
selectWorkspace: 'workspaces/selectWorkspace'
|
||||
}),
|
||||
contextMenu (event, connection) {
|
||||
|
@ -18,7 +18,13 @@ module.exports = {
|
||||
disconnect: 'Disconnect',
|
||||
disconnected: 'Disconnected',
|
||||
refresh: 'Refresh',
|
||||
settings: 'Settings'
|
||||
settings: 'Settings',
|
||||
general: 'General',
|
||||
themes: 'Themes',
|
||||
update: 'Update',
|
||||
about: 'About',
|
||||
language: 'Language',
|
||||
version: 'Version'
|
||||
},
|
||||
message: {
|
||||
appWelcome: 'Welcome to Antares SQL Client!',
|
||||
|
@ -18,7 +18,13 @@ module.exports = {
|
||||
disconnect: 'Disconnetti',
|
||||
disconnected: 'Disconnesso',
|
||||
refresh: 'Aggiorna',
|
||||
settings: 'Impostazioni'
|
||||
settings: 'Impostazioni',
|
||||
general: 'Generale',
|
||||
themes: 'Temi',
|
||||
update: 'Aggiornamento',
|
||||
about: 'Informazioni',
|
||||
language: 'Lingua',
|
||||
version: 'Versione'
|
||||
},
|
||||
message: {
|
||||
appWelcome: 'Benvenuto in Antares SQL Client!',
|
||||
|
@ -50,6 +50,24 @@ body{
|
||||
}
|
||||
}
|
||||
|
||||
// Scrollbars
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: $bg-color-light;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba($color: #FFF, $alpha: .5);
|
||||
|
||||
&:hover {
|
||||
background: rgba($color: #FFF, $alpha: 1);
|
||||
}
|
||||
}
|
||||
|
||||
// Animations
|
||||
@keyframes rotation {
|
||||
from {
|
||||
@ -84,6 +102,24 @@ body{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab{
|
||||
border-color: #272727;
|
||||
}
|
||||
|
||||
.panel{
|
||||
border: none;
|
||||
}
|
||||
|
||||
.badge{
|
||||
&[data-badge],
|
||||
&:not([data-badge]){
|
||||
&::after {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -4,20 +4,66 @@ export default {
|
||||
strict: true,
|
||||
state: {
|
||||
app_name: 'Antares - SQL Client',
|
||||
is_loading: false
|
||||
is_loading: false,
|
||||
is_new_modal: false,
|
||||
is_edit_modal: false,
|
||||
is_setting_modal: false,
|
||||
selected_conection: {}
|
||||
},
|
||||
getters: {
|
||||
isLoading: state => state.is_loading,
|
||||
appName: state => state.app_name
|
||||
appName: state => state.app_name,
|
||||
getSelectedConnection: state => state.selected_conection,
|
||||
isNewModal: state => state.is_new_modal,
|
||||
isEditModal: state => state.is_edit_modal,
|
||||
isSettingModal: state => state.is_setting_modal
|
||||
},
|
||||
mutations: {
|
||||
SET_LOADING_STATUS (state, payload) {
|
||||
state.is_loading = payload;
|
||||
},
|
||||
SHOW_NEW_CONNECTION_MODAL (state) {
|
||||
state.is_new_modal = true;
|
||||
},
|
||||
HIDE_NEW_CONNECTION_MODAL (state) {
|
||||
state.is_new_modal = false;
|
||||
},
|
||||
SHOW_EDIT_CONNECTION_MODAL (state, connection) {
|
||||
state.is_edit_modal = true;
|
||||
state.selected_conection = connection;
|
||||
},
|
||||
HIDE_EDIT_CONNECTION_MODAL (state) {
|
||||
state.is_edit_modal = false;
|
||||
},
|
||||
SHOW_SETTING_MODAL (state) {
|
||||
state.is_setting_modal = true;
|
||||
},
|
||||
HIDE_SETTING_MODAL (state) {
|
||||
state.is_setting_modal = false;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
setLoadingStatus ({ commit }, payload) {
|
||||
commit('SET_LOADING_STATUS', payload);
|
||||
},
|
||||
// Modals
|
||||
showNewConnModal ({ commit }) {
|
||||
commit('SHOW_NEW_CONNECTION_MODAL');
|
||||
},
|
||||
hideNewConnModal ({ commit }) {
|
||||
commit('HIDE_NEW_CONNECTION_MODAL');
|
||||
},
|
||||
showEditConnModal ({ commit }, connection) {
|
||||
commit('SHOW_EDIT_CONNECTION_MODAL', connection);
|
||||
},
|
||||
hideEditConnModal ({ commit }) {
|
||||
commit('HIDE_EDIT_CONNECTION_MODAL');
|
||||
},
|
||||
showSettingModal ({ commit }) {
|
||||
commit('SHOW_SETTING_MODAL');
|
||||
},
|
||||
hideSettingModal ({ commit }) {
|
||||
commit('HIDE_SETTING_MODAL');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -4,16 +4,10 @@ export default {
|
||||
namespaced: true,
|
||||
strict: true,
|
||||
state: {
|
||||
connections: [],
|
||||
is_new_modal: false,
|
||||
is_edit_modal: false,
|
||||
selected_conection: {}
|
||||
connections: []
|
||||
},
|
||||
getters: {
|
||||
getConnections: state => state.connections,
|
||||
getSelectedConnection: state => state.selected_conection,
|
||||
isNewModal: state => state.is_new_modal,
|
||||
isEditModal: state => state.is_edit_modal
|
||||
getConnections: state => state.connections
|
||||
},
|
||||
mutations: {
|
||||
ADD_CONNECTION (state, connection) {
|
||||
@ -32,19 +26,6 @@ export default {
|
||||
},
|
||||
UPDATE_CONNECTIONS (state, connections) {
|
||||
state.connections = connections;
|
||||
},
|
||||
SHOW_NEW_CONNECTION_MODAL (state) {
|
||||
state.is_new_modal = true;
|
||||
},
|
||||
HIDE_NEW_CONNECTION_MODAL (state) {
|
||||
state.is_new_modal = false;
|
||||
},
|
||||
SHOW_EDIT_CONNECTION_MODAL (state, connection) {
|
||||
state.is_edit_modal = true;
|
||||
state.selected_conection = connection;
|
||||
},
|
||||
HIDE_EDIT_CONNECTION_MODAL (state) {
|
||||
state.is_edit_modal = false;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
@ -59,19 +40,6 @@ export default {
|
||||
},
|
||||
updateConnections ({ commit }, connections) {
|
||||
commit('UPDATE_CONNECTIONS', connections);
|
||||
},
|
||||
// Modals
|
||||
showNewConnModal ({ commit }) {
|
||||
commit('SHOW_NEW_CONNECTION_MODAL');
|
||||
},
|
||||
hideNewConnModal ({ commit }) {
|
||||
commit('HIDE_NEW_CONNECTION_MODAL');
|
||||
},
|
||||
showEditConnModal ({ commit }, connection) {
|
||||
commit('SHOW_EDIT_CONNECTION_MODAL', connection);
|
||||
},
|
||||
hideEditConnModal ({ commit }) {
|
||||
commit('HIDE_EDIT_CONNECTION_MODAL');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -5,7 +5,7 @@ export default {
|
||||
namespaced: true,
|
||||
strict: true,
|
||||
state: {
|
||||
locale: 'it-IT'
|
||||
locale: 'en-US'
|
||||
},
|
||||
getters: {
|
||||
getLocale: state => state.locale
|
||||
|
Loading…
x
Reference in New Issue
Block a user