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

add draft of Rename Query dialog

Browse Source
This commit is contained in:
lana-k
2020-10-12 22:49:52 +02:00
parent d7782733ed
commit 9c6aae7c02
2 changed files with 55 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/assets/styles/dialogs.css Normal file
View File

@@ -0,0 +1,30 @@
.dialog {
border-radius: var(--border-radius-big);
box-shadow: 0px 2px 9px rgba(80, 103, 132, 0.8);
}
.dialog-header {
height: 46px;
line-height: 46px;
padding: 0 12px;
color: var(--color-text-base);
font-size: 16px;
font-weight: 600;
display: flex;
justify-content: space-between;
align-items: center;
}
.dialog-body {
min-height: 100px;
background-color: var(--color-bg-light);
padding: 24px;
border-top: 1px solid var(--color-border-light);
}
.dialog-buttons-container {
display: flex;
justify-content: flex-end;
background-color: var(--color-bg-light);
padding: 24px;
}

31
src/views/MyQueries.vue
View File

@@ -36,7 +36,7 @@
<div class="second-column"> <div class="second-column">
<div class="date-container">{{ query.createdAt | date }}</div> <div class="date-container">{{ query.createdAt | date }}</div>
<div class="icons-container"> <div class="icons-container">
<rename-icon /> <rename-icon @click="showRenameDialog" />
<copy-icon /> <copy-icon />
<export-icon /> <export-icon />
<delete-icon /> <delete-icon />
@@ -49,14 +49,29 @@
</div> </div>
</div> </div>
</div> </div>
<modal name="rename" classes="dialog" height="auto">
<div class="dialog-header">
Rename query
<close-icon />
</div>
<div class="dialog-body">
<input type="text"/>
</div>
<div class="dialog-buttons-container">
<button class="secondary">Cancel</button>
<button class="primary">Rename</button>
</div>
</modal>
</div> </div>
</template> </template>
<script> <script>
import RenameIcon from '@/components/svg/rename.vue' import RenameIcon from '@/components/svg/rename'
import CopyIcon from '@/components/svg/copy.vue' import CopyIcon from '@/components/svg/copy'
import ExportIcon from '@/components/svg/export.vue' import ExportIcon from '@/components/svg/export'
import DeleteIcon from '@/components/svg/delete.vue' import DeleteIcon from '@/components/svg/delete'
import CloseIcon from '@/components/svg/close'
export default { export default {
name: 'MyQueries', name: 'MyQueries',
@@ -64,7 +79,8 @@ export default {
RenameIcon, RenameIcon,
CopyIcon, CopyIcon,
ExportIcon, ExportIcon,
DeleteIcon DeleteIcon,
CloseIcon
}, },
data () { data () {
return { return {
@@ -103,6 +119,9 @@ export default {
this.$store.commit('addTab', tab) this.$store.commit('addTab', tab)
this.$store.commit('setCurrentTabId', tab.id) this.$store.commit('setCurrentTabId', tab.id)
this.$router.push('/editor') this.$router.push('/editor')
},
showRenameDialog () {
this.$modal.show('rename')
} }
} }
} }