Added theme preview window

Signed-off-by: Marius David Wieschollek <passwords.public@mdns.eu>
author: Marius David Wieschollek <passwords.public@mdns.eu> 2020-02-29 18:36:57 +0300
committer: Marius David Wieschollek <passwords.public@mdns.eu> 2020-02-29 18:36:57 +0300
commit: 201c6f2d7a723b17a8bab2309932a420e3c94397 (patch)
tree: 85f16de4b142fa026bfd8fea044e826f2f0f5235
parent: aa19c1befd5d5cca49483049f1c6af7fb56e9a3c (diff)
13 files changed, 301 insertions, 21 deletions
diff --git a/src/js/App/Preview.js b/src/js/App/Preview.js
new file mode 100644
index 0000000..17c85a3
--- /dev/null
+++ b/src/js/App/Preview.js
@@ -0,0 +1,36 @@
+import Vue from 'vue';
+import ErrorManager from '@js/Manager/ErrorManager';
+import Popup from '@js/App/Popup';
+
+class Preview {
+
+    /**
+     *
+     * @return {(Vue|null)}
+     */
+    get app() {
+        return this._popup.app;
+    }
+
+    constructor() {
+        this._popup = Popup;
+    }
+
+    async init() {
+        await this._popup.init();
+        this._initVue().catch(ErrorManager.catch);
+    }
+
+    async _initVue() {
+        let container = document.createElement('div');
+        container.id = 'demo';
+        document.body.appendChild(container);
+
+        let Menu          = await import(/* webpackChunkName: "DemoMenu" */ '@vue/Components/Demo/DemoMenu'),
+            MenuContainer = Vue.extend(Menu.default);
+
+        new MenuContainer({el: '#demo'});
+    }
+}
+
+export default new Preview();
+\ No newline at end of file
diff --git a/src/js/preview.js b/src/js/preview.js
new file mode 100644
index 0000000..6297ff6
--- /dev/null
+++ b/src/js/preview.js
@@ -0,0 +1,9 @@
+import Preview from '@js/App/Preview';
+import '@js/Prototype/prototype';
+import '@scss/preview.scss'
+
+// noinspection JSUnresolvedVariable
+__webpack_public_path__ = `/`;
+
+Preview.init()
+    .catch(console.error);
+\ No newline at end of file
diff --git a/src/platform/generic/_locales/de/messages.json b/src/platform/generic/_locales/de/messages.json
index 1431bcc..2a8c853 100644
--- a/src/platform/generic/_locales/de/messages.json
+++ b/src/platform/generic/_locales/de/messages.json
@@ -500,5 +500,25 @@
     "ThemeLight"                  : {
         "message"    : "Helles theme",
         "description": ""
+    },
+    "DemoInfoNotification"                  : {
+        "message"    : "Info Meldung",
+        "description": ""
+    },
+    "DemoSuccessNotification"                  : {
+        "message"    : "Erfolgsmeldung",
+        "description": ""
+    },
+    "DemoWarningNotification"                  : {
+        "message"    : "Warnmeldung",
+        "description": ""
+    },
+    "DemoErrorNotification"                  : {
+        "message"    : "Fehlermeldung",
+        "description": ""
+    },
+    "DemoDataInsert"                  : {
+        "message"    : "Demo-Daten einfügen",
+        "description": ""
     }
 }
 \ No newline at end of file
diff --git a/src/platform/generic/_locales/en/messages.json b/src/platform/generic/_locales/en/messages.json
index 694435b..9f50d91 100644
--- a/src/platform/generic/_locales/en/messages.json
+++ b/src/platform/generic/_locales/en/messages.json
@@ -515,6 +515,26 @@
         "message"    : "Light theme",
         "description": ""
     },
+    "DemoInfoNotification"                  : {
+        "message"    : "Info notification",
+        "description": ""
+    },
+    "DemoSuccessNotification"                  : {
+        "message"    : "Success notification",
+        "description": ""
+    },
+    "DemoWarningNotification"                  : {
+        "message"    : "Warning notification",
+        "description": ""
+    },
+    "DemoErrorNotification"                  : {
+        "message"    : "Error notification",
+        "description": ""
+    },
+    "DemoDataInsert"                  : {
+        "message"    : "Insert demo data",
+        "description": ""
+    },
 
 
 
diff --git a/src/platform/generic/html/preview.html b/src/platform/generic/html/preview.html
new file mode 100644
index 0000000..26400dc
--- /dev/null
+++ b/src/platform/generic/html/preview.html
@@ -0,0 +1,12 @@
+<html>
+    <head>
+        <title>Nextcloud Password Client Theme Preview</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+        <link rel="stylesheet" href="/css/preview.css"/>
+    </head>
+    <body class="popup">
+        <div id="app"></div>
+        <script src="/js/preview.js"></script>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/src/scss/preview.scss b/src/scss/preview.scss
new file mode 100644
index 0000000..9b7c637
--- /dev/null
+++ b/src/scss/preview.scss
@@ -0,0 +1,4 @@
+body {
+    font-family : Ubuntu, Verdana, sans-serif;
+    font-size   : 11pt;
+}
+\ No newline at end of file
diff --git a/src/vue/App/Popup.vue b/src/vue/App/Popup.vue
index a2e6183..ab4c8ee 100644
--- a/src/vue/App/Popup.vue
+++ b/src/vue/App/Popup.vue
@@ -1,10 +1,10 @@
 <template>
     <div id="manager">
-        <tabs :tabs="tabs" :initial-tab="tab" v-if="authorized" v-on:switch="saveTab($event)">
-            <related slot="related"/>
-            <search slot="search" :initial-status="search"/>
-            <browse slot="browse" :initial-status="browse"/>
-            <collected slot="collected" :initial-status="collected"/>
+        <tabs :tabs="tabs" :initial-tab="tab" v-if="authorized" v-on:switch="saveTab($event)" ref="tabs">
+            <related slot="related" ref="related"/>
+            <search slot="search" ref="search" :initial-status="search"/>
+            <browse slot="browse" ref="browse" :initial-status="browse"/>
+            <collected slot="collected" ref="collected" :initial-status="collected"/>
         </tabs>
         <authorisation v-if="!authorized"></authorisation>
         <div id="toasts"></div>
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;
diff --git a/webpack.config.js b/webpack.config.js
index 48ae61f..205fee8 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -50,6 +50,7 @@ module.exports = env => {
             client    : `${__dirname}/src/js/client.js`,
             popup     : `${__dirname}/src/js/popup.js`,
             options   : `${__dirname}/src/js/options.js`,
+            preview   : `${__dirname}/src/js/preview.js`,
             background: `${__dirname}/src/js/background.js`
         },
         output : {
@@ -64,7 +65,8 @@ module.exports = env => {
                 'vue$'        : 'vue/dist/vue.esm.js',
                 '@vue'        : `${__dirname}/src/vue`,
                 '@js/Platform': platformDir,
-                '@js'         : `${__dirname}/src/js`
+                '@js'         : `${__dirname}/src/js`,
+                '@scss'       : `${__dirname}/src/scss`
             }
         },
         module : {
author	Marius David Wieschollek <passwords.public@mdns.eu>	2020-02-29 18:36:57 +0300
committer	Marius David Wieschollek <passwords.public@mdns.eu>	2020-02-29 18:36:57 +0300
commit	201c6f2d7a723b17a8bab2309932a420e3c94397 (patch)
tree	85f16de4b142fa026bfd8fea044e826f2f0f5235
parent	aa19c1befd5d5cca49483049f1c6af7fb56e9a3c (diff)