diff --git a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css index 72a62b1b..18204580 100644 --- a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css +++ b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css @@ -24,23 +24,10 @@ height: 100%; left: 0; top: 0; - opacity: 1.0; position: fixed; color: white; - transition: width 0.3s ease-in-out, opacity 1s; - -webkit-transition: width 0.3s ease-in-out, opacity 1s; - -o-transition: width 0.3s ease-in-out, opacity 1s; - -ms-transition: width 0.3s ease-in-out, opacity 1s; - -moz-transition: width 0.3s ease-in-out, opacity 1s; } -#controllers-container.dim-controls { - opacity: 0.1; -} - -#controllers-container.dim-controls-video { - opacity: 0; -} #swipeable-container { z-index: 2; @@ -55,14 +42,26 @@ text-align: right; } +.btn-group { + vertical-align: initial; +} + .controls { height: initial; text-align: right; width: 100%; padding: 5px; font-size: large; + opacity: 1; + transition: width 0.3s ease-in-out, opacity 1s; + -webkit-transition: width 0.3s ease-in-out, opacity 1s; + -o-transition: width 0.3s ease-in-out, opacity 1s; + -ms-transition: width 0.3s ease-in-out, opacity 1s; + -moz-transition: width 0.3s ease-in-out, opacity 1s; } + + .controls .control-button { margin-left: 0.2em; margin-right: 0.2em; @@ -70,6 +69,7 @@ padding: 0 0.5rem; font-size: 1.5rem; color: white; + background-color: transparent; cursor: pointer; } @@ -95,6 +95,7 @@ border-radius: 5px !important; } + .controls-zoom { bottom: 0; z-index: 3; @@ -236,16 +237,11 @@ input[type="range"].zoom-progress::-moz-range-track { } .face { - opacity: 0.7; + opacity: 0.0; position: absolute; transition: opacity 0.5s; } -#controllers-container.dim-controls .face, -#controllers-container.dim-controls-video .face { - opacity: 0; -} - .face-name { white-space: nowrap; color: white; @@ -262,8 +258,23 @@ input[type="range"].zoom-progress::-moz-range-track { border-radius: 5px !important; } +.face.controls-nodim{ + opacity: 0.7; +} + .face:hover { opacity: 1.0; text-decoration: none; } +.dim-controls { + opacity: 0.0; +} +.controls-caption.controls-nodim{ + opacity: 0.7; +} +.controls:hover{ + opacity: 1; +} + + diff --git a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html index e58d302b..82d391fc 100644 --- a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html +++ b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.html @@ -1,27 +1,21 @@ -
-
{{Title}}
-
- - - +
+
{{Title}}
-
+ +
-
@@ -33,6 +27,63 @@
+
+ + +
+
@@ -41,6 +92,7 @@
+
- - -
+
@@ -110,7 +164,7 @@
-
-
diff --git a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts index 93291b02..28d6a34b 100644 --- a/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts +++ b/src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.ts @@ -40,7 +40,6 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges { readonly MAX_ZOOM = 10; @ViewChild('root', {static: false}) root: ElementRef; - @Output() closed = new EventEmitter(); @Output() toggleInfoPanel = new EventEmitter(); @Output() toggleFullScreen = new EventEmitter(); @@ -58,7 +57,8 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges { public playBackState: PlayBackStates = PlayBackStates.Paused; public PlayBackStates = PlayBackStates; public controllersDimmed = false; - public controllersAlwaysOn = false; + public captionAlwaysOn = false; + public facesAlwaysOn = false; public controllersVisible = true; public drag = {x: 0, y: 0}; public SearchQueryTypes = SearchQueryTypes; @@ -116,10 +116,6 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges { return this.root.nativeElement.width; } - public containerHeight(): void { - return this.root.nativeElement.height; - } - ngOnInit(): void { this.timer = timer(1000, 2000); } @@ -244,7 +240,23 @@ export class ControlsLightboxComponent implements OnDestroy, OnInit, OnChanges { break; case 'c': case 'C': - this.controllersAlwaysOn = !this.controllersAlwaysOn; + this.captionAlwaysOn = !this.captionAlwaysOn; + break; + case 'a': + case 'A': + this.facesAlwaysOn = !this.facesAlwaysOn; + break; + case 'd': + case 'D': + if(event.shiftKey){ + const link = document.createElement('a'); + link.setAttribute('type', 'hidden'); + link.href = this.activePhoto.gridMedia.getMediaPath(); + link.download = this.activePhoto.gridMedia.media.name; + document.body.appendChild(link); + link.click(); + link.remove(); + } break; case 'Escape': // escape this.closed.emit();