fabio286
/
antares
mirror of https://github.com/Fabio286/antares.git
1
1
Fork 0
Code Issues Releases Wiki Activity

perf(UI): visual improvements of tables

This commit is contained in:
Fabio Di Stasio 2021-08-16 19:44:55 +02:00
parent c9fa941578
commit bc82289d54
11 changed files with 88 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -4,7 +4,7 @@
# Antares SQL Client # Antares SQL Client
![GitHub package.json version](https://img.shields.io/github/package-json/v/fabio286/antares) [![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Ffabio286%2Fantares%2Fbadge&style=flat)](https://actions-badge.atrox.dev/fabio286/antares/goto) ![GitHub All Releases](https://img.shields.io/github/downloads/fabio286/antares/total) ![GitHub](https://img.shields.io/github/license/fabio286/antares) [![antares](https://snapcraft.io/antares/badge.svg)](https://snapcraft.io/antares) [![antares](https://snapcraft.io/antares/trending.svg?name=0)](https://snapcraft.io/antares) [![Twitter Follow](https://img.shields.io/twitter/follow/AntaresSQL?style=social)](https://twitter.com/AntaresSQL) [![Plant a Tree](https://raw.githubusercontent.com/Fabio286/treedom-badge/master/svg/plant-a-tree.svg)](https://www.treedom.net/en/user/fabio-di-stasio/event/antares-for-the-planet) ![GitHub package.json version](https://img.shields.io/github/package-json/v/fabio286/antares) ![GitHub](https://img.shields.io/github/license/fabio286/antares) [![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Ffabio286%2Fantares%2Fbadge&style=flat)](https://actions-badge.atrox.dev/fabio286/antares/goto) [![antares](https://snapcraft.io/antares/badge.svg)](https://snapcraft.io/antares) [![antares](https://snapcraft.io/antares/trending.svg?name=0)](https://snapcraft.io/antares) [![Twitter Follow](https://img.shields.io/twitter/follow/AntaresSQL?style=social)](https://twitter.com/AntaresSQL) [![Plant a Tree](https://raw.githubusercontent.com/Fabio286/treedom-badge/master/svg/plant-a-tree.svg)](https://www.treedom.net/en/user/fabio-di-stasio/event/antares-for-the-planet)
Antares is an SQL client based on [Electron.js](https://github.com/electron/electron) and [Vue.js](https://github.com/vuejs/vue) that aims to become a useful tool, especially for developers. Antares is an SQL client based on [Electron.js](https://github.com/electron/electron) and [Vue.js](https://github.com/vuejs/vue) that aims to become a useful tool, especially for developers.
Our target is to support as many databases as possible, and all major operating systems, including the ARM versions. Our target is to support as many databases as possible, and all major operating systems, including the ARM versions.

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

@ -251,7 +251,7 @@ export default {
if (field.default === 'NULL') fieldDefault = null; if (field.default === 'NULL') fieldDefault = null;
else { else {
if ([...NUMBER, ...FLOAT].includes(field.type)) if ([...NUMBER, ...FLOAT].includes(field.type))
fieldDefault = Number.isNaN(+field.default) ? null : +field.default; fieldDefault = !field.default || Number.isNaN(+field.default.replaceAll('\'', '')) ? null : +field.default.replaceAll('\'', '');
else if ([...TEXT, ...LONG_TEXT].includes(field.type)) { else if ([...TEXT, ...LONG_TEXT].includes(field.type)) {
fieldDefault = field.default fieldDefault = field.default
? field.default.includes('\'') ? field.default.includes('\'')

3
src/renderer/components/ModalProcessesListRow.vue
View File

@ -11,7 +11,7 @@
<template v-if="cKey !== '_id'"> <template v-if="cKey !== '_id'">
<span <span
v-if="!isInlineEditor[cKey]" v-if="!isInlineEditor[cKey]"
class="cell-content px-2" class="cell-content"
:class="`${isNull(col)} type-${typeof col === 'number' ? 'int' : 'varchar'}`" :class="`${isNull(col)} type-${typeof col === 'number' ? 'int' : 'varchar'}`"
@dblclick="dblClick(cKey)" @dblclick="dblClick(cKey)"
>{{ col | cutText }}</span> >{{ col | cutText }}</span>
@ -126,6 +126,7 @@ export default {
.cell-content { .cell-content {
display: block; display: block;
padding: 0 0.2rem;
min-height: 0.8rem; min-height: 0.8rem;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

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

@ -619,7 +619,7 @@ export default {
.th { .th {
position: sticky; position: sticky;
top: 0; top: 0;
border: 1px solid; border: 2px solid;
border-left: none; border-left: none;
border-bottom-width: 2px; border-bottom-width: 2px;
padding: 0; padding: 0;
@ -628,15 +628,15 @@ export default {
z-index: 1; z-index: 1;
> div { > div {
padding: 0.1rem 0.4rem; padding: 0.1rem 0.2rem;
min-width: -webkit-fill-available; min-width: -webkit-fill-available;
} }
} }
.td { .td {
border-right: 1px solid; border-right: 2px solid;
border-bottom: 1px solid; border-bottom: 2px solid;
padding: 0 0.4rem; padding: 0 0.2rem;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 200px; max-width: 200px;
white-space: nowrap; white-space: nowrap;

41
src/renderer/components/WorkspaceTabPropsTableRow.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="tr" @contextmenu.prevent="$emit('contextmenu', $event, localRow._id)"> <div class="tr" @contextmenu.prevent="$emit('contextmenu', $event, localRow._id)">
<div class="td" tabindex="0"> <div class="td p-0" tabindex="0">
<div :class="customizations.sortableFields ? 'row-draggable' : 'text-center'"> <div :class="customizations.sortableFields ? 'row-draggable' : 'text-center'">
<i v-if="customizations.sortableFields" class="mdi mdi-drag-horizontal row-draggable-icon" /> <i v-if="customizations.sortableFields" class="mdi mdi-drag-horizontal row-draggable-icon" />
{{ localRow.order }} {{ localRow.order }}
</div> </div>
</div> </div>
<div class="td" tabindex="0"> <div class="td p-0" tabindex="0">
<div class="text-center"> <div class="text-center">
<i <i
v-for="(index, i) in indexes" v-for="(index, i) in indexes"
@ -23,7 +23,7 @@
/> />
</div> </div>
</div> </div>
<div class="td" tabindex="0"> <div class="td p-0" tabindex="0">
<span <span
v-if="!isInlineEditor.name" v-if="!isInlineEditor.name"
class="cell-content" class="cell-content"
@ -37,12 +37,12 @@
v-model="editingContent" v-model="editingContent"
type="text" type="text"
autofocus autofocus
class="editable-field px-2" class="editable-field form-input input-sm px-1"
@blur="editOFF" @blur="editOFF"
> >
</div> </div>
<div <div
class="td text-uppercase" class="td p-0 text-uppercase"
tabindex="0" tabindex="0"
> >
<span <span
@ -57,7 +57,7 @@
v-else v-else
ref="editField" ref="editField"
v-model="editingContent" v-model="editingContent"
class="form-select editable-field small-select text-uppercase" class="form-select editable-field pl-1 pr-4 small-select text-uppercase"
@blur="editOFF" @blur="editOFF"
> >
<option v-if="!isInDataTypes"> <option v-if="!isInDataTypes">
@ -81,7 +81,7 @@
</div> </div>
<div <div
v-if="customizations.tableArray" v-if="customizations.tableArray"
class="td" class="td p-0"
tabindex="0" tabindex="0"
> >
<label class="form-checkbox"> <label class="form-checkbox">
@ -89,7 +89,7 @@
<i class="form-icon" /> <i class="form-icon" />
</label> </label>
</div> </div>
<div class="td type-int" tabindex="0"> <div class="td p-0 type-int" tabindex="0">
<template v-if="fieldType.length"> <template v-if="fieldType.length">
<span <span
v-if="!isInlineEditor.length" v-if="!isInlineEditor.length"
@ -109,7 +109,7 @@
v-model="editingContent" v-model="editingContent"
type="text" type="text"
autofocus autofocus
class="editable-field px-2" class="editable-field form-input input-sm px-1"
@blur="editOFF" @blur="editOFF"
> >
<input <input
@ -118,14 +118,14 @@
v-model="editingContent" v-model="editingContent"
type="number" type="number"
autofocus autofocus
class="editable-field px-2" class="editable-field form-input input-sm px-1"
@blur="editOFF" @blur="editOFF"
> >
</template> </template>
</div> </div>
<div <div
v-if="customizations.unsigned" v-if="customizations.unsigned"
class="td" class="td p-0"
tabindex="0" tabindex="0"
> >
<label class="form-checkbox"> <label class="form-checkbox">
@ -139,7 +139,7 @@
</div> </div>
<div <div
v-if="customizations.nullable" v-if="customizations.nullable"
class="td" class="td p-0"
tabindex="0" tabindex="0"
> >
<label class="form-checkbox"> <label class="form-checkbox">
@ -153,7 +153,7 @@
</div> </div>
<div <div
v-if="customizations.zerofill" v-if="customizations.zerofill"
class="td" class="td p-0"
tabindex="0" tabindex="0"
> >
<label class="form-checkbox"> <label class="form-checkbox">
@ -165,14 +165,14 @@
<i class="form-icon" /> <i class="form-icon" />
</label> </label>
</div> </div>
<div class="td" tabindex="0"> <div class="td p-0" tabindex="0">
<span class="cell-content" @dblclick="editON($event, localRow.default, 'default')"> <span class="cell-content" @dblclick="editON($event, localRow.default, 'default')">
{{ fieldDefault }} {{ fieldDefault }}
</span> </span>
</div> </div>
<div <div
v-if="customizations.comment" v-if="customizations.comment"
class="td type-varchar" class="td p-0 type-varchar"
tabindex="0" tabindex="0"
> >
<span <span
@ -188,13 +188,13 @@
v-model="editingContent" v-model="editingContent"
type="text" type="text"
autofocus autofocus
class="editable-field px-2" class="editable-field form-input input-sm px-1"
@blur="editOFF" @blur="editOFF"
> >
</div> </div>
<div <div
v-if="customizations.collation" v-if="customizations.collation"
class="td" class="td p-0"
tabindex="0" tabindex="0"
> >
<template v-if="fieldType.collation"> <template v-if="fieldType.collation">
@ -209,7 +209,7 @@
v-else v-else
ref="editField" ref="editField"
v-model="editingContent" v-model="editingContent"
class="form-select small-select editable-field" class="form-select small-select pl-1 pr-4 editable-field"
@blur="editOFF" @blur="editOFF"
> >
<option <option
@ -575,12 +575,16 @@ export default {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
max-height: 21px;
border-radius: 3px;
font-size: 0.7rem;
} }
.row-draggable { .row-draggable {
position: relative; position: relative;
text-align: right; text-align: right;
padding-left: 28px; padding-left: 28px;
padding-right: 2px;
cursor: grab; cursor: grab;
.row-draggable-icon { .row-draggable-icon {
@ -609,6 +613,7 @@ export default {
.cell-content { .cell-content {
display: block; display: block;
padding: 0 0.2rem;
min-height: 0.8rem; min-height: 0.8rem;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

10
src/renderer/components/WorkspaceTabQueryTableRow.vue
View File

@ -11,7 +11,7 @@
<template v-if="cKey !== '_id'"> <template v-if="cKey !== '_id'">
<span <span
v-if="!isInlineEditor[cKey] && fields[cKey]" v-if="!isInlineEditor[cKey] && fields[cKey]"
class="cell-content px-2" class="cell-content"
:class="`${isNull(col)} ${typeClass(fields[cKey].type)}`" :class="`${isNull(col)} ${typeClass(fields[cKey].type)}`"
@dblclick="editON($event, col, cKey)" @dblclick="editON($event, col, cKey)"
>{{ col | typeFormat(fields[cKey].type.toLowerCase(), fields[cKey].length) | cutText }}</span> >{{ col | typeFormat(fields[cKey].type.toLowerCase(), fields[cKey].length) | cutText }}</span>
@ -31,7 +31,7 @@
v-mask="inputProps.mask" v-mask="inputProps.mask"
:type="inputProps.type" :type="inputProps.type"
autofocus autofocus
class="editable-field px-2" class="editable-field form-input input-sm px-1"
@blur="editOFF" @blur="editOFF"
> >
<select <select
@ -59,7 +59,7 @@
v-model="editingContent" v-model="editingContent"
:type="inputProps.type" :type="inputProps.type"
autofocus autofocus
class="editable-field px-2" class="editable-field form-input input-sm px-1"
@blur="editOFF" @blur="editOFF"
> >
</template> </template>
@ -528,6 +528,9 @@ export default {
border: none; border: none;
line-height: 1; line-height: 1;
width: 100%; width: 100%;
max-height: 21px;
border-radius: 3px;
font-size: 0.7rem;
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
@ -535,6 +538,7 @@ export default {
.cell-content { .cell-content {
display: block; display: block;
padding: 0 0.2rem;
min-height: 0.8rem; min-height: 0.8rem;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

1
src/renderer/scss/_fake-tables.scss
View File

@ -29,6 +29,7 @@
.th { .th {
padding: $unit-3 $unit-2; padding: $unit-3 $unit-2;
display: table-cell; display: table-cell;
border-radius: 3px;
} }
.th { .th {

2
src/renderer/scss/_table-keys.scss
View File

@ -17,7 +17,7 @@
&.key-mul, &.key-mul,
&.key-INDEX, &.key-INDEX,
&.key-KEY { &.key-KEY {
color: palegreen; color: limegreen;
} }
&.key-FULLTEXT { &.key-FULLTEXT {

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

@ -209,7 +209,7 @@ option:checked {
cursor: pointer; cursor: pointer;
&.small-select { &.small-select {
height: 1rem; height: 21px;
font-size: 0.7rem; font-size: 0.7rem;
padding: 1px 0.4rem 0; padding: 1px 0.4rem 0;
} }

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

@ -20,6 +20,11 @@
} }
} }
option,
optgroup {
background-color: $bg-color-gray;
}
// Override Spectre.css // Override Spectre.css
.menu { .menu {
background: $bg-color-light-dark; background: $bg-color-light-dark;
@ -179,16 +184,29 @@
.workspace-query-results { .workspace-query-results {
.table { .table {
.th { .th {
background: $bg-color-dark; border-color: darken($bg-color-light-gray, 80%);
border-color: $bg-color-light-dark; background-color: $body-bg-dark;
} }
.td { .tr {
border-color: $bg-color-light-dark; background-color: darken($bg-color-light-gray, 80%);
&:focus { .td:first-child {
box-shadow: inset 0 0 0 1px $body-font-color-dark; border-left: 2px solid $body-bg-dark;
background: rgba($color: #000, $alpha: 0.3); }
.td {
border-color: $body-bg-dark;
&:focus {
box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
background-color: rgba($color: #000, $alpha: 0.3);
}
.editable-field {
box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
background-color: rgba($color: #000, $alpha: 0.3);
}
} }
} }
} }

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

@ -216,11 +216,29 @@
.table { .table {
.th { .th {
background: $body-bg; background: $body-bg;
border-color: rgba($bg-color-light-dark, 0.5); border-color: lighten($bg-color-light-gray, 2%);
} }
.td { .tr {
border-color: rgba($bg-color-light-dark, 0.5); background-color: lighten($bg-color-light-gray, 2%);
.td:first-child {
border-left: 2px solid $body-bg;
}
.td {
border-color: $body-bg;
&:focus {
box-shadow: inset 0 0 0 2px lighten($body-font-color, 10%);
background-color: $body-font-color-dark;
}
.editable-field {
box-shadow: inset 0 0 0 2px lighten($body-font-color, 10%);
background-color: $body-font-color-dark;
}
}
} }
} }
} }