Skip to content

Commit

Permalink
Replacing icons with https://ionic.io/ionicons lightbox info panel al…
Browse files Browse the repository at this point in the history 
…so improving lightbox controls

#587
  • Loading branch information
@bpatrik
bpatrik committed Aug 22, 2023
1 parent de6faf1 commit 41193c0
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 44 deletions.
7 changes: 5 additions & 2 deletions src/frontend/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ import {
ionArrowDownOutline,
ionArrowUpOutline,
ionCalendarOutline,
ionCameraOutline,
ionChevronBackOutline,
ionChevronDownOutline,
ionChevronForwardOutline,
Expand Down Expand Up @@ -147,6 +148,7 @@ import {
ionSettingsOutline,
ionShareSocialOutline,
ionShuffleOutline,
ionStar,
ionStarOutline,
ionSunnyOutline,
ionTextOutline,
Expand Down Expand Up @@ -201,7 +203,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
NgIconsModule.withIcons({
ionDownloadOutline, ionFunnelOutline,
ionGitBranchOutline, ionArrowDownOutline, ionArrowUpOutline,
ionStarOutline, ionCalendarOutline, ionPersonOutline, ionShuffleOutline,
ionStarOutline, ionStar, ionCalendarOutline, ionPersonOutline, ionShuffleOutline,
ionPeopleOutline,
ionMenuOutline, ionShareSocialOutline,
ionImagesOutline, ionLinkOutline, ionSearchOutline, ionHammerOutline, ionCopyOutline,
Expand All @@ -213,7 +215,8 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
ionSunnyOutline, ionMoonOutline, ionVideocamOutline,
ionInformationOutline, ionContractOutline, ionExpandOutline, ionCloseOutline,
ionTimerOutline,
ionPlayOutline, ionPauseOutline, ionVolumeMediumOutline, ionVolumeMuteOutline
ionPlayOutline, ionPauseOutline, ionVolumeMediumOutline, ionVolumeMuteOutline,
ionCameraOutline
}),
ClipboardModule,
TooltipModule.forRoot(),
Expand Down
5 changes: 0 additions & 5 deletions src/frontend/app/ui/gallery/lightbox/controls/controls.lightbox.gallery.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,6 @@

#controllers-container {
z-index: 1100;
width: 100%;
height: 100%;
left: 0;
top: 0;
position: fixed;
color: white;
}

Expand Down
7 changes: 3 additions & 4 deletions src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,20 @@
.row {
margin-left: 0;
margin-right: 0;
padding: 10px;
padding: 10px 16px 10px 16px;
}

.details-icon {
margin-top: .7rem;
font-size: x-large;
}

.details-main {
font-size: x-large;
font-size: large;
}

.details-sub {
padding: 0;
font-size: 0.875rem;
font-size: small;
}

.details-sub div {
Expand Down
58 changes: 29 additions & 29 deletions src/frontend/app/ui/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ <h2 class="modal-title" i18n>Info</h2>
</button>
</div>
<div class="row" *ngIf="galleryService.isSearchResult()">
<div class="col-2">
<span class="details-icon oi oi-folder"></span>
<div class="col-1 ps-0">
<ng-icon class="details-icon" name="ionFolderOutline"></ng-icon>
</div>
<div class="col-10">
<div class="col-11">
<a class="details-main dir-link"
title="{{DirectoryPath}}"
[routerLink]="['/gallery', DirectoryPath]"
Expand All @@ -18,10 +18,10 @@ <h2 class="modal-title" i18n>Info</h2>
</div>
</div>
<div class="row">
<div class="col-2">
<span class="details-icon oi oi-image"></span>
<div class="col-1 ps-0">
<ng-icon class="details-icon" name="ionImageOutline"></ng-icon>
</div>
<div class="col-10">
<div class="col-11">
<div class="details-main" >
{{media.name}}
</div>
Expand All @@ -34,10 +34,10 @@ <h2 class="modal-title" i18n>Info</h2>
</div>

<div class="row" *ngIf="media.metadata.creationDate">
<div class="col-2">
<span class="details-icon oi oi-calendar"></span>
<div class="col-1 ps-0">
<ng-icon class="details-icon" name="ionCalendarOutline"></ng-icon>
</div>
<div class="col-10">
<div class="col-11">
<div class="details-main">
{{ media.metadata.creationDate | date: (isThisYear() ? 'MMMM d' : 'longDate') : 'UTC' }}
</div>
Expand All @@ -49,10 +49,10 @@ <h2 class="modal-title" i18n>Info</h2>


<div class="row" *ngIf="VideoData && (VideoData.duration || VideoData.bitRate)">
<div class="col-2">
<span class="details-icon oi oi-video"></span>
<div class="col-1 ps-0">
<ng-icon class="details-icon" name="ionVideocamOutline"></ng-icon>
</div>
<div class="col-10">
<div class="col-11">
<div class="details-main">
{{"Video"}}
</div>
Expand All @@ -73,10 +73,10 @@ <h2 class="modal-title" i18n>Info</h2>


<div class="row" *ngIf="CameraData">
<div class="col-2">
<span class="details-icon oi oi-camera-slr"></span>
<div class="col-1 ps-0">
<ng-icon class="details-icon" name="ionCameraOutline"></ng-icon>
</div>
<div class="col-10">
<div class="col-11">
<div class="details-main">
{{CameraData.model || CameraData.make || "Camera"}}
</div>
Expand All @@ -95,32 +95,32 @@ <h2 class="modal-title" i18n>Info</h2>
</div>

<div class="row" *ngIf="Rating">
<div class="col-2" title="rating" p18n-rating>
<span class="details-icon oi oi-star"></span>
<div class="col-1 ps-0" title="rating" p18n-rating>
<ng-icon class="details-icon" name="ionStarOutline"></ng-icon>
</div>
<div class="col-10">
<div class="details-main mt-2" [title]="Rating + ' stars'">
<span *ngFor="let stars of [].constructor(Rating)" class="oi oi-star text-body me-1"></span>
<span *ngFor="let stars of [].constructor(5-Rating)" class="oi oi-star text-body-tertiary me-1"></span>
<div class="col-11">
<div class="details-main" [title]="Rating + ' stars'">
<ng-icon *ngFor="let stars of [].constructor(Rating)" class="text-body me-1" name="ionStar"></ng-icon>
<ng-icon *ngFor="let stars of [].constructor(5-Rating)" class="text-body-tertiary me-1" name="ionStarOutline"></ng-icon>
</div>
</div>
</div>

<div class="row" *ngIf="keywords">
<div class="col-2">
<span class="details-icon oi oi-tags"></span>
<div class="col-1 ps-0">
<ng-icon class="details-icon" name="ionPricetagOutline"></ng-icon>
</div>
<div class="col-10 keywords">
<div class="col-11 keywords">
<ng-template ngFor let-keyword [ngForOf]="keywords" let-last="last">
<a *ngIf="searchEnabled"
[routerLink]="['/search', getTextSearchQuery(keyword.value,keyword.type)]" [ngSwitch]="keyword.type">
<ng-template [ngSwitchCase]="SearchQueryTypes.keyword">#</ng-template><!--
-->
<ng-template [ngSwitchCase]="SearchQueryTypes.person"><span class="oi oi-person"></span></ng-template><!--
<ng-template [ngSwitchCase]="SearchQueryTypes.person"><ng-icon name="ionPersonOutline"></ng-icon></ng-template><!--
-->{{keyword.value}}</a>
<span *ngIf="!searchEnabled" [ngSwitch]="keyword.type">
<ng-template [ngSwitchCase]="SearchQueryTypes.keyword">#</ng-template><!--
--><ng-template [ngSwitchCase]="SearchQueryTypes.person"><span class="oi oi-person"></span></ng-template><!--
--><ng-template [ngSwitchCase]="SearchQueryTypes.person"><ng-icon name="ionPersonOutline"></ng-icon></ng-template><!--
-->{{keyword.value}}</span>
<ng-template [ngIf]="!last">,&#32;</ng-template>
</ng-template>
Expand All @@ -129,10 +129,10 @@ <h2 class="modal-title" i18n>Info</h2>


<div class="row" *ngIf="hasTextPositionData() || hasGPS()">
<div class="col-2">
<span class="details-icon oi oi-map-marker"></span>
<div class="col-1 ps-0">
<ng-icon class="details-icon" name="ionLocationOutline"></ng-icon>
</div>
<div class="col-10">
<div class="col-11">
<div class="details-main">
{{getPositionText() || "Position"}}
</div>
Expand Down
18 changes: 14 additions & 4 deletions src/frontend/app/ui/gallery/lightbox/lightbox.gallery.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
public status: LightboxStates = LightboxStates.Closed;
public infoPanelVisible = false;
public infoPanelWidth = 0;
private infoPanelMaxWidth = 400;
public animating = false;
public photoFrameDim = {width: 1, height: 1, aspect: 1};
public videoSourceError = false;
Expand Down Expand Up @@ -93,7 +94,15 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
}
}

private updateInfoPanelWidth() {
this.infoPanelMaxWidth = Math.min(400, Math.ceil(window.innerWidth + 1));
if ((window.innerWidth - this.infoPanelMaxWidth) < this.infoPanelMaxWidth * 0.3) {
this.infoPanelMaxWidth = Math.ceil(window.innerWidth + 1);
}
}

ngOnInit(): void {
this.infoPanelMaxWidth = 1000;
this.updatePhotoFrameDim();
this.subscription.route = this.route.queryParams.subscribe(
(params: Params): any => {
Expand Down Expand Up @@ -286,7 +295,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
}

public toggleInfoPanel(): void {
if (this.infoPanelWidth !== 400) {
if (this.infoPanelWidth !== this.infoPanelMaxWidth) {
this.showInfoPanel();
} else {
this.hideInfoPanel();
Expand Down Expand Up @@ -315,7 +324,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
{
top: 0,
left: 0,
width: Math.max(this.photoFrameDim.width - 400, 0),
width: Math.max(this.photoFrameDim.width - this.infoPanelMaxWidth, 0),
height: this.photoFrameDim.height,
} as Dimension,
{
Expand All @@ -333,12 +342,13 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
}

showInfoPanel(): void {
this.updateInfoPanelWidth();
this.infoPanelVisible = true;

const starPhotoPos = this.calcLightBoxPhotoDimension(
this.activePhoto.gridMedia.media
);
this.infoPanelWidth = 400;
this.infoPanelWidth = this.infoPanelMaxWidth;
this.updatePhotoFrameDim();
const endPhotoPos = this.calcLightBoxPhotoDimension(
this.activePhoto.gridMedia.media
Expand All @@ -348,7 +358,7 @@ export class GalleryLightboxComponent implements OnDestroy, OnInit {
{
top: 0,
left: 0,
width: this.photoFrameDim.width + 400,
width: this.photoFrameDim.width + this.infoPanelMaxWidth,
height: this.photoFrameDim.height,
} as Dimension,
{
Expand Down

0 comments on commit 41193c0

Please sign in to comment.