fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00
Code Issues Releases Wiki Activity

perf(UI): visual improvements of tables

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -251,7 +251,7 @@ export default {
if (field.default === 'NULL') fieldDefault = null;
else {
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)) {
fieldDefault = field.default
? field.default.includes('\'')

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

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

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

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

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

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

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

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