self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2024-12-23 01:27:14 +02:00
Code Issues Releases Activity

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

Browse Source 
#587
This commit is contained in:
Patrik J. Braun 2023-08-22 23:18:46 +02:00
parent 9b487bdf99
commit da91f1082c
10 changed files with 52 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/frontend/app/app.module.ts
View File

@ -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(),

2
src/frontend/app/ui/frame/frame.component.html
View File

@ -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>

9
src/frontend/app/ui/gallery/filter/filter.gallery.component.css
View File

@ -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);
}

19
src/frontend/app/ui/gallery/filter/filter.gallery.component.html
View File

@ -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"

4
src/frontend/app/ui/gallery/gallery.component.html
View File

@ -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

9
src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.css
View File

@ -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;

29
src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.html
View File

@ -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>

4
src/frontend/app/ui/gallery/random-query-builder/random-query-builder.gallery.component.css
View File

@ -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;
}

2
src/frontend/app/ui/gallery/random-query-builder/random-query-builder.gallery.component.html
View File

@ -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>

2
src/frontend/app/ui/language/language.component.html
View File

@ -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">