Skip to content
Snippets Groups Projects
Commit 7342a207 authored by Thomas Hackl's avatar Thomas Hackl Committed by David Siegfried
Browse files

Resolve "Responsive Navigation: Menü läßt sich nicht mehr öffnen, nachdem ein... 

Resolve "Responsive Navigation: Menü läßt sich nicht mehr öffnen, nachdem ein Dialog geschlossen wurde"

Closes #2586

Merge request studip/studip!1745
parent 7b148af4
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
resources/vue/components/responsive/ResponsiveContentBar.vue
+ 6
− 3
View file @ 7342a207
...@@ -108,9 +108,12 @@ export default { ...@@ -108,9 +108,12 @@ export default {
} }
// Adjust toggle sidebar button title // Adjust toggle sidebar button title
document.getElementById('toggle-sidebar').title = this.sidebarOpen const toggle = document.getElementById('toggle-sidebar');
? this.$gettext('Sidebar schließen') if (toggle) {
: this.$gettext('Sidebar öffnen'); toggle.title = this.sidebarOpen
? this.$gettext('Sidebar schließen')
: this.$gettext('Sidebar öffnen');
}
}, },
adjustExistingContentbar(responsiveMode) { adjustExistingContentbar(responsiveMode) {
if (this.realContentbar) { if (this.realContentbar) {
......
resources/vue/components/responsive/ResponsiveNavigation.vue
+ 21
− 9
View file @ 7342a207
<template> <template>
<div role="navigation" ref="container" v-if="menuNeeded"> <div role="navigation" ref="container" id="responsive-navigation-container" v-if="menuNeeded">
<div class="responsive-navigation-header"> <div class="responsive-navigation-header">
<transition name="slide" appear> <transition name="slide" appear>
<button id="responsive-navigation-button" class="styleless" <button id="responsive-navigation-button" class="styleless"
...@@ -158,7 +158,8 @@ export default { ...@@ -158,7 +158,8 @@ export default {
courses: [], courses: [],
avatarNavigation: studipNavigation.avatar, avatarNavigation: studipNavigation.avatar,
avatarMenuOpen: false, avatarMenuOpen: false,
observer: null, classObserver: null,
dialogObserver: null,
hasSkiplinks: document.querySelector('#skiplink_list') !== null, hasSkiplinks: document.querySelector('#skiplink_list') !== null,
hasContentbar: false, hasContentbar: false,
contentbarTitle: '' contentbarTitle: ''
...@@ -272,7 +273,6 @@ export default { ...@@ -272,7 +273,6 @@ export default {
* Open or close the navigation menu * Open or close the navigation menu
*/ */
toggleMenu() { toggleMenu() {
this.showMenu = !this.showMenu; this.showMenu = !this.showMenu;
if (!this.showMenu && this.avatarMenuOpen) { if (!this.showMenu && this.avatarMenuOpen) {
...@@ -541,7 +541,7 @@ export default { ...@@ -541,7 +541,7 @@ export default {
* Use an observer for html and body in order to check * Use an observer for html and body in order to check
* whether we move into consuming mode or leave responsive mode. * whether we move into consuming mode or leave responsive mode.
*/ */
this.observer = new MutationObserver(mutations => { this.classObserver = new MutationObserver(mutations => {
for (const m of mutations) { for (const m of mutations) {
const newValue = m.target.getAttribute(m.attributeName); const newValue = m.target.getAttribute(m.attributeName);
this.onChangeViewMode(m.target.tagName, newValue); this.onChangeViewMode(m.target.tagName, newValue);
...@@ -549,19 +549,31 @@ export default { ...@@ -549,19 +549,31 @@ export default {
}); });
// Observe <html> for class changes. // Observe <html> for class changes.
this.observer.observe(document.documentElement, { this.classObserver.observe(document.documentElement, {
attributes: true, attributes: true,
attributeOldValue : false, attributeOldValue : false,
attributeFilter: ['class'] attributeFilter: ['class']
}); });
// Observe <body> for class changes. // Observe <body> for class changes.
this.observer.observe(document.body, { this.classObserver.observe(document.body, {
attributes: true, attributes: true,
attributeOldValue : false, attributeOldValue : false,
attributeFilter: ['class'] attributeFilter: ['class']
}); });
// Check for closed dialog, re-mounting the Vue component.
this.dialogObserver = new MutationObserver(mutations => {
if (mutations[0].removedNodes.length > 0 &&
mutations[0].removedNodes[0].classList.contains('ui-widget-overlay')) {
document.getElementById('responsive-menu').replaceChildren(this.$el);
}
});
this.dialogObserver.observe(document.body, {
childList: true
});
this.globalOn('has-contentbar', value => { this.globalOn('has-contentbar', value => {
this.hasContentbar = value; this.hasContentbar = value;
if (value && this.isFullscreen) { if (value && this.isFullscreen) {
...@@ -574,7 +586,7 @@ export default { ...@@ -574,7 +586,7 @@ export default {
if (this.isFullscreen) { if (this.isFullscreen) {
document.getElementById('responsive-toggle-focusmode').style.display = 'block'; document.getElementById('responsive-toggle-focusmode').style.display = 'block';
} }
this.observer.observe(element.$el.querySelector('header.cw-ribbon'), { this.classObserver.observe(element.$el.querySelector('header.cw-ribbon'), {
attributes: true, attributes: true,
attributeOldValue : false, attributeOldValue : false,
attributeFilter: ['class'] attributeFilter: ['class']
...@@ -582,7 +594,8 @@ export default { ...@@ -582,7 +594,8 @@ export default {
}); });
}, },
beforeDestroy() { beforeDestroy() {
this.observer.disconnect(); this.classObserver.disconnect();
this.dialogObserver.disconnect();
document.getElementById('header-links').style.display = null; document.getElementById('header-links').style.display = null;
STUDIP.eventBus.off('responsive-navigation-move-to'); STUDIP.eventBus.off('responsive-navigation-move-to');
STUDIP.eventBus.off('toggle-compact-navigation'); STUDIP.eventBus.off('toggle-compact-navigation');
...@@ -594,7 +607,6 @@ export default { ...@@ -594,7 +607,6 @@ export default {
<style lang="scss"> <style lang="scss">
@media not prefers-reduced-motion { @media not prefers-reduced-motion {
.slide-enter-active, .slide-enter-active,
.slide-leave-active { .slide-leave-active {
transition: all .3s ease; transition: all .3s ease;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment