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

new design for tab header and sql editor

Browse Source
This commit is contained in:
lana-k
2020-11-11 14:41:55 +01:00
parent 4c685b6d7c
commit 9912ed24cf
6 changed files with 7 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "sqliteviz", "name": "sqliteviz",
"version": "0.3.0", "version": "0.5.0",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",

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

@@ -31,6 +31,7 @@
--color-text-error: var(--color-red); --color-text-error: var(--color-red);
--shadow: 0 1px 2px rgba(42, 63, 95, 0.7); --shadow: 0 1px 2px rgba(42, 63, 95, 0.7);
--shadow-1: 0 2px 9px rgba(80, 103, 132, 0.2);
--border-radius-big: 5px; --border-radius-big: 5px;
--border-radius-medium: 3px; --border-radius-medium: 3px;

1
src/components/MainMenu.vue
View File

@@ -171,6 +171,7 @@ nav {
align-items: center; align-items: center;
background-color: var(--color-bg-light); background-color: var(--color-bg-light);
border-bottom: 1px solid var(--color-border-light); border-bottom: 1px solid var(--color-border-light);
box-shadow: var(--shadow-1);
box-sizing: border-box; box-sizing: border-box;
position: fixed; position: fixed;
top: 0; top: 0;

2
src/components/SqlEditor.vue
View File

@@ -74,8 +74,6 @@ export default {
max-height: 100%; max-height: 100%;
} }
>>> .CodeMirror { >>> .CodeMirror {
border: 1px solid var(--color-border);
border-radius: var(--border-radius-big);
height: 100%; height: 100%;
max-height: 100%; max-height: 100%;
} }

4
src/components/Tab.vue
View File

@@ -148,13 +148,14 @@ export default {
<style scoped> <style scoped>
.tab-content-container { .tab-content-container {
padding-top: 6px; padding-top: 6px;
background-color: var(--color-bg-light); background-color: var(--color-white);
border-top: 1px solid var(--color-border-light); border-top: 1px solid var(--color-border-light);
margin-top: -1px; margin-top: -1px;
} }
#bottomPane { #bottomPane {
height: 100%; height: 100%;
background-color: var(--color-bg-light);
} }
.query-results-splitter { .query-results-splitter {
@@ -163,7 +164,6 @@ export default {
} }
.query-editor { .query-editor {
padding: 52px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;

11
src/components/Tabs.vue
View File

@@ -81,6 +81,7 @@ export default {
#tabs-container { #tabs-container {
position: relative; position: relative;
height: 100%; height: 100%;
background-color: var(--color-bg-light);
} }
#tabs__header { #tabs__header {
display: flex; display: flex;
@@ -119,19 +120,11 @@ export default {
color: var(--color-text-active); color: var(--color-text-active);
font-weight: 600; font-weight: 600;
border-bottom: none; border-bottom: none;
background-color: var(--color-white);
} }
#tabs__header .tab__selected:hover { #tabs__header .tab__selected:hover {
cursor: default; cursor: default;
} }
#tabs__header .tab__selected:before {
content: '';
position: absolute;
width: 100%;
height: 5px;
background-color: var(--color-accent);
top: 0;
left: 0;
}
.close-icon { .close-icon {
margin-left: 5px; margin-left: 5px;