Merge pull request #4449 from nextcloud-libraries/remove-border-from-…

…sidebar-tabs
nextcloud-libraries · Aug 23, 2023 · c646c65 · c646c65
2 parents 3034325 + d59c939
commit c646c65
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 18 deletions.
diff --git a/src/components/NcAppSidebar/NcAppSidebarTabs.vue b/src/components/NcAppSidebar/NcAppSidebarTabs.vue
@@ -311,4 +311,8 @@ export default {
 		}
 	}
 }
+
+:deep(.checkbox-radio-switch--button-variant.checkbox-radio-switch) {
+	border: unset;
+}
 </style>
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"
@@ -255,6 +257,7 @@
 									v-show="showAdditionalElements"
 									class="line-two__additional_elements">
 									<NcCounterBubble v-if="counterNumber != 0"
+										:active="isActive || active"
 										class="line-two__counter"
 										:type="counterType">
 										{{ counterNumber }}
@@ -274,6 +277,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 -->
@@ -286,6 +290,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 -->
@@ -604,7 +609,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;
 		}
 	}
 }
@@ -673,19 +686,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;