From c81e070f1c373ce52484c1cbb760871230b961f8 Mon Sep 17 00:00:00 2001 From: "Patrik J. Braun" Date: Wed, 19 Dec 2018 21:41:01 +0100 Subject: [PATCH] finishing zoom bar design --- docs/index.html | 9 ++++++ .../lightbox/lightbox.gallery.component.css | 30 +++++++++++++++++-- .../lightbox/lightbox.gallery.component.html | 12 ++++++-- .../lightbox/lightbox.gallery.component.ts | 21 +++++++++++-- 4 files changed, 63 insertions(+), 9 deletions(-) diff --git a/docs/index.html b/docs/index.html index 11a10c18..d240648e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -12,6 +12,15 @@ + + + diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.css b/frontend/app/gallery/lightbox/lightbox.gallery.component.css index 28435779..98256b7d 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.css +++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.css @@ -204,15 +204,39 @@ app-info-panel { bottom: 0; position: absolute; margin-bottom: 10px; + margin-right: 0; + margin-left: 0; } .zoom-progress-wrapper { + margin-top: 3px; height: 11px; border: 1px solid white; padding: 0; } -.zoom-progress { - height: 10px; - background: white; + + + +input[type="range"].zoom-progress { + height: 11px; + margin-top: 3px; + border: 1px solid white; + background: transparent; + padding: 0; +} + +input[type="range"].zoom-progress::-webkit-slider-runnable-track { + background: transparent; +} + +input[type="range"].zoom-progress::-moz-range-track { + background: transparent; +} + + + + +.controls-zoom .oi { + cursor: pointer; } diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.html b/frontend/app/gallery/lightbox/lightbox.gallery.component.html index 9bfea6a7..1d216891 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.html +++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.html @@ -80,9 +80,15 @@ class="oi oi-chevron-right">
-
-
+
+ +
+ + +
+
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts index fdb8a0de..14fe412e 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts +++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts @@ -43,7 +43,7 @@ export enum PlayBackStates { }) export class GalleryLightboxComponent implements OnDestroy, OnInit { - readonly MAX_ZOOM=10; + readonly MAX_ZOOM = 10; @ViewChild('photo') mediaElement: GalleryLightboxMediaComponent; @ViewChild('lightbox') lightboxElement: ElementRef; @@ -187,7 +187,11 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit { return; } this.showControls(); - this.setZoom(this.zoom + ($event.deltaY < 0 ? this.zoom / 10 : -this.zoom / 10)); + if ($event.deltaY < 0) { + this.zoomIn(); + } else { + this.zoomOut(); + } } @HostListener('pinch', ['$event']) @@ -229,6 +233,17 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit { } } + zoomIn() { + this.showControls(); + this.setZoom(this.zoom + this.zoom / 10); + + } + + zoomOut() { + this.showControls(); + this.setZoom(this.zoom - this.zoom / 10); + } + private setZoom(zoom: number) { if (!this.activePhoto || this.activePhoto.gridPhoto.isVideo()) { @@ -300,7 +315,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit { this.zoom = 1; } if (this.zoom > this.MAX_ZOOM) { - this.zoom = this.MAX_ZOOM; + this.zoom = this.MAX_ZOOM; } fixDrag(this.drag); fixDrag(this.prevDrag);