Merge pull request #6520 from nextcloud-libraries/backport/6507/next

[next] fix(NcAction*): complete BiDi support
nextcloud-libraries · Feb 14, 2025 · 023cf41 · 023cf41
2 parents 11f7aac + cec5981
commit 023cf41
Show file tree

Hide file tree

Showing 12 changed files with 40 additions and 37 deletions.
diff --git a/src/components/NcActionCaption/NcActionCaption.vue b/src/components/NcActionCaption/NcActionCaption.vue
@@ -52,8 +52,8 @@ export default {
 		box-shadow: none !important;
 		user-select: none;
 		pointer-events: none;
-		margin-left: 12px;
-		padding-right: 14px;
+		margin-inline-start: 12px;
+		padding-inline-end: 14px;
 		height: var(--default-clickable-area);
 		display: flex;
 		align-items: center;

diff --git a/src/components/NcActionCheckbox/NcActionCheckbox.vue b/src/components/NcActionCheckbox/NcActionCheckbox.vue
@@ -187,13 +187,9 @@ export default {
 	/* checkbox/radio fixes */
 	&__checkbox {
 		position: absolute;
-		top: auto;
-		left: -10000px;
-
-		overflow: hidden;
-
-		width: 1px;
-		height: 1px;
+		inset-inline-start: 0 !important;
+		z-index: -1;
+		opacity: 0;
 	}
 
 	&__label {

diff --git a/src/components/NcActionInput/NcActionInput.vue b/src/components/NcActionInput/NcActionInput.vue
@@ -538,10 +538,11 @@ $input-margin: 4px;
 		flex: 1 1 auto;
 
 		margin: $input-margin 0;
-		padding-right: $icon-margin;
+		padding-inline-end: $icon-margin;
 	}
 
 	&__container {
+		position: relative;
 		width: 100%;
 	}
 
@@ -570,11 +571,12 @@ $input-margin: 4px;
 
 		&--hidden {
 			position: absolute;
-			left: -10000px;
-			top: auto;
+			inset-inline-start: 0;
 			width: 1px;
 			height: 1px;
 			overflow: hidden;
+			z-index: -1;
+			opacity: 0;
 		}
 	}
 

diff --git a/src/components/NcActionRadio/NcActionRadio.vue b/src/components/NcActionRadio/NcActionRadio.vue
@@ -182,13 +182,9 @@ export default {
 	/* checkbox/radio fixes */
 	&__radio {
 		position: absolute;
-		top: auto;
-		left: -10000px;
-
-		overflow: hidden;
-
-		width: 1px;
-		height: 1px;
+		inset-inline-start: 0 !important;
+		z-index: -1;
+		opacity: 0;
 	}
 
 	&__label {
@@ -197,7 +193,7 @@ export default {
 
 		width: 100%;
 		padding: 0 !important;
-		padding-right: $icon-margin !important;
+		padding-inline-end: $icon-margin !important;
 
 		// (34 -14) / 2 = 10 same as ncactioncheckbox
 		&::before {

diff --git a/src/components/NcActionTextEditable/NcActionTextEditable.vue b/src/components/NcActionTextEditable/NcActionTextEditable.vue
@@ -74,7 +74,8 @@ export default {
 				<!-- allow the custom font to inject a ::before
 					not possible on input[type=submit] -->
 				<label v-show="!disabled" :for="id" class="action-text-editable__label">
-					<ArrowRight :size="20" />
+					<ArrowLeft v-if="isRTL" :size="20" />
+					<ArrowRight v-else :size="20" />
 				</label>
 			</form>
 		</span>
@@ -85,12 +86,16 @@ export default {
 import ActionTextMixin from '../../mixins/actionText.js'
 import GenRandomId from '../../utils/GenRandomId.js'
 
+import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 
+import { isRTL } from '@nextcloud/l10n'
+
 export default {
 	name: 'NcActionTextEditable',
 
 	components: {
+		ArrowLeft,
 		ArrowRight,
 	},
 
@@ -127,6 +132,12 @@ export default {
 		'submit',
 	],
 
+	setup() {
+		return {
+			isRTL: isRTL(),
+		}
+	},
+
 	computed: {
 		/**
 		 * determines if the action is focusable
@@ -239,16 +250,18 @@ $input-margin: 4px;
 
 		position: relative;
 		margin: $input-margin 0;
-		padding-right: $icon-margin;
+		padding-inline-end: $icon-margin;
 	}
 
 	&__submit {
 		position: absolute;
-		left: -10000px;
+		inset-inline-start: 0;
 		top: auto;
 		width: 1px;
 		height: 1px;
 		overflow: hidden;
+		z-index: -1;
+		opacity: 0;
 	}
 
 	&__label {
@@ -258,7 +271,7 @@ $input-margin: 4px;
 
 		// bottom-right corner
 		position: absolute;
-		right: calc($icon-margin + 1);
+		inset-inline-end: calc($icon-margin + 1px);
 		bottom: 1px;
 		width: calc(var(--default-clickable-area) - $input-margin * 2);
 		height: calc(var(--default-clickable-area) - $input-margin * 2);
@@ -319,7 +332,7 @@ $input-margin: 4px;
 				z-index: 2;
 
 				border-color: var(--color-primary-element);
-				border-left-color: transparent;
+				border-inline-start-color: transparent;
 			}
 		}
 	}

diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
@@ -1896,11 +1896,7 @@ export default {
 .action-items {
 	display: flex;
 	align-items: center;
-
-	// Spacing between buttons
-	& > button {
-		margin-right: calc($icon-margin / 2);
-	}
+	gap: calc($icon-margin / 2);
 }
 
 .action-item {

diff --git a/src/components/NcButton/NcButton.vue b/src/components/NcButton/NcButton.vue
@@ -395,7 +395,7 @@ td.row-name {
 }
 
 td.row-size {
-	text-align: right;
+	text-align: end;
 	padding-inline-end: 16px;
 }
 

diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue
@@ -89,12 +89,12 @@ export default {
 <style>
 .container1 {
 	display: flex;
+	gap: 20px;
 }
 
 .color1 {
 	width: 100px;
 	height: 34px;
-	margin-left: 20px;
 	border-radius: 6px;
 }
 </style>
@@ -124,12 +124,12 @@ export default {
 <style>
 .container0 {
 	display: flex;
+	gap: 20px;
 }
 
 .color0 {
 	width: 100px;
 	height: 34px;
-	margin-left: 20px;
 	border-radius: 6px;
 }
 </style>

diff --git a/src/components/NcHeaderButton/NcHeaderButton.vue b/src/components/NcHeaderButton/NcHeaderButton.vue
@@ -55,7 +55,7 @@ export default {
 	justify-content: right;
 	background-color: var(--color-primary);
 	height: var(--header-height, 50px);
-	padding-right: 12px;
+	padding-inline-end: 12px;
 }
 </style>
 ```

diff --git a/src/components/NcHeaderMenu/NcHeaderMenu.vue b/src/components/NcHeaderMenu/NcHeaderMenu.vue
@@ -50,7 +50,7 @@ export default {
 	justify-content: right;
 	background-color: var(--color-primary);
 	height: var(--header-height, 50px);
-	padding-right: 12px;
+	padding-inline-end: 12px;
 }
 </style>
 ```

diff --git a/src/components/NcPasswordField/NcPasswordField.vue b/src/components/NcPasswordField/NcPasswordField.vue
@@ -80,13 +80,13 @@ export default {
 
 .external-label {
 	display: flex;
+	gap: 14px;
 	width: 100%;
 	margin-top: 1rem;
 }
 
 .external-label label {
 	padding-top: 7px;
-	padding-right: 14px;
 	white-space: nowrap;
 }
 </style>

diff --git a/src/components/NcTextField/NcTextField.vue b/src/components/NcTextField/NcTextField.vue
@@ -111,13 +111,13 @@ export default {
 
 .external-label {
 	display: flex;
+	gap: 14px;
 	width: 100%;
 	margin-top: 1rem;
 }
 
 .external-label label {
 	padding-top: 7px;
-	padding-right: 14px;
 	white-space: nowrap;
 }
 </style>