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

Improving dark theme in the navigation bar #587 #642

Browse Source
This commit is contained in:
Patrik J. Braun 2023-03-15 23:59:42 +01:00
parent a779e6b80c
commit 286c3f4a87
4 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -508,9 +508,10 @@ export class ThemesConfig {
@ConfigProperty({ @ConfigProperty({
tags: { tags: {
name: $localize`Enable`, name: $localize`Enable`,
experimental: true experimental: true,
githubIssue: 642
} as TAGS, } as TAGS,
description: $localize`Enable themes and color modes.` description: $localize`Enable themes and color modes. Experimental until bootstrap v5.3 is only alpha.`
}) })
enabled: boolean = false; enabled: boolean = false;
@ -518,7 +519,6 @@ export class ThemesConfig {
type: ThemeModes, type: ThemeModes,
tags: { tags: {
name: $localize`Default theme mode`, name: $localize`Default theme mode`,
experimental: true,
uiDisabled: (sb: ThemesConfig) => !sb.enabled, uiDisabled: (sb: ThemesConfig) => !sb.enabled,
} as TAGS, } as TAGS,
description: $localize`Sets the default theme mode that is used for the application.` description: $localize`Sets the default theme mode that is used for the application.`

6
src/frontend/app/ui/gallery/filter/filter.gallery.component.css
View File

@ -53,7 +53,7 @@
.unselected { .unselected {
color: #6c757d; color: #6c757d;
background-color: #fff; background-color: var(--bs-body-bg)
} }
.date-filter-wrapper { .date-filter-wrapper {
@ -78,7 +78,7 @@
left: 0; left: 0;
height: 7px; height: 7px;
border-radius: 10px; border-radius: 10px;
background-color: #CCC; background-color: var(--bs-tertiary-color);
margin: 0 7px; margin: 0 7px;
} }
@ -87,7 +87,7 @@
right: 0; right: 0;
height: 7px; height: 7px;
border-radius: 10px; border-radius: 10px;
background-color: #CCC; background-color: var(--bs-tertiary-color);
margin: 0 7px; margin: 0 7px;
} }

10
src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html
View File

@ -28,7 +28,7 @@
<ng-container *ngIf="config.Gallery.enableDownloadZip && isDirectory && ItemCount > 0"> <ng-container *ngIf="config.Gallery.enableDownloadZip && isDirectory && ItemCount > 0">
<a [href]="getDownloadZipLink()" <a [href]="getDownloadZipLink()"
class="btn btn-navbar"> class="btn">
<span class="oi oi-data-transfer-download" <span class="oi oi-data-transfer-download"
title="download" i18n-title></span> title="download" i18n-title></span>
</a> </a>
@ -38,14 +38,14 @@
<ng-container *ngIf="config.Gallery.enableDirectoryFlattening && isDirectory && authService.canSearch()"> <ng-container *ngIf="config.Gallery.enableDirectoryFlattening && isDirectory && authService.canSearch()">
<a <a
[routerLink]="['/search', getDirectoryFlattenSearchQuery()]" [routerLink]="['/search', getDirectoryFlattenSearchQuery()]"
class="btn btn-navbar"> class="btn">
<span class="oi oi-fork" <span class="oi oi-fork"
title="Flatten directory" i18n-title></span> title="Flatten directory" i18n-title></span>
</a> </a>
<div class="divider">&nbsp;</div> <div class="divider">&nbsp;</div>
</ng-container> </ng-container>
<ng-container *ngIf="ItemCount> 0"> <ng-container *ngIf="ItemCount> 0">
<a class="btn btn-navbar" <a class="btn"
[class.btn-secondary]="filterService.activeFilters.value.areFiltersActive" [class.btn-secondary]="filterService.activeFilters.value.areFiltersActive"
(click)="showFilters = ! showFilters"> (click)="showFilters = ! showFilters">
<span class="oi oi-spreadsheet" <span class="oi oi-spreadsheet"
@ -55,8 +55,8 @@
</ng-container> </ng-container>
<div class="btn-group" dropdown #dropdown="bs-dropdown" placement="bottom right"> <div class="btn-group" dropdown #dropdown="bs-dropdown" placement="bottom right">
<button id="button-alignment" dropdownToggle type="button" <button id="button-alignment" dropdownToggle type="button"
class="btn btn-secondary dropdown-toggle" class="btn dropdown-toggle"
[ngClass]="{'btn-secondary':sortingService.sorting.value !== DefaultSorting}" [class.btn-secondary]="sortingService.sorting.value !== DefaultSorting"
aria-controls="sorting-dropdown" aria-controls="sorting-dropdown"
[innerHTML]="sortingService.sorting.value | iconizeSorting"> [innerHTML]="sortingService.sorting.value | iconizeSorting">
</button> </button>

3
src/frontend/styles.css
View File

@ -31,3 +31,6 @@ bs-dropdown-container {
element.style { element.style {
width: 100px; width: 100px;
} }
[data-bs-theme=dark] .btn:not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-primary):not(.btn-success){
--bs-btn-color: var(--bs-body-color);
}