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

#237 for sidebar

pull/256/head
cagataycivici 2020-03-17 12:58:36 +03:00
parent 382a51c036
commit 2f020a1fcc
2 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/themes/nova-light/theme.css
View File

@ -3248,6 +3248,9 @@ body .p-sidebar .p-sidebar-close {
body .p-sidebar .p-sidebar-close:hover { body .p-sidebar .p-sidebar-close:hover {
color: #333333; color: #333333;
} }
body .p-sidebar-mask {
transition-duration: 0.2s;
}
body .p-tooltip .p-tooltip-text { body .p-tooltip .p-tooltip-text {
background-color: #333333; background-color: #333333;
color: #ffffff; color: #ffffff;

26
src/components/sidebar/Sidebar.vue
View File

@ -83,21 +83,28 @@ export default {
enableModality() { enableModality() {
if (!this.mask) { if (!this.mask) {
this.mask = document.createElement('div'); this.mask = document.createElement('div');
this.mask.setAttribute('class', 'p-sidebar-mask');
this.mask.style.zIndex = String(parseInt(this.$refs.container.style.zIndex, 10) - 1); this.mask.style.zIndex = String(parseInt(this.$refs.container.style.zIndex, 10) - 1);
DomHandler.addMultipleClasses(this.mask, 'p-component-overlay');
if (this.dismissable) { if (this.dismissable) {
this.bindMaskClickListener(); this.bindMaskClickListener();
} }
document.body.appendChild(this.mask); document.body.appendChild(this.mask);
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.addClass(document.body, 'p-overflow-hidden');
setTimeout(() => {
DomHandler.addClass(this.mask, 'p-component-overlay');
}, 1);
} }
}, },
disableModality() { disableModality() {
if (this.mask) { if (this.mask) {
this.unbindMaskClickListener(); DomHandler.addClass(this.mask, 'p-sidebar-mask-leave');
document.body.removeChild(this.mask); this.mask.addEventListener('transitionend', () => {
DomHandler.removeClass(document.body, 'p-overflow-hidden'); this.unbindMaskClickListener();
this.mask = null; document.body.removeChild(this.mask);
DomHandler.removeClass(document.body, 'p-overflow-hidden');
this.mask = null;
});
} }
}, },
bindMaskClickListener() { bindMaskClickListener() {
@ -136,6 +143,15 @@ export default {
transition: transform .3s; transition: transform .3s;
} }
.p-sidebar-mask {
background-color: transparent;
transition: background-color;
}
.p-sidebar-mask-leave.p-component-overlay {
background-color: transparent;
}
.p-sidebar-left { .p-sidebar-left {
top: 0; top: 0;
left: 0; left: 0;