Replacing icons with https://ionic.io/ionicons at multiple places

#587
bpatrik · Aug 22, 2023 · da91f10 · da91f10
1 parent 9b487bd
commit da91f10
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 35 deletions.
diff --git a/src/frontend/app/app.module.ts b/src/frontend/app/app.module.ts
@@ -119,15 +119,18 @@ import {
   ionChevronBackOutline,
   ionChevronDownOutline,
   ionChevronForwardOutline,
+  ionChevronUpOutline,
   ionCloseOutline,
   ionContractOutline,
   ionCopyOutline,
   ionDocumentOutline,
   ionDownloadOutline,
   ionExpandOutline,
+  ionFlagOutline,
   ionFolderOutline,
   ionFunnelOutline,
   ionGitBranchOutline,
+  ionGlobeOutline,
   ionHammerOutline,
   ionImageOutline,
   ionImagesOutline,
@@ -140,6 +143,7 @@ import {
   ionPauseOutline,
   ionPeopleOutline,
   ionPersonOutline,
+  ionPinOutline,
   ionPlayOutline,
   ionPricetagOutline,
   ionRemoveOutline,
@@ -217,7 +221,8 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
       ionInformationOutline, ionContractOutline, ionExpandOutline, ionCloseOutline,
       ionTimerOutline,
       ionPlayOutline, ionPauseOutline, ionVolumeMediumOutline, ionVolumeMuteOutline,
-      ionCameraOutline, ionWarningOutline, ionLockClosedOutline
+      ionCameraOutline, ionWarningOutline, ionLockClosedOutline,ionChevronUpOutline,
+      ionFlagOutline,ionGlobeOutline
     }),
     ClipboardModule,
     TooltipModule.forRoot(),

diff --git a/src/frontend/app/ui/frame/frame.component.html b/src/frontend/app/ui/frame/frame.component.html
@@ -210,5 +210,5 @@
   (click)="scrollUp()"
   [class.show-btn-scroll-up]="!shouldHideNavbar && !navbarKeepTop"
   class="btn btn-tertiary rounded-pill btn-scroll-up">
-  <span class="oi oi-chevron-top"></span>
+  <ng-icon name="ionChevronUpOutline"></ng-icon>
 </button>
diff --git a/src/frontend/app/ui/gallery/filter/filter.gallery.component.css b/src/frontend/app/ui/gallery/filter/filter.gallery.component.css
@@ -14,7 +14,7 @@
   cursor: pointer;
 }
 
-.filter-option .oi {
+.filter-option .pin {
   height: 0;
   font-size: 0;
   transition: all 0.1s;
@@ -24,19 +24,18 @@
   color: #aaa;
 }
 
-.filter-option:hover .oi.filter-pin, .filter-option .oi.filter-only-selected {
+.filter-option:hover .pin.filter-pin, .filter-option .pin.filter-only-selected {
   display: inline-block;
   height: auto;
   font-size: 1rem;
-  padding: 0 0.3rem;
   margin-left: -0.6rem;
 }
 
-.filter-option:hover .oi.filter-pin:hover {
+.filter-option:hover .pin.filter-pin:hover {
   color: #212529;
 }
 
-.filter-option .oi.filter-only-selected {
+.filter-option .pin.filter-only-selected {
   color: var(--bs-primary);
 }
 

diff --git a/src/frontend/app/ui/gallery/filter/filter.gallery.component.html b/src/frontend/app/ui/gallery/filter/filter.gallery.component.html
@@ -33,12 +33,11 @@
     <div class="row">
       <div class="position-absolute" *ngIf="filterService.statistic.length>1">
         <div class="text-md-center">
-          <span
-            [class.oi-chevron-bottom]="showStatistic"
-            [class.oi-chevron-top]="!showStatistic"
-            (click)="showStatistic = !showStatistic"
+          <ng-icon
+            [name]="!showStatistic ? 'ionChevronUpOutline' : 'ionChevronDownOutline'"
             style="top: -2px; cursor: pointer"
-            class="oi"></span>
+            class="position-relative"
+            (click)="showStatistic = !showStatistic"></ng-icon>
         </div>
       </div>
       <div class="col-md-1-half col-12  d-table">
@@ -104,10 +103,12 @@
               class="filter-option list-group-item list-group-item-action d-flex justify-content-between align-items-center">
 
               <div>
-              <span (click)="toggleSelectOnly(filter, option, $event)"
-                    class="oi oi-pin" title="Select only this"
-                    [ngClass]="isOnlySelected(filter,option) ? 'filter-only-selected' : 'filter-pin'"
-                    i18n-title></span>
+                <ng-icon name="ionFlagOutline"
+                         class="pin"
+                         (click)="toggleSelectOnly(filter, option, $event)"
+                         title="Select only this"
+                         [ngClass]="isOnlySelected(filter,option) ? 'filter-only-selected' : 'filter-pin'"
+                         i18n-title></ng-icon>
                 {{option.name === undefined ? unknownText : option.name}}
               </div>
               <span class="badge"

diff --git a/src/frontend/app/ui/gallery/gallery.component.html b/src/frontend/app/ui/gallery/gallery.component.html
@@ -47,8 +47,8 @@
                             [mdFiles]="directoryContent.metaFile | mdFiles"></app-gallery-blog>
 
 
-          <button class="btn btn-blog-details text-body" (click)="blogOpen=!blogOpen"><span
-            class="oi oi-chevron-{{blogOpen ? 'top' : 'bottom'}}"></span>
+          <button class="btn btn-blog-details text-body" (click)="blogOpen=!blogOpen">
+            <ng-icon [name]="blogOpen ? 'ionChevronUpOutline' : 'ionChevronDownOutline'"></ng-icon>
           </button>
         </div>
         <app-gallery-map

diff --git a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css
@@ -60,6 +60,15 @@
   cursor: pointer;
 }
 
+#controls .control-button {
+  margin-left: 0.1em;
+  margin-right: 0.1em;
+  display: inline-block;
+  padding: 0 0.2rem;
+  font-size: 1.5rem;
+  cursor: pointer;
+}
+
 .highlight {
   opacity: 0.4;
   transition: opacity .2s ease-out;

diff --git a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.html b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.html
@@ -20,19 +20,22 @@
 
   <div id="controllers-container" *ngIf="controllersVisible">
     <div id="controls">
-            <span>
-                <span class="oi  oi-fullscreen-exit highlight"
-                      *ngIf="fullScreenService.isFullScreenEnabled()"
-                      (click)="fullScreenService.exitFullScreen()" title="toggle fullscreen, key: f" i18n-title></span>
-                </span>
-      <span>
-             <span class="oi oi-fullscreen-enter highlight"
-                   *ngIf="!fullScreenService.isFullScreenEnabled()"
-                   (click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen, key: f" i18n-title></span>
-                </span>
-      <span>
-             <span class="oi oi-x highlight" (click)="hide()" title="close, key: Escape" i18n-title></span>
-             </span>
+      <div class="highlight control-button"
+           *ngIf="fullScreenService.isFullScreenEnabled()"
+           (click)="fullScreenService.exitFullScreen()" title="toggle fullscreen, key: f" i18n-title>
+        <ng-icon style="margin-right: 0.2em; margin-top: -0.05em" class="align-top" size="0.9em"
+                 name="ionContractOutline"></ng-icon>
+      </div>
+
+      <div class="highlight control-button"
+           *ngIf="!fullScreenService.isFullScreenEnabled()"
+           (click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen, key: f" i18n-title>
+        <ng-icon style="margin-right: 0.2em; margin-top: -0.05em" class="align-top" size="0.9em"
+                 name="ionExpandOutline"></ng-icon>
+      </div>
+      <div class="highlight control-button" (click)="hide()" title="close, key: Escape" i18n-title>
+        <ng-icon size="1.2em" name="ionCloseOutline"></ng-icon>
+      </div>
     </div>
 
   </div>

diff --git a/src/frontend/app/ui/gallery/random-query-builder/random-query-builder.gallery.component.css b/src/frontend/app/ui/gallery/random-query-builder/random-query-builder.gallery.component.css
@@ -22,6 +22,6 @@ button.dropdown-item {
   padding: 0.3rem 1.0rem 0.3rem 0.8rem;
 }
 
-button.dropdown-item span {
-  padding-right: 0.8rem;
+button.dropdown-item ng-icon {
+  margin-right: 0.5rem;
 }
diff --git a/src/frontend/app/ui/gallery/random-query-builder/random-query-builder.gallery.component.html b/src/frontend/app/ui/gallery/random-query-builder/random-query-builder.gallery.component.html
@@ -1,5 +1,5 @@
 <button class="dropdown-item {{enabled? '' : 'disabled'}}" (click)="openModal(randomModal)">
-  <span class="oi oi-random"></span>
+  <ng-icon name="ionShuffleOutline"></ng-icon>
   <ng-container i18n>Random link</ng-container>
 </button>
 

diff --git a/src/frontend/app/ui/language/language.component.html b/src/frontend/app/ui/language/language.component.html
@@ -9,7 +9,7 @@
     <ng-container *ngIf="current != null">
       {{current}}
     </ng-container>
-    <span *ngIf="current == null" class="oi oi-globe"></span>
+    <ng-icon  *ngIf="current == null" name="ionGlobeOutline"></ng-icon>
 
   </button>
   <div *dropdownMenu class="dropdown-menu" aria-labelledby="language">