Improve sort preset display

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

mediarepo-ui/src/api/models/SortingPreset.ts

@@ -36,4 +36,8 @@ export class SortingPreset {
         preset.keys = keys;
         return preset;
     }
+
+    public toString(): string {
+        return this.sortKeys.join(", ");
+    }
 }

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

@@ -35,8 +35,9 @@
             </button>
         </app-filter-input>
 
-        <button (click)="openSortDialog()" id="sort-button" mat-flat-button>
-            Sort: {{sortingPreset.sortKeys.join(", ")}}</button>
+        <app-sort-button (click)="openSortDialog()"
+                         [selectedPreset]="this.sortingPreset"
+                         id="sort-button"></app-sort-button>
     </div>
 
     <mat-divider fxFlex="1em"></mat-divider>

mediarepo-ui/src/app/components/shared/sidebar/file-search/sort-button/sort-button.component.html

@@ -0,0 +1,14 @@
+<button (click)="this.appClick.emit()"
+        [matTooltipShowDelay]="1000"
+        [matTooltip]="selectedPreset.toString()"
+        class="sort-button"
+        mat-flat-button>
+    <i>Sort: </i>
+    <span *ngFor="let key of this.selectedPreset.sortKeys" class="sort-key">
+        <span class="sort-key-type">{{key.sortType}}</span>
+        <span *ngIf="key.sortType === 'Namespace'" class="sort-key-namespace"> {{key.namespaceName}}</span>
+        <ng-icon *ngIf="key.sortDirection === 'Ascending'" class="sort-key-direction" name="matExpandLess"></ng-icon>
+        <ng-icon *ngIf="key.sortDirection === 'Descending'" class="sort-key-direction" name="matExpandMore"></ng-icon>
+        <span class="key-divider">| </span>
+    </span>
+</button>

mediarepo-ui/src/app/components/shared/sidebar/file-search/sort-button/sort-button.component.scss

@@ -0,0 +1,27 @@
+@import "src/colors";
+
+.sort-button {
+    width: 100%;
+    align-items: center;
+    background-color: $background-lighter-10;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.sort-key-direction {
+    font-size: 1.5em;
+    vertical-align: bottom;
+    margin-bottom: 0.6em;
+}
+
+.sort-key-type {
+    color: $primary-lighter-50
+}
+
+.sort-key-namespace {
+    color: $accent-lighter-10;
+}
+
+.sort-key:last-child .key-divider {
+    display: none;
+}

mediarepo-ui/src/app/components/shared/sidebar/file-search/sort-button/sort-button.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SortButtonComponent } from './sort-button.component';
+
+describe('SortButtonComponent', () => {
+  let component: SortButtonComponent;
+  let fixture: ComponentFixture<SortButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SortButtonComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SortButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

mediarepo-ui/src/app/components/shared/sidebar/file-search/sort-button/sort-button.component.ts

@@ -0,0 +1,17 @@
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from "@angular/core";
+import {SortingPreset} from "../../../../../../api/models/SortingPreset";
+
+@Component({
+    selector: "app-sort-button",
+    templateUrl: "./sort-button.component.html",
+    styleUrls: ["./sort-button.component.scss"],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class SortButtonComponent {
+
+    @Input() selectedPreset!: SortingPreset;
+    @Output() appClick = new EventEmitter<void>();
+
+    constructor() {
+    }
+}

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

@@ -7,9 +7,11 @@ import {
     MatAddCircle,
     MatChangeCircle,
     MatDeleteSweep,
+    MatExpandLess,
+    MatExpandMore,
     MatFilterAlt,
     MatRemove,
-    MatRemoveCircle
+    MatRemoveCircle,
 } from "@ng-icons/material-icons";
 import {MatRippleModule} from "@angular/material/core";
 import {MatButtonModule} from "@angular/material/button";
@@ -48,6 +50,8 @@ import {
 } from "./file-search/filter-dialog/filter-expression-list-item/filter-expression-list-item.component";
 import {GetTagQueryPipe} from "./file-search/filter-pipes/get-tag-query.pipe";
 import {GetPropertyQueryPipe} from "./file-search/filter-pipes/get-property-query.pipe";
+import {SortButtonComponent} from "./file-search/sort-button/sort-button.component";
+import {MatTooltipModule} from "@angular/material/tooltip";
 
 
 @NgModule({
@@ -66,6 +70,7 @@ import {GetPropertyQueryPipe} from "./file-search/filter-pipes/get-property-quer
         FilterExpressionListItemComponent,
         GetTagQueryPipe,
         GetPropertyQueryPipe,
+        SortButtonComponent,
     ],
     exports: [
         TagEditComponent,
@@ -81,7 +86,9 @@ import {GetPropertyQueryPipe} from "./file-search/filter-pipes/get-property-quer
             MatAddCircle,
             MatRemoveCircle,
             MatDeleteSweep,
-            MatFilterAlt
+            MatFilterAlt,
+            MatExpandMore,
+            MatExpandLess,
         }),
         MatRippleModule,
         MatButtonModule,
@@ -102,6 +109,7 @@ import {GetPropertyQueryPipe} from "./file-search/filter-pipes/get-property-quer
         MatMenuModule,
         ReactiveFormsModule,
         MatAutocompleteModule,
+        MatTooltipModule,
     ]
 })
 export class SidebarModule {

mediarepo-ui/src/colors.scss

@@ -6,6 +6,7 @@ $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-lighter-50: lighten($primary, 50%);
 $primary-darker-10: darken($primary, 10%);
 $primary-darker-20: darken($primary, 20%);
 $primary-darker-30: darken($primary, 30%);
@@ -21,6 +22,8 @@ $text: #FFF;
 $text-darker-10: darken($text, 10%);
 
 $background: #424242;
+$background-lighter-05: lighten($background, 4%);
+$background-lighter-10: lighten($background, 10%);
 
 // specifics
 $tag-namespace: $accent-lighter-10;