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

finish rename feature

Browse Source
This commit is contained in:
lana-k
2020-10-13 19:57:07 +02:00
parent 9c6aae7c02
commit 805f2861aa
9 changed files with 149 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/assets/styles/buttons.css
View File

@@ -1,3 +1,12 @@
button {
box-sizing: border-box;
height: 36px;
padding: 0 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
button:focus {
outline: none;
}
@@ -5,16 +14,10 @@ button:focus {
button.primary {
background: var(--color-accent);
border: 1px solid var(--color-accent-shade);
box-sizing: border-box;
border-radius: var(--border-radius-big);
height: 36px;
padding: 0 12px;
min-width: 83px;
color: var(--color-text-light);
text-shadow: var(--shadow);
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
button.primary:hover {
@@ -22,8 +25,6 @@ button.primary:hover {
border: 1px solid var(--color-accent-shade);
color: var(--color-text-light);
text-shadow: var(--shadow);
font-size: 14px;
font-weight: 600;
}
button.primary:disabled {
@@ -37,27 +38,20 @@ button.primary:disabled {
button.secondary {
background: white;
border: 1px solid var(--color-border);
box-sizing: border-box;
border-radius: var(--border-radius-big);
height: 36px;
padding: 0 12px;
min-width: 83px;
color: var(--color-text-base);
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
button.secondary:hover {
border: 1px solid var(--color-text-light-2);
color: var(--color-text-active);
}
button.toolbar {
background: transparent;
border: none;
box-sizing: border-box;
height: 36px;
padding: 0 12px;
color: var(--color-text-base);
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
button.toolbar:hover {

10
src/assets/styles/dialogs.css
View File

@@ -6,7 +6,7 @@
.dialog-header {
height: 46px;
line-height: 46px;
padding: 0 12px;
padding: 0 22px 0 12px;
color: var(--color-text-base);
font-size: 16px;
font-weight: 600;
@@ -28,3 +28,11 @@
background-color: var(--color-bg-light);
padding: 24px;
}
.dialog-buttons-container button {
margin-left: 16px;
}
.vm--overlay {
background-color: rgba(162, 177, 198, 0.5);
}

18
src/assets/styles/textFields.css
View File

@@ -1,18 +0,0 @@
input[type="text"] {
background: var(--color-white);
border: 1px solid var(--color-border);
color: var(--color-text-base);
border-radius: var(--border-radius-medium-2);
height: 36px;
padding: 0 8px;
font-size: 12px;
}
input[type="text"]::placeholder {
color: var(--color-text-light-2);
}
input[type="text"]:focus {
outline: none;
}

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

@@ -10,6 +10,7 @@
--color-blue-medium: #119DFF;
--color-blue-dark: #0D76BF;
--color-blue-dark-2: #2A3F5F;
--color-red: #EF553B;
@@ -25,6 +26,7 @@
--color-text-light-2: var(--color-gray-medium);
--color-text-base: var(--color-gray-dark);
--color-text-active: var(--color-blue-dark-2);
--color-text-error: var(--color-red);
--shadow: 0 1px 2px rgba(42, 63, 95, 0.7);

5
src/components/Schema.vue
View File

@@ -1,6 +1,6 @@
<template>
<div>
<input type="text" placeholder="Search table"/>
<text-field placeholder="Search table" width="100%"/>
<div id="db">
<div @click="schemaVisible = !schemaVisible" class="db-name">
<svg
@@ -50,10 +50,11 @@
<script>
import TableDescription from '@/components/TableDescription'
import TextField from '@/components/TextField'
export default {
name: 'Schema',
components: { TableDescription },
components: { TableDescription, TextField },
data () {
return {
schemaVisible: true,

63
src/components/TextField.vue Normal file
View File

@@ -0,0 +1,63 @@
<template>
<div>
<div :class="['text-field-label', { error: errorMsg }]">{{ label }}</div>
<input
type="text"
:placeholder="placeholder"
:class="{ error: errorMsg }"
:style="{ width: width }"
:value="value"
@input="$emit('input', $event.target.value)"
/>
<div class="text-field-error">{{ errorMsg }}</div>
</div>
</template>
<script>
export default {
name: 'textField',
props: ['placeholder', 'label', 'errorMsg', 'value', 'width']
}
</script>
<style scoped>
input {
background: var(--color-white);
border: 1px solid var(--color-border);
color: var(--color-text-base);
border-radius: var(--border-radius-medium-2);
height: 36px;
padding: 0 8px;
font-size: 13px;
box-sizing: border-box;
}
input::placeholder {
color: var(--color-text-light-2);
}
input:focus {
outline: none;
}
input.error {
border-color: var(--color-text-error);
}
.text-field-label {
font-size: 12px;
color: var(--color-text-base);
padding-left: 8px;
margin-bottom: 2px;
}
.text-field-label.error {
color: var(--color-text-error);
}
.text-field-error {
color: var(--color-text-error);
font-size: 12px;
padding-left: 8px;
margin-top: 2px;
}
</style>

11
src/components/svg/close.vue
View File

@@ -1,5 +1,5 @@
<template>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg @click.stop="$emit('click')" class="icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" fill="#A2B1C6"/>
</svg>
</template>
@@ -9,3 +9,12 @@ export default {
name: 'CloseIcon'
}
</script>
<style scoped>
.icon {
cursor: pointer;
}
.icon:hover path {
fill: var(--color-text-active);
}
</style>

1
src/main.js
View File

@@ -7,7 +7,6 @@ import VModal from 'vue-js-modal'
import '@/assets/styles/variables.css'
import '@/assets/styles/buttons.css'
import '@/assets/styles/textFields.css'
import '@/assets/styles/tables.css'
import '@/assets/styles/dialogs.css'

59
src/views/MyQueries.vue
View File

@@ -8,7 +8,7 @@
<button class="toolbar">Delete</button>
</div>
<div id="toolbar-search">
<input type="text" placeholder="Search query by name"/>
<text-field placeholder="Search query by name" width="300px"/>
</div>
</div>
<div class="rounded-bg">
@@ -36,7 +36,7 @@
<div class="second-column">
<div class="date-container">{{ query.createdAt | date }}</div>
<div class="icons-container">
<rename-icon @click="showRenameDialog" />
<rename-icon @click="showRenameDialog(index)" />
<copy-icon />
<export-icon />
<delete-icon />
@@ -53,14 +53,19 @@
<modal name="rename" classes="dialog" height="auto">
<div class="dialog-header">
Rename query
<close-icon />
<close-icon @click="$modal.hide('rename')"/>
</div>
<div class="dialog-body">
<input type="text"/>
<text-field
label="New query name"
:error-msg="errorMsg"
v-model="newName"
width="100%"
/>
</div>
<div class="dialog-buttons-container">
<button class="secondary">Cancel</button>
<button class="primary">Rename</button>
<button class="secondary" @click="$modal.hide('rename')">Cancel</button>
<button class="primary" @click="renameQuery">Rename</button>
</div>
</modal>
</div>
@@ -72,6 +77,7 @@ import CopyIcon from '@/components/svg/copy'
import ExportIcon from '@/components/svg/export'
import DeleteIcon from '@/components/svg/delete'
import CloseIcon from '@/components/svg/close'
import TextField from '@/components/TextField'
export default {
name: 'MyQueries',
@@ -80,11 +86,15 @@ export default {
CopyIcon,
ExportIcon,
DeleteIcon,
CloseIcon
CloseIcon,
TextField
},
data () {
return {
queries: []
queries: [],
newName: null,
currentQueryIndex: null,
errorMsg: null
}
},
created () {
@@ -120,8 +130,29 @@ export default {
this.$store.commit('setCurrentTabId', tab.id)
this.$router.push('/editor')
},
showRenameDialog () {
showRenameDialog (index) {
this.errorMsg = null
this.currentQueryIndex = index
this.newName = this.queries[this.currentQueryIndex].name
this.$modal.show('rename')
},
renameQuery () {
if (!this.newName) {
this.errorMsg = 'Query name can\'t be empty'
return
}
const currentQuery = this.queries[this.currentQueryIndex]
currentQuery.name = this.newName
this.$set(this.queries, this.currentQueryIndex, currentQuery)
this.$modal.hide('rename')
this.saveQueriesInLocalStorage()
const tabIndex = this.$store.state.tabs.findIndex(tab => tab.id === currentQuery.id)
if (tabIndex >= 0) {
this.$store.commit('updateTabName', { index: tabIndex, newName: this.newName })
}
},
saveQueriesInLocalStorage () {
localStorage.setItem('myQueries', JSON.stringify(this.queries))
}
}
}
@@ -135,10 +166,13 @@ export default {
#my-queries-toolbar {
display: flex;
justify-content: space-between;
margin-bottom: 18px;
margin: 0 auto 8px;
max-width: 1500px;
width: 100%;
}
.rounded-bg,
#my-queries-toolbar {
.rounded-bg {
margin: 0 auto;
max-width: 1500px;
width: 100%;
@@ -191,4 +225,7 @@ tbody tr:hover td {
tbody tr:hover .icons-container {
display: block;
}
.dialog input {
width: 100%;
}
</style>