Fix: float and clear

Fix other background-positions
Minor fix in link button icon position
Update header left and right to start and end

Signed-off-by: Mostafa Ahangarha <ahangarha@riseup.net>

12 files changed, 143 insertions, 38 deletions

diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
index c13735bc11b..210d46c6491 100644
--- a/apps/settings/css/settings.scss
+++ b/apps/settings/css/settings.scss
@@ -158,6 +158,13 @@ select {
 	}
 }
 
+body[dir='ltr'] .link-button.icon-file {
+	background-position: left 24px center;
+}
+body[dir='rtl'] .link-button.icon-file {
+	background-position: right 24px center;
+}
+
 .personal-settings-container {
 	display: inline-grid;
 	grid-template-columns: 1fr 1fr 1fr;
diff --git a/core/css/apps.scss b/core/css/apps.scss
index 365d94e3a31..3441db7f65d 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -157,7 +157,6 @@ kbd {
 			width: 100%;
 			padding: 10px;
 			padding-inline-start: 34px;
-			background-position: 10px center;
 			text-align: start;
 			margin: 0;
 		}
@@ -321,7 +320,6 @@ kbd {
 			/* Main entry link */
 			> a {
 				background-size: 16px 16px;
-				background-position: 14px center;
 				background-repeat: no-repeat;
 				display: block;
 				justify-content: space-between;
@@ -358,7 +356,7 @@ kbd {
 				/* counter can also be inside the link */
 				> .app-navigation-entry-utils  {
 					display: inline-block;
-					float: right;
+					/* Check Floating fix below */ 
 					.app-navigation-entry-utils-counter {
 						padding-inline-end: 0 !important;
 					}
@@ -662,6 +660,40 @@ kbd {
 	}
 }
 
+/* Floating and background-position fix */
+/* Cannot use inline-start and :dir to support Samsung Internet */ 
+body[dir='ltr'] {
+	.app-navigation-personal,
+	.app-navigation-administration {
+		.app-navigation-new button {
+			background-position: left 10px center;
+		}
+
+		> ul > li > ul > li > a {
+			background-position: left 14px center;
+
+			> .app-navigation-entry-utils {
+				float: right;
+			}
+		}
+	}
+}
+body[dir='rtl'] {
+	.app-navigation-personal,
+	.app-navigation-administration {
+		.app-navigation-new button {
+			background-position: right 10px center;
+		}
+
+		> ul > li > ul > li > a {
+			background-position: right 14px center;
+
+			> .app-navigation-entry-utils {
+				float: left;
+			}
+		}
+	}
+}
 
 /* CONTENT  --------------------------------------------------------- */
 #content {
@@ -857,7 +889,6 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
 
 		&::before {
 			background-image: var(--icon-settings-dark);
-			background-position: 14px center;
 			background-repeat: no-repeat;
 			content: '';
 			width: var(--default-clickable-area);
@@ -869,11 +900,27 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
 
 		&:focus-visible {
 			box-shadow: 0 0 0 2px inset var(--color-primary-element) !important;
-			background-position: 12px center;
 		}
 	}
 }
 
+/* Background-position fix */
+body[dir='ltr'] #app-settings-header .settings-button {
+	&::before {
+		background-position: left 14px center;
+	}
+	&:focus-visible {
+		background-position: left 12px center;
+	}
+}
+body[dir='rtl'] #app-settings-header .settings-button {
+	&::before {
+		background-position: right 14px center;
+	}
+	&:focus-visible {
+		background-position: right 12px center;
+	}
+}
 /* GENERAL SECTION ------------------------------------------------------------ */
 .section {
 	display: block;
@@ -971,12 +1018,19 @@ $min-content-width: variables.$breakpoint-mobile - variables.$navigation-width -
 	}
 }
 .tabsContainer {
-	clear: left;
 	.tab {
 		padding: 0 15px 15px;
 	}
 }
 
+/* Cannot use inline-start to support Samsung Internet*/ 
+body[dir='ltr'] .tabsContainer {
+	clear: left;
+}
+body[dir='rtl'] .tabsContainer {
+	clear: right;
+}
+
 /* POPOVER MENU ------------------------------------------------------------ */
 $popoveritem-height: 34px;
 $popovericon-size: 16px;
diff --git a/core/css/global.scss b/core/css/global.scss
index d0a12dc383d..de83f862786 100644
--- a/core/css/global.scss
+++ b/core/css/global.scss
@@ -7,20 +7,52 @@
 
 /* Global Components */
 
-.pull-left {
-	float: left;
-}
+/* The following lines are a hacky way to adjust float and clear based on direction.
+ Samsung Internet doesn't support `inline-start|end` and :dir.
+ pull-right|left and clear-right|left are also kept for backward compatibility.
+  */
+body[dir='ltr'] {
+	.pull-left,
+	.pull-start {
+		float: left;
+	}
 
-.pull-right {
-	float: right;
-}
+	.pull-right,
+	.pull-end {
+		float: right;
+	}
+
+	.clear-left,
+	.clear-start {
+		clear: left;
+	}
 
-.clear-left {
-	clear: left;
+	.clear-right,
+	.clear-end {
+		clear: right;
+	}
 }
 
-.clear-right {
-	clear: right;
+body[dir='rtl'] {
+	.pull-left,
+	.pull-start {
+		float: right;
+	}
+
+	.pull-right,
+	.pull-end {
+		float: left;
+	}
+
+	.clear-left,
+	.clear-start {
+		clear: right;
+	}
+
+	.clear-right,
+	.clear-end {
+		clear: left;
+	}
 }
 
 .clear-both {
diff --git a/core/css/guest.scss b/core/css/guest.scss
index f1c0ffcd14c..a4bafba3b89 100644
--- a/core/css/guest.scss
+++ b/core/css/guest.scss
@@ -591,14 +591,19 @@ p.info {
 		margin-inline-end: 25px;
 	}
 
-	img.float-spinner {
-		float: left;
-	}
-
 	a.update-show-detailed {
 		border-bottom: inherit;
 	}
 }
+
+/* Cannot use inline-start and :dir to support Samsung Internet */ 
+body[dir='ltr'] .update img.float-spinner {
+	float: left;
+}
+body[dir='rtl'] .update img.float-spinner {
+	float: right;
+}
+
 #update-progress-detailed {
 	text-align: start;
 	margin-bottom: 12px;
diff --git a/core/css/header.scss b/core/css/header.scss
index fb08dda78e5..a81e9785dba 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -31,7 +31,7 @@
 		bottom: 2px;
 	}
 
-	.header-right {
+	.header-end {
 		// Add some spacing so the last entry looks ok
 		margin-inline-end: calc(3 * var(--default-grid-baseline));
 
@@ -88,7 +88,7 @@
 	/* Header menu */
 	$header-menu-entry-height: 44px;
 
-	.header-right > div > .menu {
+	.header-end > div > .menu {
 		background-color: var(--color-main-background);
 		filter: drop-shadow(0 1px 5px var(--color-box-shadow));
 		border-radius: var(--border-radius-large);
@@ -146,25 +146,25 @@
 		flex-shrink: 0;
 	}
 
-	#header-left, .header-left,
-	#header-right, .header-right {
+	#header-start, .header-start,
+	#header-end, .header-end {
 		display: inline-flex;
 		align-items: center;
 	}
 
-	#header-left, .header-left {
+	#header-start, .header-start {
 		flex: 1 0;
 		white-space: nowrap;
 		min-width: 0;
 	}
 
-	#header-right, .header-right {
+	#header-end, .header-end {
 		justify-content: flex-end;
 		flex-shrink: 1;
 	}
 
 	/* Right header standard */
-	.header-right {
+	.header-end {
 		> .header-menu__trigger img {
 			filter: var(--background-image-invert-if-bright);
 		}
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index 2b6514d0930..363aa63697d 100644
--- a/core/css/mobile.scss
+++ b/core/css/mobile.scss
@@ -132,7 +132,7 @@
 }
 
 @media only screen and (max-width: 480px) {
-	#header .header-right > div > .menu {
+	#header .header-end > div > .menu {
 		max-width: calc(100vw - 10px);
 		position: fixed;
 		&::after {
@@ -140,7 +140,7 @@
 		}
 	}
 	/* Arrow directly child of menutoggle */
-	#header .header-right > div {
+	#header .header-end > div {
 		&.openedMenu {
 			&::after {
 				display: block;
diff --git a/core/css/public.scss b/core/css/public.scss
index 98a24d12fe1..79f406b44d5 100644
--- a/core/css/public.scss
+++ b/core/css/public.scss
@@ -14,7 +14,7 @@
 		--footer-height: calc(3 * var(--default-line-height) + 3 * var(--default-grid-baseline));
 	}
 
-	.header-right {
+	.header-end {
 
 		#header-primary-action a {
 			color: var(--color-primary-element-text);
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 110b2c7f4c4..eb766b8844b 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -248,8 +248,15 @@ body {
 	position: absolute;
 	inset-inline-end: 1em;
 	top: .8em;
+}
+
+/* Cannot use inline-start and :dir to support Samsung Internet */ 
+body[dir='ltr'] #show, #dbpassword {
 	float: right;
 }
+body[dir='ltr'] #show, #dbpassword {
+	float: left;
+}
 
 #show + label, #dbpassword + label {
 	inset-inline-end: 21px;
diff --git a/core/js/public/publicpage.js b/core/js/public/publicpage.js
index 340fb56d9f1..b17eac181b1 100644
--- a/core/js/public/publicpage.js
+++ b/core/js/public/publicpage.js
@@ -5,7 +5,7 @@
 
 window.addEventListener('DOMContentLoaded', function () {
 
-	$('#body-public').find('.header-right .menutoggle').click(function() {
+	$('#body-public').find('.header-end .menutoggle').click(function() {
 		$(this).next('.popovermenu').toggleClass('open');
 	});
 
@@ -15,7 +15,7 @@ window.addEventListener('DOMContentLoaded', function () {
 	});
 
 	$(document).mouseup(function(e) {
-		var toggle = $('#body-public').find('.header-right .menutoggle');
+		var toggle = $('#body-public').find('.header-end .menutoggle');
 		var container = toggle.next('.popovermenu');
 
 		// if the target of the click isn't the menu toggle, nor a descendant of the
diff --git a/core/src/components/MainMenu.js b/core/src/components/MainMenu.js
index 0799a6eabc4..21a0b6a772f 100644
--- a/core/src/components/MainMenu.js
+++ b/core/src/components/MainMenu.js
@@ -17,7 +17,7 @@ export const setUp = () => {
 		},
 	})
 
-	const container = document.getElementById('header-left__appmenu')
+	const container = document.getElementById('header-start__appmenu')
 	if (!container) {
 		// no container, possibly we're on a public page
 		return
diff --git a/core/templates/layout.public.php b/core/templates/layout.public.php
index 10b64fcdef8..b470e9f02a8 100644
--- a/core/templates/layout.public.php
+++ b/core/templates/layout.public.php
@@ -44,7 +44,7 @@ p($theme->getTitle());
 	</div>
 
 	<header id="header">
-		<div class="header-left">
+		<div class="header-start">
 			<div id="nextcloud" class="header-appname">
 				<?php if ($_['logoUrl']): ?>
 					<a href="<?php print_unescaped($_['logoUrl']); ?>"
@@ -72,7 +72,7 @@ p($theme->getTitle());
 			</div>
 		</div>
 
-		<div class="header-right">
+		<div class="header-end">
 		<?php
 /** @var \OCP\AppFramework\Http\Template\PublicTemplateResponse $template */
 if (isset($template) && $template->getActionCount() !== 0) {
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index a70fa6dcdbc..f820a2f3ace 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -63,17 +63,17 @@ p($theme->getTitle());
 		</div>
 
 		<header id="header">
-			<div class="header-left">
+			<div class="header-start">
 				<a href="<?php print_unescaped($_['logoUrl'] ?: link_to('', 'index.php')); ?>"
 					aria-label="<?php p($l->t('Go to %s', [$_['logoUrl'] ?: $_['defaultAppName']])); ?>"
 					id="nextcloud">
 					<div class="logo logo-icon"></div>
 				</a>
 
-				<nav id="header-left__appmenu"></nav>
+				<nav id="header-start__appmenu"></nav>
 			</div>
 
-			<div class="header-right">
+			<div class="header-end">
 				<div id="unified-search"></div>
 				<div id="notifications"></div>
 				<div id="contactsmenu"></div>