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

adding autocomplete icons

Browse Source
This commit is contained in:
Braun Patrik 2016-05-15 19:46:25 +02:00
parent b96d083f4b
commit eb46c53bbb
3 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/app/gallery/grid/photo/photo.grid.gallery.component.html
View File

@ -4,7 +4,7 @@
<div class="photo-name">{{gridPhoto.photo.name}}</div> <div class="photo-name">{{gridPhoto.photo.name}}</div>
<div class="photo-position" *ngIf="gridPhoto.photo.metadata.positionData"> <div class="photo-position" *ngIf="gridPhoto.photo.metadata.positionData">
<span class="glyphicon glyphicon-globe"></span> <span class="glyphicon glyphicon-map-marker"></span>
<a *ngIf="gridPhoto.photo.metadata.positionData.city || gridPhoto.photo.metadata.positionData.state || gridPhoto.photo.metadata.positionData.country"> <a *ngIf="gridPhoto.photo.metadata.positionData.city || gridPhoto.photo.metadata.positionData.state || gridPhoto.photo.metadata.positionData.country">
{{gridPhoto.photo.metadata.positionData.city || gridPhoto.photo.metadata.positionData.state || {{gridPhoto.photo.metadata.positionData.city || gridPhoto.photo.metadata.positionData.state ||
gridPhoto.photo.metadata.positionData.country}} gridPhoto.photo.metadata.positionData.country}}

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

@ -4,13 +4,19 @@
<input type="text" class="form-control" placeholder="Search" (keyup)="onSearchChange($event)" <input type="text" class="form-control" placeholder="Search" (keyup)="onSearchChange($event)"
(blur)="onFocusLost($event)" (focus)="onFocus($evnet)" [(ngModel)]="searchText" #name="ngForm" (blur)="onFocusLost($event)" (focus)="onFocus($evnet)" [(ngModel)]="searchText" #name="ngForm"
ngControl="search" ngControl="search"
name="srch-term" id="srch-term" autocomplete="off" > name="srch-term" id="srch-term" autocomplete="off">
<div class="autocomplete-list" *ngIf="autoCompleteItems.length > 0" > <div class="autocomplete-list" *ngIf="autoCompleteItems.length > 0">
<div class="autocomplete-item" *ngFor="let item of autoCompleteItems" (mousedown)="search(item)"> <div class="autocomplete-item" *ngFor="let item of autoCompleteItems" (mousedown)="search(item)">
{{item.preText}}<strong>{{item.highLightText}}</strong>{{item.postText}} <span [ngSwitch]="item.type">
</div> <span *ngSwitchWhen="0" class="glyphicon glyphicon-picture"></span>
<span *ngSwitchWhen="1" class="glyphicon glyphicon-folder-open"></span>
<span *ngSwitchWhen="2" class="glyphicon glyphicon-tag"></span>
<span *ngSwitchWhen="3" class="glyphicon glyphicon-map-marker"></span>
</span>
{{item.preText}}<strong>{{item.highLightText}}</strong>{{item.postText}}
</div> </div>
</div>
<div class="input-group-btn" style="display: block"> <div class="input-group-btn" style="display: block">
<button class="btn btn-default dropdown-toggle" type="button" (click)="onSearch()"><i <button class="btn btn-default dropdown-toggle" type="button" (click)="onSearch()"><i

10
frontend/app/gallery/search/search.gallery.component.ts
View File

@ -2,7 +2,7 @@
import {Component} from "@angular/core"; import {Component} from "@angular/core";
import {AutoCompleteService} from "./autocomplete.service"; import {AutoCompleteService} from "./autocomplete.service";
import {AutoCompleteItem} from "../../../../common/entities/AutoCompleteItem"; import {AutoCompleteItem, AutoCompeleteTypes} from "../../../../common/entities/AutoCompleteItem";
import {Message} from "../../../../common/entities/Message"; import {Message} from "../../../../common/entities/Message";
import {GalleryService} from "../gallery.service"; import {GalleryService} from "../gallery.service";
import {FORM_DIRECTIVES} from "@angular/common"; import {FORM_DIRECTIVES} from "@angular/common";
@ -82,8 +82,8 @@ export class GallerySearchComponent {
private showSuggestions(suggestions:Array<AutoCompleteItem>, searchText:string) { private showSuggestions(suggestions:Array<AutoCompleteItem>, searchText:string) {
this.emptyAutoComplete(); this.emptyAutoComplete();
suggestions.forEach((item)=> { suggestions.forEach((item:AutoCompleteItem)=> {
let renderItem = new AutoCompleteRenderItem(item.text, searchText); let renderItem = new AutoCompleteRenderItem(item.text, searchText, item.type);
this.autoCompleteItems.push(renderItem); this.autoCompleteItems.push(renderItem);
}); });
} }
@ -94,8 +94,9 @@ class AutoCompleteRenderItem {
public preText:string = ""; public preText:string = "";
public highLightText:string = ""; public highLightText:string = "";
public postText:string = ""; public postText:string = "";
public type:AutoCompeleteTypes;
constructor(public text:string, searchText:string) { constructor(public text:string, searchText:string, type:AutoCompeleteTypes) {
let preIndex = text.toLowerCase().indexOf(searchText.toLowerCase()); let preIndex = text.toLowerCase().indexOf(searchText.toLowerCase());
if (preIndex > -1) { if (preIndex > -1) {
this.preText = text.substring(0, preIndex); this.preText = text.substring(0, preIndex);
@ -104,6 +105,7 @@ class AutoCompleteRenderItem {
} else { } else {
this.postText = text; this.postText = text;
} }
this.type = type;
} }
} }