+
diff --git a/mediarepo-ui/src/app/components/shared/file/file-thumbnail/file-thumbnail.component.scss b/mediarepo-ui/src/app/components/shared/file/file-thumbnail/file-thumbnail.component.scss
index 075785b..fe6e2f6 100644
--- a/mediarepo-ui/src/app/components/shared/file/file-thumbnail/file-thumbnail.component.scss
+++ b/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;
diff --git a/mediarepo-ui/src/app/components/shared/file/file.module.ts b/mediarepo-ui/src/app/components/shared/file/file.module.ts
index 491b90d..ec44d88 100644
--- a/mediarepo-ui/src/app/components/shared/file/file.module.ts
+++ b/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 {
+}
diff --git a/mediarepo-ui/src/app/components/shared/input/input.module.ts b/mediarepo-ui/src/app/components/shared/input/input.module.ts
index fd7eb78..6a52aa1 100644
--- a/mediarepo-ui/src/app/components/shared/input/input.module.ts
+++ b/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,
]
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-expression-item/filter-expression-item.component.scss b/mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-expression-item/filter-expression-item.component.scss
index 42f9cb3..30368cd 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-expression-item/filter-expression-item.component.scss
+++ b/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 {
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-expression-item/property-query-item/property-query-item.component.html b/mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-expression-item/property-query-item/property-query-item.component.html
index b1e265b..236bbc0 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-expression-item/property-query-item/property-query-item.component.html
+++ b/mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-expression-item/property-query-item/property-query-item.component.html
@@ -1 +1,3 @@
-
{{this.stringExpression}}
+
{{this.propertyName}}
+
{{this.comparator}}
+
{{this.value}}
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-expression-item/property-query-item/property-query-item.component.scss b/mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-expression-item/property-query-item/property-query-item.component.scss
index e69de29..f8636b8 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-expression-item/property-query-item/property-query-item.component.scss
+++ b/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;
+}
diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-expression-item/property-query-item/property-query-item.component.ts b/mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-expression-item/property-query-item/property-query-item.component.ts
index b8b8e42..194de14 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/filter-expression-item/property-query-item/property-query-item.component.ts
+++ b/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);
}
}
}
diff --git a/mediarepo-ui/src/app/components/shared/tag/tag-item/tag-item.component.scss b/mediarepo-ui/src/app/components/shared/tag/tag-item/tag-item.component.scss
index f7350e0..5a9d645 100644
--- a/mediarepo-ui/src/app/components/shared/tag/tag-item/tag-item.component.scss
+++ b/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
}
diff --git a/mediarepo-ui/src/app/utils/filter-utils.ts b/mediarepo-ui/src/app/utils/filter-utils.ts
index f805082..dc2aedc 100644
--- a/mediarepo-ui/src/app/utils/filter-utils.ts
+++ b/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", "", ""];
}
}
diff --git a/mediarepo-ui/src/colors.scss b/mediarepo-ui/src/colors.scss
new file mode 100644
index 0000000..f6d6f20
--- /dev/null
+++ b/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;
diff --git a/mediarepo-ui/src/styles.scss b/mediarepo-ui/src/styles.scss
index 72d7c1a..9dab08d 100644
--- a/mediarepo-ui/src/styles.scss
+++ b/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 {