diff options
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) |
Added theme preview window
Signed-off-by: Marius David Wieschollek <passwords.public@mdns.eu>
-rw-r--r-- | src/js/App/Preview.js | 36 | ||||
-rw-r--r-- | src/js/preview.js | 9 | ||||
-rw-r--r-- | src/platform/generic/_locales/de/messages.json | 20 | ||||
-rw-r--r-- | src/platform/generic/_locales/en/messages.json | 20 | ||||
-rw-r--r-- | src/platform/generic/html/preview.html | 12 | ||||
-rw-r--r-- | src/scss/preview.scss | 4 | ||||
-rw-r--r-- | src/vue/App/Popup.vue | 10 | ||||
-rw-r--r-- | src/vue/Components/Demo/DemoMenu.vue | 133 | ||||
-rw-r--r-- | src/vue/Components/Options/Theming.vue | 35 | ||||
-rw-r--r-- | src/vue/Components/Tabs.vue | 2 | ||||
-rw-r--r-- | src/vue/Components/Theming/PreviewTheme.vue | 36 | ||||
-rw-r--r-- | src/vue/Components/Toasts.vue | 1 | ||||
-rw-r--r-- | webpack.config.js | 4 |
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 : { |