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

Migrate to Material Symbols (#18004)

Browse Source 
* Migrate to Material Symbols

* Fix lint issues

* Use canonical `bookmark` icon

* Update `copy` icon name

* Replace `highlight_alt` with `select` icon

* Add directus_presets default icon migration

* Fix lint (again)

* Add spaces around icon group names

* Replace missing _outline icons

* Replace `arrow_backward` with `arrow_back`

* Update migrations

* Sign CLA

* merge migrations

* Revert group name display tweak

* Fix hover color + grid centering

* Update app/src/interfaces/file-image/file-image.vue

---------

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
This commit is contained in:
Hannes Küttner
2023-04-12 19:12:37 +02:00
committed by GitHub
parent 898b580707
commit ebba7a68e7
53 changed files with 2448 additions and 1632 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
api/src/database/migrations/20230401A-update-material-icons.ts Normal file
View File

@@ -0,0 +1,26 @@
import type { Knex } from 'knex';
import { getHelpers } from '../helpers/index.js';
export async function up(knex: Knex): Promise<void> {
const helper = getHelpers(knex).schema;
await helper.changeToType('directus_presets', 'icon', 'string', {
nullable: true,
default: 'bookmark',
length: 30,
});
await knex('directus_presets').update({ icon: 'bookmark_border' }).where('icon', '=', 'bookmark_outline');
}
export async function down(knex: Knex): Promise<void> {
const helper = getHelpers(knex).schema;
await helper.changeToType('directus_presets', 'icon', 'string', {
nullable: true,
default: 'bookmark_outline',
length: 30,
});
await knex('directus_presets').update({ icon: 'bookmark_outline' }).where('icon', '=', 'bookmark_border');
}

2
api/src/database/system-data/collections/collections.yaml
View File

@@ -33,7 +33,7 @@ data:
icon: admin_panel_settings
note: $t:directus_collection.directus_permissions
- collection: directus_presets
icon: bookmark_border
icon: bookmark
note: $t:directus_collection.directus_presets
accountability: null
- collection: directus_relations

BIN
app/src/assets/fonts/material-icons-outline.woff2
View File

Binary file not shown.

BIN
app/src/assets/fonts/material-icons.woff2
View File

Binary file not shown.

BIN
app/src/assets/fonts/material-symbols.woff2 Normal file
View File

Binary file not shown.

6
app/src/components/v-form/form-field-menu.vue
View File

@@ -5,11 +5,11 @@
<v-list-item-content>{{ restricted ? t('view_raw_value') : t('edit_raw_value') }}</v-list-item-content>
</v-list-item>
<v-list-item v-if="isCopySupported" :disabled="modelValue === null" clickable @click="$emit('copy-raw')">
<v-list-item-icon><v-icon name="copy_outline" /></v-list-item-icon>
<v-list-item-icon><v-icon name="content_copy" /></v-list-item-icon>
<v-list-item-content>{{ t('copy_raw_value') }}</v-list-item-content>
</v-list-item>
<v-list-item v-if="isPasteSupported && !restricted" clickable @click="$emit('paste-raw')">
<v-list-item-icon><v-icon name="paste_outline" /></v-list-item-icon>
<v-list-item-icon><v-icon name="content_paste" /></v-list-item-icon>
<v-list-item-content>{{ t('paste_raw_value') }}</v-list-item-content>
</v-list-item>
<v-divider v-if="!restricted" />
@@ -41,7 +41,7 @@
clickable
@click="$emit('update:modelValue', null)"
>
<v-list-item-icon><v-icon name="delete_outline" /></v-list-item-icon>
<v-list-item-icon><v-icon name="delete" /></v-list-item-icon>
<v-list-item-content>{{ t('clear_value') }}</v-list-item-content>
</v-list-item>
</v-list>

2
app/src/components/v-form/form-field.vue
View File

@@ -63,7 +63,7 @@
<small v-if="validationError" class="validation-error selectable">
<template v-if="field.meta?.validation_message">
{{ field.meta?.validation_message }}
<v-icon v-tooltip="validationMessage" small right name="help_outline" />
<v-icon v-tooltip="validationMessage" small right name="help" />
</template>
<template v-else>{{ validationPrefix }}{{ validationMessage }}</template>
</small>

2
app/src/components/v-form/validation-errors.vue
View File

@@ -27,7 +27,7 @@
: t(`validationError.${validationError.type}`, validationError)
"
small
name="help_outline"
name="help"
/>
</template>
<template v-else>

11
app/src/components/v-icon/v-icon.vue
View File

@@ -106,23 +106,28 @@ body {
i {
display: block;
font-family: 'Material Symbols';
font-weight: normal;
font-size: var(--v-icon-size);
font-family: 'Material Icons Outline';
font-style: normal;
line-height: 1;
letter-spacing: normal;
white-space: nowrap;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: 'liga';
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
&::after {
content: attr(data-icon);
}
&.filled {
font-family: 'Material Icons';
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
}

2
app/src/constants.ts
View File

@@ -64,7 +64,7 @@ export const MODULE_BAR_DEFAULT = [
id: 'docs',
enabled: true,
name: '$t:documentation',
icon: 'help_outline',
icon: 'help',
url: 'https://docs.directus.io',
},
{

2
app/src/interfaces/file-image/file-image.vue
View File

@@ -8,7 +8,7 @@
<div v-else-if="image" class="image-preview" :class="{ 'is-svg': image.type && image.type.includes('svg') }">
<div v-if="imageError || !src" class="image-error">
<v-icon large :name="imageError === 'UNKNOWN' ? 'error_outline' : 'info_outline'" />
<v-icon large :name="imageError === 'UNKNOWN' ? 'error' : 'info'" />
<span class="message">
{{ t(`errors.${imageError}`) }}

8
app/src/interfaces/group-accordion/accordion-section.vue
View File

@@ -7,13 +7,7 @@
<span class="field-name">{{ field.name }}</span>
<v-icon v-if="field.meta?.required === true" class="required" sup name="star" />
<v-chip v-if="badge" x-small>{{ badge }}</v-chip>
<v-icon
v-if="!active && validationMessage"
v-tooltip="validationMessage"
class="warning"
name="error_outline"
small
/>
<v-icon v-if="!active && validationMessage" v-tooltip="validationMessage" class="warning" name="error" small />
</div>
<transition-expand>

2
app/src/interfaces/group-detail/group-detail.vue
View File

@@ -19,7 +19,7 @@
v-if="!active && validationMessages!.length > 0"
v-tooltip="validationMessages!.join('\n')"
class="warning"
name="error_outline"
name="error"
small
/>
<v-icon class="expand-icon" name="expand_more" />

3903
app/src/interfaces/select-icon/icons.json
View File

File diff suppressed because it is too large Load Diff

5
app/src/interfaces/select-icon/select-icon.vue
View File

@@ -108,9 +108,7 @@ export default defineComponent({
.content {
padding: 8px;
.v-icon:hover {
color: var(--foreground-normal);
}
--v-icon-color-hover: var(--foreground-normal);
.v-icon.active {
color: var(--primary);
@@ -127,6 +125,7 @@ export default defineComponent({
display: grid;
grid-gap: 8px;
grid-template-columns: repeat(auto-fit, 24px);
justify-content: center;
padding: 20px 0;
color: var(--foreground-subdued);
}

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

@@ -51,7 +51,7 @@
<router-view name="detail" :primary-key="primaryKey" />
<template #sidebar>
<sidebar-detail icon="info_outline" :title="t('information')" close>
<sidebar-detail icon="info" :title="t('information')" close>
<div v-md="t('page_help_activity_collection')" class="page-description" />
</sidebar-detail>
<layout-sidebar-detail v-model="layout">

4
app/src/modules/content/components/navigation-bookmark.vue
View File

@@ -128,7 +128,7 @@ function useEditBookmark() {
const editActive = ref(false);
const editValue = reactive({
name: props.bookmark.bookmark,
icon: props.bookmark?.icon ?? 'bookmark_outline',
icon: props.bookmark?.icon ?? 'bookmark',
color: props.bookmark?.color ?? null,
});
const editSaving = ref(false);
@@ -157,7 +157,7 @@ function useEditBookmark() {
function editCancel() {
editActive.value = false;
editValue.name = props.bookmark.bookmark;
editValue.icon = props.bookmark?.icon ?? 'bookmark_outline';
editValue.icon = props.bookmark?.icon ?? 'bookmark';
editValue.color = props.bookmark?.color ?? null;
}
}

14
app/src/modules/content/routes/collection.vue
View File

@@ -42,17 +42,11 @@
@save="createBookmark"
>
<template #activator="{ on }">
<v-icon
v-tooltip.right="t('create_bookmark')"
class="toggle"
clickable
name="bookmark_outline"
@click="on"
/>
<v-icon v-tooltip.right="t('create_bookmark')" class="toggle" clickable name="bookmark" @click="on" />
</template>
</bookmark-add>
<v-icon v-else-if="bookmarkSaved" class="saved" name="bookmark" />
<v-icon v-else-if="bookmarkSaved" class="saved" name="bookmark" filled />
<template v-else-if="bookmarkIsMine">
<v-icon
@@ -72,7 +66,7 @@
@save="createBookmark"
>
<template #activator="{ on }">
<v-icon class="toggle" name="bookmark_outline" clickable @click="on" />
<v-icon class="toggle" name="bookmark" clickable @click="on" />
</template>
</bookmark-add>
@@ -233,7 +227,7 @@
/>
<template #sidebar>
<sidebar-detail icon="info_outline" :title="t('information')" close>
<sidebar-detail icon="info" :title="t('information')" close>
<div
v-md="t('page_help_collections_collection', { collection: currentCollection.name })"
class="page-description"

2
app/src/modules/content/routes/item.vue
View File

@@ -175,7 +175,7 @@
</v-dialog>
<template #sidebar>
<sidebar-detail icon="info_outline" :title="t('information')" close>
<sidebar-detail icon="info" :title="t('information')" close>
<div v-md="t('page_help_collections_item')" class="page-description" />
</sidebar-detail>
<revisions-drawer-detail

2
app/src/modules/content/routes/no-collections.vue
View File

@@ -25,7 +25,7 @@
</v-info>
<template #sidebar>
<sidebar-detail icon="info_outline" :title="t('information')" close>
<sidebar-detail icon="info" :title="t('information')" close>
<div v-md="t('page_help_collections_overview')" class="page-description" />
</sidebar-detail>
</template>

2
app/src/modules/files/components/file-info-sidebar-detail.vue
View File

@@ -1,5 +1,5 @@
<template>
<sidebar-detail icon="info_outline" :title="t('file_details')" close>
<sidebar-detail icon="info" :title="t('file_details')" close>
<dl v-if="file">
<div v-if="file.type">
<dt>{{ t('type') }}</dt>

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

@@ -163,7 +163,7 @@
/>
<template #sidebar>
<sidebar-detail icon="info_outline" :title="t('information')" close>
<sidebar-detail icon="info" :title="t('information')" close>
<div v-md="t('page_help_files_collection')" class="page-description" />
</sidebar-detail>
<layout-sidebar-detail v-model="layout">

2
app/src/modules/insights/routes/dashboard.vue
View File

@@ -80,7 +80,7 @@
</template>
<template #sidebar>
<sidebar-detail icon="info_outline" :title="t('information')" close>
<sidebar-detail icon="info" :title="t('information')" close>
<div v-md="t('page_help_insights_dashboard')" class="page-description" />
</sidebar-detail>

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

@@ -27,7 +27,7 @@
</template>
<template #sidebar>
<sidebar-detail icon="info_outline" :title="t('information')" close>
<sidebar-detail icon="info" :title="t('information')" close>
<div v-md="t('page_help_insights_overview')" class="page-description" />
</sidebar-detail>
</template>

2
app/src/modules/settings/components/navigation.vue
View File

@@ -51,7 +51,7 @@ export default defineComponent({
to: `/settings/roles`,
},
{
icon: 'bookmark_border',
icon: 'bookmark',
name: t('settings_presets'),
to: `/settings/presets`,
},

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

@@ -94,7 +94,7 @@
<router-view name="add" />
<template #sidebar>
<sidebar-detail icon="info_outline" :title="t('information')" close>
<sidebar-detail icon="info" :title="t('information')" close>
<div v-md="t('page_help_settings_datamodel_collections')" class="page-description" />
</sidebar-detail>
</template>

4
app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2a.vue
View File

@@ -57,8 +57,8 @@
<div class="spacer" />
<v-checkbox v-if="!isExisting" v-model="autoGenerateJunctionRelation" block :label="t('auto_fill')" />
<v-icon class="arrow" name="arrow_forward" />
<v-icon class="arrow" name="arrow_backward" />
<v-icon class="arrow" name="arrow_backward" />
<v-icon class="arrow" name="arrow_back" />
<v-icon class="arrow" name="arrow_back" />
</div>
<div class="sort-field">

2
app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-m2m.vue
View File

@@ -44,7 +44,7 @@
<v-checkbox v-if="!isExisting" v-model="autoGenerateJunctionRelation" block :label="t('auto_fill')" />
<v-icon class="arrow" name="arrow_forward" />
<v-icon class="arrow" name="arrow_backward" />
<v-icon class="arrow" name="arrow_back" />
</div>
<v-divider v-if="!isExisting" large :inline-title="false">{{ t('corresponding_field') }}</v-divider>

2
app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-relationship-translations.vue
View File

@@ -34,7 +34,7 @@
<div class="spacer" />
<v-checkbox v-model="autoGenerateJunctionRelation" :disabled="isExisting" block :label="t('auto_fill')" />
<v-icon class="arrow" name="arrow_forward" />
<v-icon class="arrow" name="arrow_backward" />
<v-icon class="arrow" name="arrow_back" />
</div>
<div class="relational-triggers">

2
app/src/modules/settings/routes/flows/components/options-overview.vue
View File

@@ -11,7 +11,7 @@
<dd>{{ text }}</dd>
<v-icon
v-if="isCopySupported && copyable"
name="copy"
name="content_copy"
small
clickable
class="clipboard-icon"

2
app/src/modules/settings/routes/flows/flow.vue
View File

@@ -56,7 +56,7 @@
</template>
<template #sidebar>
<sidebar-detail icon="info_outline" :title="t('information')" close>
<sidebar-detail icon="info" :title="t('information')" close>
<div v-md="t('page_help_settings_flows_item')" class="page-description" />
</sidebar-detail>

2
app/src/modules/settings/routes/flows/overview.vue
View File

@@ -27,7 +27,7 @@
</template>
<template #sidebar>
<sidebar-detail icon="info_outline" :title="t('information')" close>
<sidebar-detail icon="info" :title="t('information')" close>
<div v-md="t('page_help_settings_flows_collection')" class="page-description" />
</sidebar-detail>
</template>

2
app/src/modules/settings/routes/presets/collection/collection.vue
View File

@@ -24,7 +24,7 @@
<template #title-outer:prepend>
<v-button class="header-icon" rounded icon exact disabled>
<v-icon name="bookmark_border" />
<v-icon name="bookmark" />
</v-button>
</template>

2
app/src/modules/settings/routes/presets/collection/components/presets-info-sidebar-detail.vue
View File

@@ -1,5 +1,5 @@
<template>
<sidebar-detail icon="info_outline" :title="t('information')" close>
<sidebar-detail icon="info" :title="t('information')" close>
<dl>
<div>
<dt>{{ t('bookmarks') }}</dt>

4
app/src/modules/settings/routes/presets/item.vue
View File

@@ -94,7 +94,7 @@
</div>
<template #sidebar>
<sidebar-detail icon="info_outline" :title="t('information')" close>
<sidebar-detail icon="info" :title="t('information')" close>
<div v-md="t('page_help_settings_presets_item')" class="page-description" />
</sidebar-detail>
@@ -509,7 +509,7 @@ function useForm() {
width: 'half',
},
schema: {
default_value: 'bookmark_outline',
default_value: 'bookmark',
},
},
{

2
app/src/modules/settings/routes/project/components/project-info-sidebar-detail.vue
View File

@@ -1,5 +1,5 @@
<template>
<sidebar-detail icon="info_outline" :title="t('information')" close>
<sidebar-detail icon="info" :title="t('information')" close>
<dl v-if="parsedInfo">
<div>
<dt>{{ t('directus_version') }}</dt>

2
app/src/modules/settings/routes/roles/collection.vue
View File

@@ -19,7 +19,7 @@
</template>
<template #sidebar>
<sidebar-detail icon="info_outline" :title="t('information')" close>
<sidebar-detail icon="info" :title="t('information')" close>
<div v-md="t('page_help_settings_roles_collection')" class="page-description" />
</sidebar-detail>
</template>

4
app/src/modules/settings/routes/roles/item/components/role-info-sidebar-detail.vue
View File

@@ -1,5 +1,5 @@
<template>
<sidebar-detail icon="info_outline" :title="t('information')" close>
<sidebar-detail icon="info" :title="t('information')" close>
<template v-if="role">
<dl>
<div class="description-list">
@@ -7,7 +7,7 @@
<dd>{{ role.id }}</dd>
<v-icon
v-if="isCopySupported"
name="copy"
name="content_copy"
small
clickable
class="clipboard-icon"

2
app/src/modules/settings/routes/translation-strings/collection.vue
View File

@@ -19,7 +19,7 @@
</template>
<template #sidebar>
<sidebar-detail icon="info_outline" :title="t('information')" close>
<sidebar-detail icon="info" :title="t('information')" close>
<div v-md="t('page_help_settings_translation_strings_collection')" class="page-description" />
</sidebar-detail>
</template>

2
app/src/modules/settings/routes/webhooks/collection.vue
View File

@@ -83,7 +83,7 @@
</component>
<template #sidebar>
<sidebar-detail icon="info_outline" :title="t('information')" close>
<sidebar-detail icon="info" :title="t('information')" close>
<div v-md="t('page_help_settings_webhooks_collection')" class="page-description" />
</sidebar-detail>
<layout-sidebar-detail v-model="layout">

2
app/src/modules/settings/routes/webhooks/item.vue
View File

@@ -62,7 +62,7 @@
/>
<template #sidebar>
<sidebar-detail icon="info_outline" :title="t('information')" close>
<sidebar-detail icon="info" :title="t('information')" close>
<div v-md="t('page_help_settings_webhooks_item')" class="page-description" />
</sidebar-detail>
<revisions-drawer-detail

4
app/src/modules/users/components/user-info-sidebar-detail.vue
View File

@@ -1,12 +1,12 @@
<template>
<sidebar-detail icon="info_outline" :title="t('information')" close>
<sidebar-detail icon="info" :title="t('information')" close>
<dl v-if="isNew === false && user">
<div v-if="user.id" class="description-list">
<dt>{{ t('key') }}</dt>
<dd>{{ user.id }}</dd>
<v-icon
v-if="isCopySupported"
name="copy"
name="content_copy"
small
clickable
class="clipboard-icon"

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

@@ -146,7 +146,7 @@
/>
<template #sidebar>
<sidebar-detail icon="info_outline" :title="t('information')" close>
<sidebar-detail icon="info" :title="t('information')" close>
<div v-md="t('page_help_users_collection')" class="page-description" />
</sidebar-detail>
<layout-sidebar-detail v-model="layout">

2
app/src/routes/accept-invite.vue
View File

@@ -25,7 +25,7 @@
</form>
<template #notice>
<v-icon name="lock_outlined" left />
<v-icon name="lock" left />
{{ t('not_authenticated') }}
</template>
</public-view>

2
app/src/routes/login/login.vue
View File

@@ -20,7 +20,7 @@
{{ t('authenticated') }}
</template>
<template v-else #notice>
<v-icon name="lock_outlined" left />
<v-icon name="lock" left />
{{
logoutReason && te(`logoutReason.${logoutReason}`) ? t(`logoutReason.${logoutReason}`) : t('not_authenticated')
}}

2
app/src/routes/reset-password/reset-password.vue
View File

@@ -6,7 +6,7 @@
<reset-form v-else :token="resetToken" />
<template #notice>
<v-icon name="lock_outlined" left />
<v-icon name="lock" left />
{{ t('not_authenticated') }}
</template>
</public-view>

2
app/src/routes/tfa-setup.vue
View File

@@ -34,7 +34,7 @@
</div>
<template #notice>
<v-icon name="lock_outlined" left />
<v-icon name="lock" left />
{{ t('not_authenticated') }}
</template>
</public-view>

2
app/src/stores/presets.ts
View File

@@ -15,7 +15,7 @@ const defaultPreset: Omit<Preset, 'collection'> = {
layout_query: null,
layout_options: null,
refresh_interval: null,
icon: 'bookmark_outline',
icon: 'bookmark',
color: null,
};

12
app/src/styles/_fonts.scss
View File

@@ -102,16 +102,8 @@
@font-face {
font-weight: 400;
font-family: 'Material Icons';
font-family: 'Material Symbols';
font-style: normal;
src: url('../assets/fonts/material-icons.woff2') format('woff2');
font-display: block;
}
@font-face {
font-weight: 400;
font-family: 'Material Icons Outline';
font-style: normal;
src: url('../assets/fonts/material-icons-outline.woff2') format('woff2');
src: url('../assets/fonts/material-symbols.woff2') format('woff2');
font-display: block;
}

2
app/src/styles/lib/_mapbox.scss
View File

@@ -216,7 +216,7 @@
}
.mapboxgl-ctrl-select::after {
content: 'highlight_alt';
content: 'select';
}
.mapboxgl-ctrl-unselect::after {

4
app/src/views/private/components/bookmark-add.vue
View File

@@ -56,7 +56,7 @@ export default defineComponent({
const bookmarkValue = reactive({
name: null,
icon: 'bookmark_outline',
icon: 'bookmark',
color: null,
});
@@ -72,7 +72,7 @@ export default defineComponent({
function cancel() {
bookmarkValue.name = null;
bookmarkValue.icon = 'bookmark_outline';
bookmarkValue.icon = 'bookmark';
bookmarkValue.color = null;
emit('update:modelValue', false);
}

2
app/src/views/private/components/share-item.vue
View File

@@ -14,7 +14,7 @@
<v-list>
<v-list-item clickable @click="$emit('copy')">
<v-list-item-icon><v-icon name="copy" /></v-list-item-icon>
<v-list-item-icon><v-icon name="content_copy" /></v-list-item-icon>
<v-list-item-content>{{ t('share_copy_link') }}</v-list-item-content>
</v-list-item>
<v-list-item clickable @click="$emit('invite')">

1
contributors.yml
View File

@@ -15,4 +15,5 @@
- denkhaus
- joselcvarela
- knulpi
- hanneskuettner
- JoshTheDerf