github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add support for adding a collection accent color (#5818)

Browse Source 
* Added icon_color to directus_collections
Added migrations
Added color property to select-icon
Fixed select-icon placeholder

* Use icon color in collection header bar.

* Set `collection` and `note` fields to hald witdh

* Rename icon_color->color

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
This commit is contained in:
Oreille
2021-06-03 19:04:19 +02:00
committed by GitHub
parent 09a9f5659e
commit 22f2e4662f
14 changed files with 104 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/modules/collections/components/navigation.vue
View File

@@ -11,7 +11,7 @@
v-if="(group.name === undefined || group.name === null) && group.accordion === 'always_open' && index === 0"
>
<v-list-item :exact="exact" v-for="navItem in group.items" :key="navItem.to" :to="navItem.to">
<v-list-item-icon><v-icon :name="navItem.icon" /></v-list-item-icon>
<v-list-item-icon><v-icon :name="navItem.icon" :color="navItem.color" /></v-list-item-icon>
<v-list-item-content>
<v-text-overflow :text="navItem.name" />
</v-list-item-content>
@@ -27,7 +27,7 @@
@toggle="toggleActive(group.name)"
>
<v-list-item :exact="exact" v-for="navItem in group.items" :key="navItem.to" :to="navItem.to">
<v-list-item-icon><v-icon :name="navItem.icon" /></v-list-item-icon>
<v-list-item-icon><v-icon :name="navItem.icon" :color="navItem.color" /></v-list-item-icon>
<v-list-item-content>
<v-text-overflow :text="navItem.name" />
</v-list-item-content>
@@ -38,7 +38,7 @@
</template>
<v-list-item v-else :exact="exact" v-for="navItem in navItems" :key="navItem.to" :to="navItem.to">
<v-list-item-icon><v-icon :name="navItem.icon" /></v-list-item-icon>
<v-list-item-icon><v-icon :name="navItem.icon" :color="navItem.color" /></v-list-item-icon>
<v-list-item-content>
<v-text-overflow :text="navItem.name" />
</v-list-item-content>
@@ -72,7 +72,7 @@
:key="navItem.to"
:to="navItem.to"
>
<v-list-item-icon><v-icon :name="navItem.icon" /></v-list-item-icon>
<v-list-item-icon><v-icon :name="navItem.icon" :color="navItem.color" /></v-list-item-icon>
<v-list-item-content>
<v-text-overflow :text="navItem.name" />
</v-list-item-content>

2
app/src/modules/collections/composables/use-navigation.ts
View File

@@ -8,6 +8,7 @@ export type NavItem = {
name: string | VueI18n.TranslateResult;
to: string;
icon: string;
color: string | null | undefined;
note: string | null;
};
@@ -25,6 +26,7 @@ function collectionToNavItem(collection: Collection): NavItem {
collection: collection.collection,
name: collection.name,
icon: collection.meta?.icon || 'label',
color: collection.meta?.color,
note: collection.meta?.note || null,
to: `/collections/${collection.collection}`,
};

2
app/src/modules/collections/routes/collection.vue
View File

@@ -3,7 +3,7 @@
<private-view v-else :title="bookmark ? bookmarkTitle : currentCollection.name">
<template #title-outer:prepend>
<v-button class="header-icon" rounded icon secondary disabled>
<v-icon :name="currentCollection.icon" />
<v-icon :name="currentCollection.icon" :color="currentCollection.meta.color" />
</v-button>
</template>

2
app/src/modules/collections/routes/overview.vue
View File

@@ -20,7 +20,7 @@
@click:row="navigateToCollection"
>
<template #item.icon="{ item }">
<v-icon class="icon" :name="item.icon" />
<v-icon class="icon" :name="item.icon" :color="item.color" />
</template>
</v-table>

1
app/src/modules/settings/routes/data-model/collections/collections.vue
View File

@@ -45,6 +45,7 @@
unmanaged: item.meta === null && item.collection.startsWith('directus_') === false,
}"
:name="item.icon"
:color="item.meta.color"
/>
</template>