refactor: use NcIconSvgWrapper with directional property where needed

Signed-off-by: Ferdinand Thiessen <[email protected]>

Author: susnux

src/components/NcActionButton/NcActionButton.vue

@@ -355,9 +355,12 @@ export default {
 			<span v-else class="action-button__text">{{ text }}</span>
 
 			<!-- 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" />
+			<NcIconSvgWrapper v-if="isMenu"
+				class="action-button__menu-icon"
+				directional
+				:path="mdiChevronLeft" />
+			<NcIconSvgWrapper v-else-if="isChecked" :path="mdiCheck" class="action-button__pressed-icon" />
+
 			<span v-else-if="isChecked === false" class="action-button__pressed-icon material-design-icon" />
 
 			<!-- fake slot to gather inner text -->
@@ -367,12 +370,10 @@ export default {
 </template>
 
 <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 '../../utils/rtl.ts'
+import { mdiCheck, mdiChevronLeft } from '@mdi/js'
 import { NC_ACTIONS_IS_SEMANTIC_MENU } from '../NcActions/useNcActions.ts'
+import ActionTextMixin from '../../mixins/actionText.js'
+import NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'
 
 /**
  * Button component to be used in Actions
@@ -381,9 +382,7 @@ export default {
 	name: 'NcActionButton',
 
 	components: {
-		CheckIcon,
-		ChevronRightIcon,
-		ChevronLeftIcon,
+		NcIconSvgWrapper,
 	},
 
 	mixins: [ActionTextMixin],
@@ -464,7 +463,8 @@ export default {
 
 	setup() {
 		return {
-			isRtl,
+			mdiCheck,
+			mdiChevronLeft,
 		}
 	},
 

src/components/NcActionTextEditable/NcActionTextEditable.vue

@@ -74,29 +74,25 @@ 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">
-					<ArrowLeft v-if="isRtl" :size="20" />
-					<ArrowRight v-else :size="20" />
+					<NcIconSvgWrapper directional :path="mdiArrowLeft" />
 				</label>
 			</form>
 		</span>
 	</li>
 </template>
 
 <script>
-import ActionTextMixin from '../../mixins/actionText.js'
+import { mdiArrowLeft } from '@mdi/js'
 import { createElementId } from '../../utils/createElementId.ts'
 
-import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
-import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
-
-import { isRtl } from '../../utils/rtl.ts'
+import ActionTextMixin from '../../mixins/actionText.js'
+import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
 
 export default {
 	name: 'NcActionTextEditable',
 
 	components: {
-		ArrowLeft,
-		ArrowRight,
+		NcIconSvgWrapper,
 	},
 
 	mixins: [ActionTextMixin],
@@ -134,7 +130,7 @@ export default {
 
 	setup() {
 		return {
-			isRtl,
+			mdiArrowLeft,
 		}
 	},
 

src/components/NcAppContent/NcAppDetailsToggle.vue

@@ -10,34 +10,32 @@
 		:title
 		variant="tertiary">
 		<template #icon>
-			<ArrowLeft v-if="isRtl" :size="20" />
-			<ArrowRight v-else :size="20" />
+			<NcIconSvgWrapper directional :path="mdiArrowLeft" />
 		</template>
 	</NcButton>
 </template>
 
 <script>
+import { mdiArrowLeft } from '@mdi/js'
 import { emit } from '@nextcloud/event-bus'
 import { useIsMobile } from '../../composables/useIsMobile/index.js'
-import { isRtl } from '../../utils/rtl.ts'
 import { t } from '../../l10n.js'
 
-import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
-import ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'
 import NcButton from '../NcButton/index.ts'
+import NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'
 
 export default {
 	name: 'NcAppDetailsToggle',
 
 	components: {
-		ArrowRight,
-		ArrowLeft,
 		NcButton,
+		NcIconSvgWrapper,
 	},
+
 	setup() {
 		return {
-			isRtl,
 			isMobile: useIsMobile(),
+			mdiArrowLeft,
 		}
 	},