fix(SelectableParticipant): restyle component

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
nextcloud · Aug 16, 2024 · 22601ff · 22601ff
1 parent b015561
commit 22601ff
Showing 1 changed file with 73 additions and 12 deletions.
diff --git a/src/components/BreakoutRoomsEditor/SelectableParticipant.vue b/src/components/BreakoutRoomsEditor/SelectableParticipant.vue
@@ -4,35 +4,47 @@
 -->
 
 <template>
-	<div tabindex="0"
-		class="selectable-participant">
-		<input id="participant.attendeeId"
+	<label :for="participant.attendeeId"
+		class="selectable-participant"
+		:class="{ 'selectable-participant--selected': selected }">
+		<input :id="participant.attendeeId"
 			v-model="modelProxy"
 			:value="participant.attendeeId"
 			type="checkbox"
-			name="participant.attendeeId">
+			class="hidden-visually">
 		<!-- Participant's avatar -->
 		<AvatarWrapper :id="participant.actorId"
 			:name="participant.displayName"
 			:source="participant.source || participant.actorType"
 			disable-menu
 			disable-tooltip
-			show-user-status
-			show-user-status-compact />
-		<div>
-			{{ participant.displayName }}
-		</div>
-	</div>
+			show-user-status />
+
+		<span class="selectable-participant__content">
+			<span class="selectable-participant__content-name">
+				{{ participant.displayName }}
+			</span>
+			<span v-if="participant.statusMessage"
+				class="selectable-participant__content-subname">
+				{{ participant.statusIcon + ' ' + participant.statusMessage }}
+			</span>
+		</span>
+
+		<IconCheck v-if="selected" class="selectable-participant__check-icon" :size="20" />
+	</label>
 </template>
 
 <script>
+import IconCheck from 'vue-material-design-icons/Check.vue'
+
 import AvatarWrapper from '../AvatarWrapper/AvatarWrapper.vue'
 
 export default {
 	name: 'SelectableParticipant',
 
 	components: {
 		AvatarWrapper,
+		IconCheck,
 	},
 
 	props: {
@@ -61,6 +73,10 @@ export default {
 				this.$emit('update:checked', value)
 			},
 		},
+
+		selected() {
+			return this.checked.includes(this.participant.attendeeId)
+		},
 	},
 }
 </script>
@@ -70,8 +86,53 @@ export default {
 .selectable-participant {
 	display: flex;
 	align-items: center;
-	gap: var(--default-grid-baseline);
-	margin: var(--default-grid-baseline) 0 var(--default-grid-baseline) 14px;
+	gap: calc(2 * var(--default-grid-baseline));
+	padding: var(--default-grid-baseline);
+	margin: var(--default-grid-baseline);
+	border-radius: var(--border-radius-element, 32px);
+	line-height: 20px;
+
+	&:hover,
+	&:focus-within,
+	&:has(:active),
+	&:has(:focus-visible) {
+		background-color: var(--color-background-hover);
+	}
+
+	&:has(input:focus-visible) {
+		outline: 2px solid var(--color-main-text);
+		box-shadow: 0 0 0 4px var(--color-main-background);
+	}
+
+	&--selected {
+		background-color: var(--color-primary-light);
+
+		&:hover,
+		&:focus-within,
+		&:has(:focus-visible),
+		&:has(:active) {
+			background-color: var(--color-primary-light-hover);
+		}
+	}
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+
+		&-name {
+			font-weight: 500;
+		}
+		&-subname {
+			font-weight: 400;
+			color: var(--color-text-maxcontrast);
+		}
+	}
+
+	&__check-icon {
+		margin-left: auto;
+		width: var(--default-clickable-area);
+	}
 }
 
 </style>