Skip to content

Commit

Permalink
Merge pull request #5944 from nextcloud-libraries/backport/5936/next
Browse files Browse the repository at this point in the history 
[next] fix(NcListItem): Adjust icon color when the list item is active
  • Loading branch information
@susnux
susnux authored Aug 8, 2024
2 parents 941689a + e7a2e10 commit 0cac455
Showing 1 changed file with 49 additions and 45 deletions.
94 changes: 49 additions & 45 deletions src/components/NcListItem/NcListItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,12 @@
```vue
<template>
<ul>
<NcListItem
:name="'This is an active element with highlighted counter'"
:bold="true"
:active="true"
:details="'1h'"
<NcListItem active
bold
:counter-number="123"
counterType="highlighted">
counterType="highlighted"
details="1h"
name="This is an active element with highlighted counter">
<template #icon>
<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
</template>
Expand All @@ -40,7 +39,7 @@
</template>
</NcListItem>
<NcListItem
:name="'This is an active element with outlined counter'"
name="This is an active element with outlined counter"
:bold="false"
:active="true"
:counter-number="123"
Expand Down Expand Up @@ -68,7 +67,7 @@
</template>
</NcListItem>
<NcListItem
:name="'This is an active element with normal counter'"
name="This is an active element with normal counter"
:bold="false"
:active="true"
:counter-number="123">
Expand Down Expand Up @@ -98,10 +97,10 @@
</template>
</NcListItem>
<NcListItem
:name="'Name of the element with highlighted counter'"
:bold="true"
name="Name of the element with highlighted counter"
bold
:force-display-actions="true"
:details="'1h'"
details="1h"
:counter-number="123"
counterType="highlighted">
<template #icon>
Expand All @@ -123,7 +122,7 @@
</template>
</NcListItem>
<NcListItem
:name="'Name of the element with outlined counter'"
name="Name of the element with outlined counter"
:bold="false"
:force-display-actions="true"
:counter-number="123"
Expand All @@ -147,10 +146,10 @@
</template>
</NcListItem>
<NcListItem
:name="'Name of the element with normal counter'"
name="Name of the element with normal counter"
:bold="false"
:force-display-actions="true"
:details="'1h'"
details="1h"
:counter-number="123">
<template #icon>
<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
Expand All @@ -171,15 +170,15 @@
</template>
</NcListItem>
<NcListItem
:name="'Name of the element'"
name="Name of the element"
:bold="false">
<template #icon>
<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
</template>
<template #name>
<span style="display: flex; gap: 0.5rem; color: var(--color-primary);">
<span style="display: flex; gap: 0.5rem; color: var(--color-warning);">
Flexible styling within the first line of the component
<div style="color: var(--color-secondary);">
<div style="color: var(--color-error);">
like this.
</div>
</span>
Expand Down Expand Up @@ -207,9 +206,9 @@
</template>
</NcListItem>
<NcListItem
:name="'Without subname, Name of the element'"
name="Without subname, Name of the element"
:bold="false"
:details="'1h'">
details="1h">
<template #icon>
<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
</template>
Expand Down Expand Up @@ -237,14 +236,13 @@

### NcListItem one line mode
```vue
<NcListItem
:name="'This is an active element with highlighted counter'"
<NcListItem active
:bold="false"
:active="true"
:details="'1h'"
:counter-number="123"
one-line
counterType="highlighted">
counterType="highlighted"
details="1h"
name="This is an active element with highlighted counter"
one-line>
<template #icon>
<NcAvatar disable-menu :size="34" user="janedoe" display-name="Jane Doe" />
</template>
Expand Down Expand Up @@ -279,7 +277,7 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
<div>
<NcListItem
name="This is an active element with extra actions slot"
:bold="true"
bold
:active="true"
:force-display-actions="true">
<template #icon>
Expand Down Expand Up @@ -309,7 +307,7 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
</NcListItem>
<NcListItem
name="This is an element with extra actions slot"
:bold="true">
bold>
<template #icon>
<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
</template>
Expand Down Expand Up @@ -360,10 +358,22 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
```vue
<template>
<ul style="width: 350px;">
<NcListItem
:name="'Name of the element'"
:counter-number="1"
:compact="true" >
<NcListItem active
compact
name="Active item">
<template #icon>
<IconNoteText :size="20" />
</template>
</NcListItem>
<NcListItem compact
name="Name of the element">
<template #icon>
<IconNoteText :size="20" />
</template>
</NcListItem>
<NcListItem compact
name="Name of the element"
:counter-number="1">
<template #icon>
<IconNoteText :size="20" />
</template>
Expand All @@ -379,17 +389,9 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
</NcActionButton>
</template>
</NcListItem>
<NcListItem
:name="'Name of the element'"
:compact="true" >
<template #icon>
<IconNoteText :size="20" />
</template>
</NcListItem>
<NcListItem
:name="'Name of the element'"
:counter-number="3"
:compact="true" >
<NcListItem compact
name="Name of the element"
:counter-number="3">
<template #icon>
<IconNoteText :size="20" />
</template>
Expand All @@ -405,9 +407,8 @@ The `actions-icon` slot can be used to pass icon to the inner NcActions componen
</NcActionButton>
</template>
</NcListItem>
<NcListItem
:name="'Name of the element'"
:compact="true"
<NcListItem compact
name="Name of the element"
:counter-number="4"
href="https://nextcloud.com">
<template #icon>
Expand Down Expand Up @@ -836,6 +837,8 @@ export default {
&.active {
.list-item {
background-color: var(--color-primary-element);
color: var(--color-primary-element-text) !important;
&:hover,
&:focus-within,
&:has(:focus-visible),
Expand Down Expand Up @@ -951,6 +954,7 @@ export default {
}
&__anchor {
color: inherit;
display: flex;
flex: 1 0 auto;
align-items: center;
Expand Down

0 comments on commit 0cac455

Please sign in to comment.