Merge pull request #55245 from nextcloud/fix/rtl-settings

fix: legacy app navigation snapper on RTL layout

core/css/mobile.css

@@ -4,4 +4,4 @@
  *//*!
  * SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
- */@media only screen and (width < 1024px){#dropdown{margin-inline-end:10% !important;width:80% !important}.ui-autocomplete{z-index:1000 !important}.error-wide{width:100%;margin-inline-start:0 !important;box-sizing:border-box}#app-navigation:not(.vue){transform:translateX(-300px);position:fixed;height:var(--body-height)}.snapjs-left #app-navigation{transform:translateX(0)}#app-navigation:not(.hidden)+#app-content{margin-inline-start:0}.skip-navigation.skip-content{inset-inline-start:3px;margin-inline-start:0}.app-content-list{background:var(--color-main-background);flex:1 1 100%;max-height:unset;max-width:100%}.app-content-list+.app-content-details{display:none}.app-content-list.showdetails{display:none}.app-content-list.showdetails+.app-content-details{display:initial}#app-content.showdetails #app-navigation-toggle{transform:translateX(-44px)}#app-content.showdetails #app-navigation-toggle-back{position:fixed;display:inline-block !important;top:50px;inset-inline-start:0;width:44px;height:44px;z-index:1050;background-color:hsla(0,0%,100%,.7);cursor:pointer;opacity:.6;transform:rotate(90deg)}#app-content.showdetails .app-content-list{transform:translateX(-100%)}#app-navigation-toggle{position:fixed;display:inline-block !important;inset-inline-start:0;width:44px;height:44px;z-index:1050;cursor:pointer;opacity:.6}#app-navigation-toggle:hover,#app-navigation-toggle:focus{opacity:1}#app-navigation+#app-content .files-controls{padding-inline-start:44px}#body-user .app-files.viewer-mode .files-controls{padding-inline-start:0 !important}.app-files.viewer-mode #app-navigation-toggle{display:none !important}table.multiselect thead{inset-inline-start:0 !important}#usersearchform{display:none}#body-settings .files-controls{min-width:1024px !important}}@media only screen and (max-width: 480px){#header .header-end>div>.menu{max-width:calc(100vw - 10px);position:fixed}#header .header-end>div>.menu::after{display:none !important}#header .header-end>div.openedMenu::after{display:block}#header .header-end>div::after{border:10px solid rgba(0,0,0,0);border-bottom-color:var(--color-main-background);bottom:0;content:" ";height:0;width:0;position:absolute;pointer-events:none;inset-inline-end:15px;z-index:2001;display:none}#header .header-end>div#settings::after{inset-inline-end:27px}}/*# sourceMappingURL=mobile.css.map */
+ */@media only screen and (width < 1024px){#dropdown{margin-inline-end:10% !important;width:80% !important}.ui-autocomplete{z-index:1000 !important}.error-wide{width:100%;margin-inline-start:0 !important;box-sizing:border-box}#app-navigation:not(.vue){position:fixed;height:var(--body-height);transform:translateX(-300px)}.snapjs-left #app-navigation,.snapjs-right #app-navigation{transform:translateX(0)}#app-navigation:not(.hidden)+#app-content{margin-inline-start:0}.skip-navigation.skip-content{inset-inline-start:3px;margin-inline-start:0}.app-content-list{background:var(--color-main-background);flex:1 1 100%;max-height:unset;max-width:100%}.app-content-list+.app-content-details{display:none}.app-content-list.showdetails{display:none}.app-content-list.showdetails+.app-content-details{display:initial}#app-content.showdetails #app-navigation-toggle{transform:translateX(-44px)}#app-content.showdetails #app-navigation-toggle-back{position:fixed;display:inline-block !important;top:50px;inset-inline-start:0;width:44px;height:44px;z-index:1050;background-color:hsla(0,0%,100%,.7);cursor:pointer;opacity:.6;transform:rotate(90deg)}#app-content.showdetails .app-content-list{transform:translateX(-100%)}#app-navigation-toggle{position:fixed;display:inline-block !important;inset-inline-start:0;width:44px;height:44px;z-index:1050;cursor:pointer;opacity:.6}#app-navigation-toggle:hover,#app-navigation-toggle:focus{opacity:1}#app-navigation+#app-content .files-controls{padding-inline-start:44px}#body-user .app-files.viewer-mode .files-controls{padding-inline-start:0 !important}.app-files.viewer-mode #app-navigation-toggle{display:none !important}table.multiselect thead{inset-inline-start:0 !important}#usersearchform{display:none}#body-settings .files-controls{min-width:1024px !important}}@media only screen and (max-width: 480px){#header .header-end>div>.menu{max-width:calc(100vw - 10px);position:fixed}#header .header-end>div>.menu::after{display:none !important}#header .header-end>div.openedMenu::after{display:block}#header .header-end>div::after{border:10px solid rgba(0,0,0,0);border-bottom-color:var(--color-main-background);bottom:0;content:" ";height:0;width:0;position:absolute;pointer-events:none;inset-inline-end:15px;z-index:2001;display:none}#header .header-end>div#settings::after{inset-inline-end:27px}}/*# sourceMappingURL=mobile.css.map */

core/css/mobile.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["mobile.scss","variables.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GCEA;AAAA;AAAA;AAAA,GDIA,wCAGC,UACC,iCACA,qBAID,iBACC,wBAID,YACC,WACA,iCACA,sBAID,0BACC,6BACA,eACA,0BAGA,6BACC,wBAIF,0CACC,sBAGD,8BACC,uBACA,sBAID,kBACC,wCACA,cAEA,iBAEA,eACA,uCACC,aAED,8BACC,aACA,mDACC,gBAOF,gDACC,4BAED,qDACC,eACA,gCACA,ICea,KDdb,qBACA,WACA,YACA,aACA,oCACA,eACA,WACA,wBAED,2CACC,4BAKF,uBACC,eACA,gCACA,qBACA,WACA,YACA,aACA,eACA,WAED,0DAEC,UAID,6CACC,0BAID,kDACC,kCAED,8CACC,wBAGD,wBACC,gCAID,gBACC,aAED,+BACC,6BAMF,0CACC,8BACC,6BACA,eACA,qCACC,wBAMA,0CACC,cAGF,+BACC,gCACA,iDACA,SACA,YACA,SACA,QACA,kBACA,oBACA,sBACA,aACA,aAID,wCACC","file":"mobile.css"}
+{"version":3,"sourceRoot":"","sources":["mobile.scss","variables.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GCEA;AAAA;AAAA;AAAA,GDIA,wCAGC,UACC,iCACA,qBAID,iBACC,wBAID,YACC,WACA,iCACA,sBAID,0BACC,eACA,0BACA,6BAIA,2DACC,wBAIF,0CACC,sBAGD,8BACC,uBACA,sBAID,kBACC,wCACA,cAEA,iBAEA,eACA,uCACC,aAED,8BACC,aACA,mDACC,gBAOF,gDACC,4BAED,qDACC,eACA,gCACA,ICca,KDbb,qBACA,WACA,YACA,aACA,oCACA,eACA,WACA,wBAED,2CACC,4BAKF,uBACC,eACA,gCACA,qBACA,WACA,YACA,aACA,eACA,WAED,0DAEC,UAID,6CACC,0BAID,kDACC,kCAED,8CACC,wBAGD,wBACC,gCAID,gBACC,aAED,+BACC,6BAMF,0CACC,8BACC,6BACA,eACA,qCACC,wBAMA,0CACC,cAGF,+BACC,gCACA,iDACA,SACA,YACA,SACA,QACA,kBACA,oBACA,sBACA,aACA,aAID,wCACC","file":"mobile.css"}

core/css/mobile.scss

@@ -26,11 +26,12 @@
 
 	/* APP SIDEBAR TOGGLE and SWIPE ----------------------------------------------*/
 	#app-navigation:not(.vue) {
-		transform: translateX(-#{variables.$navigation-width});
 		position: fixed;
 		height: var(--body-height);
+		transform: translateX(-#{variables.$navigation-width});
 	}
-	.snapjs-left {
+	.snapjs-left,
+	.snapjs-right {
 		#app-navigation {
 			transform: translateX(0);
 		}

core/css/server.css

@@ -45,7 +45,7 @@
  */::-moz-focus-inner{border:0}/*!
  * SPDX-FileCopyrightText: 2017 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
- */@media only screen and (width < 1024px){#dropdown{margin-inline-end:10% !important;width:80% !important}.ui-autocomplete{z-index:1000 !important}.error-wide{width:100%;margin-inline-start:0 !important;box-sizing:border-box}#app-navigation:not(.vue){transform:translateX(-300px);position:fixed;height:var(--body-height)}.snapjs-left #app-navigation{transform:translateX(0)}#app-navigation:not(.hidden)+#app-content{margin-inline-start:0}.skip-navigation.skip-content{inset-inline-start:3px;margin-inline-start:0}.app-content-list{background:var(--color-main-background);flex:1 1 100%;max-height:unset;max-width:100%}.app-content-list+.app-content-details{display:none}.app-content-list.showdetails{display:none}.app-content-list.showdetails+.app-content-details{display:initial}#app-content.showdetails #app-navigation-toggle{transform:translateX(-44px)}#app-content.showdetails #app-navigation-toggle-back{position:fixed;display:inline-block !important;top:50px;inset-inline-start:0;width:44px;height:44px;z-index:1050;background-color:hsla(0,0%,100%,.7);cursor:pointer;opacity:.6;transform:rotate(90deg)}#app-content.showdetails .app-content-list{transform:translateX(-100%)}#app-navigation-toggle{position:fixed;display:inline-block !important;inset-inline-start:0;width:44px;height:44px;z-index:1050;cursor:pointer;opacity:.6}#app-navigation-toggle:hover,#app-navigation-toggle:focus{opacity:1}#app-navigation+#app-content .files-controls{padding-inline-start:44px}#body-user .app-files.viewer-mode .files-controls{padding-inline-start:0 !important}.app-files.viewer-mode #app-navigation-toggle{display:none !important}table.multiselect thead{inset-inline-start:0 !important}#usersearchform{display:none}#body-settings .files-controls{min-width:1024px !important}}@media only screen and (max-width: 480px){#header .header-end>div>.menu{max-width:calc(100vw - 10px);position:fixed}#header .header-end>div>.menu::after{display:none !important}#header .header-end>div.openedMenu::after{display:block}#header .header-end>div::after{border:10px solid rgba(0,0,0,0);border-bottom-color:var(--color-main-background);bottom:0;content:" ";height:0;width:0;position:absolute;pointer-events:none;inset-inline-end:15px;z-index:2001;display:none}#header .header-end>div#settings::after{inset-inline-end:27px}}/*!
+ */@media only screen and (width < 1024px){#dropdown{margin-inline-end:10% !important;width:80% !important}.ui-autocomplete{z-index:1000 !important}.error-wide{width:100%;margin-inline-start:0 !important;box-sizing:border-box}#app-navigation:not(.vue){position:fixed;height:var(--body-height);transform:translateX(-300px)}.snapjs-left #app-navigation,.snapjs-right #app-navigation{transform:translateX(0)}#app-navigation:not(.hidden)+#app-content{margin-inline-start:0}.skip-navigation.skip-content{inset-inline-start:3px;margin-inline-start:0}.app-content-list{background:var(--color-main-background);flex:1 1 100%;max-height:unset;max-width:100%}.app-content-list+.app-content-details{display:none}.app-content-list.showdetails{display:none}.app-content-list.showdetails+.app-content-details{display:initial}#app-content.showdetails #app-navigation-toggle{transform:translateX(-44px)}#app-content.showdetails #app-navigation-toggle-back{position:fixed;display:inline-block !important;top:50px;inset-inline-start:0;width:44px;height:44px;z-index:1050;background-color:hsla(0,0%,100%,.7);cursor:pointer;opacity:.6;transform:rotate(90deg)}#app-content.showdetails .app-content-list{transform:translateX(-100%)}#app-navigation-toggle{position:fixed;display:inline-block !important;inset-inline-start:0;width:44px;height:44px;z-index:1050;cursor:pointer;opacity:.6}#app-navigation-toggle:hover,#app-navigation-toggle:focus{opacity:1}#app-navigation+#app-content .files-controls{padding-inline-start:44px}#body-user .app-files.viewer-mode .files-controls{padding-inline-start:0 !important}.app-files.viewer-mode #app-navigation-toggle{display:none !important}table.multiselect thead{inset-inline-start:0 !important}#usersearchform{display:none}#body-settings .files-controls{min-width:1024px !important}}@media only screen and (max-width: 480px){#header .header-end>div>.menu{max-width:calc(100vw - 10px);position:fixed}#header .header-end>div>.menu::after{display:none !important}#header .header-end>div.openedMenu::after{display:block}#header .header-end>div::after{border:10px solid rgba(0,0,0,0);border-bottom-color:var(--color-main-background);bottom:0;content:" ";height:0;width:0;position:absolute;pointer-events:none;inset-inline-end:15px;z-index:2001;display:none}#header .header-end>div#settings::after{inset-inline-end:27px}}/*!
  * SPDX-FileCopyrightText: 2016 Nextcloud GmbH and Nextcloud contributors
  * SPDX-FileCopyrightText: 2011-2015 Twitter, Inc. (Bootstrap (http://getbootstrap.com))
  * SPDX-License-Identifier: MIT

core/src/init.js

@@ -9,6 +9,7 @@ import $ from 'jquery'
 import moment from 'moment'
 
 import OC from './OC/index.js'
+import { isRTL } from '@nextcloud/l10n'
 import { initSessionHeartBeat } from './session-heartbeat.ts'
 import { setUp as setUpContactsMenu } from './components/ContactsMenu.js'
 import { setUp as setUpMainMenu } from './components/MainMenu.js'
@@ -58,6 +59,9 @@ moment.locale(locale)
  * Initializes core
  */
 export const initCore = () => {
+	const SNAPPER_OPEN = isRTL() ? 'right' : 'left'
+	const SNAPPER_CLOSE = isRTL() ? 'left' : 'right'
+
 	interceptRequests()
 	initFallbackClipboardAPI()
 
@@ -116,7 +120,7 @@ export const initCore = () => {
 		// App sidebar on mobile
 		const snapper = new Snap({
 			element: document.getElementById('app-content'),
-			disable: 'right',
+			disable: SNAPPER_CLOSE,
 			maxPosition: 300, // $navigation-width
 			minDragDistance: 100,
 		})
@@ -162,7 +166,7 @@ export const initCore = () => {
 			if (animating || snapper.state().state !== 'closed') {
 				return
 			}
-			oldSnapperOpen('left')
+			oldSnapperOpen(SNAPPER_OPEN)
 		}
 
 		const _snapperClose = () => {
@@ -187,16 +191,17 @@ export const initCore = () => {
 		}
 
 		$('#app-navigation-toggle').click((e) => {
+			console.error('snapper', SNAPPER_OPEN, isRTL(), snapper.state().state, snapper)
 			// close is implicit in the button by snap.js
-			if (snapper.state().state !== 'left') {
-				snapper.open()
+			if (snapper.state().state !== SNAPPER_OPEN) {
+				snapper.open(SNAPPER_OPEN)
 			}
 		})
 		$('#app-navigation-toggle').keypress(e => {
-			if (snapper.state().state === 'left') {
+			if (snapper.state().state === SNAPPER_OPEN) {
 				snapper.close()
 			} else {
-				snapper.open()
+				snapper.open(SNAPPER_OPEN)
 			}
 		})