xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2025-01-14 14:43:17 +08:00
Code Actions Projects Activity

improving navigator bar for searching

Browse Source
This commit is contained in:
Patrik J. Braun 2018-12-02 12:22:20 +01:00
parent 5b2e724f06
commit c5d16d6ef8
6 changed files with 35 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/app/gallery/cache.gallery.service.ts
View File

@ -1,5 +1,4 @@
import {Injectable} from '@angular/core';
import {PhotoDTO} from '../../../common/entities/PhotoDTO';
import {DirectoryDTO} from '../../../common/entities/DirectoryDTO';
import {Utils} from '../../../common/Utils';
import {Config} from '../../../common/config/public/Config';
@ -33,11 +32,11 @@ export class GalleryCacheService {
}
public getAutoComplete(text: string): Array<AutoCompleteItem> {
public getAutoComplete(text: string): AutoCompleteItem[] {
const key = GalleryCacheService.AUTO_COMPLETE_PREFIX + text;
const tmp = localStorage.getItem(key);
if (tmp != null) {
const value: CacheItem<Array<AutoCompleteItem>> = JSON.parse(tmp);
const value: CacheItem<AutoCompleteItem[]> = JSON.parse(tmp);
if (value.timestamp < Date.now() - Config.Client.Search.autocompleteCacheTimeout) {
localStorage.removeItem(key);
return null;

4
frontend/app/gallery/gallery.component.css
View File

@ -54,7 +54,3 @@ app-gallery-directory {
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
.search-type{
margin-left: 5px;
}

16
frontend/app/gallery/gallery.component.html
View File

@ -40,25 +40,13 @@
<app-gallery-grid [photos]="_galleryService.content.value.directory.media"
[lightbox]="lightbox"></app-gallery-grid>
</div>
<!-- Search-->
<div body class="container-fluid" style="width: 100%; padding:0" *ngIf="_galleryService.content.value.searchResult">
<div class="alert alert-info" role="alert"
*ngIf="_galleryService.content.value.searchResult.resultOverflow == true" i18n>
Too many results to show. Refine your search.
</div>
<ol class="breadcrumb">
<li class="active">
<ng-container i18n>Searching for:</ng-container>
<span class="search-type" [ngSwitch]="_galleryService.content.value.searchResult.searchType">
<span *ngSwitchCase="SearchTypes.photo" class="oi oi-image"></span>
<span *ngSwitchCase="SearchTypes.video" class="oi oi-video"></span>
<span *ngSwitchCase="SearchTypes.directory" class="oi oi-folder"></span>
<span *ngSwitchCase="SearchTypes.keyword" class="oi oi-tag"></span>
<span *ngSwitchCase="SearchTypes.position" class="oi oi-map-marker"></span>
</span>
<strong> {{_galleryService.content.value.searchResult.searchText}}</strong>
</li>
</ol>
<app-gallery-navbar [searchResult]="_galleryService.content.value.searchResult"></app-gallery-navbar>
<app-gallery-map *ngIf="isPhotoWithLocation && mapEnabled"
[photos]="_galleryService.content.value.searchResult.media"

5
frontend/app/gallery/navigator/navigator.gallery.component.css
View File

@ -40,3 +40,8 @@ nav {
.dropdown-toggle::after {
display: none;
}
.search-type{
margin-left: 5px;
}

22
frontend/app/gallery/navigator/navigator.gallery.component.html
View File

@ -1,5 +1,5 @@
<nav class="nav-container" aria-label="breadcrumb">
<ol id="directory-path" class="breadcrumb">
<ol *ngIf="directory" id="directory-path" class="breadcrumb">
<li *ngFor="let path of routes" class="breadcrumb-item">
<a *ngIf="path.route" [routerLink]="['/gallery',path.route]"
[queryParams]="queryService.getParams()">{{path.name}}</a>
@ -7,11 +7,25 @@
</li>
</ol>
<ol *ngIf="searchResult" class="breadcrumb">
<li class="active">
<ng-container i18n>Searching for:</ng-container>
<span class="search-type" [ngSwitch]="searchResult.searchType">
<span *ngSwitchCase="SearchTypes.photo" class="oi oi-image"></span>
<span *ngSwitchCase="SearchTypes.video" class="oi oi-video"></span>
<span *ngSwitchCase="SearchTypes.directory" class="oi oi-folder"></span>
<span *ngSwitchCase="SearchTypes.keyword" class="oi oi-tag"></span>
<span *ngSwitchCase="SearchTypes.position" class="oi oi-map-marker"></span>
</span>
<strong> {{searchResult.searchText}}</strong>
</li>
</ol>
<div class="right-side">
<div class="photos-count" *ngIf="directory.media.length > 0 && config.Client.Other.NavBar.showItemCount">
{{directory.media.length}} <span i18n>items</span>
<div class="photos-count" *ngIf="ItemCount > 0 && config.Client.Other.NavBar.showItemCount">
{{ItemCount}} <span i18n>items</span>
</div>
<div class="divider" *ngIf="directory.media.length > 0 && config.Client.Other.NavBar.showItemCount">&nbsp;</div>
<div class="divider" *ngIf="ItemCount > 0 && config.Client.Other.NavBar.showItemCount">&nbsp;</div>
<div class="btn-group" dropdown placement="bottom right">
<button id="button-alignment" dropdownToggle type="button"
class="btn btn-default dropdown-toggle" aria-controls="dropdown-alignment"

8
frontend/app/gallery/navigator/navigator.gallery.component.ts
View File

@ -9,6 +9,8 @@ import {GalleryService} from '../gallery.service';
import {Utils} from '../../../../common/Utils';
import {SortingMethods} from '../../../../common/entities/SortingMethods';
import {Config} from '../../../../common/config/public/Config';
import {SearchResultDTO} from '../../../../common/entities/SearchResultDTO';
import {SearchTypes} from '../../../../common/entities/AutoCompleteItem';
@Component({
selector: 'app-gallery-navbar',
@ -18,12 +20,15 @@ import {Config} from '../../../../common/config/public/Config';
})
export class GalleryNavigatorComponent implements OnChanges {
@Input() directory: DirectoryDTO;
@Input() searchResult: SearchResultDTO;
routes: Array<NavigatorPath> = [];
SortingMethods = SortingMethods;
sortingMethodsType: { key: number; value: string }[] = [];
config = Config;
readonly SearchTypes = SearchTypes;
constructor(private _authService: AuthenticationService,
public queryService: QueryService,
public galleryService: GalleryService,
@ -84,6 +89,9 @@ export class GalleryNavigatorComponent implements OnChanges {
this.galleryService.setSorting(sorting);
}
get ItemCount(): number {
return (this.directory || this.searchResult).media.length;
}
}