fix: post-review changes

Signed-off-by: Dorra Jaouad <[email protected]>
nextcloud · Jan 27, 2025 · eb4a015 · eb4a015
1 parent 4fe885e
commit eb4a015
Show file tree

Hide file tree

Showing 25 changed files with 42 additions and 77 deletions.
diff --git a/src/PublicShareAuthSidebar.vue b/src/PublicShareAuthSidebar.vue
@@ -246,7 +246,7 @@ body .modal-wrapper * {
 	justify-content: center;
 
 	/* Unset conflicting rules from guest.css for the sidebar. */
-	text-align: left;
+	text-align: start;
 
 	& > .emptycontent {
 		/* Remove default margin-top as it is unneeded when showing only the empty

diff --git a/src/assets/markdown.scss b/src/assets/markdown.scss
@@ -15,6 +15,7 @@
 
 	ul,
 	ol {
+		/* stylelint-disable-next-line csstools/use-logical */
 		padding-left: 0;
 		padding-inline-start: 15px;
 
@@ -54,8 +55,10 @@
 	}
 
 	blockquote {
+		/* stylelint-disable-next-line csstools/use-logical */
 		padding-left: 0;
 		padding-inline-start: 13px;
+		/* stylelint-disable-next-line csstools/use-logical */
 		border-left: none;
 		border-inline-start: 4px solid var(--color-border);
 	}

diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue
@@ -250,8 +250,7 @@ export default {
 			padding: 0;
 			display: block;
 			text-align: center;
-			margin-inline-start: auto;
-			margin-inline-end: auto;
+			margin-inline: auto;
 		}
 	}
 
@@ -295,7 +294,7 @@ export default {
 .loading-avatar {
 	position: absolute;
 	top: 0;
-	left: 0;
+	inset-inline-start: 0;
 	width: 100%;
 	height: 100%;
 }

diff --git a/src/components/CallView/shared/VideoBottomBar.vue b/src/components/CallView/shared/VideoBottomBar.vue
@@ -347,8 +347,7 @@ export default {
 .participant-name {
 	color: white;
 	margin-block: 0px;
-	margin-inline-start: 8px;
-	margin-inline-end: auto;
+	margin-inline: 8px auto;
 	position: relative;
 	white-space: nowrap;
 	overflow: hidden;

diff --git a/src/components/ChatView.vue b/src/components/ChatView.vue
@@ -218,10 +218,7 @@ export default {
 
 .dragover {
 	position: absolute;
-	top: 10%;
-	inset-inline-start: 10%;
-	width: 80%;
-	height: 80%;
+	inset: 10%;
 	background: var(--color-primary-element-light);
 	z-index: 11;
 	display: flex;

diff --git a/src/components/ConversationSettings/ConversationPermissionsSettings.vue b/src/components/ConversationSettings/ConversationPermissionsSettings.vue
@@ -57,6 +57,7 @@
 
 			<!-- Edit advanced permissions -->
 			<NcButton v-show="showEditButton"
+				class="edit-button"
 				type="tertiary"
 				:aria-label="t('spreed', 'Edit permissions')"
 				@click="showPermissionsEditor = true">
@@ -248,15 +249,14 @@ export default {
 		&--advanced {
 			display: flex;
 			justify-content: flex-start;
-
-			// Edit button
-			button {
-				margin-inline-start: 16px;
-			}
 		}
 	}
 }
 
+.edit-button {
+	margin-inline-start: 16px;
+}
+
 .conversation-permissions-editor__hint {
 	color: var(--color-text-maxcontrast);
 	margin-bottom: 16px;

diff --git a/src/components/ConversationSettings/LinkShareSettings.vue b/src/components/ConversationSettings/LinkShareSettings.vue
@@ -96,11 +96,11 @@
 				:disabled="isSendingInvitations"
 				@click="handleResendInvitations">
 				<template #icon>
-					<IconEmail />
+					<NcLoadingIcon v-if="isSendingInvitations" />
+					<IconEmail v-else />
 				</template>
 				{{ t('spreed', 'Resend invitations') }}
 			</NcButton>
-			<span v-if="isSendingInvitations" class="icon-loading-small spinner" />
 		</div>
 	</div>
 </template>
@@ -116,6 +116,7 @@ import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcNoteCard from '@nextcloud/vue/dist/Components/NcNoteCard.js'
 import NcPasswordField from '@nextcloud/vue/dist/Components/NcPasswordField.js'
 
@@ -132,6 +133,7 @@ export default {
 		NcCheckboxRadioSwitch,
 		NcPasswordField,
 		NcNoteCard,
+		NcLoadingIcon,
 		// Icons
 		IconClipboardTextOutline,
 		IconContentCopy,
@@ -268,10 +270,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.spinner {
-	margin-inline-start: 24px;
-}
-
 .password-form {
 	display: flex;
 	gap: 8px;

diff --git a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
@@ -315,20 +315,6 @@ export default {
 
 	.basic-settings {
 		margin-bottom: calc(4 * var(--default-grid-baseline));
-
-		.action {
-			list-style: none;
-		}
-		.save-changes {
-			width: 100%;
-			text-align: left;
-
-			.icon-checkmark {
-				margin-block: 0;
-				margin-inline-end: 10px;
-				margin-inline-start: 2px;
-			}
-		}
 		.icon {
 			display: inline-flex;
 			justify-content: center;
@@ -345,17 +331,6 @@ export default {
 			display: flex;
 			height: var(--default-clickable-area);
 			margin-top: 5px;
-
-			label {
-				flex-grow: 1;
-				margin-top: auto;
-				margin-bottom: auto;
-				&::before {
-					margin-block: 0;
-					margin-inline-start: 15px;
-					margin-inline-end: 10px;
-				}
-			}
 		}
 	}
 

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
@@ -1110,6 +1110,7 @@ export default {
 
 .unread-mention-button {
 	position: absolute !important;
+	/* stylelint-disable-next-line csstools/use-logical */
 	left: 50%;
 	transform: translateX(-50%);
 	z-index: 100;
@@ -1159,7 +1160,6 @@ export default {
 	overflow: hidden;
 	outline-offset: -2px;
 
-	// FIXME in upstream to make the status position dependent on the language direction
 	.avatardiv .avatardiv__user-status {
 		inset-inline-end: -2px !important;
 		bottom: -2px !important;

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Contact.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Contact.vue
@@ -119,7 +119,7 @@ export default {
 			text-overflow: ellipsis;
 
 			.title {
-				margin-left: 12px; // FIXME: NcRichText doesn't support RTL yet
+				margin-inline-start: 12px;
 			}
 		}
 	}

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue
@@ -109,7 +109,7 @@ export default {
 		text-overflow: ellipsis;
 
 		.title {
-			margin-left: 8px; // FIXME: NcRichText doesn't support RTL yet
+			margin-inline-start: 8px;
 		}
 	}
 

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -556,8 +556,8 @@ export default {
 	&__progress {
 		position: absolute;
 		top: 50%;
-		inset-inline-end: 0;
-		transform: translate(100%, -50%);
+		inset-inline-end: calc(var(--progress-bar-height) * -1);
+		transform: translateY(-50%);
 	}
 
 	.mimeicon {
@@ -613,6 +613,7 @@ export default {
 				position: absolute;
 				height: 48px; /* for proper vertical centering */
 				top: 50%;
+				/* stylelint-disable-next-line csstools/use-logical */
 				left: 50%;
 				transform: translate(-50%, -50%);
 				opacity: 0.8;

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
@@ -566,11 +566,6 @@ export default {
 	}
 }
 
-// Hardcode to prevent RTL affecting on user mentions
-:deep(.rich-text--component) {
-	direction: ltr;
-}
-
 :deep(.rich-text--wrapper) {
 	direction: inherit;
 }

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
@@ -1330,7 +1330,7 @@ export default {
 	transition: $transition;
 
 	&--chatScrolledToBottom {
-		border-bottom-color: transparent;
+		border-block-end-color: transparent;
 	}
 
 	&__content {

diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue
@@ -1056,8 +1056,4 @@ export default {
 	}
 }
 
-// Hardcode to prevent RTL affecting on user mentions
-:deep(.mention-bubble) {
-	direction: ltr;
-}
 </style>
diff --git a/src/components/NewMessage/NewMessageAbsenceInfo.vue b/src/components/NewMessage/NewMessageAbsenceInfo.vue
@@ -163,8 +163,8 @@ export default {
 
 	&__caption {
 		font-weight: bold;
-		margin: var(--default-grid-baseline) var(--default-clickable-area);
-		margin-inline-start: 0;
+		margin-block: var(--default-grid-baseline);
+		margin-inline: 0 var(--default-clickable-area);
 	}
 
 	&__replacement {

diff --git a/src/components/RightSidebar/Participants/Participant.vue b/src/components/RightSidebar/Participants/Participant.vue
@@ -1010,7 +1010,6 @@ export default {
 			cursor: pointer;
 		}
 
-		// FIXME in upstream to make the status position dependent on the language direction
 		.avatardiv .avatardiv__user-status {
 			inset-inline-end: -2px !important;
 			bottom: -2px !important;

diff --git a/src/components/RightSidebar/Participants/ParticipantsTab.vue b/src/components/RightSidebar/Participants/ParticipantsTab.vue
@@ -411,4 +411,7 @@ export default {
 	margin-top: 12px; // compensate margin before first header inside
 }
 
+:deep(.app-navigation-caption):not(:first-child) {
+	margin-top: 12px !important;
+}
 </style>
diff --git a/src/components/RightSidebar/RightSidebar.vue b/src/components/RightSidebar/RightSidebar.vue
@@ -539,7 +539,7 @@ export default {
 .chat-button-unread-marker {
 	position: absolute;
 	top: 4px;
-	right: 4px;
+	inset-inline-end: 4px;
 	width: 8px;
 	height: 8px;
 	border-radius: 8px;

diff --git a/src/components/SettingsDialog/MediaDevicesPreview.vue b/src/components/SettingsDialog/MediaDevicesPreview.vue
@@ -259,9 +259,7 @@ export default {
 		width: 64px;
 		height: 64px;
 		opacity: 0.4;
-
-		margin-inline-start: auto;
-		margin-inline-end: auto;
+		margin-inline: auto;
 	}
 }
 

diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
@@ -327,16 +327,16 @@ export default {
 	border-bottom: var(--border-width) solid var(--color-border);
 
 	&--in-call {
-		right: 0;
+		inset-inline: 0;
 		border: none;
 		position: absolute;
 		top: 0;
-		left: 0;
 		background-color: transparent;
 	}
 
 	.talk-sidebar-callview & {
 		margin-inline-end: var(--default-clickable-area);
+		align-items: flex-start;
 	}
 
 	&--sidebar {

diff --git a/src/components/TopBar/TopBarMediaControls.vue b/src/components/TopBar/TopBarMediaControls.vue
@@ -535,7 +535,7 @@ export default {
 .hint {
 	padding: 12px;
 	max-width: 300px;
-	text-align: left;
+	text-align: start;
 	&__actions {
 		display: flex;
 		flex-direction: row-reverse;

diff --git a/src/components/UIShared/EditableTextField.vue b/src/components/UIShared/EditableTextField.vue
@@ -44,7 +44,7 @@
 					tabindex="0"
 					:title="countDownWarningText"
 					:aria-label="countDownWarningText">
-					<span>{{ charactersCountDown }}</span>
+					<span class="counter__numeric">{{ charactersCountDown }}</span>
 				</div>
 			</template>
 			<NcButton v-if="!editing && editable"
@@ -288,5 +288,9 @@ export default {
 	display: flex;
 	align-items: center;
 	justify-content: center;
+
+	&__numeric {
+		direction: ltr;
+	}
 }
 </style>
diff --git a/src/components/UIShared/LoadingPlaceholder.vue b/src/components/UIShared/LoadingPlaceholder.vue
@@ -134,10 +134,8 @@ export default {
 		&__info {
 			width: 100px;
 			height: 15px;
-			margin-top: var(--default-clickable-area);
-			margin-inline-start: 8px;
-			margin-inline-end: var(--default-clickable-area);
-			margin-bottom: 0;
+			margin-block: var(--default-clickable-area) 0;
+			margin-inline: 8px var(--default-clickable-area);
 			animation-delay: 0.8s;
 		}
 	}

diff --git a/src/components/UIShared/VolumeIndicator.vue b/src/components/UIShared/VolumeIndicator.vue
@@ -133,7 +133,7 @@ export default {
 
 .volume-indicator {
 	position: absolute;
-	left: 0;
+	inset-inline-start: 0;
 
 	width: 100%;
 	height: 100%;