fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-02-07 23:38:54 +01:00
Code Issues Releases Wiki Activity

perf(UI): improved connection status indicator

Browse Source
This commit is contained in:
Fabio286 2021-04-21 16:41:42 +02:00
parent 16e17b39b6
commit 5ceddb8e00
9 changed files with 84 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -105,7 +105,7 @@
"node-sass": "^5.0.0",
"sass-loader": "^10.1.1",
"standard-version": "^9.2.0",
"stylelint": "^13.9.0",
"stylelint": "^13.12.0",
"stylelint-config-standard": "^21.0.0",
"stylelint-scss": "^3.19.0",
"vue": "^2.6.12",

18
src/renderer/components/TheSettingBar.vue
View File

@ -19,7 +19,7 @@
@contextmenu.prevent="contextMenu($event, connection)"
@mouseover.self="tooltipPosition"
>
<i class="settingbar-element-icon dbi" :class="`dbi-${connection.client} ${connected.includes(connection.uid) ? 'badge' : ''}`" />
<i class="settingbar-element-icon dbi" :class="`dbi-${connection.client} ${getStatusBadge(connection.uid)}`" />
<span class="ex-tooltip-content">{{ getConnectionName(connection.uid) }}</span>
</li>
</draggable>
@ -73,7 +73,7 @@ export default {
...mapGetters({
getConnections: 'connections/getConnections',
getConnectionName: 'connections/getConnectionName',
connected: 'workspaces/getConnected',
getWorkspace: 'workspaces/getWorkspace',
selectedWorkspace: 'workspaces/getSelected',
updateStatus: 'application/getUpdateStatus'
}),
@ -109,6 +109,20 @@ export default {
const el = e.target;
const fromTop = window.pageYOffset + el.getBoundingClientRect().top - (el.offsetHeight / 4);
el.querySelector('.ex-tooltip-content').style.top = `${fromTop}px`;
},
getStatusBadge (uid) {
const status = this.getWorkspace(uid).connection_status;
switch (status) {
case 'connected':
return 'badge badge-connected';
case 'connecting':
return 'badge badge-connecting';
case 'failed':
return 'badge badge-failed';
default:
return '';
}
}
}
};

2
src/renderer/components/Workspace.vue
View File

@ -1,7 +1,7 @@
<template>
<div v-show="isSelected" class="workspace column columns col-gapless">
<WorkspaceExploreBar :connection="connection" :is-selected="isSelected" />
<div v-if="workspace.connected" class="workspace-tabs column columns col-gapless">
<div v-if="workspace.connection_status === 'connected'" class="workspace-tabs column columns col-gapless">
<ul
id="tabWrap"
ref="tabWrap"

6
src/renderer/components/WorkspaceExploreBar.vue
View File

@ -8,7 +8,7 @@
>
<div class="workspace-explorebar-header">
<span class="workspace-explorebar-title">{{ connectionName }}</span>
<span v-if="workspace.connected" class="workspace-explorebar-tools">
<span v-if="workspace.connection_status === 'connected'" class="workspace-explorebar-tools">
<i
class="mdi mdi-18px mdi-database-plus c-hand mr-2"
:title="$t('message.createNewSchema')"
@ -28,7 +28,7 @@
</span>
</div>
<div class="workspace-explorebar-search">
<div v-if="workspace.connected" class="has-icon-right">
<div v-if="workspace.connection_status === 'connected'" class="has-icon-right">
<input
v-model="searchTerm"
class="form-input input-sm"
@ -39,7 +39,7 @@
</div>
</div>
<WorkspaceConnectPanel
v-if="!workspace.connected"
v-if="workspace.connection_status !== 'connected'"
class="workspace-explorebar-body"
:connection="connection"
/>

14
src/renderer/scss/_transitions.scss
View File

@ -39,3 +39,17 @@
transform: scale(1);
}
}
@keyframes connecting {
0% {
background-color: transparent;
}
50% {
background-color: $warning-color;
}
100% {
background-color: transparent;
}
}

14
src/renderer/scss/main.scss
View File

@ -136,6 +136,20 @@ body {
box-shadow: none;
}
}
&.badge-connected::after {
background: $success-color;
}
&.badge-connecting::after {
animation-name: connecting;
animation-duration: 2s;
animation-iteration-count: infinite;
}
&.badge-failed::after {
background: $error-color;
}
}
.form-select {

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

@ -386,7 +386,6 @@
bottom: -10px;
right: 0;
position: absolute;
background: $success-color;
}
&.badge-update::after {

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

@ -168,7 +168,6 @@
bottom: -10px;
right: 0;
position: absolute;
background: $success-color;
}
&.badge-update::after {

44
src/renderer/store/modules/workspaces.store.js
View File

@ -37,7 +37,7 @@ export default {
},
getConnected: state => {
return state.workspaces
.filter(workspace => workspace.connected)
.filter(workspace => workspace.connection_status === 'connected')
.map(workspace => workspace.uid);
},
getLoadedSchemas: state => uid => {
@ -54,7 +54,7 @@ export default {
SELECT_WORKSPACE (state, uid) {
state.selected_workspace = uid;
},
ADD_CONNECTED (state, payload) {
SET_CONNECTED (state, payload) {
const { uid, client, dataTypes, indexTypes, customizations, structure, version } = payload;
state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
@ -65,19 +65,41 @@ export default {
indexTypes,
customizations,
structure,
connected: true,
connection_status: 'connected',
version
}
: workspace);
},
REMOVE_CONNECTED (state, uid) {
SET_CONNECTING (state, uid) {
state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
? {
...workspace,
structure: {},
breadcrumbs: {},
loaded_schemas: new Set(),
connected: false
connection_status: 'connecting'
}
: workspace);
},
SET_FAILED (state, uid) {
state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
? {
...workspace,
structure: {},
breadcrumbs: {},
loaded_schemas: new Set(),
connection_status: 'failed'
}
: workspace);
},
SET_DISCONNECTED (state, uid) {
state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
? {
...workspace,
structure: {},
breadcrumbs: {},
loaded_schemas: new Set(),
connection_status: 'disconnected'
}
: workspace);
},
@ -247,10 +269,14 @@ export default {
commit('SELECT_WORKSPACE', uid);
},
async connectWorkspace ({ dispatch, commit }, connection) {
commit('SET_CONNECTING', connection.uid);
try {
const { status, response } = await Connection.connect(connection);
if (status === 'error')
if (status === 'error') {
dispatch('notifications/addNotification', { status, message: response }, { root: true });
commit('SET_FAILED', connection.uid);
}
else {
let dataTypes = [];
let indexTypes = [];
@ -288,7 +314,7 @@ export default {
dispatch('connections/editConnection', connProxy, { root: true });
}
commit('ADD_CONNECTED', {
commit('SET_CONNECTED', {
uid: connection.uid,
client: connection.client,
dataTypes,
@ -382,13 +408,13 @@ export default {
},
removeConnected ({ commit }, uid) {
Connection.disconnect(uid);
commit('REMOVE_CONNECTED', uid);
commit('SET_DISCONNECTED', uid);
commit('SELECT_TAB', { uid, tab: 0 });
},
addWorkspace ({ commit, dispatch, getters }, uid) {
const workspace = {
uid,
connected: false,
connection_status: 'disconnected',
selected_tab: 0,
search_term: '',
tabs: [],