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

Use tap instead of click for better IOS touch navigation #493

Browse Source
This commit is contained in:
Patrik J. Braun 2022-12-17 12:28:10 +01:00
parent 5fe327af0d
commit f2504f60d2
1 changed files with 18 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html
View File

@ -6,14 +6,15 @@
<div [class.dim-controls]="controllersDimmed"
class="controls controls-top">
<div class="controls-background">
<div class="highlight control-button" (click)="toggleInfoPanel.emit()"
<div class="highlight control-button"
(tap)="toggleInfoPanel.emit()"
title="info key: i" i18n-title>
<span class="oi oi-info"></span>
</div>
<div *ngIf="fullScreenService.isFullScreenEnabled()"
class="highlight control-button"
(click)="toggleFullScreen.emit()"
(tap)="toggleFullScreen.emit()"
title="toggle fullscreen, key: f" i18n-title>
<span class="oi oi-fullscreen-exit">
</span>
@ -21,16 +22,17 @@
<div *ngIf="!fullScreenService.isFullScreenEnabled()"
class="highlight control-button"
(click)="toggleFullScreen.emit(true)"
(tap)="toggleFullScreen.emit(true)"
title="toggle fullscreen, key: f" i18n-title>
<span class="oi oi-fullscreen-enter">
</span>
</div>
<div class="btn-group" dropdown [insideClick]="true">
<button id="button-basic" dropdownToggle type="button"
<div class="btn-group" dropdown #dropdown="bs-dropdown" [insideClick]="true">
<button id="button-basic" type="button"
class="border-0 highlight control-button"
data-bs-auto-close="outside"
(tap)="dropdown.toggle(true)"
aria-controls="dropdown-basic">
<span class="oi oi-menu"></span>
</button>
@ -118,7 +120,7 @@
</div>
<div class="highlight control-button"
(click)="closeLightbox()"
(tap)="closeLightbox()"
title="close, key: Escape" i18n-title>
<span class="oi oi-x">
@ -131,10 +133,9 @@
(swipeleft)="zoom == 1 && nextPhoto.emit()"
(swiperight)="zoom == 1 && previousPhoto.emit()"
(swipeup)="zoom == 1 && closed.emit()"
(tap)="tap($event)"
(tap)="tap($event);mediaElement.playPause()"
(pan)="pan($any($event))"
(wheel)="wheel($event)"
(click)="mediaElement.playPause()">
(wheel)="wheel($event)">
<div class="faces-container"
[style.top.px]="photoFrameDim.height/2 + drag.y"
@ -176,23 +177,23 @@
<div [class.dim-controls]="controllersDimmed" class="navigation-arrow highlight"
*ngIf="navigation.hasPrev && zoom == 1" title="key: left arrow" id="leftArrow" i18n-title
(click)="previousPhoto.emit()"><span
(tap)="previousPhoto.emit()"><span
class="oi oi-chevron-left"></span></div>
<div [class.dim-controls]="controllersDimmed" class="navigation-arrow highlight"
*ngIf="navigation.hasNext && zoom == 1" title="key: right arrow" id="rightArrow" i18n-title
(click)="nextPhoto.emit()"><span
(tap)="nextPhoto.emit()"><span
class="oi oi-chevron-right"></span></div>
<div [class.dim-controls]="controllersDimmed" class="controls controls-zoom row" *ngIf="Zoom > 1">
<div class="col-1 col-md-4">
<span (click)="zoomOut()" i18n-title title="Zoom out, key: '-'"
<span (tap)="zoomOut()" i18n-title title="Zoom out, key: '-'"
class="oi oi-zoom-out float-end"></span>
</div>
<input type="range"
[(ngModel)]="Zoom" min="1" [max]="MAX_ZOOM" step="0.1"
value="1" class="col-10 col-md-4 zoom-progress">
<div class="col-1 col-md-4">
<span (click)="zoomIn()" i18n-title title="Zoom in, key: '+'"
<span (tap)="zoomIn()" i18n-title title="Zoom in, key: '+'"
class="oi oi-zoom-in float-left"></span>
</div>
</div>
@ -204,41 +205,13 @@
<span
*ngIf="playBackState == PlayBackStates.Play"
class="oi oi-media-pause highlight control-button button-active"
(click)="pause()"
(tap)="pause()"
title="pause"></span>
<span
*ngIf="playBackState == PlayBackStates.Paused"
class="oi oi-media-play highlight control-button"
(click)="play()"
(tap)="play()"
title="auto play"></span>
<!--
<span *ngIf="playBackState == PlayBackStates.Play"
class="btn-group highlight control-button"
dropdown
title="Playback speed"
i18n-title
[dropup]="true">
<div id="button-duration"
dropdownToggle
data-bs-auto-close="outside"
aria-controls="dropdown-timer">
<span class="oi oi-clock"></span>
</div>
<ul id="dropdown-timer"
*dropdownMenu
class="dropdown-menu dropdown-menu-right"
role="menu"
aria-labelledby="button-duration">
<li *ngFor="let duration of playBackDurations"
role="menuitem"
(click)="setPlayBackDuration(duration)">
<a class="dropdown-item"
[class]="selectedPlayBackDuration === duration ? 'active' : ''">
{{duration}}s
</a>
</li>
</ul>
</span>-->
</div>
</div>
@ -250,12 +223,12 @@
<div class="controls controls-video row" *ngIf="activePhoto && activePhoto.gridMedia.isVideo()">
<span class="oi col-1"
[ngClass]="!mediaElement.Paused ? 'oi-media-pause':'oi-media-play'"
(click)="mediaElement.playPause()"></span>
(tap)="mediaElement.playPause()"></span>
<input type="range" [(ngModel)]="mediaElement.VideoProgress"
min="0" max="100" step="0.1" class="col video-progress">
<span class="oi col-1"
[ngClass]="mediaElement.Muted ? 'oi-volume-off':'oi-volume-high'"
(click)="mediaElement.mute()"></span>
(tap)="mediaElement.mute()"></span>
<input type="range"
[(ngModel)]="mediaElement.VideoVolume" min="0" max="1" step="0.1"
value="1" class="col-2 col-md-1 volume">