self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2024-11-28 08:58:49 +02:00
Code Issues Releases Activity

fixing lightbox controls background

Browse Source
This commit is contained in:
Patrik J. Braun 2022-12-15 23:58:41 +01:00
parent 9ee05c3ada
commit 751e0dcd57
7 changed files with 143 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
package-lock.json generated
View File

@ -27,7 +27,7 @@
"sharp": "0.31.2",
"ts-exif-parser": "0.2.2",
"ts-node-iptc": "1.0.11",
"typeconfig": "2.0.24",
"typeconfig": "2.0.25",
"typeorm": "0.3.10",
"xml2js": "0.4.23"
},
@ -14587,9 +14587,12 @@
}
},
"node_modules/minimist": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
"integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
"version": "1.2.7",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
"integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/minipass": {
"version": "3.1.6",
@ -20822,18 +20825,13 @@
}
},
"node_modules/typeconfig": {
"version": "2.0.24",
"resolved": "https://registry.npmjs.org/typeconfig/-/typeconfig-2.0.24.tgz",
"integrity": "sha512-djBNV0x/ZmOGvbq7/LhTG2mHfkZL6Lfox1MJ8g8Kvyxa2OP0tD0jJNVUX1lGzjBxw0G99uWDYCWFn08LCil+cA==",
"version": "2.0.25",
"resolved": "https://registry.npmjs.org/typeconfig/-/typeconfig-2.0.25.tgz",
"integrity": "sha512-f9PgNmhQEI0C3ZcndHECiEvqYMSecQyqynBWhNGvgeRGqzD6Vm+QTCBv0sIUllF0S0UovwhDGRYyd4Q6XKDuzA==",
"dependencies": {
"minimist": "1.2.5"
"minimist": "1.2.7"
}
},
"node_modules/typeconfig/node_modules/minimist": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
},
"node_modules/typed-assert": {
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/typed-assert/-/typed-assert-1.0.9.tgz",
@ -33344,9 +33342,9 @@
}
},
"minimist": {
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
"integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
"version": "1.2.7",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
"integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g=="
},
"minipass": {
"version": "3.1.6",
@ -38128,18 +38126,11 @@
}
},
"typeconfig": {
"version": "2.0.24",
"resolved": "https://registry.npmjs.org/typeconfig/-/typeconfig-2.0.24.tgz",
"integrity": "sha512-djBNV0x/ZmOGvbq7/LhTG2mHfkZL6Lfox1MJ8g8Kvyxa2OP0tD0jJNVUX1lGzjBxw0G99uWDYCWFn08LCil+cA==",
"version": "2.0.25",
"resolved": "https://registry.npmjs.org/typeconfig/-/typeconfig-2.0.25.tgz",
"integrity": "sha512-f9PgNmhQEI0C3ZcndHECiEvqYMSecQyqynBWhNGvgeRGqzD6Vm+QTCBv0sIUllF0S0UovwhDGRYyd4Q6XKDuzA==",
"requires": {
"minimist": "1.2.5"
},
"dependencies": {
"minimist": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
}
"minimist": "1.2.7"
}
},
"typed-assert": {

2
package.json
View File

@ -49,7 +49,7 @@
"sharp": "0.31.2",
"ts-exif-parser": "0.2.2",
"ts-node-iptc": "1.0.11",
"typeconfig": "2.0.24",
"typeconfig": "2.0.25",
"xml2js": "0.4.23",
"typeorm": "0.3.10"
},

2
src/common/config/private/PrivateConfig.ts
View File

@ -112,7 +112,7 @@ export class UserConfig {
@SubConfigClass()
export class ServerDataBaseConfig {
@ConfigProperty<DatabaseType, IPrivateConfig>({
@ConfigProperty<DatabaseType, IPrivateConfig, string>({
type: DatabaseType,
onNewValue: (value, config) => {
if (config && value === DatabaseType.memory) {

2
src/common/config/public/ClientConfig.ts
View File

@ -77,7 +77,7 @@ export class MapLayers {
@SubConfigClass()
export class ClientMapConfig {
@ConfigProperty<boolean, IPrivateConfig>({
@ConfigProperty<boolean, IPrivateConfig, string>({
onNewValue: (value, config) => {
if (value === false) {
config.Client.MetaFile.gpx = false;

2
src/common/config/public/Config.ts
View File

@ -19,7 +19,7 @@ declare namespace ServerInject {
export const ConfigInject: ClientClass;
}
export const Config: IWebConfigClass & ClientClass =
export const Config: IWebConfigClass<string> & ClientClass =
WebConfigClassBuilder.attachInterface(new ClientClass());
if (

16
src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css
View File

@ -50,7 +50,6 @@
height: initial;
text-align: right;
width: 100%;
padding: 5px;
font-size: large;
opacity: 1;
transition: width 0.3s ease-in-out, opacity 1s;
@ -60,6 +59,12 @@
-moz-transition: width 0.3s ease-in-out, opacity 1s;
}
.controls-background {
padding: 5px;
display: inline-block;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.controls .control-button {
@ -103,7 +108,6 @@
}
.controls-playback {
padding-right: 15px;
bottom: 0;
z-index: 3;
position: absolute;
@ -258,7 +262,7 @@ input[type="range"].zoom-progress::-moz-range-track {
border-radius: 5px !important;
}
.face.controls-nodim{
.face.controls-nodim {
opacity: 0.7;
}
@ -270,10 +274,12 @@ input[type="range"].zoom-progress::-moz-range-track {
.dim-controls {
opacity: 0.0;
}
.controls-caption.controls-nodim{
.controls-caption.controls-nodim {
opacity: 0.7;
}
.controls:hover{
.controls:hover {
opacity: 1;
}

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

@ -5,111 +5,112 @@
<div [class.dim-controls]="controllersDimmed"
class="controls controls-top">
<div class="controls-background">
<div class="highlight control-button" (click)="toggleInfoPanel.emit()"
title="info key: i" i18n-title>
<span class="oi oi-info"></span>
</div>
<div class="highlight control-button" (click)="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()"
title="toggle fullscreen, key: f" i18n-title>
<div *ngIf="fullScreenService.isFullScreenEnabled()"
class="highlight control-button"
(click)="toggleFullScreen.emit()"
title="toggle fullscreen, key: f" i18n-title>
<span class="oi oi-fullscreen-exit">
</span>
</div>
</div>
<div *ngIf="!fullScreenService.isFullScreenEnabled()"
class="highlight control-button"
(click)="toggleFullScreen.emit(true)"
title="toggle fullscreen, key: f" i18n-title>
<div *ngIf="!fullScreenService.isFullScreenEnabled()"
class="highlight control-button"
(click)="toggleFullScreen.emit(true)"
title="toggle fullscreen, key: f" i18n-title>
<span class="oi oi-fullscreen-enter">
</span>
</div>
</div>
<div class="btn-group" dropdown [insideClick]="true">
<button id="button-basic" dropdownToggle type="button"
class="border-0 highlight control-button"
data-bs-auto-close="outside"
aria-controls="dropdown-basic">
<span class="oi oi-menu"></span>
</button>
<ul id="dropdown-basic" *dropdownMenu class="dropdown-menu dropdown-menu-right"
role="menu" aria-labelledby="button-basic">
<li role="menuitem">
<a *ngIf="activePhoto"
[href]="activePhoto.gridMedia.getMediaPath()"
[download]="activePhoto.gridMedia.media.name"
class="dropdown-item">
<span class="oi oi-data-transfer-download pe-2" i18n></span> Download
<small>(shift + D)</small>
</a>
</li>
<li role="menuitem">
<div class="dropdown-item d-flex justify-content-between">
<span title="key: c" i18n-title i18n>Show caption</span>
<bSwitch
class="switch ps-2"
name="caption-switch"
switch-on-color="success"
[switch-inverse]="true"
switch-off-text="on hover"
switch-on-text="always"
i18n-switch-off-text
i18n-switch-on-text
[switch-handle-width]="100"
[switch-label-width]="20"
[(ngModel)]="lightboxService.captionAlwaysOn">
</bSwitch>
</div>
</li>
<li role="menuitem ">
<div class="dropdown-item d-flex justify-content-between">
<span title="key: a" i18n-title i18n>Show faces</span>
<bSwitch
class="switch ps-2"
name="faces-switch"
switch-on-color="success"
[switch-inverse]="true"
switch-off-text="on hover"
switch-on-text="always"
i18n-switch-off-text
i18n-switch-on-text
[switch-handle-width]="100"
[switch-label-width]="20"
[(ngModel)]="lightboxService.facesAlwaysOn">
</bSwitch>
</div>
</li>
<li
*ngIf="activePhoto && activePhoto.gridMedia.isVideo()"
role="menuitem ">
<div class="dropdown-item d-flex justify-content-between">
<span title="key: l" i18n-title i18n>Play videos</span>
<bSwitch
class="switch ps-2"
name="faces-switch"
switch-on-color="success"
[switch-inverse]="true"
switch-off-text="once"
switch-on-text="loop"
i18n-switch-off-text
i18n-switch-on-text
[switch-handle-width]="100"
[switch-label-width]="20"
[(ngModel)]="lightboxService.loopVideos">
</bSwitch>
</div>
</li>
</ul>
</div>
<div class="btn-group" dropdown [insideClick]="true">
<button id="button-basic" dropdownToggle type="button"
class="border-0 highlight control-button"
data-bs-auto-close="outside"
aria-controls="dropdown-basic">
<span class="oi oi-menu"></span>
</button>
<ul id="dropdown-basic" *dropdownMenu class="dropdown-menu dropdown-menu-right"
role="menu" aria-labelledby="button-basic">
<li role="menuitem">
<a *ngIf="activePhoto"
[href]="activePhoto.gridMedia.getMediaPath()"
[download]="activePhoto.gridMedia.media.name"
class="dropdown-item">
<span class="oi oi-data-transfer-download pe-2" i18n></span> Download
<small>(shift + D)</small>
</a>
</li>
<li role="menuitem">
<div class="dropdown-item d-flex justify-content-between">
<span title="key: c" i18n-title i18n>Show caption</span>
<bSwitch
class="switch ps-2"
name="caption-switch"
switch-on-color="success"
[switch-inverse]="true"
switch-off-text="on hover"
switch-on-text="always"
i18n-switch-off-text
i18n-switch-on-text
[switch-handle-width]="100"
[switch-label-width]="20"
[(ngModel)]="lightboxService.captionAlwaysOn">
</bSwitch>
</div>
</li>
<li role="menuitem ">
<div class="dropdown-item d-flex justify-content-between">
<span title="key: a" i18n-title i18n>Show faces</span>
<bSwitch
class="switch ps-2"
name="faces-switch"
switch-on-color="success"
[switch-inverse]="true"
switch-off-text="on hover"
switch-on-text="always"
i18n-switch-off-text
i18n-switch-on-text
[switch-handle-width]="100"
[switch-label-width]="20"
[(ngModel)]="lightboxService.facesAlwaysOn">
</bSwitch>
</div>
</li>
<li
*ngIf="activePhoto && activePhoto.gridMedia.isVideo()"
role="menuitem ">
<div class="dropdown-item d-flex justify-content-between">
<span title="key: l" i18n-title i18n>Play videos</span>
<bSwitch
class="switch ps-2"
name="faces-switch"
switch-on-color="success"
[switch-inverse]="true"
switch-off-text="once"
switch-on-text="loop"
i18n-switch-off-text
i18n-switch-on-text
[switch-handle-width]="100"
[switch-label-width]="20"
[(ngModel)]="lightboxService.loopVideos">
</bSwitch>
</div>
</li>
</ul>
</div>
<div class="highlight control-button"
(click)="closeLightbox()"
title="close, key: Escape" i18n-title>
<div class="highlight control-button"
(click)="closeLightbox()"
title="close, key: Escape" i18n-title>
<span class="oi oi-x">
</span>
</div>
</div>
</div>
@ -186,19 +187,21 @@
<div [class.dim-controls]="controllersDimmed" class="controls controls-playback"
*ngIf="zoom == 1 && activePhoto && activePhoto.gridMedia.isPhoto()">
<span class="oi oi-media-pause highlight control-button"
[ngClass]="playBackState == PlayBackStates.Paused ? 'button-disabled':''"
(click)="pause()"
title="pause"></span>
<span
class="oi oi-media-play highlight control-button"
[ngClass]="playBackState == PlayBackStates.Play ? 'button-active':''"
(click)="play()"
title="auto play"></span>
<span class="oi oi-media-skip-forward highlight control-button"
[ngClass]="playBackState == PlayBackStates.FastForward ? 'button-active':''"
(click)="fastForward()"
title="fast auto play"></span>
<div class="controls-background">
<span class="oi oi-media-pause highlight control-button"
[ngClass]="playBackState == PlayBackStates.Paused ? 'button-disabled':''"
(click)="pause()"
title="pause"></span>
<span
class="oi oi-media-play highlight control-button"
[ngClass]="playBackState == PlayBackStates.Play ? 'button-active':''"
(click)="play()"
title="auto play"></span>
<span class="oi oi-media-skip-forward highlight control-button"
[ngClass]="playBackState == PlayBackStates.FastForward ? 'button-active':''"
(click)="fastForward()"
title="fast auto play"></span>
</div>
</div>
<div [class.dim-controls]="controllersDimmed" class="controls controls-big-play"