From b0085059de5837693c8ebf3e7b91f0d62fb1a9c4 Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Fri, 5 Jul 2024 11:45:51 +0200 Subject: [PATCH 1/3] chore(NcAppNavigation): add docs example Signed-off-by: Maksim Sukharev --- .../NcAppNavigation/NcAppNavigation.vue | 101 ++++++++++++++++++ 1 file changed, 101 insertions(+) diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue index e4de402d84..379ef8e415 100644 --- a/src/components/NcAppNavigation/NcAppNavigation.vue +++ b/src/components/NcAppNavigation/NcAppNavigation.vue @@ -4,6 +4,107 @@ --> +```vue + + + + + +``` + The navigation bar can be open and closed from anywhere in the app using the nextcloud event bus. From 59e74ec72ca6a4164e111bef5d1d4de7a483c6a4 Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Fri, 5 Jul 2024 12:39:50 +0200 Subject: [PATCH 2/3] fix(NcModal): deactivate other focus trap when modal is opened Signed-off-by: Maksim Sukharev --- src/components/NcModal/NcModal.vue | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue index ab791166f5..fe9e5c813c 100644 --- a/src/components/NcModal/NcModal.vue +++ b/src/components/NcModal/NcModal.vue @@ -529,6 +529,7 @@ export default { slideshowTimeout: null, iconSize: 24, focusTrap: null, + externalFocusTrapStack: [], randId: GenRandomId(), internalShow: true, } @@ -799,6 +800,11 @@ export default { setReturnFocus: this.setReturnFocus, } + // Deactivate other focus traps to unlock modal elements + this.externalFocusTrapStack = [...options.trapStack] + for (const trap of this.externalFocusTrapStack) { + trap.deactivate() + } // Init focus trap this.focusTrap = createFocusTrap([contentContainer, ...this.additionalTrapElements], options) this.focusTrap.activate() @@ -809,6 +815,10 @@ export default { } this.focusTrap?.deactivate() this.focusTrap = null + for (const trap of this.externalFocusTrapStack) { + trap.activate() + } + this.externalFocusTrapStack = [] }, }, From 965fc872634e67af3ebd820d4a2dc96e7e35954f Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Thu, 18 Jul 2024 12:09:10 +0200 Subject: [PATCH 3/3] chore(lint): fix typos Signed-off-by: Maksim Sukharev --- .../NcAppNavigation/NcAppNavigation.vue | 10 +++++----- src/components/NcModal/NcModal.vue | 16 ++++++++-------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/NcAppNavigation/NcAppNavigation.vue b/src/components/NcAppNavigation/NcAppNavigation.vue index 379ef8e415..c19b0e2a71 100644 --- a/src/components/NcAppNavigation/NcAppNavigation.vue +++ b/src/components/NcAppNavigation/NcAppNavigation.vue @@ -260,7 +260,7 @@ export default { * @param {boolean} [state] set the state instead of inverting the current one */ toggleNavigation(state) { - // Early return if alreay in that state + // Early return if already in that state if (this.open === state) { emit('navigation-toggled', { open: this.open, @@ -307,7 +307,7 @@ export default { @@ -326,7 +326,7 @@ export default { top: 0; left: 0; padding: 0px; - // Above appcontent + // Above NcAppContent z-index: 1800; height: 100%; box-sizing: border-box; @@ -384,14 +384,14 @@ export default { } } -// When on mobile, we make the navigation slide over the appcontent +// When on mobile, we make the navigation slide over the NcAppContent @media only screen and (max-width: $breakpoint-mobile) { .app-navigation { position: absolute; } } -// Put the toggle behind appsidebar on small screens +// Put the toggle behind NcAppSidebar on small screens @media only screen and (max-width: $breakpoint-small-mobile) { .app-navigation { z-index: 1400; diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue index fe9e5c813c..0f0d7c4f5c 100644 --- a/src/components/NcModal/NcModal.vue +++ b/src/components/NcModal/NcModal.vue @@ -72,7 +72,7 @@ export default {
- +
@@ -438,7 +438,7 @@ export default { }, /** - * Close the modal if the user clicked outside of the modal + * Close the modal if the user clicked outside the modal * Only relevant if `canClose` is set to true. */ closeOnClickOutside: { @@ -702,8 +702,8 @@ export default { } if (arrowHandlers[event.key]) { // Ignore arrow navigation, if there is a current focus outside the modal. - // For example, when the focus is in Sidebar or NcActions's items, - // arrow navigation should not be intercept by modal slider + // For example, when the focus is in Sidebar or NcActions' items, + // arrow navigation should not be intercepted by modal slider if (document.activeElement && !this.$el.contains(document.activeElement)) { return } @@ -794,7 +794,7 @@ export default { allowOutsideClick: true, fallbackFocus: contentContainer, trapStack: getTrapStack(), - // Esc can be used without stop in content or additionalTrapElements where it should not deacxtivate modal's focus trap. + // Esc can be used without stop in content or additionalTrapElements where it should not deactivate modal's focus trap. // Focus trap is deactivated on modal close anyway. escapeDeactivates: false, setReturnFocus: this.setReturnFocus, @@ -847,7 +847,7 @@ export default { top: 0; right: 0; left: 0; - // prevent vue show to use display:none and reseting + // prevent vue show to use display:none and resetting // the circle animation loop display: flex !important; align-items: center; @@ -1002,7 +1002,7 @@ export default { box-shadow: 0 0 40px rgba(0, 0, 0, .2); &__close { - // Ensure the close button is always ontop of the content + // Ensure the close button is always on top of the content z-index: 1; position: absolute; top: 4px; @@ -1012,7 +1012,7 @@ export default { &__content { width: 100%; min-height: 52px; // At least the close button shall fit in - overflow: auto; // avoids unecessary hacks if the content should be bigger than the modal + overflow: auto; // avoids unnecessary hacks if the content should be bigger than the modal } }