#33 - dialog - mat-select-panel customization, html, scss, translation

ceskaexpedice · May 30, 2024 · 30dcefa · 30dcefa
1 parent 8317dec
commit 30dcefa
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 68 deletions.
diff --git a/src/app/dialogs/run-import/run-import.component.html b/src/app/dialogs/run-import/run-import.component.html
@@ -1,49 +1,33 @@
 <h2 mat-dialog-title>{{ 'modal.startImport.title' | translate }}</h2>
-<mat-dialog-content>
-
-
-<mat-form-field appearance="fill" class="app-w-100">
-  <mat-label>Vyberte licenci pro import</mat-label>
-  <mat-select [(ngModel)]="selectedLicense">
-    <mat-option>-- zadna licence --</mat-option>
-    <mat-option *ngFor="let license of licenses" [value]="license">
-      <div>
-        <mat-icon *ngIf="license.group == 'local'">location_city</mat-icon>
-        <mat-icon *ngIf="license.group != 'local'">public_outlined</mat-icon>
-        {{ license.priority + '. ' + license.name }}
-        <mat-divider></mat-divider>
-        test
-      </div>
-    </mat-option>
-  </mat-select>
-</mat-form-field>
-
-<button mat-button [matMenuTriggerFor]="menu">Menu</button>
-<mat-menu #menu="matMenu">
-  <button mat-menu-item>
-    test <br />
-    <mat-divider></mat-divider>
-    test
-  </button>
-  <button mat-menu-item>Item 2</button>
-</mat-menu>
-
-<mat-checkbox [disableRipple]="true" [(ngModel)]="scheduleIndexation" color="primary" class="app-mr-4">{{ 'desc.scheduleSubsequentIndexing' | translate }}</mat-checkbox>
+<mat-dialog-content class="app-scrollbar-fix">
+  <mat-form-field appearance="fill" class="app-w-100">
+    <mat-label>{{ 'desc.selectLicenseToImport' | translate }}</mat-label>
+    <mat-select [(ngModel)]="selectedLicense" [panelClass]="'app-licenses'">
+      <mat-option>-- {{ 'desc.noLicense' | translate }} --</mat-option>
+      <mat-option *ngFor="let license of licenses" [value]="license">
+        <div class="app-mb-1">
+          <mat-icon *ngIf="license.group == 'local'">location_city</mat-icon>
+          <mat-icon *ngIf="license.group != 'local'">public_outlined</mat-icon>
+          <strong>{{ license.priority + '. ' + license.name }}</strong>
+        </div>
+        <div class="app-mb-1">
+          <strong class="app-desc">{{ license.group == 'local' ? ('desc.localLicense' | translate) : ('desc.globalLicense' | translate) }}</strong>
+        </div>
+        <div class="app-mb-1">
+          <i>{{ license.description }}</i>
+        </div>
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <mat-checkbox [disableRipple]="true" [(ngModel)]="scheduleIndexation" color="primary" class="app-mr-4">{{ 'desc.scheduleSubsequentIndexing' | translate }}</mat-checkbox>
 
-
-
-<ng-container *ngIf="type == 'ndk'">
-  <span class="pipe-separator">|</span>
-  <mat-checkbox [disableRipple]="true"  *ngIf="type == 'ndk'" [(ngModel)]="ndkIIPServer" color="primary">{{ 'desc.useIipServer' | translate }}</mat-checkbox>
-</ng-container>
-
-
+  <ng-container *ngIf="type == 'ndk'">
+    <mat-checkbox [disableRipple]="true"  *ngIf="type == 'ndk'" [(ngModel)]="ndkIIPServer" color="primary">{{ 'desc.useIipServer' | translate }}</mat-checkbox>
+  </ng-container>
 </mat-dialog-content>
+
 <mat-dialog-actions align="end">
   <button mat-flat-button color="primary" (click)="scheduleProcess()">{{ 'button.schedule' | translate }}</button>
   <button mat-flat-button mat-dialog-close>{{ 'button.cancel' | translate }}</button>
-
-  <!--
-  <button mat-flat-button (click)="onClose(data.btn1.value)" [color]="data.btn1.color">{{ data.btn1.label }}</button>
--->
 </mat-dialog-actions>
diff --git a/src/app/pages/import/import.component.html b/src/app/pages/import/import.component.html
@@ -16,28 +16,7 @@
     </div>
     <div fxFlex fxLayout="column" fxFlexFill class="app-container">
       <ng-container *ngIf="!this.inputDirError[this.type]">
-        <div fxLayout="row" fxLayoutAlign="start end" class="app-mb-4">
-
-          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
-            <mat-form-field>
-              <mat-label>{{ 'desc.selectLicense' | translate }}</mat-label>
-              <mat-select [(ngModel)]="selectedLicense" [disabled]="!imports.selectedTree">
-                <mat-option *ngFor="let license of licenses" [value]="license">
-                  <mat-icon *ngIf="license.group == 'local'">location_city</mat-icon>
-                  <mat-icon *ngIf="license.group != 'local'">public_outlined</mat-icon>
-                  {{ license.priority + '. ' + license.name }}
-                </mat-option>
-              </mat-select>
-            </mat-form-field>        
-
-            <!-- <mat-checkbox [disableRipple]="true" [disabled]="!imports.selectedTree" [(ngModel)]="scheduleIndexations" color="primary" class="app-mr-4">{{ 'desc.scheduleSubsequentIndexing' | translate }}</mat-checkbox>
-            <mat-checkbox [disableRipple]="true" [disabled]="!imports.selectedTree" *ngIf="type == 'ndk'" [(ngModel)]="ndkPublic" color="primary" class="app-mr-4">{{ 'desc.post' | translate }}</mat-checkbox> -->
-
-            <ng-container *ngIf="type == 'ndk'">
-              <span class="pipe-separator">|</span>
-              <mat-checkbox [disableRipple]="true" [disabled]="!imports.selectedTree" *ngIf="type == 'ndk'" [(ngModel)]="ndkIIPServer" color="primary">{{ 'desc.useIipServer' | translate }}</mat-checkbox>
-            </ng-container>
-          </div>
+        <div fxLayout="row" fxLayoutAlign="end end" class="app-mb-4">
           <div>
             <button mat-flat-button color="primary" (click)="submit()" [disabled]="!imports.selectedTree">{{ 'button.startImport' | translate }}</button>
           </div>

diff --git a/src/assets/i18n/cs.json b/src/assets/i18n/cs.json
@@ -1183,6 +1183,8 @@
     "deleteObject": "Smazat objekt",
     "pid": "Pid",
     "true": "Ano",
-    "false": "Ne"
+    "false": "Ne",
+    "selectLicenseToImport": "Vyberte licenci pro import",
+    "noLicense": "Žádná licence"
   }
 }
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -1183,6 +1183,8 @@
     "deleteObject": "Delete object",
     "pid": "Pid",
     "true": "Yes",
-    "false": "No"
+    "false": "No",
+    "selectLicenseToImport": "Select a license to import",
+    "noLicense": "No license"
   }
 }
diff --git a/src/sass/_app-mat-override.scss b/src/sass/_app-mat-override.scss
@@ -291,7 +291,8 @@
 }
 
 // mat select
-.mat-select-panel-wrap {
+// puvodne - .mat-select-panel-wrap
+.mat-select-panel {
   .mat-option {
     .mat-icon {
       @extend .app-mr-2;
@@ -303,6 +304,19 @@
       color: $app-color-primary;
     }
   }
+
+  &.app-licenses {
+    .mat-option {
+      padding-top: 8px;
+      padding-bottom: 8px;
+      height: auto;
+      line-height: normal;
+
+      &:not(:last-child) {
+        border-bottom: 1px solid $app-card-border-color;
+      }
+    }
+  }
 }
 
 // tooltip
@@ -555,4 +569,4 @@
   .mat-radio-label-content {
     font-size: 14px;
   }
-}
+}