From 8fa5b280569c45e35a06bef0e52daea83f6a49f4 Mon Sep 17 00:00:00 2001
From: Naomi Calabretta <nyaomicalabretta@gmail.com>
Date: Tue, 6 Aug 2024 02:30:12 +0200
Subject: [PATCH] reduce opacity of archived members

---
 src/components/member/MemberAvatar.vue |  2 +-
 src/views/tabbed/Members.vue           | 22 +++++++++++++++-------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/member/MemberAvatar.vue b/src/components/member/MemberAvatar.vue
index 7b93885..23956f6 100644
--- 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
index 580f61f..c6eb520 100644
--- 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>
\ No newline at end of file