feat: Add bidi support in core directory

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

7 files changed, 21 insertions, 20 deletions

diff --git a/apps/files/src/components/DragAndDropNotice.vue b/apps/files/src/components/DragAndDropNotice.vue
index 72a57deeb28..23ebf7cd296 100644
--- a/apps/files/src/components/DragAndDropNotice.vue
+++ b/apps/files/src/components/DragAndDropNotice.vue
@@ -243,7 +243,7 @@ export default defineComponent({
 	border-color: black;
 
 	h3 {
-		margin-left: 16px;
+		margin-inline-start: 16px;
 		color: inherit;
 	}
 
diff --git a/apps/files/src/components/DragAndDropPreview.vue b/apps/files/src/components/DragAndDropPreview.vue
index c19b166581f..7c9c6f4f1a7 100644
--- a/apps/files/src/components/DragAndDropPreview.vue
+++ b/apps/files/src/components/DragAndDropPreview.vue
@@ -98,7 +98,7 @@ $stack-shift: 6px;
 .files-list-drag-image {
 	position: absolute;
 	top: -9999px;
-	left: -9999px;
+	inset-inline-start: -9999px;
 	display: flex;
 	overflow: hidden;
 	align-items: center;
@@ -119,7 +119,7 @@ $stack-shift: 6px;
 
 	&__icon {
 		overflow: visible;
-		margin-right: 12px;
+		margin-inline-end: 12px;
 
 		img {
 			max-width: 100%;
@@ -140,7 +140,7 @@ $stack-shift: 6px;
 			// Stack effect if more than one element
 			.files-list__row-icon + .files-list__row-icon {
 				margin-top: $stack-shift;
-				margin-left: $stack-shift - $size;
+				margin-inline-start: $stack-shift - $size;
 				& + .files-list__row-icon {
 					margin-top: $stack-shift * 2;
 				}
diff --git a/apps/files/src/components/FileEntry/FileEntryName.vue b/apps/files/src/components/FileEntry/FileEntryName.vue
index 439037b984e..cf425127282 100644
--- a/apps/files/src/components/FileEntry/FileEntryName.vue
+++ b/apps/files/src/components/FileEntry/FileEntryName.vue
@@ -26,7 +26,8 @@
 		:aria-hidden="isRenaming"
 		class="files-list__row-name-link"
 		data-cy-files-list-row-name-link
-		v-bind="linkTo.params">
+		v-bind="linkTo.params"
+		dir="auto">
 		<!-- Filename -->
 		<span class="files-list__row-name-text">
 			<!-- Keep the filename stuck to the extension to avoid whitespace rendering issues-->
diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index 75f57924984..743d85beeba 100644
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -443,7 +443,7 @@ export default defineComponent({
 			display: flex;
 			align-items: center;
 			flex: 0 0 auto;
-			justify-content: left;
+			justify-content: start;
 			width: var(--row-height);
 			height: var(--row-height);
 			margin: 0;
@@ -465,8 +465,8 @@ export default defineComponent({
 			position: absolute;
 			display: block;
 			top: 0;
-			left: 0;
-			right: 0;
+			inset-inline-start: 0;
+			inset-inline-end: 0;
 			bottom: 0;
 			opacity: .1;
 			z-index: -1;
@@ -530,7 +530,7 @@ export default defineComponent({
 			width: var(--icon-preview-size);
 			height: 100%;
 			// Show same padding as the checkbox right padding for visual balance
-			margin-right: var(--checkbox-padding);
+			margin-inline-end: var(--checkbox-padding);
 			color: var(--color-primary-element);
 
 			// Icon is also clickable
@@ -576,7 +576,7 @@ export default defineComponent({
 			&-favorite {
 				position: absolute;
 				top: 0px;
-				right: -10px;
+				inset-inline-end: -10px;
 			}
 
 			// File and folder overlay
@@ -635,7 +635,7 @@ export default defineComponent({
 				color: var(--color-main-text);
 				// Make some space for the outline
 				padding: var(--default-grid-baseline) calc(2 * var(--default-grid-baseline));
-				padding-left: 0;
+				padding-inline-start: -10px;
 				// Align two name and ext
 				display: inline-flex;
 			}
@@ -654,7 +654,7 @@ export default defineComponent({
 			input {
 				width: 100%;
 				// Align with text, 0 - padding - border
-				margin-left: -8px;
+				margin-inline-start: -8px;
 				padding: 2px 6px;
 				border-width: 2px;
 
@@ -685,7 +685,7 @@ export default defineComponent({
 		}
 
 		.files-list__row-action--inline {
-			margin-right: 7px;
+			margin-inline-end: 7px;
 		}
 
 		.files-list__row-mtime,
@@ -754,7 +754,7 @@ tbody.files-list__tbody.files-list__tbody--grid {
 		position: absolute;
 		z-index: 9;
 		top: calc(var(--item-padding)/2);
-		left: calc(var(--item-padding)/2);
+		inset-inline-start: calc(var(--item-padding)/2);
 		overflow: hidden;
 		--checkbox-container-size: 44px;
 		width: var(--checkbox-container-size);
@@ -777,7 +777,7 @@ tbody.files-list__tbody.files-list__tbody--grid {
 	.files-list__row-icon-favorite {
 		position: absolute;
 		top: 0;
-		right: 0;
+		inset-inline-end: 0;
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -814,7 +814,7 @@ tbody.files-list__tbody.files-list__tbody--grid {
 
 	.files-list__row-actions {
 		position: absolute;
-		right: calc(var(--half-clickable-area) / 2);
+		inset-inline-end: calc(var(--half-clickable-area) / 2);
 		bottom: calc(var(--mtime-height) / 2);
 		width: var(--clickable-area);
 		height: var(--clickable-area);
diff --git a/apps/files/src/components/NavigationQuota.vue b/apps/files/src/components/NavigationQuota.vue
index 0e5ef510342..2d4e616adc0 100644
--- a/apps/files/src/components/NavigationQuota.vue
+++ b/apps/files/src/components/NavigationQuota.vue
@@ -174,7 +174,7 @@ export default {
 	progress {
 		position: absolute;
 		bottom: 12px;
-		margin-left: 44px;
+		margin-inline-start: 44px;
 		width: calc(100% - 44px - 22px);
 	}
 }
diff --git a/apps/files/src/components/TransferOwnershipDialogue.vue b/apps/files/src/components/TransferOwnershipDialogue.vue
index f13e6655354..5496c9edc92 100644
--- a/apps/files/src/components/TransferOwnershipDialogue.vue
+++ b/apps/files/src/components/TransferOwnershipDialogue.vue
@@ -220,7 +220,7 @@ p {
 		margin-bottom: calc(var(--default-grid-baseline) * 2);
 
 		span {
-			margin-right: 8px;
+			margin-inline-end: 8px;
 		}
 	}
 
@@ -231,7 +231,7 @@ p {
 }
 .transfer-select-row {
 	span {
-		margin-right: 8px;
+		margin-inline-end: 8px;
 	}
 
 	&__choose_button {
diff --git a/apps/files/src/views/TemplatePicker.vue b/apps/files/src/views/TemplatePicker.vue
index e2fb815380d..a62b6f76c6a 100644
--- a/apps/files/src/views/TemplatePicker.vue
+++ b/apps/files/src/views/TemplatePicker.vue
@@ -328,7 +328,7 @@ export default defineComponent({
 	&__loading {
 		position: absolute;
 		top: 0;
-		left: 0;
+		inset-inline-start: 0;
 		justify-content: center;
 		width: 100%;
 		height: 100%;