xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2024-11-03 21:04:03 +08:00
Code Actions Projects 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 {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(),

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

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

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

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

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

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

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

1
src/frontend/styles.css
View File

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