self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2024-12-23 01:27:14 +02:00
Code Issues Releases Activity

Replacing icons with https://ionic.io/ionicons in rest of the app

Browse Source 
#587
This commit is contained in:
Patrik J. Braun 2023-08-24 22:15:59 +02:00
parent 3918dd2384
commit c8242a7c7d
4 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/frontend/app/ui/frame/frame.component.css
View File

@ -60,6 +60,11 @@ ng-icon {
vertical-align: text-top;
}
.btn-scroll-up ng-icon {
font-size: x-large;
margin: -0.2em;
}
a.dropdown-item span.badge, button.dropdown-item span.badge {
margin-left: -0.8rem;

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

@ -58,13 +58,12 @@
}
.controls-background {
padding: 5px;
display: inline-block;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.controls .control-button {
margin-left: 0.1em;
margin-right: 0.1em;

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

@ -4,8 +4,8 @@
*ngIf="Title">{{Title}}</div>
<div [class.dim-controls]="controllersDimmed"
class="controls controls-top">
<div class="controls-background">
class="controls controls-top pt-1">
<div class="controls-background rounded-start-bottom pe-1">
<div class="highlight control-button" (click)="toggleInfoPanel.emit()"
title="info key: i" i18n-title>
<ng-icon class="align-top" size="1.2em" name="ionInformationOutline"></ng-icon>
@ -180,7 +180,7 @@
</div>
<div [class.dim-controls]="controllersDimmed" class="controls controls-zoom row mb-2" *ngIf="Zoom > 1">
<div [class.dim-controls]="controllersDimmed" class="controls controls-zoom row mb-3" *ngIf="Zoom > 1">
<div class="col-1 col-md-4">
<ng-icon name="ionRemoveOutline" class="float-end highlight"
(click)="zoomOut()" i18n-title title="Zoom out, key: '-'"></ng-icon>
@ -197,29 +197,29 @@
<div [class.dim-controls]="controllersDimmed" class="controls controls-playback"
*ngIf="zoom == 1 && activePhoto && activePhoto.gridMedia.isPhoto()">
<div class="controls-background mb-2 me-2">
<div class="controls-background rounded-start-top pe-1 pb-1">
<ng-icon
*ngIf="playBackState == PlayBackStates.Play"
name="ionPauseOutline"
class=" highlight control-button button-active"
class=" highlight control-button button-active me-2 mb-2"
(click)="pause()"
title="Pause" i18n-title></ng-icon>
<ng-icon
*ngIf="playBackState == PlayBackStates.Paused"
name="ionPlayOutline"
class="highlight control-button"
class="highlight control-button me-2 mb-2"
(click)="play()"
title="Auto play" i18n-title></ng-icon>
</div>
</div>
<div [class.dim-controls]="controllersDimmed" class="controls controls-big-play mb-2"
<div [class.dim-controls]="controllersDimmed" class="controls controls-big-play mb-3"
*ngIf="activePhoto && activePhoto.gridMedia.isVideo() && mediaElement.Paused">
<ng-icon name="ionPlayOutline"></ng-icon>
</div>
<div class="controls controls-video row mb-2" *ngIf="activePhoto && activePhoto.gridMedia.isVideo()">
<div class="controls controls-video row mb-3" *ngIf="activePhoto && activePhoto.gridMedia.isVideo()">
<div class="col-1">
<ng-icon [name]="!mediaElement.Paused ? 'ionPauseOutline' :'ionPlayOutline'"
(click)="mediaElement.playPause()"></ng-icon>

8
src/frontend/styles.css
View File

@ -60,6 +60,14 @@ ng-icon svg {
--ng-icon__stroke-width: 40;
}
.rounded-start-bottom {
border-bottom-left-radius: var(--bs-border-radius) !important;
}
.rounded-start-top {
border-top-left-radius: var(--bs-border-radius) !important;
}
/*
This is mostly btn-dark + border fix