From 7ea17c9fffb80a34607920619c43baf9f084692a Mon Sep 17 00:00:00 2001 From: Olivia Guyot Date: Sat, 9 Sep 2023 12:40:25 +0200 Subject: [PATCH] chore: migrate icons to Google Material Symbols This brings a whole lot of new icons and new rendering possibilities. See https://developers.google.com/fonts/docs/material_symbols?hl=fr The imported CSS were changed everywhere. Note that the 'material-symbols-outlined' class is now required for all mat-icon components. This should probably be factorized in a gn-ui-icon component later on. --- .../header-badge-button.component.css | 3 ++ .../header-badge-button.component.html | 4 ++- .../navigation-menu.component.html | 2 +- .../search-filters.component.html | 17 ++++++++--- .../navigation-bar.component.html | 4 ++- apps/datahub/src/index.html | 2 +- apps/demo/.storybook/preview-head.html | 2 +- apps/demo/src/app/app.component.css | 2 +- apps/map-viewer/src/index.html | 2 +- .../record-field-array.component.html | 3 +- apps/metadata-converter/src/index.html | 2 +- .../dashboard-menu.component.html | 10 +++---- .../search-header.component.html | 6 ++-- apps/metadata-editor/src/index.html | 2 +- apps/search/src/index.html | 2 +- .../gn-dataset-view-chart.sample.html | 2 +- .../gn-dataset-view-table.sample.html | 2 +- .../gn-facets/gn-facets.sample.html | 2 +- .../gn-map-viewer/gn-map-viewer.sample.html | 2 +- .../gn-results-list-multiple.sample.html | 2 +- .../gn-results-list.sample.html | 2 +- .../gn-search-input-and-results.sample.html | 2 +- .../gn-search-input.sample.html | 2 +- apps/webcomponents/src/styles.css | 29 ++----------------- demo/eea/datacatalogue.html | 2 +- .../layers-panel/layers-panel.component.html | 8 +++-- .../external-viewer-button.component.html | 2 +- .../src/lib/map-view/map-view.component.html | 4 ++- .../organisation-preview.component.html | 4 ++- .../src/lib/figure/figure.component.html | 2 +- .../download-item.component.html | 2 +- .../lib/link-card/link-card.component.html | 2 +- .../metadata-contact.component.html | 3 +- .../lib/metadata-info/linkify.directive.ts | 2 +- .../metadata-info.component.html | 3 +- .../pagination-buttons.component.html | 4 +-- .../lib/pagination/pagination.component.html | 4 +-- .../related-record-card.component.html | 4 ++- .../search-results-error.component.html | 18 ++++++++---- .../autocomplete/autocomplete.component.html | 4 +-- .../copy-text-button.component.html | 3 +- .../dropdown-multiselect.component.html | 16 +++++++--- .../lib/form-field/form-field.component.html | 10 +++++-- .../navigation-button.component.html | 2 +- .../lib/star-toggle/star-toggle.component.css | 6 ++++ .../star-toggle/star-toggle.component.html | 6 +++- .../expandable-panel-button.component.html | 8 +++-- ...pandable-panel-button.component.stories.ts | 2 +- .../expandable-panel.component.html | 6 ++-- .../src/lib/components/map/map.component.html | 4 ++- .../record-preview-feed.component.html | 6 ++-- .../record-preview-feed.component.stories.ts | 2 +- .../record-preview-row.component.html | 4 +-- .../record-table/record-table.component.html | 2 +- .../popup-alert/popup-alert.component.html | 4 ++- 55 files changed, 150 insertions(+), 107 deletions(-) diff --git a/apps/datahub/src/app/home/header-badge-button/header-badge-button.component.css b/apps/datahub/src/app/home/header-badge-button/header-badge-button.component.css index e69de29bb2..81b42abeaf 100644 --- a/apps/datahub/src/app/home/header-badge-button/header-badge-button.component.css +++ b/apps/datahub/src/app/home/header-badge-button/header-badge-button.component.css @@ -0,0 +1,3 @@ +mat-icon { + font-variation-settings: 'FILL' 1; +} diff --git a/apps/datahub/src/app/home/header-badge-button/header-badge-button.component.html b/apps/datahub/src/app/home/header-badge-button/header-badge-button.component.html index 8f3cd0ccc0..44a272da93 100644 --- a/apps/datahub/src/app/home/header-badge-button/header-badge-button.component.html +++ b/apps/datahub/src/app/home/header-badge-button/header-badge-button.component.html @@ -3,6 +3,8 @@ [class.active]="toggled" (click)="toggle()" > - {{ icon }} + {{ + icon + }} {{ label | translate }} diff --git a/apps/datahub/src/app/home/navigation-menu/navigation-menu.component.html b/apps/datahub/src/app/home/navigation-menu/navigation-menu.component.html index 0f047a0fe4..4267a52887 100644 --- a/apps/datahub/src/app/home/navigation-menu/navigation-menu.component.html +++ b/apps/datahub/src/app/home/navigation-menu/navigation-menu.component.html @@ -19,7 +19,7 @@ type="button" class="h-12 inline-flex items-center justify-center align-middle pl-6 rounded-md shrink-0" > - menu + menu
diff --git a/apps/datahub/src/app/home/search/search-filters/search-filters.component.html b/apps/datahub/src/app/home/search/search-filters/search-filters.component.html index 4a52f47ae2..9fb57679fc 100644 --- a/apps/datahub/src/app/home/search/search-filters/search-filters.component.html +++ b/apps/datahub/src/app/home/search/search-filters/search-filters.component.html @@ -36,7 +36,10 @@

(click)="close()" > search.filters.minimize - remove + remove

@@ -81,7 +84,7 @@

extraClass="!p-[8px]" data-cy="filters-expand" > - more_horiz + more_horiz data-cy="filters-collapse" > search.filters.minimize - remove + remove

diff --git a/apps/datahub/src/app/record/navigation-bar/navigation-bar.component.html b/apps/datahub/src/app/record/navigation-bar/navigation-bar.component.html index ea583bdec3..949c998013 100644 --- a/apps/datahub/src/app/record/navigation-bar/navigation-bar.component.html +++ b/apps/datahub/src/app/record/navigation-bar/navigation-bar.component.html @@ -42,7 +42,9 @@ type="button" class="h-10 inline-flex items-center justify-center p-2 rounded-md shrink-0 sm:hidden" > - expand_more + expand_more diff --git a/apps/datahub/src/index.html b/apps/datahub/src/index.html index 84404388cd..e9185bbd10 100644 --- a/apps/datahub/src/index.html +++ b/apps/datahub/src/index.html @@ -9,8 +9,8 @@ diff --git a/apps/demo/src/app/app.component.css b/apps/demo/src/app/app.component.css index cf89c35ba7..c7d1b66d49 100644 --- a/apps/demo/src/app/app.component.css +++ b/apps/demo/src/app/app.component.css @@ -126,7 +126,7 @@ summary { border-color: rgba(27, 31, 35, 0.35); background-position: -0.5em; } -.github-star-badge .material-icons { +.github-star-badge .material-symbols { height: 16px; width: 16px; margin-right: 4px; diff --git a/apps/map-viewer/src/index.html b/apps/map-viewer/src/index.html index a1597760c9..d6befcca5c 100644 --- a/apps/map-viewer/src/index.html +++ b/apps/map-viewer/src/index.html @@ -9,8 +9,8 @@ diff --git a/apps/metadata-converter/src/app/components/record-field-array/record-field-array.component.html b/apps/metadata-converter/src/app/components/record-field-array/record-field-array.component.html index 02287d7687..72687f1e2e 100644 --- a/apps/metadata-converter/src/app/components/record-field-array/record-field-array.component.html +++ b/apps/metadata-converter/src/app/components/record-field-array/record-field-array.component.html @@ -19,7 +19,8 @@ extraClass="!p-[0.5em]" title="Delete this item" > - delete_forever diff --git a/apps/metadata-converter/src/index.html b/apps/metadata-converter/src/index.html index 66ae676a64..c9ec52a29f 100644 --- a/apps/metadata-converter/src/index.html +++ b/apps/metadata-converter/src/index.html @@ -7,8 +7,8 @@ - home + home dashboard.records.myOrg - work_outline + work_outline dashboard.records.all
dashboard.labels.mySpace
@@ -24,7 +24,7 @@ routerLinkActive #rlaMyRecords="routerLinkActive" > - post_add + post_add dashboard.records.myRecords - edit_note + edit_note dashboard.records.myDraft - bookmark_border + bookmark_border dashboard.records.myLibrary diff --git a/apps/metadata-editor/src/app/dashboard/search-header/search-header.component.html b/apps/metadata-editor/src/app/dashboard/search-header/search-header.component.html index e33b35ef6e..f64b9b66e2 100644 --- a/apps/metadata-editor/src/app/dashboard/search-header/search-header.component.html +++ b/apps/metadata-editor/src/app/dashboard/search-header/search-header.component.html @@ -4,17 +4,17 @@
diff --git a/apps/webcomponents/src/app/components/gn-dataset-view-chart/gn-dataset-view-chart.sample.html b/apps/webcomponents/src/app/components/gn-dataset-view-chart/gn-dataset-view-chart.sample.html index cb598a1ca4..c43feb3817 100644 --- a/apps/webcomponents/src/app/components/gn-dataset-view-chart/gn-dataset-view-chart.sample.html +++ b/apps/webcomponents/src/app/components/gn-dataset-view-chart/gn-dataset-view-chart.sample.html @@ -8,8 +8,8 @@
- layers + layers map.layers.list
@@ -10,7 +10,9 @@ *ngFor="let layer of layers$ | async; let index = index" class="flex flex-row py-3" > - chevron_right + chevron_right {{ layer.title }} - add_circle + add_circle map.add.layer diff --git a/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.html b/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.html index 5c9f5b4184..f2217291b1 100644 --- a/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.html +++ b/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.html @@ -5,5 +5,5 @@ [title]="'record.externalViewer.open' | translate" extraClass="!p-[0.6em] !rounded-lg" > - open_in_new + open_in_new diff --git a/libs/feature/record/src/lib/map-view/map-view.component.html b/libs/feature/record/src/lib/map-view/map-view.component.html index 487e66d37f..f857435c17 100644 --- a/libs/feature/record/src/lib/map-view/map-view.component.html +++ b/libs/feature/record/src/lib/map-view/map-view.component.html @@ -28,7 +28,9 @@ (click)="resetSelection()" class="rounded bg-primary-opacity-25 text-white absolute right-[0.5em]" > - close diff --git a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html index ac40465135..f8a3f1049e 100644 --- a/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html +++ b/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html @@ -27,7 +27,9 @@ {{ organisation.description }}

- folder_open + folder_open + {{ organisation.recordCount }} diff --git a/libs/ui/dataviz/src/lib/figure/figure.component.html b/libs/ui/dataviz/src/lib/figure/figure.component.html index 81c99413b0..6ee20e6df3 100644 --- a/libs/ui/dataviz/src/lib/figure/figure.component.html +++ b/libs/ui/dataviz/src/lib/figure/figure.component.html @@ -3,7 +3,7 @@ [title]="hoverTitle" >
- + cloud_download
diff --git a/libs/ui/elements/src/lib/link-card/link-card.component.html b/libs/ui/elements/src/lib/link-card/link-card.component.html index 975df8f798..20778ae3a2 100644 --- a/libs/ui/elements/src/lib/link-card/link-card.component.html +++ b/libs/ui/elements/src/lib/link-card/link-card.component.html @@ -14,6 +14,6 @@

- open_in_new + open_in_new
diff --git a/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.html b/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.html index 22fdab8bd7..ac14301625 100644 --- a/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.html +++ b/libs/ui/elements/src/lib/metadata-contact/metadata-contact.component.html @@ -23,7 +23,8 @@ target="_blank" class="contact-website text-primary text-sm cursor-pointer hover:underline transition-all" >{{ shownOrganization.website }} - open_in_new diff --git a/libs/ui/elements/src/lib/metadata-info/linkify.directive.ts b/libs/ui/elements/src/lib/metadata-info/linkify.directive.ts index 3ef699bad1..0ae4289b10 100644 --- a/libs/ui/elements/src/lib/metadata-info/linkify.directive.ts +++ b/libs/ui/elements/src/lib/metadata-info/linkify.directive.ts @@ -32,7 +32,7 @@ export class GnUiLinkifyDirective implements OnInit { private linkifyText(text: string): string { return text.replace(/(\bhttps?:\/\/\S+\b)/g, (match) => { return `${match} open_in_new` + class="text-primary cursor-pointer hover:underline">${match} open_in_new` }) } } diff --git a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html index 58bba2da11..0711691bf7 100644 --- a/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html +++ b/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html @@ -78,7 +78,8 @@

record.metadata.sheet

- open_in_new {{ metadata.landingPage }} diff --git a/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.html b/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.html index c2c097dfd9..1b8cd32822 100644 --- a/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.html +++ b/libs/ui/elements/src/lib/pagination-buttons/pagination-buttons.component.html @@ -5,7 +5,7 @@ [disabled]="currentPage === 1" (buttonClick)="previousPage()" > - chevron_left + chevron_left @@ -25,7 +25,7 @@ [disabled]="currentPage === totalPages" (buttonClick)="nextPage()" > - chevron_right + chevron_right
diff --git a/libs/ui/elements/src/lib/pagination/pagination.component.html b/libs/ui/elements/src/lib/pagination/pagination.component.html index 4febda2677..0fcca3c9c4 100644 --- a/libs/ui/elements/src/lib/pagination/pagination.component.html +++ b/libs/ui/elements/src/lib/pagination/pagination.component.html @@ -38,7 +38,7 @@ extraClass="!p-[3px]" data-cy="prev-page" > - navigate_before + navigate_before - navigate_next + navigate_next diff --git a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html index 6eccea157e..b6fb95eba8 100644 --- a/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html +++ b/libs/ui/elements/src/lib/related-record-card/related-record-card.component.html @@ -21,7 +21,9 @@ [matTooltip]="'tooltip.url.open' | translate" matTooltipPosition="above" > - open_in_new + open_in_new diff --git a/libs/ui/elements/src/lib/search-results-error/search-results-error.component.html b/libs/ui/elements/src/lib/search-results-error/search-results-error.component.html index eecc501f9a..eddf637499 100644 --- a/libs/ui/elements/src/lib/search-results-error/search-results-error.component.html +++ b/libs/ui/elements/src/lib/search-results-error/search-results-error.component.html @@ -3,23 +3,29 @@ >
- face - question_mark - question_mark + face + question_mark + question_mark
search.error.couldNotReachApi
- mood_bad + mood_bad
search.error.receivedError
{{ error }}
- computer - question_mark + computer + question_mark
search.error.recordNotFound diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html index df5a645760..227b9f17b5 100644 --- a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html +++ b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html @@ -15,7 +15,7 @@ aria-label="Clear" (click)="clear()" > - close + close - content_copy diff --git a/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.html b/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.html index 8cceb1465b..c938fe3cc1 100644 --- a/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.html +++ b/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.html @@ -21,14 +21,14 @@
- + expand_less expand_more @@ -74,7 +74,11 @@
- close + + close
@@ -90,7 +94,11 @@ class="absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2" (click)="clearSearchInputValue($event)" > - close + + close +
diff --git a/libs/ui/inputs/src/lib/form-field/form-field.component.html b/libs/ui/inputs/src/lib/form-field/form-field.component.html index c3901944bb..b61c692fb4 100644 --- a/libs/ui/inputs/src/lib/form-field/form-field.component.html +++ b/libs/ui/inputs/src/lib/form-field/form-field.component.html @@ -8,15 +8,19 @@ - {{ config.hintKey | translate }} - check_circle lock - cancel diff --git a/libs/ui/inputs/src/lib/navigation-button/navigation-button.component.html b/libs/ui/inputs/src/lib/navigation-button/navigation-button.component.html index e6ed6b0656..be75fd9819 100644 --- a/libs/ui/inputs/src/lib/navigation-button/navigation-button.component.html +++ b/libs/ui/inputs/src/lib/navigation-button/navigation-button.component.html @@ -1,6 +1,6 @@ diff --git a/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.css b/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.css index 415c6399e7..37815a4641 100644 --- a/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.css +++ b/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.css @@ -9,6 +9,12 @@ mat-icon { width: 1em; height: 1em; font-size: 1.5em; + margin-top: -0.1em; + font-variation-settings: 'opsz' 40; +} + +.star-filled { + font-variation-settings: 'FILL' 1; } .star-toggle-overlay { diff --git a/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.html b/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.html index eb561f1908..c349307c74 100644 --- a/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.html +++ b/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.html @@ -9,7 +9,11 @@ 'cursor-default': disabled }" > - {{ toggled ? 'star' : 'star_outline' }} + star
- expand_more - expand_less + expand_more + expand_less
= { args: { titleTemplateString: - "key Open this menu to find out more", + "key Open this menu to find out more", }, render: (args) => ({ props: args, diff --git a/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html b/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html index 87c9373106..9968e2c066 100644 --- a/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html +++ b/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html @@ -8,8 +8,10 @@
- add - remove + add + remove
- swipe + swipe

map.navigation.message

diff --git a/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html b/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html index f63aa6c1d7..46bb8443bc 100644 --- a/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html +++ b/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.html @@ -18,7 +18,7 @@ > {{ hasOnlyPerson ? 'face' : 'home_work' }} @@ -66,12 +66,12 @@

cloud_download map
diff --git a/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.stories.ts b/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.stories.ts index 32a2b1cd28..ea4b14bef7 100644 --- a/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.stories.ts +++ b/libs/ui/search/src/lib/record-preview-feed/record-preview-feed.component.stories.ts @@ -47,7 +47,7 @@ export const Primary: StoryObj = { record: DATASET_RECORDS[0], linkTarget: '_blank', favoriteTemplateString: ` - 1234 star + 1234 star `, }, render: (args) => ({ diff --git a/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html b/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html index e5457ed705..8aaf6837ba 100644 --- a/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html +++ b/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html @@ -43,12 +43,12 @@ > cloud_download map diff --git a/libs/ui/search/src/lib/record-table/record-table.component.html b/libs/ui/search/src/lib/record-table/record-table.component.html index 53365b9bb3..b456c0e4a3 100644 --- a/libs/ui/search/src/lib/record-table/record-table.component.html +++ b/libs/ui/search/src/lib/record-table/record-table.component.html @@ -62,7 +62,7 @@
- person + person {{ formatUserInfo(record.extras?.ownerInfo) }}
diff --git a/libs/ui/widgets/src/lib/popup-alert/popup-alert.component.html b/libs/ui/widgets/src/lib/popup-alert/popup-alert.component.html index 565a76be12..c0653a932b 100644 --- a/libs/ui/widgets/src/lib/popup-alert/popup-alert.component.html +++ b/libs/ui/widgets/src/lib/popup-alert/popup-alert.component.html @@ -13,7 +13,9 @@ (mouseenter)="expand()" (mouseleave)="expandAndClose()" > - {{ icon }} + {{ + icon + }}