pull/132/head
cagataycivici 2019-12-20 17:25:53 +03:00
commit 11dfdb18ca
3 changed files with 14 additions and 5 deletions

View File

@ -34,6 +34,13 @@
</button> </button>
<span>Nova-Colored</span> <span>Nova-Colored</span>
</div> </div>
<div class="p-col-3">
<button class="p-link">
<img src="./assets/images/layouts/themeswitcher-nova-vue.png" alt="Nova Colored" @click="changeTheme($event, 'nova-vue', false)"/>
<i class="pi pi-check" v-if="theme === 'nova-vue'" />
</button>
<span>Nova-Vue</span>
</div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/layouts/themeswitcher-luna-blue.png" alt="Luna Blue" @click="changeTheme($event, 'luna-blue', false)"/> <img src="./assets/images/layouts/themeswitcher-luna-blue.png" alt="Luna Blue" @click="changeTheme($event, 'luna-blue', false)"/>
@ -44,7 +51,7 @@
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/layouts/themeswitcher-luna-green.png" alt="Luna Green" @click="changeTheme($event, 'luna-green', false)"/> <img src="./assets/images/layouts/themeswitcher-luna-green.png" alt="Luna Green" @click="changeTheme($event, 'luna-green', false)"/>
<i class="pi pi-check" v-if="theme === 'luna-blue'" /> <i class="pi pi-check" v-if="theme === 'luna-green'" />
</button> </button>
<span>Luna-Green</span> <span>Luna-Green</span>
</div> </div>
@ -100,6 +107,8 @@
</template> </template>
<script> <script>
import DomHandler from './components/utils/DomHandler';
export default { export default {
data() { data() {
return { return {
@ -140,7 +149,7 @@ export default {
let themeElement = document.getElementById('theme-link'); let themeElement = document.getElementById('theme-link');
themeElement.setAttribute('href', themeElement.getAttribute('href').replace(this.theme, theme)); themeElement.setAttribute('href', themeElement.getAttribute('href').replace(this.theme, theme));
this.theme = theme; this.theme = theme;
const hasBodyDarkTheme = this.hasClass(document.body, 'dark-theme'); const hasBodyDarkTheme = DomHandler.hasClass(document.body, 'dark-theme');
if (dark) { if (dark) {
if (!hasBodyDarkTheme) { if (!hasBodyDarkTheme) {
@ -151,7 +160,6 @@ export default {
this.removeClass(document.body, 'dark-theme'); this.removeClass(document.body, 'dark-theme');
} }
this.hideThemesMenu();
event.preventDefault(); event.preventDefault();
}, },
bindOutsideClickListener() { bindOutsideClickListener() {
@ -175,4 +183,4 @@ export default {
}, },
} }
} }
</script> </script>

View File

@ -20,6 +20,7 @@
<li><a href="#" @click="changeTheme($event, 'nova-light', false)"><img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" /><span>Nova Light</span></a></li> <li><a href="#" @click="changeTheme($event, 'nova-light', false)"><img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" /><span>Nova Light</span></a></li>
<li><a @click="changeTheme($event, 'nova-dark', false)"><img src="./assets/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" /><span>Nova Dark</span></a></li> <li><a @click="changeTheme($event, 'nova-dark', false)"><img src="./assets/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" /><span>Nova Dark</span></a></li>
<li><a @click="changeTheme($event, 'nova-colored', false)"><img src="./assets/images/layouts/themeswitcher-nova-colored.png" alt="Nova Colored" /><span>Nova Colored</span></a></li> <li><a @click="changeTheme($event, 'nova-colored', false)"><img src="./assets/images/layouts/themeswitcher-nova-colored.png" alt="Nova Colored" /><span>Nova Colored</span></a></li>
<li><a @click="changeTheme($event, 'nova-vue', false)"><img src="./assets/images/layouts/themeswitcher-nova-vue.png" alt="Nova Vue" /><span>Nova Vue</span></a></li>
<li><a @click="changeTheme($event, 'luna-amber', true)"><img src="./assets/images/layouts/themeswitcher-luna-amber.png" alt="Luna Amber" /><span>Luna Amber</span></a></li> <li><a @click="changeTheme($event, 'luna-amber', true)"><img src="./assets/images/layouts/themeswitcher-luna-amber.png" alt="Luna Amber" /><span>Luna Amber</span></a></li>
<li><a @click="changeTheme($event, 'luna-blue', true)"><img src="./assets/images/layouts/themeswitcher-luna-blue.png" alt="Luna Blue" /><span>Luna Blue</span></a></li> <li><a @click="changeTheme($event, 'luna-blue', true)"><img src="./assets/images/layouts/themeswitcher-luna-blue.png" alt="Luna Blue" /><span>Luna Blue</span></a></li>
<li><a @click="changeTheme($event, 'luna-green', true)"><img src="./assets/images/layouts/themeswitcher-luna-green.png" alt="Luna Green" /><span>Luna Green</span></a></li> <li><a @click="changeTheme($event, 'luna-green', true)"><img src="./assets/images/layouts/themeswitcher-luna-green.png" alt="Luna Green" /><span>Luna Green</span></a></li>
@ -210,4 +211,4 @@ export default {
} }
} }
} }
</script> </script>

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB