Fix colors for OR-keyword to fit theme

Signed-off-by: trivernis <trivernis@protonmail.com>

mediarepo-ui/src/app/components/shared/file/file-thumbnail/file-thumbnail.component.html

@@ -10,7 +10,7 @@
     <ng-icon *ngIf="getFileType() === 'audio'" name="mat-audiotrack"></ng-icon>
     <ng-icon *ngIf="getFileType() === 'text'" name="mat-description"></ng-icon>
 </div>
-<div class="file-status-icon">
+<div *ngIf="file.status !== 'Archived'" class="file-status-icon">
     <ng-icon *ngIf="file.status === 'Deleted'" name="mat-auto-delete"></ng-icon>
     <ng-icon *ngIf="file.status === 'Imported'" name="mat-fiber-new"></ng-icon>
 </div>

mediarepo-ui/src/app/components/shared/file/file-thumbnail/file-thumbnail.component.scss

@@ -1,3 +1,5 @@
+@import "src/colors";
+
 app-content-aware-image {
     height: 100%;
     width: 100%;
@@ -28,9 +30,11 @@ app-content-aware-image {
     position: absolute;
     top: 0;
     right: 0;
-    height: 20%;
-    width: 20%;
+    height: 18%;
+    width: 18%;
     display: flex;
+    border-bottom-left-radius: 50%;
+    background-color: transparentize($background, .5);
 
     ng-icon {
         align-self: flex-end;

mediarepo-ui/src/app/components/shared/file/file.module.ts

@@ -1,44 +1,28 @@
 import {NgModule} from "@angular/core";
 import {CommonModule} from "@angular/common";
-import {
-    FileMultiviewComponent
-} from "./file-multiview/file-multiview.component";
-import {
-    FileGridComponent
-} from "./file-multiview/file-grid/file-grid.component";
-import {
-    FileGalleryComponent
-} from "./file-multiview/file-gallery/file-gallery.component";
+import {FileMultiviewComponent} from "./file-multiview/file-multiview.component";
+import {FileGridComponent} from "./file-multiview/file-grid/file-grid.component";
+import {FileGalleryComponent} from "./file-multiview/file-gallery/file-gallery.component";
 import {FileCardComponent} from "./file-card/file-card.component";
-import {
-    FileContextMenuComponent
-} from "./file-context-menu/file-context-menu.component";
-import {
-    FileThumbnailComponent
-} from "./file-thumbnail/file-thumbnail.component";
-import {
-    ContentViewerComponent
-} from "./content-viewer/content-viewer.component";
-import {
-    AudioViewerComponent
-} from "./content-viewer/audio-viewer/audio-viewer.component";
-import {
-    ImageViewerComponent
-} from "./content-viewer/image-viewer/image-viewer.component";
-import {
-    VideoViewerComponent
-} from "./content-viewer/video-viewer/video-viewer.component";
+import {FileContextMenuComponent} from "./file-context-menu/file-context-menu.component";
+import {FileThumbnailComponent} from "./file-thumbnail/file-thumbnail.component";
+import {ContentViewerComponent} from "./content-viewer/content-viewer.component";
+import {AudioViewerComponent} from "./content-viewer/audio-viewer/audio-viewer.component";
+import {ImageViewerComponent} from "./content-viewer/image-viewer/image-viewer.component";
+import {VideoViewerComponent} from "./content-viewer/video-viewer/video-viewer.component";
 import {AppCommonModule} from "../app-common/app-common.module";
 import {MatSliderModule} from "@angular/material/slider";
 import {NgIconsModule} from "@ng-icons/core";
 import {
     MatAudiotrack,
+    MatAutoDelete,
     MatClose,
     MatDescription,
+    MatFiberNew,
     MatGif,
     MatImage,
     MatMovie,
-    MatRefresh
+    MatRefresh,
 } from "@ng-icons/material-icons";
 import {DragDropModule} from "@angular/cdk/drag-drop";
 import {MatButtonModule} from "@angular/material/button";
@@ -77,7 +61,9 @@ import {MatCardModule} from "@angular/material/card";
             MatMovie,
             MatGif,
             MatAudiotrack,
-            MatDescription
+            MatDescription,
+            MatAutoDelete,
+            MatFiberNew,
         }),
         DragDropModule,
         MatButtonModule,
@@ -89,4 +75,5 @@ import {MatCardModule} from "@angular/material/card";
         MatCardModule
     ]
 })
-export class FileModule { }
+export class FileModule {
+}

mediarepo-ui/src/app/components/shared/input/input.module.ts

@@ -7,7 +7,7 @@ import {MatFormFieldModule} from "@angular/material/form-field";
 import {ReactiveFormsModule} from "@angular/forms";
 import {MatInputModule} from "@angular/material/input";
 import {NgIconsModule} from "@ng-icons/core";
-import {MatDeleteForever, MatFiberNew, MatFolder, MatInsertDriveFile} from "@ng-icons/material-icons";
+import {MatFolder, MatInsertDriveFile} from "@ng-icons/material-icons";
 import {MatButtonModule} from "@angular/material/button";
 import {FlexModule} from "@angular/flex-layout";
 import {FilterInputComponent} from "./filter-input/filter-input.component";
@@ -30,7 +30,7 @@ import {FilterInputComponent} from "./filter-input/filter-input.component";
         MatFormFieldModule,
         ReactiveFormsModule,
         MatInputModule,
-        NgIconsModule.withIcons({ MatInsertDriveFile, MatFolder, MatDeleteForever, MatFiberNew }),
+        NgIconsModule.withIcons({ MatInsertDriveFile, MatFolder }),
         MatButtonModule,
         FlexModule,
     ]

mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-expression-item/filter-expression-item.component.scss

@@ -1,6 +1,8 @@
+@import "src/colors";
+
 .or-expression {
     .or-combinator {
-        color: #7dff70;
+        color: $accent;
     }
 
     .or-combinator:last-child {

mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-expression-item/property-query-item/property-query-item.component.html

@@ -1 +1,3 @@
-<span>{{this.stringExpression}}</span>
+<span class="property-name">{{this.propertyName}}</span>
+<span class="comparator">{{this.comparator}}</span>
+<span class="value">{{this.value}}</span>

mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-expression-item/property-query-item/property-query-item.component.scss

@@ -0,0 +1,11 @@
+@import "src/colors";
+
+.property-name {
+    color: $text-darker-10
+}
+
+.comparator {
+    padding-left: .5em;
+    padding-right: .5em;
+    color: $primary-lighter-40;
+}

mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-expression-item/property-query-item/property-query-item.component.ts

@@ -1,6 +1,6 @@
 import {Component, Input, OnChanges, OnInit, SimpleChanges} from "@angular/core";
 import {PropertyQuery} from "../../../../../../../api/api-types/files";
-import {propertyQueryToString} from "../../../../../../utils/filter-utils";
+import {propertyQueryToStringParts} from "../../../../../../utils/filter-utils";
 
 @Component({
     selector: "app-property-query-item",
@@ -11,18 +11,20 @@ export class PropertyQueryItemComponent implements OnInit, OnChanges {
 
     @Input() propertyQuery!: PropertyQuery;
 
-    public stringExpression: string = "No Expression";
+    public propertyName: string = "No Property";
+    public comparator: string = "!!";
+    public value: string = "null";
 
     constructor() {
     }
 
     public ngOnInit(): void {
-        this.stringExpression = propertyQueryToString(this.propertyQuery);
+        [this.propertyName, this.comparator, this.value] = propertyQueryToStringParts(this.propertyQuery);
     }
 
     public ngOnChanges(changes: SimpleChanges): void {
         if (changes["propertyQuery"]) {
-            this.stringExpression = propertyQueryToString(this.propertyQuery);
+            [this.propertyName, this.comparator, this.value] = propertyQueryToStringParts(this.propertyQuery);
         }
     }
 }

mediarepo-ui/src/app/components/shared/tag/tag-item/tag-item.component.scss

@@ -1,3 +1,5 @@
+@import "src/colors";
+
 .tag-item-wrapper {
     display: inline;
     width: 100%;
@@ -8,5 +10,5 @@
 
 .tag-item-namespace {
     margin-right: 0.25em;
-    opacity: 80%;
+    color: $tag-namespace
 }

mediarepo-ui/src/app/utils/filter-utils.ts

@@ -19,7 +19,7 @@ function filterQueryToString(query: FilterQuery): string {
     if ("Tag" in query) {
         return tagQueryToString(query.Tag);
     } else {
-        return propertyQueryToString(query.Property);
+        return buildExpression(...propertyQueryToStringParts(query.Property));
     }
 }
 
@@ -27,45 +27,45 @@ function tagQueryToString(tagQuery: TagQuery): string {
     return `${tagQuery.negate ? "-" : ""}${tagQuery.tag}`;
 }
 
-export function propertyQueryToString(propertyQuery: PropertyQuery): string {
+export function propertyQueryToStringParts(propertyQuery: PropertyQuery): [string, string, string] {
     if ("Status" in propertyQuery) {
-        return buildExpression("Status", "=", propertyQuery.Status);
+        return ["Status", "=", propertyQuery.Status];
     } else if ("FileSize" in propertyQuery) {
-        return buildExpression(
+        return [
             "FileSize",
             getComparator(propertyQuery.FileSize),
             getValue(propertyQuery.FileSize).toString()
-        );
+        ];
     } else if ("ImportedTime" in propertyQuery) {
-        return buildExpression(
+        return [
             "ImportedTime",
             getComparator(propertyQuery.ImportedTime),
             getValue(propertyQuery.ImportedTime).toISOString()
-        );
+        ];
     } else if ("ChangedTime" in propertyQuery) {
-        return buildExpression(
+        return [
             "ChangedTime",
             getComparator(propertyQuery.ChangedTime),
             getValue(propertyQuery.ChangedTime).toISOString()
-        );
+        ];
     } else if ("CreatedTime" in propertyQuery) {
-        return buildExpression(
+        return [
             "CreatedTime",
             getComparator(propertyQuery.CreatedTime),
             getValue(propertyQuery.CreatedTime).toISOString()
-        );
+        ];
     } else if ("TagCount" in propertyQuery) {
-        return buildExpression(
+        return [
             "TagCount",
             getComparator(propertyQuery.TagCount),
             getValue(propertyQuery.TagCount).toString()
-        );
+        ];
     } else if ("Cd" in propertyQuery) {
-        return buildExpression("ContentDescriptor", "=", propertyQuery.Cd);
+        return ["ContentDescriptor", "=", propertyQuery.Cd];
     } else if ("Id" in propertyQuery) {
-        return buildExpression("FileId", "=", propertyQuery.Id.toString());
+        return ["FileId", "=", propertyQuery.Id.toString()];
     } else {
-        return "Invalid Expression";
+        return ["Invalid Expression", "", ""];
     }
 }
 

mediarepo-ui/src/colors.scss

@@ -0,0 +1,22 @@
+@use "@angular/material" as mat;
+@import "styles";
+
+$primary: mat.get-color-from-palette($primary-palette);
+$primary-lighter-10: lighten($primary, 10%);
+$primary-lighter-20: lighten($primary, 20%);
+$primary-lighter-30: lighten($primary, 30%);
+$primary-lighter-40: lighten($primary, 40%);
+$primary-darker-10: darken($primary, 10%);
+$primary-darker-20: darken($primary, 20%);
+$primary-darker-30: darken($primary, 30%);
+
+$accent: mat.get-color-from-palette($accent-pallette, 'text');
+$accent-lighter-10: lighten($accent, 10%);
+
+$text: #FFF;
+$text-darker-10: darken($text, 10%);
+
+$background: #424242;
+
+// specifics
+$tag-namespace: $accent-lighter-10;

mediarepo-ui/src/styles.scss

@@ -20,6 +20,8 @@ $theme: mat.define-dark-theme((
 
 $color-config: mat.get-color-config($theme);
 $primary-palette: map.get($color-config, 'primary');
+$accent-pallette: map.get($color-config, 'accent');
+$background-pallette: map.get($color-config, 'background');
 $warn-palette: map.get($color-config, 'warn');
 
 ::-webkit-scrollbar {