reduce opacity of archived members

NyaomiDEV · Aug 6, 2024 · 8fa5b28 · 8fa5b28
1 parent a3eaa8b
commit 8fa5b28
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/src/components/member/MemberAvatar.vue b/src/components/member/MemberAvatar.vue
@@ -12,7 +12,7 @@
 </script>
 
 <template>
-	<IonAvatar class="with-outline" :style="{ outlineColor: props.member.color, opacity: props.member.isArchived ? 0.5 : 1}" v-if="props.member.image">
+	<IonAvatar class="with-outline" :style="{ outlineColor: props.member.color }" v-if="props.member.image">
 		<img aria-hidden="true" :src="getBlobURL(props.member.image)" />
 	</IonAvatar>
 </template>

diff --git a/src/views/tabbed/Members.vue b/src/views/tabbed/Members.vue
@@ -97,16 +97,18 @@
 		list.value?.$el.closeSlidingItems();
 	}
 
-	function getHighlightLevel(member: Member){
+	function getStyle(member: Member){
+		const style: Record<string, string> = {};
+
 		const entry = getCurrentFrontEntryForMember(member);
 		if(entry){
 			if(entry.isMainFronter)
-				return {'--background': 'var(--ion-background-color-step-200)'};
-
-			return {'--background': 'var(--ion-background-color-step-150)'}
+				style["--background"] = "var(--ion-background-color-step-200)";
+			else
+				style["--background"] = "var(--ion-background-color-step-150)";
 		}
-		
-		return undefined
+
+		return style;
 	}
 
 	function drag(member: Member){
@@ -168,7 +170,7 @@
 			<IonList :inset="isIOS" ref="list">
 
 				<IonItemSliding v-for="member in members" @ionDrag="endPress(member, true)" :key="JSON.stringify(member)">
-					<IonItem button @pointerdown="startPress(member)" @pointerup="endPress(member, false)" :style="getHighlightLevel(member)">
+					<IonItem button :class="{ archived: member.isArchived }" :style="getStyle(member)" @pointerdown="startPress(member)" @pointerup="endPress(member, false)">
 						<MemberAvatar slot="start" :member />
 						<MemberLabel :member />
 						<IonIcon slot="end" :ios="archivedIOS" :md="archivedMD" v-if="member.isArchived" />
@@ -204,3 +206,9 @@
 		<MemberEdit ref="memberEditModal" />
 	</IonPage>
 </template>
+
+<style scoped>
+	ion-item.archived > *{
+		opacity: 0.5;
+	}
+</style>