vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Added configurator

pull/132/head
cagataycivici 2019-12-20 16:49:40 +03:00
parent 9c4392ade6
commit 6c6b982623
3 changed files with 404 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.vue
View File

@ -2,6 +2,7 @@
<div class="layout-wrapper">
<app-topbar @menubutton-click="onMenuButtonClick"/>
<app-menu :active="sidebarActive" />
<app-configurator />
<div :class="['layout-mask', {'layout-mask-active': sidebarActive}]" @click="onMaskClick"></div>
<div class="layout-content">
<router-view/>
@ -18,6 +19,7 @@
import AppTopBar from '@/AppTopBar.vue';
import AppMenu from '@/AppMenu.vue';
import AppFooter from '@/AppFooter.vue';
import AppConfigurator from '@/AppConfigurator.vue';
export default {
data() {
@ -42,7 +44,8 @@ export default {
components: {
'app-topbar': AppTopBar,
'app-menu': AppMenu,
'app-footer': AppFooter
'app-footer': AppFooter,
'app-configurator': AppConfigurator
},
}
</script>

178
src/AppConfigurator.vue Normal file
View File

@ -0,0 +1,178 @@
<template>
<div :class="containerClass">
<div class="layout-config-content-wrapper">
<a href="#" class="layout-config-button" @click="toggleConfigurator">
<i class="pi pi-cog"></i>
</a>
<a href="#" class="layout-config-close" @click="hideConfigurator">
<i class="pi pi-times"></i>
</a>
<div class="layout-config-content">
<div class="free-themes">
<h1 style="margin-top: 0">FREE THEMES</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="p-grid">
<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)"/>
<i class="pi pi-check" v-if="theme === 'nova-light'" />
</button>
<span>Nova-Light</span>
</div>
<div class="p-col-3">
<button class="p-link">
<img src="./assets/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" @click="changeTheme($event, 'nova-dark', false)"/>
<i class="pi pi-check" v-if="theme === 'nova-dark'" />
</button>
<span>Nova-Dark</span>
</div>
<div class="p-col-3">
<button class="p-link">
<img src="./assets/images/layouts/themeswitcher-nova-colored.png" alt="Nova Colored" @click="changeTheme($event, 'nova-colored', false)"/>
<i class="pi pi-check" v-if="theme === 'nova-colored'" />
</button>
<span>Nova-Colored</span>
</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)"/>
<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)"/>
<i class="pi pi-check" v-if="theme === 'luna-blue'" />
</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"/>
<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"/>
<i class="pi pi-check" v-if="theme === 'luna-pink'" />
</button>
<span>Luna-Pink</span>
</div>
<div class="p-col-3">
<button class="p-link">
<img src="./assets/images/layouts/themeswitcher-rhea.png" alt="Rhea" @click="changeTheme($event, 'rhea', false)" target="_blank"/>
<i class="pi pi-check" v-if="theme === 'rhea'" />
</button>
<span>Rhea</span>
</div>
</div>
</div>
<div class="premium-themes">
<h1>PREMIUM VUE-CLI TEMPLATES</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="p-grid">
<div class="p-col-12">
<a href="https://www.primefaces.org/layouts/sapphire-vue">
<img alt="Sapphire" src="./assets/images/layouts/sapphire.jpg">
</a>
</div>
<div class="p-col-12">
<a href="https://www.primefaces.org/layouts/babylon-vue">
<img alt="Babylon" src="./assets/images/layouts/babylon.jpg">
</a>
</div>
<div class="p-col-12">
<a href="https://www.primefaces.org/layouts/avalon-vue">
<img alt="Avalon" src="./assets/images/layouts/avalon.jpg">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
active: false,
theme: 'nova-light'
}
},
outsideClickListener: null,
watch: {
$route() {
if (this.active) {
this.active = false;
this.unbindOutsideClickListener();
}
}
},
computed: {
containerClass() {
return ['layout-config', {'layout-config-active': this.active}];
}
},
methods: {
toggleConfigurator(event) {
this.active = !this.active;
event.preventDefault();
if (this.active)
this.bindOutsideClickListener();
else
this.unbindOutsideClickListener();
},
hideConfigurator(event) {
this.active = false;
this.unbindOutsideClickListener();
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 = this.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.hideThemesMenu();
event.preventDefault();
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
this.outsideClickListener = (event) => {
if (this.active && this.isOutsideClicked(event)) {
this.active = false;
}
};
document.addEventListener('click', this.outsideClickListener);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
this.outsideClickListener = null;
}
},
isOutsideClicked(event) {
return !(this.$el.isSameNode(event.target) || this.$el.contains(event.target));
},
}
}
</script>

228
src/assets/styles/app.scss
View File

@ -40,6 +40,21 @@
border-top-right-radius: $val;
}
@mixin border-radius-left($val) {
-moz-border-radius-topleft: $val;
-webkit-border-top-left-radius: $val;
border-top-left-radius: $val;
-moz-border-radius-bottomleft: $val;
-webkit-border-bottom-left-radius: $val;
border-bottom-left-radius: $val;
}
@mixin border-radius($val) {
-moz-border-radius: $val;
-webkit-border-radius: $val;
border-radius: $val;
}
@keyframes pulse {
0% {
background-color: rgba(165, 165, 165, 0.1)
@ -52,6 +67,14 @@
}
}
@mixin rotate($deg) {
-webkit-transform: rotate($deg);
-moz-transform: rotate($deg);
-o-transform: rotate($deg);
-ms-transform: rotate($deg);
transform: rotate($deg);
}
$focusBorderColor:#8dcdff;
body {
@ -59,7 +82,7 @@ body {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
background-color: #20272a;
background-color: #ffffff;
font-family: "Open Sans", "Helvetica Neue", sans-serif;
font-weight: normal;
color: #484848;
@ -114,7 +137,7 @@ body {
&:focus {
outline: 0 none;
transition: box-shadow .3s;
transition: box-shadow .2s;
box-shadow: 0 0 0 0.2em $focusBorderColor;
}
}
@ -150,7 +173,7 @@ body {
&:focus {
z-index: 1;
outline: 0 none;
transition: box-shadow .3s;
transition: box-shadow .2s;
box-shadow: inset 0 0 0 0.2em $focusBorderColor;
}
}
@ -345,7 +368,7 @@ body {
&:focus {
z-index: 1;
outline: 0 none;
transition: box-shadow .3s;
transition: box-shadow .2s;
box-shadow: inset 0 0 0 0.2em $focusBorderColor;
}
@ -497,7 +520,7 @@ body {
&:focus {
outline: 0 none;
transition: box-shadow .3s;
transition: box-shadow .2s;
box-shadow: 0 0 0 0.2em $focusBorderColor;
}
}
@ -594,7 +617,7 @@ body {
&:focus {
outline: 0 none;
transition: background-color .3s, box-shadow .3s;
transition: background-color .2s, box-shadow .2s;
box-shadow: 0 0 0 0.2em $focusBorderColor;
}
}
@ -713,6 +736,199 @@ body {
}
}
.layout-config {
position: fixed;
padding: 0;
top: 70px;
display: block;
right: 0;
width: 550px;
z-index: 996;
height: calc(100% - 70px);
transform: translate3d(550px, 0px, 0px);
@include transition(transform .2s);
background-color: #ffffff;
&.layout-config-active {
transform: translate3d(0px, 0px, 0px);
.layout-config-content {
.layout-config-button {
i {
@include rotate(360deg);
}
}
}
}
.layout-config-content-wrapper {
position: relative;
height: 100%;
padding: 0;
@include shadow(0 2px 10px 0 rgba(0, 0, 0, 0.24));
.layout-config-button {
display: block;
position: absolute;
width: 52px;
height: 52px;
line-height: 52px;
background-color: #445c71;
text-align: center;
color: #fafafa;
top: 230px;
left: -51px;
z-index: -1;
overflow: hidden;
cursor: pointer;
@include border-radius-left(3px);
@include transition(background-color .2s, box-shadow .2s);
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2),
0 5px 22px 4px rgba(0, 0, 0, 0.12),
0 12px 17px 2px rgba(0, 0, 0, 0.14);
i {
font-size: 42px;
line-height: inherit;
cursor: pointer;
@include rotate(0deg);
@include transition(transform 1s);
}
&:hover {
background-color: #577691;
}
}
}
.layout-config-content {
overflow: auto;
height: 100%;
}
.layout-config-close {
position: absolute;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
right: 20px;
top: 20px;
z-index: 999;
background-color: #41b783;
@include border-radius(50%);
@include transition(background-color .2s, box-shadow .2s);
i {
color: #ffffff;
line-height: inherit;
font-size: 16px;
}
&:hover {
background-color: #3aa476;
}
&:focus {
outline: 0 none;
box-shadow: 0 0 0 0.2em $focusBorderColor;
}
}
h1 {
font-size: 18px;
letter-spacing: .1px;
margin: 0 0 .5em 0;
}
.p-grid > div {
padding: 1em;
text-align: center;
span {
display: block;
}
}
p {
margin: 0 0 2em 0;
}
.free-themes {
padding: 2em;
color: #484848;
background-color: #ffffff;
p {
color: #727272;
}
}
.current-theme {
box-shadow: 0 0 0 0.2em $focusBorderColor;
}
img {
width: 100%;
}
button {
text-align: center;
position: relative;
@include transition(box-shadow .2s);
i {
line-height: inherit;
font-size: 28px;
color: #41b783;
position: absolute;
top: 0;
left: 50%;
margin-left: -18px;
margin-top: -18px;
padding: .18em;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25);
background-color: #ffffff;
border-radius: 50%;
width: 36px;
height: 36px;
}
&:focus {
box-shadow: 0 0 0 0.2em $focusBorderColor;
}
}
.premium-themes {
padding: 2em;
background-color: #2c3135;
color: #ffffff;
p {
color: #d8d8d8;
}
}
}
@media screen and (max-width: 1024px) {
.layout-config {
top: 110px;
height: calc(100% - 110px);
transform: translate3d(100%, 0px, 0px);
.layout-config-button {
left: auto;
right: -52px;
}
&.layout-config-active {
width: 100%;
transform: translate3d(0px, 0px, 0px);
}
}
}
.clearfix {
display: inline-block;