Improve active state of listitem

Signed-off-by: Marco <marcoambrosini@icloud.com>
nextcloud-libraries · Aug 23, 2023 · 2412bbf · 2412bbf
1 parent 3248a30
commit 2412bbf
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 18 deletions.
diff --git a/src/components/NcCounterBubble/NcCounterBubble.vue b/src/components/NcCounterBubble/NcCounterBubble.vue
@@ -62,13 +62,24 @@ export default {
 				return ['highlighted', 'outlined', ''].indexOf(value) !== -1
 			},
 		},
+
+		/**
+		 * Specifies whether the component is used within a component that is
+		 * active and therefore has a primary background. Inverts the color of
+		 * this component when that is the case.
+		 */
+		active: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	computed: {
 		counterClassObject() {
 			return {
 				'counter-bubble__counter--highlighted': this.type === 'highlighted',
 				'counter-bubble__counter--outlined': this.type === 'outlined',
+				active: this.active,
 			}
 		},
 	},
@@ -91,16 +102,30 @@ export default {
 	font-weight: bold;
 	color: var(--color-primary-element-light-text);
 
+	& .active {
+		color: var(--color-main-background);
+		background-color: var(--color-primary-element-light);
+	}
+
 	&--highlighted {
 		color: var(--color-primary-element-text);
 		background-color: var(--color-primary-element);
 	}
 
+	&--highlighted,.active {
+		color: var(--color-primary-element);
+		background-color: var(--color-main-background);
+	}
+
 	&--outlined {
 		color: var(--color-primary-element);
 		background: transparent;
 		box-shadow: inset 0 0 0 2px;
 	}
+	&--outlined,.active {
+		color: var(--color-main-background);
+		box-shadow: inset 0 0 0 2px;
+	}
 }
 
 </style>
diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
@@ -26,11 +26,13 @@
 <template>
 	<ul>
 		<NcListItem
-			:name="'Name of the element'"
+			:name="'This is an active element'"
 			:bold="false"
+			:active="true"
 			:details="'1h'"
 			:counter-number="44"
-			counterType="highlighted">
+			counterType="highlighted"
+			class="active">
 			<template #icon>
 				<NcAvatar :size="44" user="janedoe" display-name="Jane Doe" />
 			</template>
@@ -39,7 +41,7 @@
 			</template>
 			<template #indicator>
 				<!-- Color dot -->
-				<CheckboxBlankCircle :size="16" fill-color="#0082c9" />
+				<CheckboxBlankCircle :size="16" fill-color="#fff" />
 			</template>
 			<template #actions>
 				<NcActionButton>
@@ -205,7 +207,7 @@
 		:to="to"
 		:exact="to ? exact : null">
 		<li class="list-item__wrapper"
-			:class="{ 'list-item__wrapper--active' : isActive }">
+			:class="{ 'list-item__wrapper--active' : isActive || active }">
 			<a :id="anchorId"
 				ref="list-item"
 				:href="routerLinkHref || href"
@@ -253,6 +255,7 @@
 								<!-- Counter and indicator -->
 								<span v-if="showAdditionalElements" class="line-two__additional_elements">
 									<NcCounterBubble v-if="counterNumber != 0"
+										:active="isActive || active"
 										class="line-two__counter"
 										:type="counterType">
 										{{ counterNumber }}
@@ -272,6 +275,7 @@
 							class="list-item-content__actions"
 							@click.prevent.stop="">
 							<NcActions ref="actions"
+								:primary="isActive || active"
 								:aria-label="computedActionsAriaLabel"
 								@update:open="handleActionsUpdateOpen">
 								<!-- @slot Provide the actions for the right side quick menu -->
@@ -284,6 +288,7 @@
 						class="list-item-content__actions"
 						@click.prevent.stop="">
 						<NcActions ref="actions"
+							:primary="isActive || active"
 							:aria-label="computedActionsAriaLabel"
 							@update:open="handleActionsUpdateOpen">
 							<!-- @slot Provide the actions for the right side quick menu -->
@@ -602,7 +607,15 @@ export default {
 	&:active,
 	&.active {
 		.list-item {
-			background-color: var(--color-primary-element-light);
+			background-color: var(--color-primary-element);
+		}
+
+		.line-one__name, .line-one__details {
+			color: var(--color-primary-element-text) !important;
+		}
+
+		.line-two__subname {
+			color: var(--color-primary-element-text) !important;
 		}
 	}
 }
@@ -671,19 +684,6 @@ export default {
 	}
 }
 
-// Add more contrast for active entry
-[data-themes*='highcontrast'] {
-	.list-item__wrapper {
-		&--active,
-		&:active,
-		&.active {
-			.list-item {
-				background-color: var(--color-primary-element-light-hover);
-			}
-		}
-	}
-}
-
 .line-one {
 	display: flex;
 	align-items: center;