Added theme preview window

Signed-off-by: Marius David Wieschollek <passwords.public@mdns.eu>

5 files changed, 192 insertions, 15 deletions

diff --git a/src/vue/Components/Demo/DemoMenu.vue b/src/vue/Components/Demo/DemoMenu.vue
new file mode 100644
index 0000000..d517416
--- /dev/null
+++ b/src/vue/Components/Demo/DemoMenu.vue
@@ -0,0 +1,133 @@
+<template>
+    <div class="demo-menu" :class="{open: showMenu}">
+        <icon class="menu-toggle" icon="ellipsis-h" font="solid" @click="showMenu = !showMenu"/>
+        <ul class="demo-menu">
+            <translate tag="li" say="DemoInfoNotification" @click="notifyInfo"/>
+            <translate tag="li" say="DemoSuccessNotification" @click="successInfo"/>
+            <translate tag="li" say="DemoWarningNotification" @click="warningInfo"/>
+            <translate tag="li" say="DemoErrorNotification" @click="errorInfo"/>
+            <translate tag="li" say="DemoDataInsert" @click="demoData"/>
+        </ul>
+    </div>
+</template>
+
+<script>
+    import Icon from '@vue/Components/Icon';
+    import Translate from '@vue/Components/Translate';
+    import ToastService from '@js/Services/ToastService';
+    import Password from 'passwords-client/src/Model/Password/Password';
+    import Preview from '@js/App/Preview';
+
+    export default {
+        components: {Translate, Icon},
+        data() {
+            return {
+                showMenu: false
+            };
+        },
+
+        mounted() {
+            this.demoData();
+        },
+
+        methods: {
+            notifyInfo() {
+                ToastService.info('DemoInfoNotification', 'Demo', {a: 'Demo', b: 'Demo'});
+            },
+            successInfo() {
+                ToastService.success('DemoSuccessNotification', 'Success');
+            },
+            warningInfo() {
+                ToastService.warning('DemoWarningNotification', 'Warning');
+            },
+            errorInfo() {
+                ToastService.error('DemoErrorNotification', 'Error');
+            },
+            async demoData() {
+                let passwords = [
+                    new Password({label: 'Demo', username: 'demo', password: 'demo'}),
+                    new Password({label: 'Demo', username: 'demo', password: 'demo'})
+                ];
+
+                let func = Preview.app.$refs.search.search;
+                Preview.app.$refs.search.search = () => {};
+                Preview.app.$refs.search.query = 'demo';
+                Preview.app.$refs.search.search = func;
+
+                Preview.app.$refs.search.passwords = passwords;
+                Preview.app.$refs.related.passwords = passwords;
+            }
+        }
+    };
+</script>
+
+<style lang="scss">
+    .demo-menu {
+        position : absolute;
+        z-index  : 0;
+
+        .menu-toggle {
+            background-color : var(--button-hover-bg-color);
+            color            : var(--button-hover-fg-color);
+            position         : absolute;
+            left             : .5rem;
+            bottom           : .5rem;
+            padding          : .5rem;
+            border-radius    : 50%;
+            cursor           : pointer;
+            opacity          : .5;
+            transition       : var(--fade-transition);
+        }
+
+        .demo-menu {
+            border-radius    : .25rem;
+            background-color : var(--button-hover-bg-color);
+            color            : var(--button-hover-fg-color);
+            position         : absolute;
+            left             : 2rem;
+            bottom           : .5rem;
+            margin           : 0;
+            padding          : 0;
+            list-style       : none;
+            display          : none;
+
+            li {
+                padding    : .25rem;
+                border-top : 1px solid rgba(0, 0, 0, .25);
+                cursor     : pointer;
+                white-space: nowrap;
+
+                &:hover {
+                    background-color : rgba(0, 0, 0, .25);
+                    border-color     : rgba(0, 0, 0, 0);
+                }
+
+                &:first-of-type {
+                    border-top : 0;
+                }
+            }
+        }
+
+        &.open {
+            transition : z-index 1s;
+
+            .menu-toggle {
+                border-radius : 50% 0 0 50%;
+                opacity       : 1;
+            }
+
+            .demo-menu {
+                display : block;
+            }
+        }
+
+        &:hover {
+            z-index    : 1;
+            transition : none;
+
+            .menu-toggle {
+                opacity : 1;
+            }
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/src/vue/Components/Options/Theming.vue b/src/vue/Components/Options/Theming.vue
index ddc095a..45593af 100644
--- a/src/vue/Components/Options/Theming.vue
+++ b/src/vue/Components/Options/Theming.vue
@@ -1,12 +1,16 @@
 <template>
     <div class="theming">
         <div class="theme-settings">
-            <translate tag="label" for="theme-current" say="SettingsCurrentTheme"/>
-            <select-field id="theme-current" :options="themeList" :translate="false" v-model="currentTheme"/>
-        </div>
-        <div class="theme-preview">
+            <div class="setting">
+                <translate tag="label" for="theme-current" say="SettingsCurrentTheme"/>
+                <select-field id="theme-current" :options="themeList" :translate="false" v-model="currentTheme"/>
+            </div>
+            <translate tag="h4" say="SettingsCustomColors"/>
+            <div class="custom-colors">
 
+            </div>
         </div>
+        <preview-theme :theme="currentTheme"/>
     </div>
 </template>
 
@@ -15,9 +19,10 @@
     import MessageService from '@js/Services/MessageService';
     import Translate from '@vue/Components/Translate';
     import ToastService from '@js/Services/ToastService';
+    import PreviewTheme from '@vue/Components/Theming/PreviewTheme';
 
     export default {
-        components: {Translate, SelectField},
+        components: {PreviewTheme, Translate, SelectField},
 
         data() {
             return {
@@ -55,17 +60,19 @@
         }
 
         .theme-settings {
-            display               : grid;
-            grid-template-areas   : "label" "input";
-            grid-template-columns : 1fr 1fr;
+            .setting {
+                display               : grid;
+                grid-template-areas   : "label" "input";
+                grid-template-columns : 1fr 1fr;
 
-            label {
-                grid-area : label;
-            }
+                label {
+                    grid-area : label;
+                }
 
-            span,
-            input {
-                grid-area : input;
+                span,
+                input {
+                    grid-area : input;
+                }
             }
         }
     }
diff --git a/src/vue/Components/Tabs.vue b/src/vue/Components/Tabs.vue
index d07ce0f..797b100 100644
--- a/src/vue/Components/Tabs.vue
+++ b/src/vue/Components/Tabs.vue
@@ -18,7 +18,7 @@
                  :class="`tab-content-${name}`"
                  :style="{display: name===tab ? 'block':'none'}">
                 <keep-alive>
-                    <slot :name="name" v-if="name===tab"/>
+                    <slot :name="name"/>
                 </keep-alive>
             </div>
         </div>
diff --git a/src/vue/Components/Theming/PreviewTheme.vue b/src/vue/Components/Theming/PreviewTheme.vue
new file mode 100644
index 0000000..be3f210
--- /dev/null
+++ b/src/vue/Components/Theming/PreviewTheme.vue
@@ -0,0 +1,36 @@
+<template>
+    <iframe :src="url" class="theme-preview"/>
+</template>
+
+<script>
+    export default {
+        props: {
+            theme: {
+                type: String
+            }
+        },
+
+        data() {
+            return {
+                url: 'about:blank'
+            };
+        },
+
+        mounted() {
+            this.url = 'preview.html';
+        },
+
+        watch: {
+            theme(value, oldValue) {
+                if(oldValue !== null) this.$el.contentWindow.location.reload();
+            }
+        }
+    };
+</script>
+
+<style lang="scss">
+    .theme-preview {
+        height : 360px;
+        border : 1px solid var(--element-hover-bg-color);
+    }
+</style>
\ No newline at end of file
diff --git a/src/vue/Components/Toasts.vue b/src/vue/Components/Toasts.vue
index b06b396..d9b7569 100644
--- a/src/vue/Components/Toasts.vue
+++ b/src/vue/Components/Toasts.vue
@@ -40,6 +40,7 @@
         bottom   : 0;
         left     : 0;
         overflow : hidden;
+        z-index  : 1;
 
         .toast-leave-active {
             animation : toast-leave .5s;