fix: adjust user status / conversation type size and position

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
nextcloud · Aug 15, 2024 · 2bae552 · 2bae552
1 parent 8ce30cc
commit 2bae552
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 6 deletions.
diff --git a/src/components/ConversationIcon.vue b/src/components/ConversationIcon.vue
@@ -24,7 +24,7 @@
 				role="img"
 				aria-hidden="false"
 				:aria-label="conversationType.label">
-				<component :is="conversationType.icon" :size="14" />
+				<component :is="conversationType.icon" :size="12" />
 			</span>
 		</template>
 		<!-- NcAvatar doesn't fully support props update and works only for 1 user -->
@@ -265,11 +265,14 @@ export default {
 
 	&__type {
 		position: absolute;
-		right: -4px;
-		bottom: -4px;
-		height: 18px;
-		width: 18px;
-		border: 2px solid var(--color-main-background);
+		right: -2px;
+		bottom: -2px;
+		display: flex;
+		align-content: center;
+		justify-content: center;
+		height: clamp(14px, 40%, 18px);
+		width: clamp(14px, 40%, 18px);
+		border: 1px solid var(--color-main-background);
 		background-color: var(--color-main-background);
 		color: var(--color-main-text);
 		border-radius: 50%;

diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
@@ -1094,5 +1094,15 @@ export default {
 	line-height: 1.2;
 	overflow: hidden;
 	outline-offset: -2px;
+
+	// FIXME clean up after nextcloud/vue release
+	.avatardiv .avatardiv__user-status {
+		right: -2px !important;
+		bottom: -2px !important;
+		min-height: 14px !important;
+		min-width: 14px !important;
+		line-height: 1 !important;
+		font-size: clamp(var(--font-size-small), 85%, var(--default-font-size)) !important;
+	}
 }
 </style>
diff --git a/src/components/RightSidebar/Participants/Participant.vue b/src/components/RightSidebar/Participants/Participant.vue
@@ -1147,6 +1147,16 @@ export default {
 		button, button * {
 			cursor: pointer;
 		}
+
+		// FIXME clean up after nextcloud/vue release
+		.avatardiv .avatardiv__user-status {
+			right: -2px !important;
+			bottom: -2px !important;
+			min-height: 14px !important;
+			min-width: 14px !important;
+			line-height: 1 !important;
+			font-size: clamp(var(--font-size-small), 85%, var(--default-font-size)) !important;
+		}
 	}
 
 	&--offline &__user-name {