Refactored theme switcher and layout cosmetics
cagataycivici
parent
6637fbf392
commit
321ad78893
42
src/App.vue
42
src/App.vue
|
|
@ -10,9 +10,9 @@
|
|||
</div>
|
||||
</a>
|
||||
|
||||
<app-topbar @menubutton-click="onMenuButtonClick"/>
|
||||
<app-topbar @menubutton-click="onMenuButtonClick" @change-theme="changeTheme" :theme="theme" />
|
||||
<app-menu :active="sidebarActive" />
|
||||
<app-configurator />
|
||||
<app-configurator @change-theme="changeTheme" :theme="theme" />
|
||||
<div :class="['layout-mask', {'layout-mask-active': sidebarActive}]" @click="onMaskClick"></div>
|
||||
<div class="layout-content">
|
||||
<router-view/>
|
||||
|
|
@ -35,7 +35,8 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
sidebarActive: false,
|
||||
newsActive: false
|
||||
newsActive: false,
|
||||
theme: 'saga-blue'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -62,6 +63,41 @@ export default {
|
|||
},
|
||||
hideNews() {
|
||||
this.newsActive = false;
|
||||
},
|
||||
changeTheme(event) {
|
||||
let themeElement = document.getElementById('theme-link');
|
||||
themeElement.setAttribute('href', themeElement.getAttribute('href').replace(this.theme, event.theme));
|
||||
this.theme = event.theme;
|
||||
|
||||
if (event.dark) {
|
||||
this.addClass(document.body, event.dark);
|
||||
}
|
||||
else {
|
||||
this.removeClass(document.body, 'dark-theme');
|
||||
this.removeClass(document.body, 'dark-theme-alt');
|
||||
}
|
||||
|
||||
this.activeMenuIndex = null;
|
||||
},
|
||||
addClass(element, className) {
|
||||
if (!this.hasClass(element, className)) {
|
||||
if (element.classList)
|
||||
element.classList.add(className);
|
||||
else
|
||||
element.className += ' ' + className;
|
||||
}
|
||||
},
|
||||
removeClass(element, className) {
|
||||
if (element.classList)
|
||||
element.classList.remove(className);
|
||||
else
|
||||
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
||||
},
|
||||
hasClass(element, className) {
|
||||
if (element.classList)
|
||||
return element.classList.contains(className);
|
||||
else
|
||||
return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,64 @@
|
|||
<div class="free-themes">
|
||||
<h1 style="margin-top: 0">FREE THEMES</h1>
|
||||
<p>Built-in component themes created by the <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a>.</p>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-3">
|
||||
<button class="p-link">
|
||||
<img src="./assets/images/layouts/themeswitcher-saga-blue.png" alt="Saga Blue" @click="changeTheme($event, 'saga-blue', false)"/>
|
||||
<i class="pi pi-check" v-if="theme === 'saga-blue'" />
|
||||
</button>
|
||||
<span>Saga-Blue</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<button class="p-link">
|
||||
<img src="./assets/images/layouts/themeswitcher-saga-green.png" alt="Saga Green" @click="changeTheme($event, 'saga-green', false)"/>
|
||||
<i class="pi pi-check" v-if="theme === 'saga-green'" />
|
||||
</button>
|
||||
<span>Saga-Green</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<button class="p-link">
|
||||
<img src="./assets/images/layouts/themeswitcher-saga-purple.png" alt="Saga Purple" @click="changeTheme($event, 'saga-purple', false)"/>
|
||||
<i class="pi pi-check" v-if="theme === 'saga-purple'" />
|
||||
</button>
|
||||
<span>Saga-Purple</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<button class="p-link">
|
||||
<img src="./assets/images/layouts/themeswitcher-saga-orange.png" alt="Saga Orange" @click="changeTheme($event, 'saga-orange', false)"/>
|
||||
<i class="pi pi-check" v-if="theme === 'saga-orange'" />
|
||||
</button>
|
||||
<span>Saga-Orange</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<button class="p-link">
|
||||
<img src="./assets/images/layouts/themeswitcher-vela-blue.png" alt="Vela Blue" @click="changeTheme($event, 'vela-blue', 'dark-theme-alt')"/>
|
||||
<i class="pi pi-check" v-if="theme === 'vela-blue'" />
|
||||
</button>
|
||||
<span>Vela-Blue</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<button class="p-link">
|
||||
<img src="./assets/images/layouts/themeswitcher-vela-green.png" alt="Vela Green" @click="changeTheme($event, 'vela-green', 'dark-theme-alt')"/>
|
||||
<i class="pi pi-check" v-if="theme === 'vela-green'" />
|
||||
</button>
|
||||
<span>Vela-Green</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<button class="p-link">
|
||||
<img src="./assets/images/layouts/themeswitcher-vela-purple.png" alt="Vela Purple" @click="changeTheme($event, 'vela-purple', 'dark-theme-alt')"/>
|
||||
<i class="pi pi-check" v-if="theme === 'vela-blue'" />
|
||||
</button>
|
||||
<span>Vela-Purple</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<button class="p-link">
|
||||
<img src="./assets/images/layouts/themeswitcher-vela-orange.png" alt="Vela Orange" @click="changeTheme($event, 'vela-orange', 'dark-theme-alt')"/>
|
||||
<i class="pi pi-check" v-if="theme === 'vela-orange'" />
|
||||
</button>
|
||||
<span>Vela-Orange</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<button class="p-link">
|
||||
<img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" @click="changeTheme($event, 'nova-light', false)"/>
|
||||
|
|
@ -43,28 +100,28 @@
|
|||
</div>
|
||||
<div class="p-col-3">
|
||||
<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', 'dark-theme')"/>
|
||||
<i class="pi pi-check" v-if="theme === 'luna-blue'" />
|
||||
</button>
|
||||
<span>Luna-Blue</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<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', 'dark-theme')"/>
|
||||
<i class="pi pi-check" v-if="theme === 'luna-green'" />
|
||||
</button>
|
||||
<span>Luna-Green</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<button class="p-link">
|
||||
<img src="./assets/images/layouts/themeswitcher-luna-amber.png" alt="Luna Amber" @click="changeTheme($event, 'luna-amber', false)" target="_blank"/>
|
||||
<img src="./assets/images/layouts/themeswitcher-luna-amber.png" alt="Luna Amber" @click="changeTheme($event, 'luna-amber', 'dark-theme')" target="_blank"/>
|
||||
<i class="pi pi-check" v-if="theme === 'luna-amber'" />
|
||||
</button>
|
||||
<span>Luna-Amber</span>
|
||||
</div>
|
||||
<div class="p-col-3">
|
||||
<button class="p-link">
|
||||
<img src="./assets/images/layouts/themeswitcher-luna-pink.png" alt="Luna Pink" @click="changeTheme($event, 'luna-pink', false)" target="_blank"/>
|
||||
<img src="./assets/images/layouts/themeswitcher-luna-pink.png" alt="Luna Pink" @click="changeTheme($event, 'luna-pink', 'dark-theme')" target="_blank"/>
|
||||
<i class="pi pi-check" v-if="theme === 'luna-pink'" />
|
||||
</button>
|
||||
<span>Luna-Pink</span>
|
||||
|
|
@ -130,10 +187,12 @@
|
|||
import DomHandler from './components/utils/DomHandler';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
theme: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: false,
|
||||
theme: 'nova-light'
|
||||
active: false
|
||||
}
|
||||
},
|
||||
outsideClickListener: null,
|
||||
|
|
@ -166,20 +225,7 @@ export default {
|
|||
event.preventDefault();
|
||||
},
|
||||
changeTheme(event, theme, dark) {
|
||||
let themeElement = document.getElementById('theme-link');
|
||||
themeElement.setAttribute('href', themeElement.getAttribute('href').replace(this.theme, theme));
|
||||
this.theme = theme;
|
||||
const hasBodyDarkTheme = DomHandler.hasClass(document.body, 'dark-theme');
|
||||
|
||||
if (dark) {
|
||||
if (!hasBodyDarkTheme) {
|
||||
this.addClass(document.body, 'dark-theme');
|
||||
}
|
||||
}
|
||||
else if(hasBodyDarkTheme) {
|
||||
this.removeClass(document.body, 'dark-theme');
|
||||
}
|
||||
|
||||
this.$emit('change-theme', {theme: theme, dark: dark});
|
||||
event.preventDefault();
|
||||
},
|
||||
bindOutsideClickListener() {
|
||||
|
|
@ -200,7 +246,7 @@ export default {
|
|||
},
|
||||
isOutsideClicked(event) {
|
||||
return !(this.$el.isSameNode(event.target) || this.$el.contains(event.target));
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
<template>
|
||||
<div class="content-section layout-footer clearfix">
|
||||
<span>PrimeVue 2.0.0</span>
|
||||
<div class="footer-links">
|
||||
<a href="https://github.com/primefaces/primevue"><i class=" icon-github fa fa-github-square"></i></a>
|
||||
<a href="https://twitter.com/primevue"><i class="icon-twitter fa fa-twitter-square"></i></a>
|
||||
</div>
|
||||
<div class="content-section layout-footer">
|
||||
<span>PrimeVue 2.0.0 by </span><a href="https://www.primetek.com.tr">PrimeTek</a>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -85,47 +85,14 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
theme: 'saga-blue',
|
||||
activeMenuIndex: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeTheme(event, theme, dark) {
|
||||
let themeElement = document.getElementById('theme-link');
|
||||
themeElement.setAttribute('href', themeElement.getAttribute('href').replace(this.theme, theme));
|
||||
this.theme = theme;
|
||||
|
||||
if (dark) {
|
||||
this.addClass(document.body, dark);
|
||||
}
|
||||
else {
|
||||
this.removeClass(document.body, 'dark-theme');
|
||||
this.removeClass(document.body, 'dark-theme-alt');
|
||||
}
|
||||
|
||||
this.activeMenuIndex = null;
|
||||
this.$emit('change-theme', {theme: theme, dark: dark});
|
||||
event.preventDefault();
|
||||
},
|
||||
addClass(element, className) {
|
||||
if (!this.hasClass(element, className)) {
|
||||
if (element.classList)
|
||||
element.classList.add(className);
|
||||
else
|
||||
element.className += ' ' + className;
|
||||
}
|
||||
},
|
||||
removeClass(element, className) {
|
||||
if (element.classList)
|
||||
element.classList.remove(className);
|
||||
else
|
||||
element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
||||
},
|
||||
hasClass(element, className) {
|
||||
if (element.classList)
|
||||
return element.classList.contains(className);
|
||||
else
|
||||
return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
|
||||
},
|
||||
toggleMenu(event, index) {
|
||||
this.activeMenuIndex = (this.activeMenuIndex === index) ? null : index;
|
||||
event.preventDefault();
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
$focusBorderColor:#8dcdff;
|
||||
$focusBorderColor:#b6daf2;
|
||||
|
||||
html {
|
||||
font-size: 14px;
|
||||
|
|
@ -44,7 +44,7 @@ input[type="number"] {
|
|||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #4eafe6;
|
||||
color: #2874A6;
|
||||
}
|
||||
|
||||
.layout-news {
|
||||
|
|
@ -351,7 +351,7 @@ a {
|
|||
height: calc(100% - 70px);
|
||||
background-color: #ffffff;
|
||||
overflow: auto;
|
||||
width: 280px;
|
||||
width: 250px;
|
||||
box-shadow: 0 0 2px rgba(0,0,0,0.25);
|
||||
|
||||
.layout-menu {
|
||||
|
|
@ -457,7 +457,7 @@ a {
|
|||
}
|
||||
|
||||
.layout-content {
|
||||
margin-left: 280px;
|
||||
margin-left: 250px;
|
||||
padding-top: 70px;
|
||||
|
||||
.content-section {
|
||||
|
|
@ -628,13 +628,9 @@ a {
|
|||
}
|
||||
|
||||
a {
|
||||
color: #638fb7;
|
||||
font-weight: 700;
|
||||
color: #2874A6;
|
||||
font-weight: 500;
|
||||
transition: color .2s;
|
||||
|
||||
&:hover {
|
||||
color: #82a5c5;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-viewsource {
|
||||
|
|
@ -790,31 +786,10 @@ a {
|
|||
|
||||
.layout-footer {
|
||||
font-size: 14px;
|
||||
color: #84939f;
|
||||
|
||||
span a {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
float: right;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.icon-github {
|
||||
width: 29.1px;
|
||||
height: 29.1px;
|
||||
color:#20272a
|
||||
}
|
||||
|
||||
.icon-twitter {
|
||||
width: 29.1px;
|
||||
height: 29.1px;
|
||||
color:#20272a
|
||||
color: #495057;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -886,13 +861,9 @@ a {
|
|||
}
|
||||
|
||||
a {
|
||||
color: #638fb7;
|
||||
font-weight: 700;
|
||||
color: #2874A6;
|
||||
transition: color .2s;
|
||||
|
||||
&:hover {
|
||||
color: #82a5c5;
|
||||
}
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.layout-config-content {
|
||||
|
|
@ -953,8 +924,13 @@ a {
|
|||
color: #495057;
|
||||
background-color: #ffffff;
|
||||
|
||||
p {
|
||||
color: #727272;
|
||||
img {
|
||||
width: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -962,13 +938,10 @@ a {
|
|||
box-shadow: 0 0 0 0.2em $focusBorderColor;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
transition: box-shadow .2s;
|
||||
|
||||
i {
|
||||
|
|
@ -1001,6 +974,10 @@ a {
|
|||
p {
|
||||
color: #d8d8d8;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1030,12 +1007,9 @@ a {
|
|||
margin-bottom: 2em;
|
||||
}
|
||||
a {
|
||||
color: #638fb7;
|
||||
color: #2E86C1;
|
||||
font-weight: 500;
|
||||
transition: color .2s;
|
||||
|
||||
&:hover {
|
||||
color: #82a5c5;
|
||||
}
|
||||
}
|
||||
|
||||
.home-button {
|
||||
|
|
|
|||
Loading…
Reference in New Issue