fix(SelectableParticipant): restyle component

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
nextcloud · Aug 20, 2024 · 9a6e206 · 9a6e206
1 parent 267d377
commit 9a6e206
Showing 1 changed file with 86 additions and 13 deletions.
diff --git a/src/components/BreakoutRoomsEditor/SelectableParticipant.vue b/src/components/BreakoutRoomsEditor/SelectableParticipant.vue
@@ -4,35 +4,46 @@
 -->
 
 <template>
-	<div tabindex="0"
-		class="selectable-participant">
-		<input id="participant.attendeeId"
-			v-model="modelProxy"
+	<label class="selectable-participant">
+		<input v-model="modelProxy"
 			:value="participant.attendeeId"
 			type="checkbox"
-			name="participant.attendeeId">
+			class="selectable-participant__checkbox">
 		<!-- 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="participantStatus"
+				class="selectable-participant__content-subname">
+				{{ participantStatus }}
+			</span>
+		</span>
+
+		<IconCheck 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'
 
+import { getStatusMessage } from '../../utils/userStatus.js'
+
 export default {
 	name: 'SelectableParticipant',
 
 	components: {
 		AvatarWrapper,
+		IconCheck,
 	},
 
 	props: {
@@ -61,17 +72,79 @@ export default {
 				this.$emit('update:checked', value)
 			},
 		},
+
+		participantStatus() {
+			return getStatusMessage(this.participant)
+		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
 
 .selectable-participant {
+	position: relative;
 	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);
+	}
+
+	&:has(input:checked) {
+		background-color: var(--color-primary-light);
+
+		&:hover,
+		&:focus-within,
+		&:has(:focus-visible),
+		&:has(:active) {
+			background-color: var(--color-primary-light-hover);
+		}
+	}
+
+	&:has(input:checked) &__check-icon {
+		display: flex;
+	}
+
+	&__checkbox {
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: -1;
+	}
+
+	&__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 {
+		display: none;
+		margin-left: auto;
+		width: var(--default-clickable-area);
+	}
 }
 
 </style>