Moved toolbar to the right

Author: dbeuchler

src/Moryx.Orders.Web/app/src/app/components/operations/operations-filter/operations-filter.html

@@ -1,3 +1,5 @@
-<mat-checkbox [checked]="hideCompleted()" (change)="toggleHideCompleted()">
-  {{ TranslationConstants.OPERATIONS.FILTERS.HIDE_COMPLETED | translate }}
-</mat-checkbox>
+<p>
+  <mat-slide-toggle [checked]="hideCompleted()" (change)="toggleHideCompleted()">
+    {{ TranslationConstants.OPERATIONS.FILTERS.HIDE_COMPLETED | translate }}
+  </mat-slide-toggle>
+</p>

src/Moryx.Orders.Web/app/src/app/components/operations/operations-filter/operations-filter.ts

@@ -1,14 +1,14 @@
 import { Component, inject } from '@angular/core';
-import { MatCheckbox } from '@angular/material/checkbox';
 import { FilterService } from '../../../services/filter.service';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { TranslationConstants } from '../../../extensions/translation-constants.extensions';
 import { TranslateModule } from '@ngx-translate/core';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 @Component({
   selector: 'app-operations-filter',
   imports: [
-    MatCheckbox,
+    MatSlideToggleModule,
     TranslateModule
   ],
   templateUrl: './operations-filter.html',

src/Moryx.Orders.Web/app/src/app/components/operations/operations.html

@@ -2,22 +2,6 @@
 @use "@moryx/ngx-web-framework/styles/variables" as *;
 @use 'sass:map';
 
-.toolbar-spacer {
-  flex: 1 1 auto;
-}
-
-.toolbar {
-  .icon-button {
-    width: 40px;
-    height: 40px;
-    padding: 8px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-  }
-}
-
 .multi-progress-container {
   display: flex;
   width: 100%;
@@ -143,10 +127,6 @@ mat-grid-list {
   width: 840px;
 }
 
-.operation-progress mat-progress-bar {
-  height: 6px;
-}
-
 .operation-title {
   margin: 0px;
   font-weight: bold;
@@ -258,8 +238,56 @@ mat-grid-list {
   }
 }
 
-.fab-flex-container {
+.sidenav-container {
+  @include mat.sidenav-overrides((
+    container-background-color: white,
+  ));
+  height: 100%;
+}
+
+.sidenav-toolbar {
+  width: auto;
+}
+
+.sidenav-toolbar-buttons {
   display: flex;
-  flex-direction: row;
-  gap: 8px;
+  flex-direction: column;
+  padding: 12px 0;
+  gap: 12px;
+}
+
+.sidenav-toolbar-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 12px;
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+
+  .material-symbols-outlined {
+    font-size: 24px;
+    width: 56px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 16px;
+    transition: background-color 0.2s;
+  }
+
+  .label {
+    font-size: 12px;
+    text-align: center;
+    color: rgba(0, 0, 0, 0.87);
+  }
+
+  &:hover .material-symbols-outlined {
+    background-color: rgba(0, 0, 0, 0.08);
+  }
+
+  &:active .material-symbols-outlined {
+    background-color: rgba(0, 0, 0, 0.12);
+  }
 }

src/Moryx.Orders.Web/app/src/app/components/operations/operations.scss

@@ -62,6 +62,8 @@ export class TranslationConstants {
     FAILED_LOADING: 'OPERATIONS.FAILED_LOADING',
     EMPTY_STATE_HEADER: 'OPERATIONS.EMPTY_STATE_HEADER',
     EMPTY_STATE_TEXT: 'OPERATIONS.EMPTY_STATE_TEXT',
+    CREATE: 'OPERATIONS.CREATE',
+    FILTER: 'OPERATIONS.FILTER',
   };
 
   public static readonly RECIPES = {

src/Moryx.Orders.Web/app/src/app/extensions/translation-constants.extensions.ts

@@ -48,7 +48,9 @@
     "EMPTY_LOG": "Dieses Protokoll ist leer",
     "FAILED_LOADING": "Die Verbindung zum Server ist leider fehlgeschlagen. Bitte überprüfe deine Netzwerkverbindung oder versuch es später nochmal.",
     "EMPTY_STATE_HEADER": "Keine Aufträge",
-    "EMPTY_STATE_TEXT": "Um einen Auftrag zu erstellen klicke auf das Plus und starte die Konfiguration."
+    "EMPTY_STATE_TEXT": "Um einen Auftrag zu erstellen klicke auf das Plus und starte die Konfiguration.",
+    "CREATE": "Erstellen",
+    "FILTER": "Filter"
   },
   "RECIPES": {
     "RECIPES_OF": "Rezepte von",

src/Moryx.Orders.Web/app/src/assets/languages/de.json

@@ -48,7 +48,9 @@
     "EMPTY_LOG": "This log is empty",
     "FAILED_LOADING": "The connection to the server could not be established. Please check your network connection or try again later.",
     "EMPTY_STATE_HEADER": "No Orders",
-    "EMPTY_STATE_TEXT": "To create an order click on the plus sign and start the configuration."
+    "EMPTY_STATE_TEXT": "To create an order click on the plus sign and start the configuration.",
+    "CREATE": "Create",
+    "FILTER": "Filter"
   },
   "RECIPES": {
     "RECIPES_OF": "Recipes of",

src/Moryx.Orders.Web/app/src/assets/languages/en.json

@@ -48,7 +48,9 @@
     "EMPTY_LOG": "Questo registro è vuoto",
     "FAILED_LOADING": "Non è stato possibile stabilire la connessione al server. Controllare la connessione di rete o riprovare più tardi.",
     "EMPTY_STATE_HEADER": "Nessun ordine",
-    "EMPTY_STATE_TEXT": "Per creare un ordine, fare clic sul segno più e avviare la configurazione."
+    "EMPTY_STATE_TEXT": "Per creare un ordine, fare clic sul segno più e avviare la configurazione.",
+    "CREATE": "Crea",
+    "FILTER": "Filtro"
   },
   "RECIPES": {
     "RECIPES_OF": "Ricette di",

src/Moryx.Orders.Web/app/src/assets/languages/it.json

@@ -48,7 +48,9 @@
     "EMPTY_LOG": "此日志为空",
     "FAILED_LOADING": "无法建立与服务器的连接。请检查您的网络连接或稍后重试。",
     "EMPTY_STATE_HEADER": "没有订单",
-    "EMPTY_STATE_TEXT": "单击加号创建订单并开始配置。"
+    "EMPTY_STATE_TEXT": "单击加号创建订单并开始配置。",
+    "CREATE": "创建",
+    "FILTER": "筛选"
   },
   "RECIPES": {
     "RECIPES_OF": "配方 -",

src/Moryx.Orders.Web/app/src/assets/languages/zh.json

@@ -1,8 +1,10 @@
 @use "@moryx/ngx-web-framework/styles/theme.scss" as *;
+@use "@angular/material" as mat;
+html, body {
+  height: 100%;
+}
 
-html, body { height: 100%;}
-body { margin: 0; overflow: hidden; }
-
-.toolbar-gradient-background {
-    background: linear-gradient(90deg, rgba(0,0,0,0.8016456582633054) 0%, rgba(9,9,121,0) 50%);
+body {
+  margin: 0;
+  overflow: hidden;
 }