From 6a004c2abbefef515ae0955f45f43d10ea6e0f96 Mon Sep 17 00:00:00 2001 From: "Patrik J. Braun" Date: Sun, 20 Aug 2023 10:19:50 +0200 Subject: [PATCH] Replacing icons with https://ionic.io/ionicons on the main page #587 --- package-lock.json | 42 +++++++++++++++++++ package.json | 2 + src/frontend/app/app.module.ts | 39 ++++++++++++++++- src/frontend/app/icon.component.ts | 1 + .../app/pipes/IconizeSortingMethod.ts | 29 ------------- src/frontend/app/ui/frame/frame.component.css | 10 +++-- .../app/ui/frame/frame.component.html | 31 +++++++------- .../navigator/navigator.gallery.component.css | 12 +++++- .../navigator.gallery.component.html | 25 ++++++----- .../gallery/share/share.gallery.component.css | 9 ++-- .../share/share.gallery.component.html | 8 ++-- .../sorting-method-icon.component.css | 0 .../sorting-method-icon.component.html | 37 ++++++++++++++++ .../sorting-method-icon.component.ts | 12 ++++++ src/frontend/styles.css | 16 +++++-- 15 files changed, 197 insertions(+), 76 deletions(-) delete mode 100644 src/frontend/app/pipes/IconizeSortingMethod.ts create mode 100644 src/frontend/app/ui/sorting-method-icon/sorting-method-icon.component.css create mode 100644 src/frontend/app/ui/sorting-method-icon/sorting-method-icon.component.html create mode 100644 src/frontend/app/ui/sorting-method-icon/sorting-method-icon.component.ts diff --git a/package-lock.json b/package-lock.json index 2eb42925..c4708af7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -56,6 +56,8 @@ "@angular/router": "15.2.2", "@asymmetrik/ngx-leaflet": "15.0.1", "@asymmetrik/ngx-leaflet-markercluster": "15.0.0", + "@ng-icons/core": "24.0.0", + "@ng-icons/ionicons": "24.0.0", "@ngx-loading-bar/core": "6.0.2", "@types/archiver": "5.3.1", "@types/bcrypt": "5.0.0", @@ -3944,6 +3946,28 @@ "node-pre-gyp": "bin/node-pre-gyp" } }, + "node_modules/@ng-icons/core": { + "version": "24.0.0", + "resolved": "https://registry.npmjs.org/@ng-icons/core/-/core-24.0.0.tgz", + "integrity": "sha512-zqe8MDcIB/SXT14d/5gh4SwRrY2ndHALGeFO7YxWm9o+88UuftrLuyVx+UnfWM4h7s4fJp0cXFjikBtbKi80bQ==", + "dev": true, + "dependencies": { + "tslib": "^2.2.0" + }, + "peerDependencies": { + "@angular/common": ">=14.0.0", + "@angular/core": ">=14.0.0" + } + }, + "node_modules/@ng-icons/ionicons": { + "version": "24.0.0", + "resolved": "https://registry.npmjs.org/@ng-icons/ionicons/-/ionicons-24.0.0.tgz", + "integrity": "sha512-GcKYOH9S0aqVyo2NZFw1HDEexXyD7Kn3F/YeZdVUX/tDYfdhj32cO1FwvVnXDtabrhPeqw1vVZQpIvcDkka8NA==", + "dev": true, + "dependencies": { + "tslib": "^2.2.0" + } + }, "node_modules/@ngtools/webpack": { "version": "15.2.2", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-15.2.2.tgz", @@ -26020,6 +26044,24 @@ "tar": "^6.1.11" } }, + "@ng-icons/core": { + "version": "24.0.0", + "resolved": "https://registry.npmjs.org/@ng-icons/core/-/core-24.0.0.tgz", + "integrity": "sha512-zqe8MDcIB/SXT14d/5gh4SwRrY2ndHALGeFO7YxWm9o+88UuftrLuyVx+UnfWM4h7s4fJp0cXFjikBtbKi80bQ==", + "dev": true, + "requires": { + "tslib": "^2.2.0" + } + }, + "@ng-icons/ionicons": { + "version": "24.0.0", + "resolved": "https://registry.npmjs.org/@ng-icons/ionicons/-/ionicons-24.0.0.tgz", + "integrity": "sha512-GcKYOH9S0aqVyo2NZFw1HDEexXyD7Kn3F/YeZdVUX/tDYfdhj32cO1FwvVnXDtabrhPeqw1vVZQpIvcDkka8NA==", + "dev": true, + "requires": { + "tslib": "^2.2.0" + } + }, "@ngtools/webpack": { "version": "15.2.2", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-15.2.2.tgz", diff --git a/package.json b/package.json index 63baa523..62726da1 100644 --- a/package.json +++ b/package.json @@ -76,6 +76,8 @@ "@angular/router": "15.2.2", "@asymmetrik/ngx-leaflet": "15.0.1", "@asymmetrik/ngx-leaflet-markercluster": "15.0.0", + "@ng-icons/core": "24.0.0", + "@ng-icons/ionicons": "24.0.0", "@ngx-loading-bar/core": "6.0.2", "@types/archiver": "5.3.1", "@types/bcrypt": "5.0.0", diff --git a/src/frontend/app/app.module.ts b/src/frontend/app/app.module.ts index 4b0254d5..38e8333a 100644 --- a/src/frontend/app/app.module.ts +++ b/src/frontend/app/app.module.ts @@ -48,7 +48,6 @@ import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule,} from '@angular/common/ import {DefaultUrlSerializer, UrlSerializer, UrlTree} from '@angular/router'; import {LanguageComponent} from './ui/language/language.component'; import {QueryService} from './model/query.service'; -import {IconizeSortingMethod} from './pipes/IconizeSortingMethod'; import {StringifySortingMethod} from './pipes/StringifySortingMethod'; import {RandomQueryBuilderGalleryComponent} from './ui/gallery/random-query-builder/random-query-builder.gallery.component'; import {DurationPipe} from './pipes/DurationPipe'; @@ -109,6 +108,31 @@ import {StringifyEnum} from './pipes/StringifyEnum'; import {StringifySearchType} from './pipes/StringifySearchType'; import {MarkerFactory} from './ui/gallery/map/MarkerFactory'; import {IconComponent} from './icon.component'; +import {NgIconsModule} from '@ng-icons/core'; +import { + ionAlbumsOutline, + ionArrowDownOutline, + ionArrowUpOutline, + ionCalendarOutline, ionChevronForwardOutline, + ionCloudDownloadOutline, + ionCopyOutline, + ionFunnelOutline, + ionGitBranchOutline, + ionHammerOutline, + ionImagesOutline, + ionLinkOutline, + ionLogOutOutline, + ionMenuOutline, + ionPeopleOutline, + ionPersonOutline, + ionSearchOutline, + ionSettingsOutline, + ionShareSocialOutline, + ionShuffleOutline, + ionStarOutline, + ionTrashOutline, +} from '@ng-icons/ionicons'; +import {SortingMethodIconComponent} from './ui/sorting-method-icon/sorting-method-icon.component'; @Injectable() export class MyHammerConfig extends HammerGestureConfig { @@ -150,6 +174,17 @@ Marker.prototype.options.icon = MarkerFactory.defIcon; HttpClientModule, BrowserAnimationsModule, AppRoutingModule, + NgIconsModule.withIcons({ + ionCloudDownloadOutline, ionFunnelOutline, + ionGitBranchOutline, ionArrowDownOutline, ionArrowUpOutline, + ionStarOutline, ionCalendarOutline, ionPersonOutline, ionShuffleOutline, + ionPeopleOutline, + ionMenuOutline, ionShareSocialOutline, + ionImagesOutline, ionLinkOutline, ionSearchOutline, ionHammerOutline, ionCopyOutline, + ionAlbumsOutline, ionSettingsOutline, ionLogOutOutline, + ionChevronForwardOutline, + ionTrashOutline, + }), ClipboardModule, TooltipModule.forRoot(), ToastrModule.forRoot(), @@ -219,7 +254,6 @@ Marker.prototype.options.icon = MarkerFactory.defIcon; // Pipes StringifyRole, - IconizeSortingMethod, StringifySortingMethod, DurationPipe, FileSizePipe, @@ -232,6 +266,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon; PhotoFilterPipe, UsersComponent, SharingsListComponent, + SortingMethodIconComponent, ], providers: [ {provide: HTTP_INTERCEPTORS, useClass: CSRFInterceptor, multi: true}, diff --git a/src/frontend/app/icon.component.ts b/src/frontend/app/icon.component.ts index 72325c3e..0cf69003 100644 --- a/src/frontend/app/icon.component.ts +++ b/src/frontend/app/icon.component.ts @@ -3,6 +3,7 @@ import {Config} from '../../common/config/public/Config'; @Component({ selector: 'app-icon', + styles: [':host {line-height: 0}'], template: ` '; - case SortingMethods.descRating: - return ''; - case SortingMethods.ascPersonCount: - return ''; - case SortingMethods.descPersonCount: - return ''; - case SortingMethods.ascName: - return 'A'; - case SortingMethods.descName: - return 'A'; - case SortingMethods.ascDate: - return ''; - case SortingMethods.descDate: - return ''; - case SortingMethods.random: - return ''; - } - } -} - diff --git a/src/frontend/app/ui/frame/frame.component.css b/src/frontend/app/ui/frame/frame.component.css index b4b1f9af..4b1fb693 100644 --- a/src/frontend/app/ui/frame/frame.component.css +++ b/src/frontend/app/ui/frame/frame.component.css @@ -52,8 +52,12 @@ a.dropdown-item, button.dropdown-item, div.dropdown-item { padding: 0.3rem 1.0rem 0.3rem 0.8rem; } -a.dropdown-item span, button.dropdown-item span, div.dropdown-item span { - padding-right: 0.8rem; +a.dropdown-item ng-icon, button.dropdown-item ng-icon, div.dropdown-item ng-icon { + margin-right: 0.5rem; +} + +ng-icon { + vertical-align: text-top; } @@ -71,6 +75,6 @@ a.dropdown-item span.badge, button.dropdown-item span.badge { z-index: 999; } -.show-btn-scroll-up{ +.show-btn-scroll-up { right: 1em; } diff --git a/src/frontend/app/ui/frame/frame.component.html b/src/frontend/app/ui/frame/frame.component.html index 91366a8b..0eb3a49f 100644 --- a/src/frontend/app/ui/frame/frame.component.html +++ b/src/frontend/app/ui/frame/frame.component.html @@ -49,7 +49,7 @@
  • - {{user.value.name}} + {{user.value.name}}
  • @@ -68,7 +68,7 @@ @@ -79,9 +79,10 @@
  • @@ -113,14 +114,14 @@
  • - + Albums
  • - + Faces
    • @@ -128,21 +129,21 @@ - + Gallery
  • - - {{link.name}} + + {{link.name}}
  • - - {{link.name}} + + {{link.name}}
    • @@ -151,7 +152,7 @@
  • - + Tools