Merge pull request #6480 from nextcloud-libraries/backport/6455/next

[next] fix(NcAppNavigation + NcUserBubble + NcRichContenteditable): RTL support
nextcloud-libraries · Jan 31, 2025 · e8e83e9 · e8e83e9
2 parents d796386 + 2a41dec
commit e8e83e9
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 20 deletions.
diff --git a/src/assets/NcAppNavigationItem.scss b/src/assets/NcAppNavigationItem.scss
@@ -73,7 +73,7 @@
 
 	&:not(.app-navigation-entry--editing) {
 		.app-navigation-entry-link, .app-navigation-entry-button {
-			padding-right: $icon-margin;
+			padding-inline-end: $icon-margin;
 		}
 	}
 
@@ -135,15 +135,15 @@
 	.app-navigation-entry {
 		display: inline-flex;
 		flex-wrap: wrap;
-		padding-left: $icon-size;
+		padding-inline-start: $icon-size;
 	}
 }
 
 /* Deleted entries */
 .app-navigation-entry__deleted {
 	display: inline-flex;
 	flex: 1 1 0;
-	padding-left: calc(var(--default-clickable-area) - $icon-margin) !important;
+	padding-inline-start: calc(var(--default-clickable-area) - $icon-margin) !important;
 	.app-navigation-entry__deleted-description {
 		position: relative;
 		overflow: hidden;
@@ -166,8 +166,8 @@
 	}
 	/* counter */
 	.app-navigation-entry__counter-wrapper {
-		// Add slightly more space to the right of the counter
-		margin-right: calc(var(--default-grid-baseline) * 2);
+		// Add slightly more space to the end of the counter
+		margin-inline-end: calc(var(--default-grid-baseline) * 2);
 		display: flex;
 		align-items: center;
 		flex: 0 1 auto;

diff --git a/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
@@ -268,7 +268,8 @@ export default {
 		box-shadow: none !important;
 		flex-shrink: 0;
 		// padding to align the name with the icon of app navigation items
-		padding: 0 calc(var(--default-grid-baseline, 4px) * 2) 0 calc(var(--default-grid-baseline, 4px) * 2);
+		padding-block: 0;
+		padding-inline: calc(var(--default-grid-baseline, 4px) * 2) 0;
 		margin-top: 0px;
 		margin-bottom: var(--default-grid-baseline);
 	}

diff --git a/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue b/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue
@@ -63,7 +63,7 @@ export default {
 	position: relative;
 	z-index: 105; // above a, under button
 	color: var(--color-main-text);
-	right: 0;
+	inset-inline-end: 0;
 	&--open {
 		color: var(--color-main-text);
 		&:hover{

diff --git a/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue b/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
@@ -166,7 +166,7 @@ export default {
 	max-width: 100%;
 	white-space: nowrap;
 	text-overflow: ellipsis;
-	padding-left: 7px;
+	padding-inline-start: 7px;
 	font-size: 14px;
 }
 

diff --git a/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue b/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue
@@ -92,11 +92,11 @@ export default {
 			box-shadow: none;
 			border: 0;
 			border-radius: var(--body-container-radius);
-			text-align: left;
+			text-align: start;
 			font-weight: normal;
 			font-size: 100%;
 			color: var(--color-main-text);
-			padding-right: 14px;
+			padding-inline-end: 14px;
 			line-height: var(--default-clickable-area);
 
 			&:hover,

diff --git a/src/components/NcRichContenteditable/NcAutoCompleteResult.vue b/src/components/NcRichContenteditable/NcAutoCompleteResult.vue
@@ -134,7 +134,7 @@ export default {
 		--auto-complete-result-status-icon-position: calc(var(--auto-complete-result-avatar-size) / 2 * (1 - 1 / sqrt(2)) - var(--auto-complete-result-status-icon-size) / 2);
 		box-sizing: border-box;
 		position: absolute;
-		right: var(--auto-complete-result-status-icon-position);
+		inset-inline-end: var(--auto-complete-result-status-icon-position);
 		bottom: var(--auto-complete-result-status-icon-position);
 		height: var(--auto-complete-result-status-icon-size);
 		width: var(--auto-complete-result-status-icon-size);

diff --git a/src/components/NcRichContenteditable/NcMentionBubble.vue b/src/components/NcRichContenteditable/NcMentionBubble.vue
@@ -121,8 +121,7 @@ $bubble-avatar-size: $bubble-height - 2 * $bubble-padding;
 		height: $bubble-height ;
 		-webkit-user-select: none;
 		user-select: none;
-		padding-right: $bubble-padding * 3;
-		padding-left: $bubble-padding;
+		padding-inline: $bubble-padding  $bubble-padding * 3;
 		border-radius: math.div($bubble-height, 2);
 		background-color: var(--color-background-dark);
 	}
@@ -145,7 +144,7 @@ $bubble-avatar-size: $bubble-height - 2 * $bubble-padding;
 
 	&__title {
 		overflow: hidden;
-		margin-left: $bubble-padding;
+		margin-inline-start: $bubble-padding;
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		// Put title in ::before so it is not selectable
@@ -158,7 +157,7 @@ $bubble-avatar-size: $bubble-height - 2 * $bubble-padding;
 	&__select {
 		position: absolute;
 		z-index: -1;
-		left: -100vw;
+		inset-inline-start: -100vw;
 		width: 1px;
 		height: 1px;
 		overflow: hidden;

diff --git a/src/components/NcUserBubble/NcUserBubble.vue b/src/components/NcUserBubble/NcUserBubble.vue
@@ -252,7 +252,7 @@ export default {
 					borderRadius: this.size / 2 + 'px',
 				},
 				avatar: {
-					marginLeft: this.margin + 'px',
+					marginInlineStart: this.margin + 'px',
 				},
 			}
 		},
@@ -300,8 +300,8 @@ export default {
 		}
 
 		> :last-child {
-			// border radius left padding
-			padding-right: 8px;
+			// border radius end padding
+			padding-inline-end: 8px;
 		}
 	}
 
@@ -318,8 +318,8 @@ export default {
 	&__name,
 	&__secondary {
 		// proper spacing between avatar, name & slot
-		padding: 0;
-		padding-left: 4px;
+		padding-block: 0;
+		padding-inline: 4px 0;
 	}
 }
 </style>