Improving dark theme #587 #68 #140

2024-12-23 01:27:14 +02:00 · 2023-03-15 21:01:37 +01:00 · 2023-03-15 21:01:37 +01:00 · a779e6b80c
commit a779e6b80c
parent eb05621b7f
13 changed files with 49 additions and 29 deletions
--- a/src/frontend/app/app.module.ts
+++ b/src/frontend/app/app.module.ts
@ -105,6 +105,7 @@ import {SettingsEntryComponent} from './ui/settings/template/settings-entry/sett
 import {UsersComponent} from './ui/settings/users/users.component';
 import {SharingsListComponent} from './ui/settings/sharings-list/sharings-list.component';
 import {ThemeService} from './model/theme.service';
+import {StringifyConfigPriority} from './pipes/StringifyConfigPriority';

@Injectable()
 export class MyHammerConfig extends HammerGestureConfig {
@ -235,6 +236,7 @@ Marker.prototype.options.icon = iconDefault;
    GPXFilesFilterPipe,
    MDFilesFilterPipe,
    StringifySearchQuery,
+    StringifyConfigPriority,
    FileDTOToPathPipe,
    PhotoFilterPipe,
    UsersComponent,
--- a/src/frontend/app/pipes/StringifyConfigPriority.ts
+++ b/src/frontend/app/pipes/StringifyConfigPriority.ts
@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { ConfigPriority } from '../../../common/config/public/ClientConfig';
+import { SortingMethods } from '../../../common/entities/SortingMethods';
+import {EnumTranslations} from '../ui/EnumTranslations';
+
+@Pipe({ name: 'stringifyConfigPriority' })
+export class StringifyConfigPriority implements PipeTransform {
+
+  transform(method: ConfigPriority): string {
+    return EnumTranslations[ConfigPriority[method]];
+  }
+}
+
--- a/src/frontend/app/ui/admin/admin.component.html
+++ b/src/frontend/app/ui/admin/admin.component.html
@ -48,18 +48,24 @@
        </div>
        <div class="mb-1">
          <label class="control-label align-self-end me-2" for="config-priority" i18n>Mode</label>
-          <select class="form-select d-inline-block w-auto"
-                  aria-label="Configuration priority"
-                  [(ngModel)]="settingsService.configPriority"
-                  (ngModelChange)="settingsService.configPriorityChanged()"
-                  [class.bg-warning]="settingsService.configPriority === ConfigPriority.advanced"
-                  [class.bg-danger]="settingsService.configPriority === ConfigPriority.underTheHood"
-                  id="config-priority">
-            <option class="bg-white"
-                    *ngFor="let cp of configPriorities"
-                    [ngValue]="cp.key">{{cp.value}}
-            </option>
-          </select>
+          <div class="btn-group" dropdown #dropdown="bs-dropdown" placement="bottom right">
+            <button type="button"
+                    dropdownToggle
+                    id="config-priority"
+                    class="btn btn-danger dropdown-toggle"
+                    [class.btn-secondary]="settingsService.configPriority === ConfigPriority.basic"
+                    [class.btn-warning]="settingsService.configPriority === ConfigPriority.advanced"
+                    [class.btn-danger]="settingsService.configPriority === ConfigPriority.underTheHood"
+                    data-bs-toggle="dropdown" aria-expanded="false">
+              {{settingsService.configPriority | stringifyConfigPriority}}
+            </button>
+            <ul class="dropdown-menu dropdown-menu-right" *dropdownMenu>
+              <li *ngFor="let cp of configPriorities">
+                <button class="dropdown-item"
+                        (click)="settingsService.configPriority = cp.key; settingsService.configPriorityChanged()">{{cp.value}}</button>
+              </li>
+            </ul>
+          </div>
        </div>
      </div>
    </div>
--- a/src/frontend/app/ui/albums/saved-search-popup/saved-search-popup.component.html
+++ b/src/frontend/app/ui/albums/saved-search-popup/saved-search-popup.component.html
@ -14,7 +14,7 @@
  </div>
  <div class="modal-body">
    <span i18n>Add this json to a '.saved_searches.pg2conf' file in your gallery:</span>
-    <pre class="bg-light mt-2"><code>{{[savedSearchDTO] | json}}</code></pre>
+    <pre class="bg-body-tertiary mt-2"><code>{{[savedSearchDTO] | json}}</code></pre>
    <span class="mt-2" i18n>This saved search will be loaded from file during gallery indexing and it will survive a database reset.</span>
  </div>
 </ng-template>
--- a/src/frontend/app/ui/gallery/filter/filter.gallery.component.html
+++ b/src/frontend/app/ui/gallery/filter/filter.gallery.component.html
@ -1,4 +1,4 @@
-<div class="card bg-light filter-container">
+<div class="card bg-body-tertiary filter-container">

  <div class="card-body">
    <div class="row">
--- a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.css
+++ b/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.css
@ -1,6 +1,3 @@
-.container-fluid {
-  background-color: #e9ecef;
-}

 .photos-count {
  display: inline-block;
--- a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html
+++ b/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html
@ -1,4 +1,4 @@
-<div #navigator class="container-fluid pt-1 pb-1 pe-0 ps-0">
+<div #navigator class="container-fluid pt-1 pb-1 pe-0 ps-0 bg-body-secondary">
  <nav class="d-md-flex row" aria-label="breadcrumb">
    <div class="col-12 col-md-auto">
      <ol *ngIf="isDirectory" id="directory-path" class="mb-0 mt-1 breadcrumb">
--- a/src/frontend/app/ui/settings/sharings-list/sharing-list.service.ts
+++ b/src/frontend/app/ui/settings/sharings-list/sharing-list.service.ts
@ -2,19 +2,19 @@ import {Injectable} from '@angular/core';
 import {SharingDTO} from '../../../../../common/entities/SharingDTO';
 import {NetworkService} from '../../../model/network/network.service';
 import {SettingsService} from '../settings.service';
+import {Config} from '../../../../../common/config/public/Config';

@Injectable({
  providedIn: 'root'
 })
 export class SharingListService {

-  constructor(private networkService: NetworkService,
-              private settingsService: SettingsService) {
+  constructor(private networkService: NetworkService) {
  }


  public getSharingList(): Promise<SharingDTO[]> {
-    if (!this.settingsService.settings.value.Sharing.enabled) {
+    if (!Config.Sharing.enabled) {
      return Promise.resolve([]);
    }
    return this.networkService.getJson('/share/list');
--- a/src/frontend/app/ui/settings/sharings-list/sharings-list.component.ts
+++ b/src/frontend/app/ui/settings/sharings-list/sharings-list.component.ts
@ -13,7 +13,7 @@ import {Utils} from '../../../../../common/Utils';
 export class SharingsListComponent implements OnInit {

  public shares: SharingDTO[] = [];
-  public sharingUrl =  Utils.concatUrls(Config.Server.publicUrl, '/share') + '/';
+  public sharingUrl = Utils.concatUrls(Config.Server.publicUrl, '/share') + '/';

  constructor(public sharingList: SharingListService,
              private settingsService: SettingsService) {
--- a/src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.html
+++ b/src/frontend/app/ui/settings/template/settings-entry/settings-entry.component.html
@ -117,7 +117,7 @@

        <ng-container *ngSwitchCase="'NavigationLinkConfig'">
          <div class="container">
-            <div class="row  mt-1 mb-1 bg-light" *ngFor="let link of state.value; let i = index">
+            <div class="row  mt-1 mb-1 bg-body-tertiary" *ngFor="let link of state.value; let i = index">
              <div class="col ps-0">
                <select
                  [name]="'link_t_'+idName+i"
@ -180,7 +180,7 @@

        <ng-container *ngSwitchCase="'UserConfig'">
          <div class="container ps-0 pe-0">
-            <div class="row ms-0 me-0 mt-1 mb-1 bg-light" *ngFor="let item of state.value; let i = index">
+            <div class="row ms-0 me-0 mt-1 mb-1 bg-body-tertiary" *ngFor="let item of state.value; let i = index">

              <div class="col ps-0">
                <input type="text" class="form-control"
--- a/src/frontend/app/ui/settings/template/template.component.html
+++ b/src/frontend/app/ui/settings/template/template.component.html
@ -1,7 +1,9 @@
 <form #settingsForm="ngForm" class="form-horizontal" [id]="ConfigPath">
  <div class="card mb-4">
-    <h5 class="card-header">
-      <span class="oi oi-{{icon}}"></span> {{Name}}
+    <div class="card-header">
+      <h5 class="d-inline-block mb-0">
+        <span class="oi oi-{{icon}}"></span> {{Name}}
+      </h5>
      <div *ngIf="states.value.enabled !== undefined" class="float-end p-0">

        <div
@ -17,7 +19,7 @@
                 [(ngModel)]="states.value.enabled">
        </div>
      </div>
-    </h5>
+    </div>
    <div class="card-body">
      <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>
      <ng-container *ngIf="states.value.enabled !== false">
--- a/src/frontend/app/ui/settings/workflow/progress/job-progress.settings.component.html
+++ b/src/frontend/app/ui/settings/workflow/progress/job-progress.settings.component.html
@ -114,7 +114,7 @@
        </div>
      </div>
    </div>
-    <div class="card bg-light">
+    <div class="card bg-body-tertiary">
      <div class="card-header" i18n>
        Logs
      </div>
--- a/src/frontend/app/ui/settings/workflow/workflow.component.html
+++ b/src/frontend/app/ui/settings/workflow/workflow.component.html
@ -1,6 +1,6 @@
 <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div>
 <div *ngFor="let schedule of sortedSchedules() as sortedSchedules; let i= index">
-  <div class="card bg-light mt-2 mb-2  no-changed-settings {{shouldIdent(schedule,sortedSchedules[i-1])? 'ms-4' : ''}}">
+  <div class="card bg-body-tertiary mt-2 mb-2  no-changed-settings {{shouldIdent(schedule,sortedSchedules[i-1])? 'ms-4' : ''}}">
    <div class="card-header">
      <div class="d-flex justify-content-between">
        <div (click)="showDetails[schedule.name]=!showDetails[schedule.name]">