zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-07 10:38:54 +08:00
Code Issues Projects Releases Wiki Activity

Pivot implementation and redesign (#69)

Browse Source 
- Pivot support implementation 
- Rename queries into inquiries
- Rename editor into workspace
- Change result set format
- New JSON format for inquiries
- Redesign panels
This commit is contained in:
lana-k
2021-08-04 22:20:51 +02:00
committed by GitHub
parent 8d0bc6affe
commit 5017b55944
105 changed files with 4659 additions and 2021 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
src/assets/styles/multiselect.css Normal file
View File

@@ -0,0 +1,136 @@
.sqliteviz-select,
.sqliteviz-select .multiselect__tags {
min-height: 36px;
color: var(--color-text-base);
}
.sqliteviz-select .multiselect__select {
height: 34px;
min-height: 34px;
padding: 6px;
width: 32px;
height: 32px;
margin-top: 1px;
}
.sqliteviz-select .multiselect__tags {
border-radius: var(--border-radius-medium-2);
border: 1px solid var(--color-border);
padding: 4px 32px 0 6px;
}
.sqliteviz-select,
.sqliteviz-select .multiselect__input,
.sqliteviz-select .multiselect__single,
.sqliteviz-select .multiselect__placeholder {
font-size: 12px;
}
.sqliteviz-select .multiselect__single,
.sqliteviz-select .multiselect__placeholder,
.sqliteviz-select .multiselect__input {
padding: 0;
margin-bottom: 0;
line-height: 28px;
}
.sqliteviz-select .multiselect__input {
width: 0 !important;
color: var(--color-text-base);
}
.sqliteviz-select.multiselect--active .multiselect__input {
width: auto !important;
}
.sqliteviz-select .multiselect__placeholder,
.sqliteviz-select .multiselect__input::placeholder {
color: var(--color-text-light-2);
}
.sqliteviz-select .multiselect__option.multiselect__option--highlight {
background-color: var(--color-bg-light);
color: var(--color-text-active);
}
.sqliteviz-select .multiselect__tag {
background-color: var(--color-bg-light-4);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-small);
color: var(--color-text-active);
font-size: 11.05px;
margin: 2px;
}
.sqliteviz-select .multiselect__tag-icon:after {
content: url('~@/assets/images/delete-tag.svg');
height: 14px;
width: 14px;
}
.sqliteviz-select .multiselect__tag-icon:focus:after,
.sqliteviz-select .multiselect__tag-icon:hover:after {
content: url('~@/assets/images/delete-tag-hover.svg');
}
.sqliteviz-select .multiselect__tag-icon:focus,
.sqliteviz-select .multiselect__tag-icon:hover {
background-color: var(--color-bg-danger);
border-radius: var(--border-radius-small);
}
.sqliteviz-select .multiselect__option {
min-height: 29px;
padding: 8px 12px;
line-height: 13px;
}
.sqliteviz-select .multiselect__option:after {
line-height: 29px;
}
.sqliteviz-select .multiselect__content-wrapper {
border-radius: var(--border-radius-medium-2);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-1);
top: calc(100% - 1px);
max-height: 292px !important;
}
.sqliteviz-select.multiselect--above .multiselect__content-wrapper {
top: unset;
bottom: calc(100% - 1px);
}
.sqliteviz-select .multiselect__select:before {
content: url('~@/assets/images/arrow.svg');
border: none;
top: 0;
}
.sqliteviz-select.multiselect--active .multiselect__select {
transform: none;
}
.sqliteviz-select:hover .multiselect__tags {
border-color: var(--color-border-dark);
}
.sqliteviz-select .multiselect__select:hover:before {
content: url('~@/assets/images/arrow-hover.svg');
}
.sqliteviz-select.multiselect--active .multiselect__tags {
border-radius: var(--border-radius-medium-2);
}
.sqliteviz-select .multiselect__option .no-results {
color: var(--color-text-light-2);
}
.sqliteviz-select.multiselect--disabled {
opacity: unset;
}
.sqliteviz-select.multiselect--disabled .multiselect__select {
background: unset;
}

38
src/assets/styles/tables.css
View File

@@ -6,6 +6,12 @@
border: 1px solid var(--color-border-light);
box-sizing: border-box;
}
.straight .rounded-bg {
border-radius: 0;
border-width: 0 0 1px 0;
}
.header-container {
overflow: hidden;
position: absolute;
@@ -18,6 +24,19 @@
border-radius: 5px 5px 0 0;
}
.straight .header-container {
border-radius: 0;
}
.straight {
height: 100%;
}
.straight .rounded-bg {
/* 27 - height of table footer */
height: calc(100% - 27px);
}
@supports (-moz-appearance:none) {
.header-container {
top: 0;
@@ -32,22 +51,25 @@
}
.table-container {
width: 100%;
max-height: 100%;
overflow: auto;
}
table {
table.sqliteviz-table {
min-width: 100%;
margin-top: -35px;
border-collapse: collapse;
}
thead th, .fixed-header {
.sqliteviz-table thead th, .fixed-header {
font-size: 14px;
font-weight: 600;
box-sizing: border-box;
background-color: var(--color-bg-dark);
color: var(--color-text-light);
border-right: 1px solid var(--color-border-light);
overflow: hidden;
text-overflow: ellipsis;
}
tbody td {
.sqliteviz-table tbody td {
font-size: 13px;
background-color:white;
color: var(--color-text-base);
@@ -55,18 +77,20 @@ tbody td {
border-bottom: 1px solid var(--color-border-light);
border-right: 1px solid var(--color-border-light);
}
td, th, .fixed-header {
.sqliteviz-table td,
.sqliteviz-table th,
.fixed-header {
padding: 8px 24px;
white-space: nowrap;
}
tbody tr td:last-child,
thead tr th:last-child,
.sqliteviz-table tbody tr td:last-child,
.sqliteviz-table thead tr th:last-child,
.header-container div .fixed-header:last-child {
border-right: none;
}
td > div.cell-data {
.sqliteviz-table td > div.cell-data {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;

7
src/assets/styles/variables.css
View File

@@ -11,6 +11,8 @@
--color-blue-dark: #0D76BF;
--color-blue-dark-2: #2A3F5F;
--color-red: #EF553B;
--color-red-2: #DE350B;
--color-red-light: #FFBDAD;
--color-yellow: #FBEFCB;
@@ -18,13 +20,16 @@
--color-bg-light: var(--color-gray-light);
--color-bg-light-2: var(--color-gray-light-2);
--color-bg-light-3: var(--color-gray-light-5);
--color-bg-light-4: var(--color-gray-light-4);
--color-bg-dark: var(--color-gray-dark);
--color-bg-warning: var(--color-yellow);
--color-danger: var(--color-red);
--color-bg-danger: var(--color-red-light);
--color-danger: var(--color-red-2);
--color-accent: var(--color-blue-medium);
--color-accent-shade: var(--color-blue-dark);
--color-border-light: var(--color-gray-light-2);
--color-border: var(--color-gray-light-3);
--color-border-dark: var(--color-gray-medium);
--color-text-light: var(--color-white);
--color-text-light-2: var(--color-gray-medium);
--color-text-base: var(--color-gray-dark);