Replacing icons with https://ionic.io/ionicons in search

#587
bpatrik · Aug 20, 2023 · 064b254 · 064b254
1 parent 6a004c2
commit 064b254
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 24 deletions.
diff --git a/src/frontend/app/app.module.ts b/src/frontend/app/app.module.ts
@@ -110,26 +110,34 @@ import {MarkerFactory} from './ui/gallery/map/MarkerFactory';
 import {IconComponent} from './icon.component';
 import {NgIconsModule} from '@ng-icons/core';
 import {
+  ionAddOutline,
   ionAlbumsOutline,
   ionArrowDownOutline,
   ionArrowUpOutline,
-  ionCalendarOutline, ionChevronForwardOutline,
+  ionCalendarOutline,
+  ionChevronDownOutline,
+  ionChevronForwardOutline,
   ionCloudDownloadOutline,
   ionCopyOutline,
+  ionDocumentOutline,
+  ionFolderOutline,
   ionFunnelOutline,
   ionGitBranchOutline,
   ionHammerOutline,
+  ionImageOutline,
   ionImagesOutline,
   ionLinkOutline,
+  ionLocationOutline,
   ionLogOutOutline,
   ionMenuOutline,
   ionPeopleOutline,
-  ionPersonOutline,
+  ionPersonOutline, ionPricetagOutline, ionSaveOutline,
   ionSearchOutline,
   ionSettingsOutline,
   ionShareSocialOutline,
   ionShuffleOutline,
   ionStarOutline,
+  ionTextOutline,
   ionTrashOutline,
 } from '@ng-icons/ionicons';
 import {SortingMethodIconComponent} from './ui/sorting-method-icon/sorting-method-icon.component';
@@ -182,8 +190,10 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
       ionMenuOutline, ionShareSocialOutline,
       ionImagesOutline, ionLinkOutline, ionSearchOutline, ionHammerOutline, ionCopyOutline,
       ionAlbumsOutline, ionSettingsOutline, ionLogOutOutline,
-      ionChevronForwardOutline,
-      ionTrashOutline,
+      ionChevronForwardOutline, ionChevronDownOutline,
+      ionTrashOutline,ionSaveOutline,ionAddOutline,
+      ionTextOutline, ionFolderOutline, ionDocumentOutline, ionImageOutline,
+      ionPricetagOutline, ionLocationOutline
     }),
     ClipboardModule,
     TooltipModule.forRoot(),

diff --git a/src/frontend/app/ui/gallery/search/query-enrty/query-entry.search.gallery.component.html b/src/frontend/app/ui/gallery/search/query-enrty/query-entry.search.gallery.component.html
@@ -36,7 +36,7 @@
     <button [ngClass]="'btn-danger'"
             class="btn float-end col-1 align-self-center"
             (click)="deleteItem()">
-      <span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
+      <ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
     </button>
     <div class="container query-list">
       <app-gallery-search-query-entry *ngFor="let sq of AsListQuery.list; index as i"
@@ -46,7 +46,12 @@
     </div>
     <div class="col query-list d-flex justify-content-start">
       <button class="btn btn-primary" (click)="addQuery()">
-        <span class="oi oi-plus" aria-hidden="true" aria-label="Add"> Add</span>
+        <ng-icon
+          class="me-1"
+          style="margin-left: -0.1em; margin-right: -0.1em"
+          name="ionAddOutline"
+          title="Add" i18n-title></ng-icon>
+        <span i18n>Add</span>
       </button>
     </div>
   </ng-container>
@@ -293,7 +298,7 @@
       <button [ngClass]="'btn-danger'"
               class="btn  w-auto float-end"
               (click)="deleteItem()">
-        <span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
+        <ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
       </button>
     </div>
   </ng-container>

diff --git a/src/frontend/app/ui/gallery/search/search-field-base/search-field-base.gallery.component.css b/src/frontend/app/ui/gallery/search/search-field-base/search-field-base.gallery.component.css
@@ -48,6 +48,10 @@
   display: block;
 }
 
+.autocomplete-item span {
+  margin-left: -10px;
+}
+
 .autocomplete-item-selected {
   background-color: var(--bs-primary);
   color: #FFF;
@@ -70,3 +74,6 @@
   margin-left: 0 !important;
 }
 
+ng-icon.insert-button ::ng-deep svg {
+  vertical-align: top;
+}
diff --git a/...frontend/app/ui/gallery/search/search-field-base/search-field-base.gallery.component.html b/...frontend/app/ui/gallery/search/search-field-base/search-field-base.gallery.component.html
@@ -34,19 +34,20 @@
          *ngFor="let item of autoCompleteRenders; let i = index">
       <div>
                     <span [ngSwitch]="item.type">
-                      <span *ngSwitchCase="SearchQueryTypes.caption" class="oi oi-image"></span>
-                      <span *ngSwitchCase="SearchQueryTypes.directory" class="oi oi-folder"></span>
-                      <span *ngSwitchCase="SearchQueryTypes.file_name" class="oi oi-image"></span>
-                      <span *ngSwitchCase="SearchQueryTypes.keyword" class="oi oi-tag"></span>
-                      <span *ngSwitchCase="SearchQueryTypes.person" class="oi oi-person"></span>
-                      <span *ngSwitchCase="SearchQueryTypes.position" class="oi oi-map-marker"></span>
-                     <span *ngSwitchCase="SearchQueryTypes.distance" class="oi oi-map-marker"></span>
+                      <ng-icon *ngSwitchCase="SearchQueryTypes.caption" name="ionTextOutline"></ng-icon>
+                      <ng-icon *ngSwitchCase="SearchQueryTypes.directory" name="ionFolderOutline"></ng-icon>
+                      <ng-icon *ngSwitchCase="SearchQueryTypes.file_name" name="ionImageOutline"></ng-icon>
+                      <ng-icon *ngSwitchCase="SearchQueryTypes.keyword" name="ionPricetagOutline"></ng-icon>
+                      <ng-icon *ngSwitchCase="SearchQueryTypes.person" name="ionPersonOutline"></ng-icon>
+                      <ng-icon *ngSwitchCase="SearchQueryTypes.position" name="ionLocationOutline"></ng-icon>
+                      <ng-icon *ngSwitchCase="SearchQueryTypes.distance" name="ionLocationOutline"></ng-icon>
                     </span>
         {{item.preText}}<strong>{{item.highLightText}}</strong>{{item.postText}}
-        <span class="oi oi-chevron-right insert-button float-end" (click)="applyAutoComplete(item)"
-              title="Insert"
-              i18n-title>
-        </span>
+        <ng-icon name="ionChevronForwardOutline"
+                 class="insert-button float-end"
+                 (click)="applyAutoComplete(item)"
+                 title="Insert"
+                 i18n-title></ng-icon>
       </div>
     </div>
   </div>

diff --git a/src/frontend/app/ui/gallery/search/search-field/search-field.gallery.component.html b/src/frontend/app/ui/gallery/search/search-field/search-field.gallery.component.html
@@ -10,7 +10,7 @@
   </app-gallery-search-field-base>
 
   <button class="btn btn-tertiary" type="button" (click)="openSearchModal(searchModal)">
-    <span class="oi oi-chevron-bottom"></span>
+    <ng-icon name="ionChevronDownOutline"></ng-icon>
   </button>
 </div>
 

diff --git a/src/frontend/app/ui/gallery/search/search.gallery.component.html b/src/frontend/app/ui/gallery/search/search.gallery.component.html
@@ -11,10 +11,11 @@
 
     <button class="btn btn-tertiary" type="button"
             [routerLink]="['/search', HTMLSearchQuery]">
-      <span class="oi oi-magnifying-glass"></span>
+      <ng-icon name="ionSearchOutline"></ng-icon>
     </button>
     <button class="btn btn-tertiary" type="button" (click)="openSearchModal(searchModal)">
-      <span class="oi oi-chevron-bottom"></span>
+      <ng-icon size="1.2em" style="margin-left: -0.1em; margin-right: -0.1em;"
+               name="ionChevronDownOutline"></ng-icon>
     </button>
   </div>
 </form>
@@ -46,13 +47,13 @@ <h5 class="modal-title" i18n>Search</h5>
                 class="btn btn-secondary me-2" type="button"
                 [disabled]="rawSearchText == ''"
                 (click)="openSaveSearchModal(saveSearchModal)">
-          <span class="oi oi-folder me-2"></span>
+          <ng-icon name="ionSaveOutline" class="me-2"></ng-icon>
           <ng-container i18n>Save</ng-container>
         </button>
         <button class="btn btn-primary" type="button"
                 [routerLink]="['/search', HTMLSearchQuery]"
                 (click)="hideSearchModal()">
-          <span class="oi oi-magnifying-glass me-2"></span>
+          <ng-icon name="ionSearchOutline" class="me-2"></ng-icon>
           <ng-container i18n>Search</ng-container>
         </button>
       </div>
@@ -93,7 +94,7 @@ <h5 class="modal-title" i18n>Save search to album</h5>
           <button class="btn btn-primary" type="button"
                   [disabled]="saveSearchName == ''"
                   (click)="saveSearch()">
-            <span class="oi oi-folder me-2"></span>
+            <ng-icon name="ionSaveOutline" class="me-2"></ng-icon>
             <ng-container i18n>Save as album</ng-container>
           </button>
         </div>

diff --git a/src/frontend/styles.css b/src/frontend/styles.css
@@ -51,6 +51,7 @@ This is mostly btn-light
 }
 
 ng-icon {
+  vertical-align: text-top;
   font-size: 1.15em
 }