From 04f0089d5985844522ddbdffceed47f6c9e3d5d7 Mon Sep 17 00:00:00 2001
From: Niclas Thobaben <NiclasThobaben@DemHierSeinRechner.local>
Date: Sat, 11 Jan 2020 11:55:58 +0100
Subject: [PATCH] FEAT Toasts

---
 public/close-24px.svg                         |   1 +
 src/Test.vue                                  | 126 +++++++++++-------
 .../icons/check_circle_outline-24px.svg       |   1 +
 src/assets/icons/close-24px.svg               |   1 +
 src/assets/icons/error_outline-24px.svg       |   1 +
 src/assets/icons/help_outline-24px.svg        |   1 +
 src/assets/icons/info-24px.svg                |   1 +
 src/assets/icons/warning-24px.svg             |   1 +
 src/assets/styles/buttons.css                 |   2 +-
 src/assets/styles/main.css                    |   5 +
 src/components/Toast.vue                      | 119 +++++++++++++++++
 src/components/form/FormBase.vue              |   4 +
 src/components/form/FormCheckbox.vue          |   8 +-
 src/components/layout/BaseContainer.vue       |  30 +++++
 src/components/layout/ContentContainer.vue    |  56 ++++++++
 15 files changed, 301 insertions(+), 56 deletions(-)
 create mode 100644 public/close-24px.svg
 create mode 100644 src/assets/icons/check_circle_outline-24px.svg
 create mode 100644 src/assets/icons/close-24px.svg
 create mode 100644 src/assets/icons/error_outline-24px.svg
 create mode 100644 src/assets/icons/help_outline-24px.svg
 create mode 100644 src/assets/icons/info-24px.svg
 create mode 100644 src/assets/icons/warning-24px.svg
 create mode 100644 src/components/Toast.vue
 create mode 100644 src/components/layout/BaseContainer.vue
 create mode 100644 src/components/layout/ContentContainer.vue

diff --git a/public/close-24px.svg b/public/close-24px.svg
new file mode 100644
index 0000000..dea8678
--- /dev/null
+++ b/public/close-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
\ No newline at end of file
diff --git a/src/Test.vue b/src/Test.vue
index 063a65c..8d20d67 100644
--- a/src/Test.vue
+++ b/src/Test.vue
@@ -1,68 +1,96 @@
 <template>
-  <div id="test">
-    <h1>Buttons</h1>
-    <div>
-      <button>Default</button>
-      <button disabled>Default</button>
-    
-      <button class="generic">Generic</button>
-      <button class="generic" disabled>Generic</button>
-    
-      <button class="action">Action</button>
-      <button class="action" disabled>Action</button>
-      
+  <BaseContainer>
+    <ContentContainer title="Content Container" buttons="true">
+      <template #buttons>
+        <button>Button Bar</button>
+        <button class="action">Button Bar</button>
+      </template>
+      <template #content>
+        <h1>Buttons</h1>
+        <div>
+          <button>Default</button>
+          <button disabled>Default</button>
+        
+          <button class="generic">Generic</button>
+          <button class="generic" disabled>Generic</button>
+        
+          <button class="action">Action</button>
+          <button class="action" disabled>Action</button>
+          
 
-      <button class="outlined">Default</button>
-      <button class="outlined" disabled>Default</button>
-    
-      <button class="generic outlined">Generic</button>
-      <button class="generic outlined" disabled>Generic</button>
-    
-      <button class="action outlined">Action</button>
-      <button class="action outlined" disabled>Action</button>
+          <button class="outlined">Default</button>
+          <button class="outlined" disabled>Default</button>
+        
+          <button class="generic outlined">Generic</button>
+          <button class="generic outlined" disabled>Generic</button>
+        
+          <button class="action outlined">Action</button>
+          <button class="action outlined" disabled>Action</button>
+
+        </div>
+
+        <h1>Form Elements</h1>
+        <div>
+          <FormText placeholder="Input Text" label="Field Label" :model="text"/>
+          <FormText placeholder="Input Text" label="Field with Error" error="An error message" :model="text"/>
+          <FormText placeholder="Input Text" label="Field Label" off="true"/>
+          <FormNumber placeholder="A Number" label="Field Label" />
+          <FormNumber placeholder="A Number" label="Field Label" error="An Error"/>
+          <FormNumber placeholder="A Number" label="Field Label" off="true"/>
+          <FormSelect placeholder="Placeholder" label="Select">
+            <option value="optionA">Option A</option>
+            <option value="optionB">Option B</option>
+            <option value="optionC">Option C</option>
+            <option value="optionD">Option D</option>
+          </FormSelect>
+          <FormSelect placeholder="Placeholder" label="Select" off="true">
+            <option value="optionA">Option A</option>
+            <option value="optionB">Option B</option>
+            <option value="optionC">Option C</option>
+            <option value="optionD">Option D</option>
+          </FormSelect>
+          <FormCheckbox label="Checkbox"/>
+          <FormCheckbox label="Checkbox" error="An Error Message"/>
+          <FormCheckbox label="Checkbox" off="true"/>
+        </div>
+        <h2>Toasts</h2>
+        <div>
+          <Toast type="info">An Information!</Toast>
+          <Toast type="warn">A Warning!</Toast>
+          <Toast type="error">An Error!</Toast>
+          <Toast type="success">Success!</Toast>
+          <Toast auto_close="5000">Autoclose</Toast>
+        </div>
+      </template>
+    </ContentContainer>
+  </BaseContainer>
 
-    </div>
 
-    <h1>Form Elements</h1>
-    <div>
-      <FormText placeholder="Input Text" label="Field Label" :model="text"/>
-      <FormText placeholder="Input Text" label="Field with Error" error="An error message" :model="text"/>
-      <FormText placeholder="Input Text" label="Field Label" off="true"/>
-      <FormNumber placeholder="A Number" label="Field Label" />
-      <FormNumber placeholder="A Number" label="Field Label" error="An Error"/>
-      <FormNumber placeholder="A Number" label="Field Label" off="true"/>
-      <FormSelect placeholder="Placeholder" label="Select">
-        <option value="optionA">Option A</option>
-        <option value="optionB">Option B</option>
-        <option value="optionC">Option C</option>
-        <option value="optionD">Option D</option>
-      </FormSelect>
-      <FormSelect placeholder="Placeholder" label="Select" off="true">
-        <option value="optionA">Option A</option>
-        <option value="optionB">Option B</option>
-        <option value="optionC">Option C</option>
-        <option value="optionD">Option D</option>
-      </FormSelect>
-      <FormCheckbox label="Checkbox"/>
-      <FormCheckbox label="Checkbox" error="An Error Message"/>
-      <FormCheckbox label="Checkbox" off="true"/>
-    </div>
-  </div>
 </template>
 
 <script>
 
+import BaseContainer from './components/layout/BaseContainer';
+import ContentContainer from './components/layout/ContentContainer';
+
 import FormText from './components/form/FormText';
 import FormNumber from './components/form/FormNumber';
 import FormSelect from './components/form/FormSelect';
 import FormCheckbox from './components/form/FormCheckbox';
 
+import Toast from './components/Toast'
+
 export default {
   components: {
+    BaseContainer,
+    ContentContainer,
+
     FormText,
     FormNumber,
     FormSelect,
-    FormCheckbox
+    FormCheckbox,
+
+    Toast
   },
   data(){
     return {
@@ -78,9 +106,7 @@ export default {
 @import './assets/styles/main.css';
 @import './assets/styles/buttons.css';
 
-body {
-  background-color: var(--white-washed);
-}
+
 
 #test {
   margin: 40px;
diff --git a/src/assets/icons/check_circle_outline-24px.svg b/src/assets/icons/check_circle_outline-24px.svg
new file mode 100644
index 0000000..8b4f0ba
--- /dev/null
+++ b/src/assets/icons/check_circle_outline-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0zm0 0h24v24H0V0z"/><path d="M16.59 7.58L10 14.17l-3.59-3.58L5 12l5 5 8-8zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/close-24px.svg b/src/assets/icons/close-24px.svg
new file mode 100644
index 0000000..dea8678
--- /dev/null
+++ b/src/assets/icons/close-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/error_outline-24px.svg b/src/assets/icons/error_outline-24px.svg
new file mode 100644
index 0000000..39062fa
--- /dev/null
+++ b/src/assets/icons/error_outline-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/help_outline-24px.svg b/src/assets/icons/help_outline-24px.svg
new file mode 100644
index 0000000..6320581
--- /dev/null
+++ b/src/assets/icons/help_outline-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/info-24px.svg b/src/assets/icons/info-24px.svg
new file mode 100644
index 0000000..f8aba4c
--- /dev/null
+++ b/src/assets/icons/info-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
\ No newline at end of file
diff --git a/src/assets/icons/warning-24px.svg b/src/assets/icons/warning-24px.svg
new file mode 100644
index 0000000..8dcb028
--- /dev/null
+++ b/src/assets/icons/warning-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>
\ No newline at end of file
diff --git a/src/assets/styles/buttons.css b/src/assets/styles/buttons.css
index 7677a1e..d0ba49d 100644
--- a/src/assets/styles/buttons.css
+++ b/src/assets/styles/buttons.css
@@ -4,7 +4,7 @@ button {
     --color-default-disabled: #AFDA9A;
 
     padding: 4px 36px;
-    margin: 4px;
+    margin: 8px 4px;
     min-width: 120px;
     font-weight: bold;
     border: 1px solid transparent;
diff --git a/src/assets/styles/main.css b/src/assets/styles/main.css
index 3ea7477..f0eaaa7 100644
--- a/src/assets/styles/main.css
+++ b/src/assets/styles/main.css
@@ -76,6 +76,11 @@
     color: var(--grey-dark);
 }
 
+html, body {
+    width: 100%;
+    height: 100%;
+}
+
 h1 { font-size: 2.5rem; padding: 24px 4px 4px; }
 h2 { font-size: 2.0rem; padding: 24px 4px; }
 h3 { font-size: 1.5rem; padding: 24px 4px; }
diff --git a/src/components/Toast.vue b/src/components/Toast.vue
new file mode 100644
index 0000000..a371590
--- /dev/null
+++ b/src/components/Toast.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="toast" :class="type">
+    <div class="icon"></div>
+    <p><slot></slot></p>
+    <div class="close" v-if="!auto_close" @click="close()"></div>
+  </div>
+</template>
+
+<script>
+export default {
+    props: [
+        'type',
+        'auto_close'
+    ],
+    data(){
+        return {}
+    },
+    methods: {
+        close(){
+            this.$destroy();
+            this.$el.parentNode.removeChild(this.$el);
+        }
+    },
+    mounted(){
+        if(this.auto_close){
+            setTimeout(this.close, this.auto_close);
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+
+
+    div.toast {
+        display: flex;
+        align-items: stretch;
+        align-content: space-between;
+        justify-items: stretch;
+        justify-content: space-between;
+
+        padding: 16px;
+        margin: 8px;
+        color: var(--info);
+        background-color: var(--info-light);
+        border-left: 8px solid var(--info);
+
+    }
+
+    div.toast p {
+        flex: 1;
+        margin: 0 24px;
+        vertical-align: middle;
+        line-height: 24px;
+        text-align: left;
+        justify-self: flex-start;
+        color: inherit;
+    }
+
+    div.icon {
+        flex: 0 0 24px;
+        mask-size: contain;
+        mask-repeat: no-repeat;
+        mask: url('../assets/icons/info-24px.svg');
+        width: 24px;
+        height: 24px;   
+        transform: scale(1.2);
+        background: var(--info);
+    }
+
+
+    div.close {
+        background: black;
+        mask-size: contain;
+        mask-repeat: no-repeat;
+        mask: url('../assets/icons/close-24px.svg');
+        float: right;
+        width: 24px;
+        height: 24px;   
+        transform: scale(0.6);
+        background: var(--grey);
+        cursor: pointer;
+    }
+
+    div.close:hover{
+        background: var(--primary-blue-dark);
+    }
+
+    div.toast.warn { 
+        color: var(--warn); 
+        background-color: var(--warn-light); 
+        border-color: var(--warn); 
+    }
+    div.toast.warn .icon {
+        mask: url('../assets/icons/warning-24px.svg');
+        background: var(--warn);
+    }
+
+    div.toast.error { 
+        color: var(--error); 
+        background-color: var(--error-light); 
+        border-color: var(--error); 
+    }
+    div.toast.error .icon {
+        mask: url('../assets/icons/error_outline-24px.svg');
+        background: var(--error);
+    }
+
+    div.toast.success { 
+        color: var(--success); 
+        background-color: var(--success-light); 
+        border-color: var(--success); 
+    }
+    div.toast.success .icon {
+        mask: url('../assets/icons/check_circle_outline-24px.svg');
+        background: var(--success);
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/form/FormBase.vue b/src/components/form/FormBase.vue
index 6d3139a..c349fd1 100644
--- a/src/components/form/FormBase.vue
+++ b/src/components/form/FormBase.vue
@@ -92,6 +92,10 @@ export default {
         cursor: not-allowed;
     }
 
+    .form-base.disabled > label {
+        cursor: not-allowed;
+    }
+
     .form-base.disabled > input::placeholder, .form-base.disabled > select option:disabled{
         color: #00000077;
     }
diff --git a/src/components/form/FormCheckbox.vue b/src/components/form/FormCheckbox.vue
index 1993c72..1d7fd3c 100644
--- a/src/components/form/FormCheckbox.vue
+++ b/src/components/form/FormCheckbox.vue
@@ -52,16 +52,14 @@ export default {
     label.disabled::after {
         background-color: var(--grey-lightest);
         color: var(--grey);
-        border-color: var(--grey-lightest);
+        border-color: var(--grey-light);
         cursor: not-allowed;
     }
 
-    input[type="checkbox"]:focus + label::after {
-        box-shadow: 0 0 4px var(--success);
-    }
 
     input[type="checkbox"]:checked + label::after {
-        box-shadow: 0 0 4px var(--success);
+        background-color: var(--primary-blue-dark);
+        box-shadow: inset 0px 0px 0px 3px #fff;
     }
 
 
diff --git a/src/components/layout/BaseContainer.vue b/src/components/layout/BaseContainer.vue
new file mode 100644
index 0000000..eaa781a
--- /dev/null
+++ b/src/components/layout/BaseContainer.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="module-container">
+      <!-- <RouteDisplay/> -->
+      <slot>
+
+      </slot>
+  </div>
+</template>
+
+<script>
+
+// import RouteDisplay from '../RouteDisplay';
+
+export default {
+    props: [
+        
+    ],
+    components: {
+        // RouteDisplay
+    }
+}
+</script>
+
+<style scoped>
+    .module-container {
+        flex: 1;
+        background-color: var(--white-washed);
+        padding: 48px 24px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/layout/ContentContainer.vue b/src/components/layout/ContentContainer.vue
new file mode 100644
index 0000000..8503cf4
--- /dev/null
+++ b/src/components/layout/ContentContainer.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="container">
+        <div class="header">
+            <h2>{{title}}</h2>
+        </div>
+        <div v-if="buttons" class="header">
+            <slot name="buttons"></slot>
+        </div>
+        <div class="content">
+            <slot name="content"></slot>
+        </div>
+        <div class="footer">
+            <slot name="footer"></slot>
+        </div>
+  </div>
+</template>
+
+<script>
+export default {
+    props: [
+        'title',
+        'buttons'
+    ]
+}
+</script>
+
+<style scoped>
+    .container {
+        color: var(--grey-dark);
+        background-color: var(--white-normal);
+        border: 1px solid var(--grey-light);
+        border-radius: 4px;
+        box-shadow: 8px 8px 20px #00000022;
+    }
+
+    .content {
+        padding: 12px;
+    }
+
+    .header, .footer {
+        padding: 0px 12px;
+    }
+
+    .header h2 {
+        padding: 8px 0;
+        color: var(--primary-blue-dark);
+    }
+
+    .header { border-bottom: 1px solid var(--grey-light); }
+    .footer { border-top: 1px solid var(--grey-light); }
+
+
+
+
+
+</style>
\ No newline at end of file