zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 18:18:53 +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

3
src/assets/images/arrow-hover.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.51581 7.54801C4.95181 7.10201 5.55881 7.06701 6.09181 7.54801L9.99981 11.295L13.9078 7.54801C14.4408 7.06701 15.0488 7.10201 15.4818 7.54801C15.9178 7.99301 15.8898 8.74501 15.4818 9.16301C15.0758 9.58101 10.7868 13.665 10.7868 13.665C10.5698 13.888 10.2848 14 9.99981 14C9.71481 14 9.42981 13.888 9.21081 13.665C9.21081 13.665 4.92381 9.58101 4.51581 9.16301C4.10781 8.74501 4.07981 7.99301 4.51581 7.54801V7.54801Z" fill="#119DFF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 550 B

3
src/assets/images/arrow.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.51581 7.54801C4.95181 7.10201 5.55881 7.06701 6.09181 7.54801L9.99981 11.295L13.9078 7.54801C14.4408 7.06701 15.0488 7.10201 15.4818 7.54801C15.9178 7.99301 15.8898 8.74501 15.4818 9.16301C15.0758 9.58101 10.7868 13.665 10.7868 13.665C10.5698 13.888 10.2848 14 9.99981 14C9.71481 14 9.42981 13.888 9.21081 13.665C9.21081 13.665 4.92381 9.58101 4.51581 9.16301C4.10781 8.74501 4.07981 7.99301 4.51581 7.54801V7.54801Z" fill="#C8D4E3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 550 B

3
src/assets/images/delete-tag-hover.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0436 10.3943C9.7153 10.7226 9.1833 10.7226 8.8557 10.3943L7 8.27329L5.1443 10.3936C4.816 10.7219 4.284 10.7219 3.9564 10.3936C3.6281 10.0653 3.6281 9.53329 3.9564 9.20569L5.887 7.00069L3.9557 4.79429C3.6274 4.46599 3.6274 3.93469 3.9557 3.60639C4.284 3.27809 4.8153 3.27809 5.1436 3.60639L7 5.72809L8.8557 3.60639C9.184 3.27809 9.7153 3.27809 10.0436 3.60639C10.3719 3.93469 10.3719 4.46669 10.0436 4.79429L8.113 7.00069L10.0436 9.20569C10.3719 9.53399 10.3719 10.066 10.0436 10.3943V10.3943Z" fill="#DE350B"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 627 B

3
src/assets/images/delete-tag.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0436 10.3945C9.7153 10.7228 9.1833 10.7228 8.8557 10.3945L7 8.27348L5.1443 10.3938C4.816 10.7221 4.284 10.7221 3.9564 10.3938C3.6281 10.0655 3.6281 9.53348 3.9564 9.20588L5.887 7.00088L3.9557 4.79448C3.6274 4.46618 3.6274 3.93488 3.9557 3.60658C4.284 3.27828 4.8153 3.27828 5.1436 3.60658L7 5.72828L8.8557 3.60658C9.184 3.27828 9.7153 3.27828 10.0436 3.60658C10.3719 3.93488 10.3719 4.46688 10.0436 4.79448L8.113 7.00088L10.0436 9.20588C10.3719 9.53418 10.3719 10.0662 10.0436 10.3945V10.3945Z" fill="#506784"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 628 B

11
src/assets/images/sort.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M2.99932 -3.63032e-05C2.75092 -3.63032e-05 2.54932 0.201563 2.54932 0.449964L2.54932 11.55C2.54932 11.7984 2.75092 12 2.99932 12C3.24772 12 3.44932 11.7984 3.44932 11.55L3.44932 0.449964C3.44932 0.201563 3.24772 -3.63032e-05 2.99932 -3.63032e-05Z" fill="#506784"/>
<path d="M2.99915 1.80492e-05C2.8839 1.80492e-05 2.76865 0.0438534 2.68109 0.132073L0.581055 2.232C0.405273 2.40789 0.405273 2.69287 0.581055 2.86865C0.756946 3.04443 1.04193 3.04443 1.21771 2.86865L2.99969 1.08667L4.78168 2.86865C4.95746 3.04443 5.24255 3.04443 5.41833 2.86865C5.59412 2.69287 5.59412 2.40789 5.41833 2.232L3.3183 0.132073C3.22953 0.0438534 3.11428 1.80492e-05 2.99915 1.80492e-05V1.80492e-05Z" fill="#506784"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="6" height="12" fill="white" transform="matrix(1 0 0 -1 0 12)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 964 B

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);