Merge pull request #10687 from nextcloud/fix/10522/minor-rtl-support

Add minor RTL support for chat messages

4 files changed, 42 insertions, 23 deletions

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index d9e2cb3ae..1032bcab5 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -54,6 +54,7 @@ the main body of the message as well as a quote.
 					<NcRichText :text="message"
 						:arguments="richParameters"
 						autolink
+						dir="auto"
 						:reference-limit="0" />
 					<CallButton />
 				</div>
@@ -61,6 +62,7 @@ the main body of the message as well as a quote.
 					<NcRichText :text="message"
 						:arguments="richParameters"
 						autolink
+						dir="auto"
 						:reference-limit="0" />
 					<!-- Displays only the "see results" button with the results modal -->
 					<Poll v-if="showResultsButton"
@@ -73,6 +75,7 @@ the main body of the message as well as a quote.
 					<NcRichText :text="message"
 						:arguments="richParameters"
 						autolink
+						dir="auto"
 						:reference-limit="0" />
 				</div>
 				<div v-else
@@ -83,6 +86,7 @@ the main body of the message as well as a quote.
 					<NcRichText :text="message"
 						:arguments="richParameters"
 						autolink
+						dir="auto"
 						:use-markdown="markdown"
 						:reference-limit="1" />
 
@@ -992,6 +996,10 @@ export default {
 				display: flex;
 				border-radius: var(--border-radius-large);
 				align-items: center;
+				:deep(.rich-text--wrapper) {
+					flex-grow: 1;
+					text-align: start;
+				}
 			}
 
 			&--quote {
@@ -1120,17 +1128,24 @@ export default {
 }
 
 .message-body__main__text--markdown {
-  position: relative;
+	position: relative;
 
-  .message-copy-code {
-    position: absolute;
-    top: 0;
-    right: 4px;
-    margin-top: 4px;
-    background-color: var(--color-background-dark);
-  }
+	.message-copy-code {
+		position: absolute;
+		top: 0;
+		right: 4px;
+		margin-top: 4px;
+		background-color: var(--color-background-dark);
+	}
 
 	:deep(.rich-text--wrapper) {
+		text-align: start;
+
+		// Hardcode to prevent RTL affecting on user mentions
+		.rich-text--component {
+			direction: ltr;
+		}
+
 		// Overwrite core styles, otherwise h4 is lesser than default font-size
 		h4 {
 			font-size: 100%;
@@ -1140,6 +1155,12 @@ export default {
 			font-style: italic;
 		}
 
+		ul,
+		ol {
+			padding-left: 0;
+			padding-inline-start: 15px;
+		}
+
 		pre {
 			padding: 4px;
 			margin: 2px 0;
@@ -1162,19 +1183,10 @@ export default {
 		}
 
 		blockquote {
-			position: relative;
+			padding-left: 0;
+			padding-inline-start: 13px;
 			border-left: none;
-
-			&::before {
-				content: ' ';
-				position: absolute;
-				top: 0;
-				left: 0;
-				height: 100%;
-				width: 4px;
-				border-radius: 2px;
-				background-color: var(--color-border);
-			}
+			border-inline-start: 4px solid var(--color-border);
 		}
 	}
 }
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 22de8c86a..f5404843a 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -421,8 +421,8 @@ export default {
 				return false
 			}
 
-			// Only group messages within a short period of time, so unrelated messages are not grouped together
-			return (this.getDateOfMessage(message1).format('X') - this.getDateOfMessage(message2).format('X')) < 300
+			// Only group messages within a short period of time (5 minutes), so unrelated messages are not grouped together
+			return this.getDateOfMessage(message1).diff(this.getDateOfMessage(message2)) < 300 * 1000
 		},
 
 		/**
diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
index c87dc2056..0918e855f 100644
--- a/src/components/NewMessage/NewMessage.vue
+++ b/src/components/NewMessage/NewMessage.vue
@@ -91,6 +91,7 @@
 					:menu-container="containerElement"
 					:placeholder="placeholderText"
 					:aria-label="placeholderText"
+					dir="auto"
 					@shortkey="focusInput"
 					@keydown.esc="handleInputEsc"
 					@tribute-active-true.native="isTributePickerActive = true"
@@ -858,4 +859,9 @@ export default {
 		opacity: .5 !important;
 	}
 }
+
+// Hardcode to prevent RTL affecting on user mentions
+:deep(.mention-bubble) {
+	direction: ltr;
+}
 </style>
diff --git a/src/components/Quote.vue b/src/components/Quote.vue
index f2cc1820b..e16ed3989 100644
--- a/src/components/Quote.vue
+++ b/src/components/Quote.vue
@@ -49,7 +49,7 @@ components.
 			</div>
 			<blockquote v-else
 				class="quote__main__text">
-				<p>{{ shortenedQuoteMessage }}</p>
+				<p dir="auto">{{ shortenedQuoteMessage }}</p>
 			</blockquote>
 		</div>
 		<div v-if="isNewMessageQuote" class="quote__main__right">
@@ -313,6 +313,7 @@ export default {
 				display: -webkit-box;
 				-webkit-line-clamp: 1;
 				-webkit-box-orient: vertical;
+				text-align: start;
 			}
 		}
 	}