mirror of https://github.com/Fabio286/antares.git
perf(UI): visual improvements of tables
This commit is contained in:
parent
c9fa941578
commit
bc82289d54
|
@ -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.
|
||||||
|
|
|
@ -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('\'')
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -17,7 +17,7 @@
|
||||||
&.key-mul,
|
&.key-mul,
|
||||||
&.key-INDEX,
|
&.key-INDEX,
|
||||||
&.key-KEY {
|
&.key-KEY {
|
||||||
color: palegreen;
|
color: limegreen;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.key-FULLTEXT {
|
&.key-FULLTEXT {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tr {
|
||||||
|
background-color: darken($bg-color-light-gray, 80%);
|
||||||
|
|
||||||
|
.td:first-child {
|
||||||
|
border-left: 2px solid $body-bg-dark;
|
||||||
}
|
}
|
||||||
|
|
||||||
.td {
|
.td {
|
||||||
border-color: $bg-color-light-dark;
|
border-color: $body-bg-dark;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: inset 0 0 0 1px $body-font-color-dark;
|
box-shadow: inset 0 0 0 2px darken($body-font-color-dark, 40%);
|
||||||
background: rgba($color: #000, $alpha: 0.3);
|
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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tr {
|
||||||
|
background-color: lighten($bg-color-light-gray, 2%);
|
||||||
|
|
||||||
|
.td:first-child {
|
||||||
|
border-left: 2px solid $body-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
.td {
|
.td {
|
||||||
border-color: rgba($bg-color-light-dark, 0.5);
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue