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

Elevation for configurator

pull/345/head
cagataycivici 2020-06-18 12:17:14 +03:00
parent c7a1e0680e
commit 77fe95225a
3 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/AppTopBar.vue
View File

@ -9,8 +9,8 @@
<ul ref="topbarMenu" class="topbar-menu"> <ul ref="topbarMenu" class="topbar-menu">
<li><router-link to="/setup">Get Started</router-link></li> <li><router-link to="/setup">Get Started</router-link></li>
<li class="topbar-submenu"> <li class="topbar-submenu">
<a tabindex="0" @click="toggleMenu($event, 0)" class="themes-menu-link">Themes</a> <a tabindex="0" @click="toggleMenu($event, 0)">Themes</a>
<transition name="p-input-overlay" @enter="onMenuEnter" @leave="onMenuLeave"> <transition name="p-input-overlay" @enter="onMenuEnter">
<ul v-show="activeMenuIndex === 0"> <ul v-show="activeMenuIndex === 0">
<li class="topbar-submenu-header">THEMING</li> <li class="topbar-submenu-header">THEMING</li>
<li><router-link to="/theming"><i class="pi pi-fw pi-file"/><span>Guide</span></router-link></li> <li><router-link to="/theming"><i class="pi pi-fw pi-file"/><span>Guide</span></router-link></li>
@ -42,8 +42,8 @@
</transition> </transition>
</li> </li>
<li class="topbar-submenu"> <li class="topbar-submenu">
<a tabindex="0" @click="toggleMenu($event, 1)" class="templates-menu-link">Templates</a> <a tabindex="0" @click="toggleMenu($event, 1)">Templates</a>
<transition name="p-input-overlay" @enter="onMenuEnter" @leave="onMenuLeave"> <transition name="p-input-overlay" @enter="onMenuEnter">
<ul v-show="activeMenuIndex === 1"> <ul v-show="activeMenuIndex === 1">
<li class="topbar-submenu-header">FREE ADMIN TEMPLATE</li> <li class="topbar-submenu-header">FREE ADMIN TEMPLATE</li>
<li><a href="https://www.primefaces.org/sigma-vue"><img src="./assets/images/layouts/themeswitcher-sigma.png" alt="Sigma" /><span>Sigma</span></a></li> <li><a href="https://www.primefaces.org/sigma-vue"><img src="./assets/images/layouts/themeswitcher-sigma.png" alt="Sigma" /><span>Sigma</span></a></li>
@ -60,8 +60,8 @@
</transition> </transition>
</li> </li>
<li class="topbar-submenu topbar-resources-submenu"> <li class="topbar-submenu topbar-resources-submenu">
<a tabindex="0" @click="toggleMenu($event, 2)" class="resources-menu-link">Resources</a> <a tabindex="0" @click="toggleMenu($event, 2)">Resources</a>
<transition name="p-input-overlay" @enter="onMenuEnter" @leave="onMenuLeave"> <transition name="p-input-overlay" @enter="onMenuEnter">
<ul v-show="activeMenuIndex === 2"> <ul v-show="activeMenuIndex === 2">
<li><router-link to="/support"><span>Support</span></router-link></li> <li><router-link to="/support"><span>Support</span></router-link></li>
<li><a href="https://forum.primefaces.org/viewforum.php?f=110"><span>Forum</span></a></li> <li><a href="https://forum.primefaces.org/viewforum.php?f=110"><span>Forum</span></a></li>
@ -106,14 +106,12 @@ export default {
onMenuEnter() { onMenuEnter() {
this.bindOutsideClickListener(); this.bindOutsideClickListener();
}, },
onMenuLeave() {
this.unbindOutsideClickListener();
},
bindOutsideClickListener() { bindOutsideClickListener() {
if (!this.outsideClickListener) { if (!this.outsideClickListener) {
this.outsideClickListener = (event) => { this.outsideClickListener = (event) => {
if ((this.activeMenuIndex != null && this.isOutsideTopbarMenuClicked(event))) { if ((this.activeMenuIndex != null && this.isOutsideTopbarMenuClicked(event))) {
this.activeMenuIndex = null; this.activeMenuIndex = null;
this.unbindOutsideClickListener();
} }
}; };
document.addEventListener('click', this.outsideClickListener); document.addEventListener('click', this.outsideClickListener);

9
src/assets/styles/app/_config.scss
View File

@ -10,7 +10,6 @@
transition: transform .3s; transition: transform .3s;
transform: translate3d(550px,0,0); transform: translate3d(550px,0,0);
backface-visibility: hidden; backface-visibility: hidden;
border-left: 1px solid var(--surface-d);
&.layout-config-active { &.layout-config-active {
transform: translate3d(0,0,0); transform: translate3d(0,0,0);
@ -30,7 +29,7 @@
padding: 0; padding: 0;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.24); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.24);
color: var(--text-color); color: var(--text-color);
background-color: var(--surface-a); background-color: var(--surface-e);
.layout-config-button { .layout-config-button {
display: block; display: block;
@ -65,7 +64,11 @@
a { a {
color: $linkColor; color: $linkColor;
font-weight: 500; font-weight: 600;
&:hover {
text-decoration: underline;
}
} }
.layout-config-content { .layout-config-content {

2
src/assets/styles/app/_content.scss
View File

@ -50,7 +50,7 @@
a { a {
text-decoration: none; text-decoration: none;
color: $linkColor; color: $linkColor;
font-weight: 500; font-weight: 600;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;