From 8b762582605d267a623dbaa322c859acff76edf1 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Sat, 17 Oct 2020 14:07:43 +0200
Subject: [PATCH] add checkboxes

---
 src/assets/images/checkbox_checked.svg       | 17 ++++++
 src/assets/images/checkbox_checked_light.svg | 17 ++++++
 src/components/CheckBox.vue                  | 57 ++++++++++++++++++++
 src/views/MyQueries.vue                      | 37 ++++++++++---
 4 files changed, 122 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/images/checkbox_checked.svg
 create mode 100644 src/assets/images/checkbox_checked_light.svg
 create mode 100644 src/components/CheckBox.vue

diff --git a/src/assets/images/checkbox_checked.svg b/src/assets/images/checkbox_checked.svg
new file mode 100644
index 0000000..29f20d9
--- /dev/null
+++ b/src/assets/images/checkbox_checked.svg
@@ -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>
diff --git a/src/assets/images/checkbox_checked_light.svg b/src/assets/images/checkbox_checked_light.svg
new file mode 100644
index 0000000..7a26f81
--- /dev/null
+++ b/src/assets/images/checkbox_checked_light.svg
@@ -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>
diff --git a/src/components/CheckBox.vue b/src/components/CheckBox.vue
new file mode 100644
index 0000000..b0515d9
--- /dev/null
+++ b/src/components/CheckBox.vue
@@ -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>
diff --git a/src/views/MyQueries.vue b/src/views/MyQueries.vue
index be80574..87dcbe0 100644
--- a/src/views/MyQueries.vue
+++ b/src/views/MyQueries.vue
@@ -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 {