Merge pull request #42 from nikandlv/development

Dialog update

src/renderer/components/Dialog.vue

@@ -11,12 +11,36 @@
 
 <script>
 export default {
-    name: 'Dialog',
-    props: ['open']
+  name: 'Dialog',
+  props: ['open']
 }
 </script>
 
 <style scoped lang="sass">
-.dialog
-    display: block
+.dialog-wrapper.open
+    position: absolute
+    left: 0
+    top: 0
+    width: 100vw
+    height: 100vh
+    display: flex
+    align-items: center
+    justify-content: center
+    .overlay
+        position: absolute
+        left: 0
+        top: 0
+        width: 100%
+        height: 100%
+        background: rgba(black,0.3)
+        z-index: 1400
+    .dialog
+        position: relative
+        padding: 1rem
+        background: white
+        border-radius: 1rem
+        max-width: 250px
+        min-width: 250px
+        z-index: 1400
+        box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12)
 </style>

src/renderer/layouts/DockableSidebar.vue

@@ -1,5 +1,6 @@
 <template>
     <div>
+        <Dialog :open="false" />
         <section class="handle" :class="{'open': menuStatus}">
             <div @click="toggleMenuStatus" class="icon">
                 <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.97 384.97" style="enable-background:new 0 0 384.97 384.97;" xml:space="preserve">
@@ -122,6 +123,7 @@
 <script>
 import MenuGroup from '../components/MenuGroup'
 import MenuItem from '../components/MenuItem'
+import Dialog from '../components/Dialog'
 import projectPackage from '~/package.json'
 import Logo from '../components/Logo'
 import { mapActions, mapGetters } from 'vuex'
@@ -131,7 +133,7 @@ import OverscrollPlugin from 'smooth-scrollbar/plugins/overscroll'
 Scrollbar.use(OverscrollPlugin)
 export default {
   name: 'DockableSidebar',
-  components: { MenuGroup, MenuItem, Logo, Button },
+  components: { MenuGroup, MenuItem, Logo, Button, Dialog },
   data: () => {
     return { version: projectPackage.version }
   },