fossilfranv/pigallery2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

making map icon thumbnails switchable

Browse Source
This commit is contained in:
Patrik J. Braun 2019-07-21 11:23:08 +02:00
parent 503f96a9b3
commit 8e5be78464
11 changed files with 139 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
common/config/public/ConfigClass.ts
View File

@ -38,6 +38,7 @@ export module ClientConfig {
export interface MapConfig { export interface MapConfig {
enabled: boolean; enabled: boolean;
useImageMarkers: boolean;
mapProvider: MapProviders; mapProvider: MapProviders;
mapboxAccessToken: string; mapboxAccessToken: string;
customLayers: MapLayers[]; customLayers: MapLayers[];
@ -128,6 +129,7 @@ export class PublicConfigClass {
}, },
Map: { Map: {
enabled: true, enabled: true,
useImageMarkers: true,
mapProvider: ClientConfig.MapProviders.OpenStreetMap, mapProvider: ClientConfig.MapProviders.OpenStreetMap,
mapboxAccessToken: '', mapboxAccessToken: '',
customLayers: [{name: 'street', url: ''}] customLayers: [{name: 'street', url: ''}]

18
frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts
View File

@ -1,4 +1,4 @@
import {AfterViewInit, Component, ElementRef, HostListener, Input, OnChanges, OnInit, ViewChild} from '@angular/core'; import {AfterViewInit, Component, ElementRef, HostListener, Input, OnChanges, ViewChild} from '@angular/core';
import {PhotoDTO} from '../../../../../../common/entities/PhotoDTO'; import {PhotoDTO} from '../../../../../../common/entities/PhotoDTO';
import {Dimension} from '../../../../model/IRenderable'; import {Dimension} from '../../../../model/IRenderable';
import {FullScreenService} from '../../fullscreen.service'; import {FullScreenService} from '../../fullscreen.service';
@ -163,16 +163,18 @@ export class GalleryMapLightboxComponent implements OnChanges, AfterViewInit {
} }
}; };
if (iconTh.Available === true) { if (Config.Client.Map.useImageMarkers === true) {
FixOrientationPipe.transform(iconTh.Src, p.metadata.orientation).then((icon) => { if (iconTh.Available === true) {
obj.iconUrl = icon;
});
} else {
iconTh.OnLoad = () => {
FixOrientationPipe.transform(iconTh.Src, p.metadata.orientation).then((icon) => { FixOrientationPipe.transform(iconTh.Src, p.metadata.orientation).then((icon) => {
obj.iconUrl = icon; obj.iconUrl = icon;
}); });
}; } else {
iconTh.OnLoad = () => {
FixOrientationPipe.transform(iconTh.Src, p.metadata.orientation).then((icon) => {
obj.iconUrl = icon;
});
};
}
} }
return obj; return obj;
}); });

140
frontend/app/ui/settings/map/map.settings.component.html
View File

@ -19,74 +19,96 @@
</h5> </h5>
<div class="card-body"> <div class="card-body">
<div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div> <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>
<ng-container *ngIf="settings.enabled">
<div class="form-group row" [hidden]="simplifiedMode">
<div class="form-group row"> <label class="col-md-2 control-label" for="enableOnScrollRendering" i18n>Use image markers</label>
<label class="col-md-2 control-label" for="mapProvider" i18n>Map provider</label> <div class="col-md-10">
<div class="col-md-10"> <bSwitch
<select name="mapProvider" id="mapProvider" id="enableOnScrollRendering"
[disabled]="!settings.enabled" class="switch"
class="form-control" [(ngModel)]="settings.mapProvider" required> name="enableOnScrollRendering"
<option *ngFor="let type of mapProviders" [ngValue]="type.key">{{type.value}} [switch-on-color]="'primary'"
</option> [switch-inverse]="true"
</select> [switch-off-text]="text.Disabled"
[switch-on-text]="text.Enabled"
[switch-handle-width]="100"
[switch-label-width]="20"
[(ngModel)]="settings.useImageMarkers">
</bSwitch>
<small class="form-text text-muted" i18n>Map will use thumbnail images as markers instead of the default
pin.
</small>
</div>
</div> </div>
</div>
<div class="container custom-layer-container" *ngIf="settings.mapProvider === MapProviders.Custom">
<table class="table table-hover">
<thead>
<tr>
<th i18n>Name</th>
<th i18n>Tile Url*</th>
<th></th>
</tr>
</thead>
<tr *ngFor="let layer of settings.customLayers; let i = index">
<td><input type="text" class="form-control" placeholder="Street"
[(ngModel)]="layer.name"
[name]="'tileName-'+i" [id]="'tileName-'+i" required></td>
<td>
<input type="text" class="form-control" placeholder="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
[(ngModel)]="layer.url"
[name]="'tileUrl-'+i" [id]="'tileUrl-'+i" required>
</td>
<td>
<button [disabled]="settings.customLayers.length == 1" (click)="removeLayer(layer)"
[ngClass]="settings.customLayers.length > 1? 'btn-danger':'btn-secondary'"
class="btn float-right">
<span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
</button>
</td>
</tr>
</table>
<div class="row justify-content-end"> <div class="form-group row">
<small class="form-text text-muted custom-layer-info"> <label class="col-md-2 control-label" for="mapProvider" i18n>Map provider</label>
<ng-container i18n>*The map module will use these urls to fetch the map tiles.</ng-container> <div class="col-md-10">
</small> <select name="mapProvider" id="mapProvider"
[disabled]="!settings.enabled"
class="form-control" [(ngModel)]="settings.mapProvider" required>
<option *ngFor="let type of mapProviders" [ngValue]="type.key">{{type.value}}
</option>
</select>
</div>
</div> </div>
<div class="row justify-content-end">
<button class="btn btn-primary" <div class="container custom-layer-container" *ngIf="settings.mapProvider === MapProviders.Custom">
(click)="addNewLayer()" i18n>+ Add Layer <table class="table table-hover">
</button> <thead>
<tr>
<th i18n>Name</th>
<th i18n>Tile Url*</th>
<th></th>
</tr>
</thead>
<tr *ngFor="let layer of settings.customLayers; let i = index">
<td><input type="text" class="form-control" placeholder="Street"
[(ngModel)]="layer.name"
[name]="'tileName-'+i" [id]="'tileName-'+i" required></td>
<td>
<input type="text" class="form-control" placeholder="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
[(ngModel)]="layer.url"
[name]="'tileUrl-'+i" [id]="'tileUrl-'+i" required>
</td>
<td>
<button [disabled]="settings.customLayers.length == 1" (click)="removeLayer(layer)"
[ngClass]="settings.customLayers.length > 1? 'btn-danger':'btn-secondary'"
class="btn float-right">
<span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
</button>
</td>
</tr>
</table>
<div class="row justify-content-end">
<small class="form-text text-muted custom-layer-info">
<ng-container i18n>*The map module will use these urls to fetch the map tiles.</ng-container>
</small>
</div>
<div class="row justify-content-end">
<button class="btn btn-primary"
(click)="addNewLayer()" i18n>+ Add Layer
</button>
</div>
</div> </div>
</div>
<div class="form-group row" *ngIf="settings.mapProvider === MapProviders.Mapbox"> <div class="form-group row" *ngIf="settings.mapProvider === MapProviders.Mapbox">
<label class="col-md-2 control-label" for="mapboxAccessToken" i18n>Mapbox access token</label> <label class="col-md-2 control-label" for="mapboxAccessToken" i18n>Mapbox access token</label>
<div class="col-md-10"> <div class="col-md-10">
<input type="text" class="form-control" placeholder="Mapbox access token" <input type="text" class="form-control" placeholder="Mapbox access token"
[(ngModel)]="settings.mapboxAccessToken" [(ngModel)]="settings.mapboxAccessToken"
name="mapboxAccessToken" id="mapboxAccessToken" required> name="mapboxAccessToken" id="mapboxAccessToken" required>
<small class="form-text text-muted"> <small class="form-text text-muted">
<ng-container i18n>MapBox needs an access token to work, create one at</ng-container> <ng-container i18n>MapBox needs an access token to work, create one at</ng-container>
&nbsp;<a href="https://www.mapbox.com">https://www.mapbox.com</a>. &nbsp;<a href="https://www.mapbox.com">https://www.mapbox.com</a>.
</small> </small>
</div>
</div> </div>
</div>
</ng-container>
<button class="btn btn-success float-right" <button class="btn btn-success float-right"
[disabled]="!settingsForm.form.valid || !changed || inProgress" [disabled]="!settingsForm.form.valid || !changed || inProgress"
(click)="save()" i18n>Save (click)="save()" i18n>Save

6
frontend/app/ui/settings/metafiles/metafile.settings.component.html
View File

@ -7,12 +7,12 @@
class="switch" class="switch"
name="enabled" name="enabled"
[switch-on-color]="'success'" [switch-on-color]="'success'"
[switch-inverse]="'inverse'" [switch-inverse]="true"
[switch-off-text]="text.Disabled" [switch-off-text]="text.Disabled"
[switch-on-text]="text.Enabled" [switch-on-text]="text.Enabled"
[switch-disabled]="inProgress" [switch-disabled]="inProgress"
[switch-handle-width]="'100'" [switch-handle-width]="100"
[switch-label-width]="'20'" [switch-label-width]="20"
[(ngModel)]="settings.enabled"> [(ngModel)]="settings.enabled">
</bSwitch> </bSwitch>
</div> </div>

36
frontend/app/ui/settings/other/other.settings.component.html
View File

@ -16,11 +16,11 @@
class="switch" class="switch"
name="enable" name="enable"
[switch-on-color]="'primary'" [switch-on-color]="'primary'"
[switch-inverse]="'inverse'" [switch-inverse]="true"
[switch-off-text]="text.Disabled" [switch-off-text]="text.Disabled"
[switch-on-text]="text.Enabled" [switch-on-text]="text.Enabled"
[switch-handle-width]="'100'" [switch-handle-width]="100"
[switch-label-width]="'20'" [switch-label-width]="20"
[(ngModel)]="settings.Server.enable"> [(ngModel)]="settings.Server.enable">
</bSwitch> </bSwitch>
<small class="form-text text-muted" i18n>Runs directory scanning and thumbnail generation (only for Jimp) in a <small class="form-text text-muted" i18n>Runs directory scanning and thumbnail generation (only for Jimp) in a
@ -52,11 +52,11 @@
class="switch" class="switch"
name="enableOnScrollThumbnailPrioritising" name="enableOnScrollThumbnailPrioritising"
[switch-on-color]="'primary'" [switch-on-color]="'primary'"
[switch-inverse]="'inverse'" [switch-inverse]="true"
[switch-off-text]="text.Disabled" [switch-off-text]="text.Disabled"
[switch-on-text]="text.Enabled" [switch-on-text]="text.Enabled"
[switch-handle-width]="'100'" [switch-handle-width]="100"
[switch-label-width]="'20'" [switch-label-width]="20"
[(ngModel)]="settings.Client.enableOnScrollThumbnailPrioritising"> [(ngModel)]="settings.Client.enableOnScrollThumbnailPrioritising">
</bSwitch> </bSwitch>
<small class="form-text text-muted" i18n>Those thumbnails get higher priority that are visible on the screen <small class="form-text text-muted" i18n>Those thumbnails get higher priority that are visible on the screen
@ -72,11 +72,11 @@
class="switch" class="switch"
name="enableOnScrollRendering" name="enableOnScrollRendering"
[switch-on-color]="'primary'" [switch-on-color]="'primary'"
[switch-inverse]="'inverse'" [switch-inverse]="true"
[switch-off-text]="text.Disabled" [switch-off-text]="text.Disabled"
[switch-on-text]="text.Enabled" [switch-on-text]="text.Enabled"
[switch-handle-width]="'100'" [switch-handle-width]="100"
[switch-label-width]="'20'" [switch-label-width]="20"
[(ngModel)]="settings.Client.enableOnScrollRendering"> [(ngModel)]="settings.Client.enableOnScrollRendering">
</bSwitch> </bSwitch>
<small class="form-text text-muted" i18n>Shows only the required amount of photos at once. Renders more if <small class="form-text text-muted" i18n>Shows only the required amount of photos at once. Renders more if
@ -94,11 +94,11 @@
class="switch" class="switch"
name="enableCache" name="enableCache"
[switch-on-color]="'primary'" [switch-on-color]="'primary'"
[switch-inverse]="'inverse'" [switch-inverse]="true"
[switch-off-text]="text.Disabled" [switch-off-text]="text.Disabled"
[switch-on-text]="text.Enabled" [switch-on-text]="text.Enabled"
[switch-handle-width]="'100'" [switch-handle-width]="100"
[switch-label-width]="'20'" [switch-label-width]="20"
[(ngModel)]="settings.Client.enableCache"> [(ngModel)]="settings.Client.enableCache">
</bSwitch> </bSwitch>
<small class="form-text text-muted" i18n>Caches directory contents and search results for better performance <small class="form-text text-muted" i18n>Caches directory contents and search results for better performance
@ -115,11 +115,11 @@
class="switch" class="switch"
name="captionFirstNaming" name="captionFirstNaming"
[switch-on-color]="'primary'" [switch-on-color]="'primary'"
[switch-inverse]="'inverse'" [switch-inverse]="true"
[switch-off-text]="text.Disabled" [switch-off-text]="text.Disabled"
[switch-on-text]="text.Enabled" [switch-on-text]="text.Enabled"
[switch-handle-width]="'100'" [switch-handle-width]="100"
[switch-label-width]="'20'" [switch-label-width]="20"
[(ngModel)]="settings.Client.captionFirstNaming"> [(ngModel)]="settings.Client.captionFirstNaming">
</bSwitch> </bSwitch>
<small class="form-text text-muted" i18n>Show the caption (IPTC 120) tags from the EXIF data instead of the filenames. <small class="form-text text-muted" i18n>Show the caption (IPTC 120) tags from the EXIF data instead of the filenames.
@ -137,11 +137,11 @@
class="switch" class="switch"
name="showItemCount" name="showItemCount"
[switch-on-color]="'primary'" [switch-on-color]="'primary'"
[switch-inverse]="'inverse'" [switch-inverse]="true"
[switch-off-text]="text.Disabled" [switch-off-text]="text.Disabled"
[switch-on-text]="text.Enabled" [switch-on-text]="text.Enabled"
[switch-handle-width]="'100'" [switch-handle-width]="100"
[switch-label-width]="'20'" [switch-label-width]="20"
[(ngModel)]="settings.Client.NavBar.showItemCount"> [(ngModel)]="settings.Client.NavBar.showItemCount">
</bSwitch> </bSwitch>
<small class="form-text text-muted" i18n>Show the number of items (photos) in the folder <small class="form-text text-muted" i18n>Show the number of items (photos) in the folder

6
frontend/app/ui/settings/random-photo/random-photo.settings.component.html
View File

@ -8,12 +8,12 @@
class="switch" class="switch"
name="enabled" name="enabled"
[switch-on-color]="'success'" [switch-on-color]="'success'"
[switch-inverse]="'inverse'" [switch-inverse]="true"
[switch-off-text]="text.Disabled" [switch-off-text]="text.Disabled"
[switch-on-text]="text.Enabled" [switch-on-text]="text.Enabled"
[switch-disabled]="inProgress || (!settings.enabled && !_settingsService.isSupported())" [switch-disabled]="inProgress || (!settings.enabled && !_settingsService.isSupported())"
[switch-handle-width]="'100'" [switch-handle-width]="100"
[switch-label-width]="'20'" [switch-label-width]="20"
[(ngModel)]="settings.enabled"> [(ngModel)]="settings.enabled">
</bSwitch> </bSwitch>
</div> </div>

18
frontend/app/ui/settings/search/search.settings.component.html
View File

@ -8,12 +8,12 @@
class="switch" class="switch"
name="enabled" name="enabled"
[switch-on-color]="'success'" [switch-on-color]="'success'"
[switch-inverse]="'inverse'" [switch-inverse]="true"
[switch-off-text]="text.Disabled" [switch-off-text]="text.Disabled"
[switch-on-text]="text.Enabled" [switch-on-text]="text.Enabled"
[switch-disabled]="inProgress || (!settings.enabled && !_settingsService.isSupported())" [switch-disabled]="inProgress || (!settings.enabled && !_settingsService.isSupported())"
[switch-handle-width]="'100'" [switch-handle-width]="100"
[switch-label-width]="'20'" [switch-label-width]="20"
[(ngModel)]="settings.enabled"> [(ngModel)]="settings.enabled">
</bSwitch> </bSwitch>
</div> </div>
@ -32,11 +32,11 @@
name="autocompleteEnabled" name="autocompleteEnabled"
[switch-on-color]="'primary'" [switch-on-color]="'primary'"
[switch-disabled]="!settings.enabled" [switch-disabled]="!settings.enabled"
[switch-inverse]="'inverse'" [switch-inverse]="true"
[switch-off-text]="text.Disabled" [switch-off-text]="text.Disabled"
[switch-on-text]="text.Enabled" [switch-on-text]="text.Enabled"
[switch-handle-width]="'100'" [switch-handle-width]="100"
[switch-label-width]="'20'" [switch-label-width]="20"
[(ngModel)]="settings.AutoComplete.enabled"> [(ngModel)]="settings.AutoComplete.enabled">
</bSwitch> </bSwitch>
<small class="form-text text-muted" i18n>Show hints while typing search query</small> <small class="form-text text-muted" i18n>Show hints while typing search query</small>
@ -53,11 +53,11 @@
name="instantSearchEnabled" name="instantSearchEnabled"
[switch-on-color]="'primary'" [switch-on-color]="'primary'"
[switch-disabled]="!settings.enabled" [switch-disabled]="!settings.enabled"
[switch-inverse]="'inverse'" [switch-inverse]="true"
[switch-off-text]="text.Disabled" [switch-off-text]="text.Disabled"
[switch-on-text]="text.Enabled" [switch-on-text]="text.Enabled"
[switch-handle-width]="'100'" [switch-handle-width]="100"
[switch-label-width]="'20'" [switch-label-width]="20"
[(ngModel)]="settings.instantSearchEnabled"> [(ngModel)]="settings.instantSearchEnabled">
</bSwitch> </bSwitch>
<small class="form-text text-muted" i18n>Enables showing search results, while typing search query</small> <small class="form-text text-muted" i18n>Enables showing search results, while typing search query</small>

1
frontend/app/ui/settings/settings.service.ts
View File

@ -44,6 +44,7 @@ export class SettingsService {
}, },
Map: { Map: {
enabled: true, enabled: true,
useImageMarkers: true,
mapProvider: ClientConfig.MapProviders.OpenStreetMap, mapProvider: ClientConfig.MapProviders.OpenStreetMap,
mapboxAccessToken: '', mapboxAccessToken: '',
customLayers: [{name: 'street', url: ''}] customLayers: [{name: 'street', url: ''}]

12
frontend/app/ui/settings/share/share.settings.component.html
View File

@ -8,12 +8,12 @@
class="switch" class="switch"
name="enabled" name="enabled"
[switch-on-color]="'success'" [switch-on-color]="'success'"
[switch-inverse]="'inverse'" [switch-inverse]="true"
[switch-off-text]="text.Disabled" [switch-off-text]="text.Disabled"
[switch-on-text]="text.Enabled" [switch-on-text]="text.Enabled"
[switch-disabled]="inProgress || (!settings.enabled && !_settingsService.isSupported())" [switch-disabled]="inProgress || (!settings.enabled && !_settingsService.isSupported())"
[switch-handle-width]="'100'" [switch-handle-width]="100"
[switch-label-width]="'20'" [switch-label-width]="20"
[(ngModel)]="settings.enabled"> [(ngModel)]="settings.enabled">
</bSwitch> </bSwitch>
</div> </div>
@ -31,11 +31,11 @@
name="passwordProtected" name="passwordProtected"
[switch-on-color]="'primary'" [switch-on-color]="'primary'"
[switch-disabled]="!settings.enabled" [switch-disabled]="!settings.enabled"
[switch-inverse]="'inverse'" [switch-inverse]="true"
[switch-off-text]="text.Disabled" [switch-off-text]="text.Disabled"
[switch-on-text]="text.Enabled" [switch-on-text]="text.Enabled"
[switch-handle-width]="'100'" [switch-handle-width]="100"
[switch-label-width]="'20'" [switch-label-width]="20"
[(ngModel)]="settings.passwordProtected"> [(ngModel)]="settings.passwordProtected">
</bSwitch> </bSwitch>
<small class="form-text text-muted" i18n>Enables password protected sharing links</small> <small class="form-text text-muted" i18n>Enables password protected sharing links</small>

6
frontend/app/ui/settings/thumbnail/thumbanil.settings.component.html
View File

@ -54,11 +54,11 @@
class="switch" class="switch"
name="enabled" name="enabled"
[switch-on-color]="'primary'" [switch-on-color]="'primary'"
[switch-inverse]="'inverse'" [switch-inverse]="true"
[switch-off-text]="text.Low" [switch-off-text]="text.Low"
[switch-on-text]="text.High" [switch-on-text]="text.High"
[switch-handle-width]="'100'" [switch-handle-width]="100"
[switch-label-width]="'20'" [switch-label-width]="20"
[(ngModel)]="settings.server.qualityPriority"> [(ngModel)]="settings.server.qualityPriority">
</bSwitch> </bSwitch>
<small class="form-text text-muted" i18n>High quality may be slow. Especially with Jimp.</small> <small class="form-text text-muted" i18n>High quality may be slow. Especially with Jimp.</small>

6
frontend/app/ui/settings/video/video.settings.component.html
View File

@ -7,12 +7,12 @@
class="switch" class="switch"
name="enabled" name="enabled"
[switch-on-color]="'success'" [switch-on-color]="'success'"
[switch-inverse]="'inverse'" [switch-inverse]="true"
[switch-off-text]="text.Disabled" [switch-off-text]="text.Disabled"
[switch-on-text]="text.Enabled" [switch-on-text]="text.Enabled"
[switch-disabled]="inProgress" [switch-disabled]="inProgress"
[switch-handle-width]="'100'" [switch-handle-width]="100"
[switch-label-width]="'20'" [switch-label-width]="20"
[(ngModel)]="settings.enabled"> [(ngModel)]="settings.enabled">
</bSwitch> </bSwitch>
</div> </div>