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 checkboxes

Browse Source
This commit is contained in:
lana-k
2020-10-17 14:07:43 +02:00
parent 518270e1f5
commit 8b76258260
4 changed files with 122 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/assets/images/checkbox_checked.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="17" height="17" rx="2.5" fill="#119DFF" stroke="#0D76BF"/>
<g filter="url(#filter0_d)">
<path d="M15.75 5.25L6.75 14.25L2.625 10.125L3.6825 9.0675L6.75 12.1275L14.6925 4.1925L15.75 5.25Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d" x="0.625" y="3.1925" width="17.125" height="14.0575" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.164706 0 0 0 0 0.247059 0 0 0 0 0.372549 0 0 0 0.7 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 981 B

17
src/assets/images/checkbox_checked_light.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="17" height="17" rx="2.5" fill="#F3F6FA" stroke="#C8D4E3"/>
<g filter="url(#filter0_d)">
<path d="M15.75 5.24988L6.75 14.2499L2.625 10.1249L3.6825 9.06738L6.75 12.1274L14.6925 4.19238L15.75 5.24988Z" fill="#119DFF"/>
</g>
<defs>
<filter id="filter0_d" x="0.625" y="3.19238" width="17.125" height="14.0575" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.164706 0 0 0 0 0.247059 0 0 0 0 0.372549 0 0 0 0.45 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 996 B

57
src/components/CheckBox.vue Normal file
View File

@@ -0,0 +1,57 @@
<template>
<div class="checkbox-container" @click.stop="checked = !checked">
<div v-show="!checked" class="unchecked" />
<img
v-show="checked && theme === 'accent'"
:src="require('@/assets/images/checkbox_checked.svg')"
/>
<img
v-show="checked && theme === 'light'"
:src="require('@/assets/images/checkbox_checked_light.svg')"
/>
</div>
</template>
<script>
export default {
name: 'checkBox',
props: {
theme: {
type: String,
required: false,
default: 'accent',
validator: (value) => {
return ['accent', 'light'].includes(value)
}
}
},
data () {
return {
checked: false
}
},
watch: {
checked () {
this.$emit('change', this.checked)
}
}
}
</script>
<style scoped>
.checkbox-container {
display: inline-block;
cursor: pointer;
}
.unchecked {
width: 18px;
height: 18px;
background-color: white;
border: 1px solid var(--color-border);
border-radius: var(--border-radius-medium);
box-sizing: border-box;
}
img {
display: block;
}
</style>

37
src/views/MyQueries.vue
View File

@@ -26,7 +26,8 @@
<div class="header-container">
<div>
<div class="fixed-header" ref="name-th">
Name
<check-box theme="light"/>
<div class="name-th">Name</div>
</div>
<div class="fixed-header">
Created at
@@ -41,7 +42,10 @@
<tbody>
<tr v-for="(query, index) in queries" :key="query.id" @click="openQuery(index)">
<td ref="name-td">
{{ query.name }}
<div class="cell-data">
<check-box />
<div class="name">{{ query.name }}</div>
</div>
</td>
<td>
<div class="second-column">
@@ -114,6 +118,7 @@ import ExportIcon from '@/components/svg/export'
import DeleteIcon from '@/components/svg/delete'
import CloseIcon from '@/components/svg/close'
import TextField from '@/components/TextField'
import CheckBox from '@/components/CheckBox'
import { nanoid } from 'nanoid'
export default {
@@ -124,7 +129,8 @@ export default {
ExportIcon,
DeleteIcon,
CloseIcon,
TextField
TextField,
CheckBox
},
data () {
return {
@@ -275,24 +281,43 @@ export default {
max-width: 1500px;
width: 100%;
}
.fixed-header:first-child {
display: flex;
align-items: center;
padding-left: 12px;
}
.fixed-header:first-child .name-th {
margin-left: 24px;
}
table {
margin-top: 0;
}
tbody tr td {
overflow: hidden;
min-width: 0;
text-overflow: ellipsis;
padding: 0 24px;
line-height: 40px;
}
tbody tr td:first-child {
width: 70%;
max-width: 0;
padding: 0 12px;
}
tbody tr td:last-child {
width: 30%;
max-width: 0;
padding: 0 24px;
}
tbody .cell-data {
display: flex;
align-items: center;
max-width: 100%;
}
tbody .cell-data div.name {
overflow: hidden;
text-overflow: ellipsis;
margin-left: 24px;
}
tbody tr:hover td {