fix(rtl): align event title

Signed-off-by: Hamza Mahjoubi <hamzamahjoubi221@gmail.com>
nextcloud · Oct 11, 2024 · 9bc72ad · 9bc72ad
1 parent e6d6120
commit 9bc72ad
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/css/app-sidebar.scss b/css/app-sidebar.scss
@@ -695,6 +695,9 @@
 	.property-title {
 		&__input, input {
 			font-weight: bold;
+			&__rtl{
+				text-align: right;
+			}
 		}
 
 		&__input--readonly {
@@ -776,15 +779,23 @@
 			margin-top: 8px;
 		}
 
-		.event-popover__top-right-actions {
+		.event-popover__top-actions {
 			display: flex;
 			gap: var(--default-grid-baseline);
 			position: absolute !important;
 			top: var(--default-grid-baseline) !important;
-			right: var(--default-grid-baseline) !important;
 			z-index: 100 !important;
 			opacity: .7 !important;
 			border-radius: 22px !important;
+			align-items: center;
+
+			&--right{
+				right: var(--default-grid-baseline) !important;
+			}
+
+			&--left{
+				left: var(--default-grid-baseline) !important;
+			}
 
 			.action-item.action-item--single {
 				width: 44px !important;

diff --git a/src/components/Editor/Properties/PropertyTitle.vue b/src/components/Editor/Properties/PropertyTitle.vue
@@ -15,12 +15,13 @@
 				:value="value"
 				@input.prevent.stop="changeValue">
 			<!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
-			<div v-else>{{ value }}</div>
+			<div v-else :class="{'property-title__input__rtl':isRTL}">{{ value }}</div>
 		</div>
 	</div>
 </template>
 
 <script>
+import { isRTL, getLanguage } from '@nextcloud/l10n'
 import focus from '../../../directives/focus.js'
 
 export default {
@@ -38,6 +39,11 @@ export default {
 			default: '',
 		},
 	},
+	computed: {
+		isRTL() {
+			return isRTL(getLanguage())
+		},
+	},
 	methods: {
 		changeValue(event) {
 			this.$emit('update:value', event.target.value)

diff --git a/src/views/EditSimple.vue b/src/views/EditSimple.vue
@@ -21,7 +21,7 @@
 			</template>
 
 			<template v-else-if="isError">
-				<div class="event-popover__top-right-actions">
+				<div :class="topActionsClass">
 					<Actions>
 						<ActionButton @click="cancel">
 							<template #icon>
@@ -40,7 +40,7 @@
 			</template>
 
 			<template v-else>
-				<div class="event-popover__top-right-actions">
+				<div :class="topActionsClass">
 					<Actions v-if="!isLoading && !isError && !isNew" :force-menu="true">
 						<ActionLink v-if="!hideEventExport && hasDownloadURL"
 							:href="downloadURL">
@@ -197,6 +197,7 @@ import { mapState, mapStores } from 'pinia'
 import useSettingsStore from '../store/settings.js'
 import useWidgetStore from '../store/widget.js'
 import useCalendarObjectInstanceStore from '../store/calendarObjectInstance.js'
+import { getLanguage, isRTL } from '@nextcloud/l10n'
 
 export default {
 	name: 'EditSimple',
@@ -250,6 +251,14 @@ export default {
 			return this.isVisible || this.widgetEventDetailsOpen
 		},
 
+		topActionsClass() {
+			return {
+				'event-popover__top-actions': true,
+				'event-popover__top-actions--right': !isRTL(getLanguage()),
+				'event-popover__top-actions--left': isRTL(getLanguage()),
+			}
+		},
+
 		/**
 		 * Returns true if the current event is read only or the user is viewing the event
 		 *