self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2025-01-10 04:07:35 +02:00
Code Issues Releases Activity

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

Browse Source 
#587
This commit is contained in:
Patrik J. Braun 2023-08-20 11:12:15 +02:00
parent 6a004c2abb
commit 064b254967
7 changed files with 49 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -110,26 +110,34 @@ import {MarkerFactory} from './ui/gallery/map/MarkerFactory';
import {IconComponent} from './icon.component'; import {IconComponent} from './icon.component';
import {NgIconsModule} from '@ng-icons/core'; import {NgIconsModule} from '@ng-icons/core';
import { import {
ionAddOutline,
ionAlbumsOutline, ionAlbumsOutline,
ionArrowDownOutline, ionArrowDownOutline,
ionArrowUpOutline, ionArrowUpOutline,
ionCalendarOutline, ionChevronForwardOutline, ionCalendarOutline,
ionChevronDownOutline,
ionChevronForwardOutline,
ionCloudDownloadOutline, ionCloudDownloadOutline,
ionCopyOutline, ionCopyOutline,
ionDocumentOutline,
ionFolderOutline,
ionFunnelOutline, ionFunnelOutline,
ionGitBranchOutline, ionGitBranchOutline,
ionHammerOutline, ionHammerOutline,
ionImageOutline,
ionImagesOutline, ionImagesOutline,
ionLinkOutline, ionLinkOutline,
ionLocationOutline,
ionLogOutOutline, ionLogOutOutline,
ionMenuOutline, ionMenuOutline,
ionPeopleOutline, ionPeopleOutline,
ionPersonOutline, ionPersonOutline, ionPricetagOutline, ionSaveOutline,
ionSearchOutline, ionSearchOutline,
ionSettingsOutline, ionSettingsOutline,
ionShareSocialOutline, ionShareSocialOutline,
ionShuffleOutline, ionShuffleOutline,
ionStarOutline, ionStarOutline,
ionTextOutline,
ionTrashOutline, ionTrashOutline,
} from '@ng-icons/ionicons'; } from '@ng-icons/ionicons';
import {SortingMethodIconComponent} from './ui/sorting-method-icon/sorting-method-icon.component'; import {SortingMethodIconComponent} from './ui/sorting-method-icon/sorting-method-icon.component';
@ -182,8 +190,10 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
ionMenuOutline, ionShareSocialOutline, ionMenuOutline, ionShareSocialOutline,
ionImagesOutline, ionLinkOutline, ionSearchOutline, ionHammerOutline, ionCopyOutline, ionImagesOutline, ionLinkOutline, ionSearchOutline, ionHammerOutline, ionCopyOutline,
ionAlbumsOutline, ionSettingsOutline, ionLogOutOutline, ionAlbumsOutline, ionSettingsOutline, ionLogOutOutline,
ionChevronForwardOutline, ionChevronForwardOutline, ionChevronDownOutline,
ionTrashOutline, ionTrashOutline,ionSaveOutline,ionAddOutline,
ionTextOutline, ionFolderOutline, ionDocumentOutline, ionImageOutline,
ionPricetagOutline, ionLocationOutline
}), }),
ClipboardModule, ClipboardModule,
TooltipModule.forRoot(), TooltipModule.forRoot(),

11
src/frontend/app/ui/gallery/search/query-enrty/query-entry.search.gallery.component.html
View File

@ -36,7 +36,7 @@
<button [ngClass]="'btn-danger'" <button [ngClass]="'btn-danger'"
class="btn float-end col-1 align-self-center" class="btn float-end col-1 align-self-center"
(click)="deleteItem()"> (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> </button>
<div class="container query-list"> <div class="container query-list">
<app-gallery-search-query-entry *ngFor="let sq of AsListQuery.list; index as i" <app-gallery-search-query-entry *ngFor="let sq of AsListQuery.list; index as i"
@ -46,7 +46,12 @@
</div> </div>
<div class="col query-list d-flex justify-content-start"> <div class="col query-list d-flex justify-content-start">
<button class="btn btn-primary" (click)="addQuery()"> <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> </button>
</div> </div>
</ng-container> </ng-container>
@ -293,7 +298,7 @@
<button [ngClass]="'btn-danger'" <button [ngClass]="'btn-danger'"
class="btn w-auto float-end" class="btn w-auto float-end"
(click)="deleteItem()"> (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> </button>
</div> </div>
</ng-container> </ng-container>

7
src/frontend/app/ui/gallery/search/search-field-base/search-field-base.gallery.component.css
View File

@ -48,6 +48,10 @@
display: block; display: block;
} }
.autocomplete-item span {
margin-left: -10px;
}
.autocomplete-item-selected { .autocomplete-item-selected {
background-color: var(--bs-primary); background-color: var(--bs-primary);
color: #FFF; color: #FFF;
@ -70,3 +74,6 @@
margin-left: 0 !important; margin-left: 0 !important;
} }
ng-icon.insert-button ::ng-deep svg {
vertical-align: top;
}

21
src/frontend/app/ui/gallery/search/search-field-base/search-field-base.gallery.component.html
View File

@ -34,19 +34,20 @@
*ngFor="let item of autoCompleteRenders; let i = index"> *ngFor="let item of autoCompleteRenders; let i = index">
<div> <div>
<span [ngSwitch]="item.type"> <span [ngSwitch]="item.type">
<span *ngSwitchCase="SearchQueryTypes.caption" class="oi oi-image"></span> <ng-icon *ngSwitchCase="SearchQueryTypes.caption" name="ionTextOutline"></ng-icon>
<span *ngSwitchCase="SearchQueryTypes.directory" class="oi oi-folder"></span> <ng-icon *ngSwitchCase="SearchQueryTypes.directory" name="ionFolderOutline"></ng-icon>
<span *ngSwitchCase="SearchQueryTypes.file_name" class="oi oi-image"></span> <ng-icon *ngSwitchCase="SearchQueryTypes.file_name" name="ionImageOutline"></ng-icon>
<span *ngSwitchCase="SearchQueryTypes.keyword" class="oi oi-tag"></span> <ng-icon *ngSwitchCase="SearchQueryTypes.keyword" name="ionPricetagOutline"></ng-icon>
<span *ngSwitchCase="SearchQueryTypes.person" class="oi oi-person"></span> <ng-icon *ngSwitchCase="SearchQueryTypes.person" name="ionPersonOutline"></ng-icon>
<span *ngSwitchCase="SearchQueryTypes.position" class="oi oi-map-marker"></span> <ng-icon *ngSwitchCase="SearchQueryTypes.position" name="ionLocationOutline"></ng-icon>
<span *ngSwitchCase="SearchQueryTypes.distance" class="oi oi-map-marker"></span> <ng-icon *ngSwitchCase="SearchQueryTypes.distance" name="ionLocationOutline"></ng-icon>
</span> </span>
{{item.preText}}<strong>{{item.highLightText}}</strong>{{item.postText}} {{item.preText}}<strong>{{item.highLightText}}</strong>{{item.postText}}
<span class="oi oi-chevron-right insert-button float-end" (click)="applyAutoComplete(item)" <ng-icon name="ionChevronForwardOutline"
class="insert-button float-end"
(click)="applyAutoComplete(item)"
title="Insert" title="Insert"
i18n-title> i18n-title></ng-icon>
</span>
</div> </div>
</div> </div>
</div> </div>

2
src/frontend/app/ui/gallery/search/search-field/search-field.gallery.component.html
View File

@ -10,7 +10,7 @@
</app-gallery-search-field-base> </app-gallery-search-field-base>
<button class="btn btn-tertiary" type="button" (click)="openSearchModal(searchModal)"> <button class="btn btn-tertiary" type="button" (click)="openSearchModal(searchModal)">
<span class="oi oi-chevron-bottom"></span> <ng-icon name="ionChevronDownOutline"></ng-icon>
</button> </button>
</div> </div>

11
src/frontend/app/ui/gallery/search/search.gallery.component.html
View File

@ -11,10 +11,11 @@
<button class="btn btn-tertiary" type="button" <button class="btn btn-tertiary" type="button"
[routerLink]="['/search', HTMLSearchQuery]"> [routerLink]="['/search', HTMLSearchQuery]">
<span class="oi oi-magnifying-glass"></span> <ng-icon name="ionSearchOutline"></ng-icon>
</button> </button>
<button class="btn btn-tertiary" type="button" (click)="openSearchModal(searchModal)"> <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> </button>
</div> </div>
</form> </form>
@ -46,13 +47,13 @@
class="btn btn-secondary me-2" type="button" class="btn btn-secondary me-2" type="button"
[disabled]="rawSearchText == ''" [disabled]="rawSearchText == ''"
(click)="openSaveSearchModal(saveSearchModal)"> (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> <ng-container i18n>Save</ng-container>
</button> </button>
<button class="btn btn-primary" type="button" <button class="btn btn-primary" type="button"
[routerLink]="['/search', HTMLSearchQuery]" [routerLink]="['/search', HTMLSearchQuery]"
(click)="hideSearchModal()"> (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> <ng-container i18n>Search</ng-container>
</button> </button>
</div> </div>
@ -93,7 +94,7 @@
<button class="btn btn-primary" type="button" <button class="btn btn-primary" type="button"
[disabled]="saveSearchName == ''" [disabled]="saveSearchName == ''"
(click)="saveSearch()"> (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> <ng-container i18n>Save as album</ng-container>
</button> </button>
</div> </div>

1
src/frontend/styles.css
View File

@ -51,6 +51,7 @@ This is mostly btn-light
} }
ng-icon { ng-icon {
vertical-align: text-top;
font-size: 1.15em font-size: 1.15em
} }