Merge pull request #6200 from falghamdi125/fix-ncaction-button-paddin…

…g-in-rtl fix(NcActionButton): RTL support
nextcloud-libraries · Dec 20, 2024 · 99dc74b · 99dc74b
2 parents b804306 + cf3af9d
commit 99dc74b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/src/assets/action.scss b/src/assets/action.scss
@@ -37,7 +37,7 @@
 		height: auto;
 		margin: 0;
 		padding: 0;
-		padding-right: $icon-margin;
+		padding-inline-end: $icon-margin;
 		box-sizing: border-box; // otherwise router-link overflows in Firefox
 
 		cursor: pointer;
@@ -109,11 +109,7 @@
 		}
 
 		&__menu-icon {
-			// Push to the right
-			margin-left: auto;
-			// Align with right end of the button
-			// This is the padding-right
-			margin-right: calc($icon-margin * -1);
+			margin-inline: auto calc($icon-margin * -1);
 		}
 	}
 }
diff --git a/src/components/NcActionButton/NcActionButton.vue b/src/components/NcActionButton/NcActionButton.vue
@@ -354,8 +354,9 @@ export default {
 			<!-- default text display -->
 			<span v-else class="action-button__text">{{ text }}</span>
 
-			<!-- right arrow icon when there is a sub-menu -->
-			<ChevronRightIcon v-if="isMenu" :size="20" class="action-button__menu-icon" />
+			<!-- right(in LTR) or left(in RTL) arrow icon when there is a sub-menu -->
+			<ChevronRightIcon v-if="isMenu && !isRTL" :size="20" class="action-button__menu-icon" />
+			<ChevronLeftIcon v-else-if="isMenu && isRTL" :size="20" class="action-button__menu-icon" />
 			<CheckIcon v-else-if="isChecked === true" :size="20" class="action-button__pressed-icon" />
 			<span v-else-if="isChecked === false" class="action-button__pressed-icon material-design-icon" />
 
@@ -368,7 +369,9 @@ export default {
 <script>
 import CheckIcon from 'vue-material-design-icons/Check.vue'
 import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue'
+import ChevronLeftIcon from 'vue-material-design-icons/ChevronLeft.vue'
 import ActionTextMixin from '../../mixins/actionText.js'
+import { isRTL } from '@nextcloud/l10n'
 
 /**
  * Button component to be used in Actions
@@ -379,6 +382,12 @@ export default {
 	components: {
 		CheckIcon,
 		ChevronRightIcon,
+		ChevronLeftIcon,
+	},
+	setup() {
+		return {
+			isRTL: isRTL(),
+		}
 	},
 	mixins: [ActionTextMixin],
 
@@ -547,7 +556,6 @@ export default {
 @include action-item('button');
 
 .action-button__pressed-icon {
-	margin-left: auto;
-	margin-right: calc($icon-margin * -1);
+	margin-inline: auto calc($icon-margin * -1);
 }
 </style>