IOT-1525: Application styling fixed.

AugustHA-Iterator · AugustHA-Iterator · commit 9150f67a22ca · 2024-08-29T10:24:50.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,23 +12,23 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^17.3.12",
-    "@angular/cdk": "^16.2.14",
+    "@angular/cdk": "^17.3.10",
     "@angular/common": "^17.3.12",
     "@angular/compiler": "^17.3.12",
     "@angular/core": "^17.3.12",
     "@angular/forms": "^17.3.12",
     "@angular/localize": "^17.3.12",
-    "@angular/material": "^16.2.14",
-    "@angular/material-moment-adapter": "^16.2.14",
+    "@angular/material": "^17.3.10",
+    "@angular/material-moment-adapter": "^17.3.10",
     "@angular/platform-browser": "^17.3.12",
     "@angular/platform-browser-dynamic": "^17.3.12",
     "@angular/router": "^17.3.12",
     "@auth0/angular-jwt": "^5.0.1",
-    "@fortawesome/angular-fontawesome": "^0.13.0",
+    "@fortawesome/angular-fontawesome": "^0.14.1",
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "@ng-bootstrap/ng-bootstrap": "^15.1.2",
+    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@popperjs/core": "^2.11.6",
@@ -43,11 +43,11 @@
     "leaflet-geosearch": "3.6.1",
     "leaflet.fullscreen": "^3.0.1",
     "moment": "^2.29.4",
-    "monaco-editor": "^0.41.0",
+    "monaco-editor": "^0.44.0",
     "ng": "0.0.0",
     "ng-inline-svg-2": "^15.0.1",
-    "ngx-cookie-service": "^16.1.0",
-    "ngx-monaco-editor-v2": "^16.0.1",
+    "ngx-cookie-service": "^17.1.0",
+    "ngx-monaco-editor-v2": "^17.0.1",
     "ngx-papaparse": "^5.0.0",
     "popper.js": "^1.16.1",
     "proj4leaflet": "^1.0.2",
@@ -61,7 +61,7 @@
     "@angular-devkit/build-angular": "^17.3.8",
     "@angular/cli": "^17.3.8",
     "@angular/compiler-cli": "^17.3.12",
-    "@ngrx/store-devtools": "^16.3.0",
+    "@ngrx/store-devtools": "^17.2.0",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.3",
     "@types/jwt-decode": "^3.1.0",
@@ -89,6 +89,8 @@
     "typescript": "~5.4.5"
   },
   "overrides": {
+    "@angular/core": "^17.3.12",
+    "@angular/common": "^17.3.12",
     "postcss": "^8.4.31",
     "tough-cookie": "^4.1.4",
     "xml2js": "^0.6.2",
@@ -97,4 +99,4 @@
     "babel-plugin-polyfill-regenerator": "0.5.3",
     "webpack-dev-middleware": "5.3.4"
   }
-}
+}
diff --git a/src/app/applications/applications-routing.module.ts b/src/app/applications/applications-routing.module.ts
@@ -61,7 +61,7 @@ const applicationRoutes: Routes = [
               },
             ],
           },
-          { path: "datatarget-new", component: DatatargetNewComponent },
+          { path: "datatarget-new", component: DatatargetNewComponent,  },
           { path: "datatarget-edit", component: DatatargetEditComponent },
           {
             path: "datatarget-edit/:datatargetId",
diff --git a/src/app/applications/datatarget/datatarget-detail/datatarget-detail.component.ts b/src/app/applications/datatarget/datatarget-detail/datatarget-detail.component.ts
@@ -20,7 +20,6 @@ export class DatatargetDetailComponent implements OnInit, OnDestroy {
   private datatargetType: DataTargetType;
 
   constructor(
-    private componentFactoryResolver: ComponentFactoryResolver,
     private datatargetService: DatatargetService,
     private route: ActivatedRoute,
     private datatargetTypesService: DatatargetTypesService
diff --git a/src/app/applications/datatarget/datatarget-edit/datatarget-edit.component.ts b/src/app/applications/datatarget/datatarget-edit/datatarget-edit.component.ts
@@ -20,7 +20,6 @@ export class DatatargetEditComponent implements OnInit, OnDestroy {
   private datatargetType: DataTargetType;
 
   constructor(
-    private componentFactoryResolver: ComponentFactoryResolver,
     private datatargetService: DatatargetService,
     private route: ActivatedRoute,
     private datatargetTypesService: DatatargetTypesService
diff --git a/src/app/shared/components/column-selector/column-selector.component.html b/src/app/shared/components/column-selector/column-selector.component.html
@@ -10,14 +10,13 @@
     #Selector
     [placeholder]="'TABLE.COLUMNS' | translate"
   >
-    <mat-option disabled>
-      <button mat-raised-button class="mat-primary fill text-sm" (click)="selectAll()">
-        {{ "QUESTION.DATATARGET.SELECTALLDEVICES" | translate }}
-      </button>
-      <button mat-raised-button class="mat-primary fill text-sm" (click)="deSelectAll()">
-        {{ "QUESTION.DATATARGET.DESELECTALLDEVICES" | translate }}
-      </button>
-    </mat-option>
+    <button mat-raised-button class="mat-primary fill text-sm choose-all" (click)="selectAll()">
+      {{ "QUESTION.DATATARGET.SELECTALLDEVICES" | translate }}
+    </button>
+    <button mat-raised-button class="mat-primary fill text-sm deselect-all" (click)="deSelectAll()">
+      {{ "QUESTION.DATATARGET.DESELECTALLDEVICES" | translate }}
+    </button>
+
     <mat-option *ngFor="let option of optionalColumnOptions" [value]="option.id">
       {{ option.display | translate }}
     </mat-option>
diff --git a/src/app/shared/components/column-selector/column-selector.component.scss b/src/app/shared/components/column-selector/column-selector.component.scss
@@ -1,5 +1,7 @@
 @import "../../../../assets/scss/setup/variables";
 
+$deselectSelectButtonBottomMargin: 5px;
+
 .cog-icon {
   color: $grey-dark;
 }
@@ -10,3 +12,13 @@
   display: flex;
   justify-content: center;
 }
+
+.choose-all {
+  margin-left: 5px;
+  margin-bottom: $deselectSelectButtonBottomMargin;
+}
+
+.deselect-all {
+  margin-left: 5px;
+  margin-bottom: $deselectSelectButtonBottomMargin;
+}
diff --git a/src/app/shared/components/forms/form-body-application/form-body-application.component.html b/src/app/shared/components/forms/form-body-application/form-body-application.component.html
@@ -82,11 +82,11 @@
       </mat-select>
     </div>
 
-    <div class="form-group mt-3">
+    <div class="form-group mt-3 flexDirectionColumn">
       <label class="form-label" for="application.startDate">{{
         "APPLICATION.METADATA-FIELD.START-DATE" | translate
       }}</label>
-      <mat-form-field appearance="fill" id="application.startDate">
+      <mat-form-field appearance="outline" id="application.startDate">
         <mat-label>{{ "QUESTION.APPLICATION.START-DATE-PLACEHOLDER" | translate }}</mat-label>
         <input
           matInput
@@ -104,11 +104,11 @@
       </mat-form-field>
     </div>
 
-    <div class="form-group mt-3">
+    <div class="form-group mt-3 flexDirectionColumn">
       <label class="form-label" for="application.endDate">{{
         "APPLICATION.METADATA-FIELD.END-DATE" | translate
       }}</label>
-      <mat-form-field appearance="fill" id="application.endDate">
+      <mat-form-field appearance="outline" id="application.endDate">
         <mat-label>{{ "QUESTION.APPLICATION.END-DATE-PLACEHOLDER" | translate }}</mat-label>
         <input
           matInput
diff --git a/src/app/shared/components/forms/form-body-application/form-body-application.component.scss b/src/app/shared/components/forms/form-body-application/form-body-application.component.scss
@@ -0,0 +1,4 @@
+.flexDirectionColumn{
+  display: flex;
+  flex-direction: column;
+}
diff --git a/src/app/shared/components/mat-select-search/mat-select-search/mat-select-search.component.scss b/src/app/shared/components/mat-select-search/mat-select-search/mat-select-search.component.scss
@@ -9,7 +9,7 @@ $multiple-check-width: 33px;
 .mat-select-search-inner {
   position: absolute;
   top: 0;
-  width: calc(100% + #{2 * $mat-menu-side-padding - $scrollbar-width});
+  width: calc(100% - $scrollbar-width) !important;
   border-bottom: 1px solid #cccccc;
   background: white;
   z-index: 100;
@@ -29,7 +29,10 @@ $multiple-check-width: 33px;
   padding: $mat-menu-side-padding;
   padding-right: $mat-menu-side-padding + $clear-button-width;
   box-sizing: border-box;
+  width: 100%;
+  border-width: 0px;
 }
+
 .mat-select-search-no-entries-found {
   padding: $mat-menu-side-padding;
 }
diff --git a/src/app/shared/components/top-bar/top-bar.component.html b/src/app/shared/components/top-bar/top-bar.component.html
@@ -123,8 +123,8 @@ <h3 class="pl-md-3">{{ title || staticTitle }}</h3>
             <fa-icon [icon]="faUser" class="icon--primary mb-1"></fa-icon>
           </button>
           <mat-menu class="matMenuMargin" xPosition="before" #menu="matMenu">
-            <button mat-menu-item class="userNameFont userName">
-              {{ getUsername() }}
+            <button mat-menu-item class="userName">
+              <div class="userNameFont">{{ getUsername() }}</div>
             </button>
             <a *ngIf="hasEmail()" mat-menu-item routerLink="/user-page">{{ "USER_PAGE.USER_PAGE" | translate }} </a>
             <a
diff --git a/src/app/shared/components/top-bar/top-bar.component.scss b/src/app/shared/components/top-bar/top-bar.component.scss
@@ -14,7 +14,7 @@ button:focus {
   pointer-events: none;
 }
 .userNameFont {
-  font-weight: bold;
+  font-weight: bold !important;
 }
 
 .mobileMedia {
diff --git a/src/assets/scss/components/_date-picker.scss b/src/assets/scss/components/_date-picker.scss
@@ -7,7 +7,10 @@ mat-calendar.datepicker-table-fix {
     -moz-box-shadow: unset;
 
     thead {
-      background-color: unset;
+      background-color: transparent !important;
+    }
+    th {
+      color: black !important;
     }
 
     tbody {
diff --git a/src/assets/scss/components/_tables.scss b/src/assets/scss/components/_tables.scss
@@ -41,10 +41,6 @@ table {
   }
 }
 
-.mdc-data-table__cell {
-  overflow: visible !important;
-}
-
 .dropdown {
   .applicationRow__edit {
     width: 10px;
@@ -119,7 +115,7 @@ table {
 }
 
 .table-select {
-  width: 500px !important;
+  width: 400px !important;
   visibility: hidden;
   height: 10px;
 }
diff --git a/src/assets/scss/setup/_material-theme.scss b/src/assets/scss/setup/_material-theme.scss
@@ -1,5 +1,4 @@
 @use "@angular/material" as mat;
-@import "@angular/material/theming";
 @import "variables";
 @include mat.core();
 
@@ -9,17 +8,34 @@ $OS2IoT-accent: mat.define-palette(mat.$deep-orange-palette, 100, 500, A100);
 $OS2IoT-warn: mat.define-palette(mat.$red-palette);
 
 // Light theme
-$OS2IoT-theme: mat.define-light-theme($OS2IoT-primary, $OS2IoT-accent, $OS2IoT-warn);
+$OS2IoT-theme: mat.define-light-theme(
+  (
+    color: (
+      theme-type: light,
+      primary: $OS2IoT-primary,
+      accent: $OS2IoT-accent,
+      warn: $OS2IoT-warn,
+    ),
+  )
+);
 
 // Dark theme
-$OS2IoT-theme: mat.define-dark-theme($OS2IoT-primary, $OS2IoT-accent, $OS2IoT-warn);
+$OS2IoT-theme: mat.define-dark-theme(
+  (
+    color: (
+      theme-type: dark,
+      primary: $OS2IoT-primary,
+      accent: $OS2IoT-accent,
+      warn: $OS2IoT-warn,
+    ),
+  )
+);
 
 // Main theme defination
 @include mat.all-component-themes($OS2IoT-theme);
 
 // Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
-@import "@angular/material/theming";
+
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
@@ -39,9 +55,14 @@ $OS2IoT-frontend-warn: mat.define-palette(mat.$red-palette);
 
 // Create the theme object (a Sass map containing all of the palettes).
 $OS2IoT-frontend-theme: mat.define-light-theme(
-  $OS2IoT-frontend-primary,
-  $OS2IoT-frontend-accent,
-  $OS2IoT-frontend-warn
+  (
+    color: (
+      theme-type: light,
+      primary: $OS2IoT-frontend-primary,
+      accent: $OS2IoT-frontend-accent,
+      warn: $OS2IoT-frontend-warn,
+    ),
+  )
 );
 
 // Include theme styles for core and each component used in your app.
@@ -135,7 +156,7 @@ $OS2IoT-frontend-theme: mat.define-light-theme(
 }
 
 .mat-sort-header-arrow {
-  color: $grey-tablehead;
+  color: $grey-tablehead !important;
   opacity: 1 !important;
 }
 
@@ -150,3 +171,13 @@ tr.mat-row {
 .mat-sort-header-content {
   text-align: left !important;
 }
+
+.mdc-data-table__cell {
+  overflow: visible !important;
+}
+
+//////////////////////// COLUMN SELECTOR SELECT PANEL //////////////////////////////////////////
+
+.mdc-menu-surface.mat-mdc-select-panel {
+  max-height: 400px !important;
+}
diff --git a/src/styles.scss b/src/styles.scss
@@ -115,11 +115,6 @@ body {
   white-space: pre-line;
 }
 
-.mdc-menu-surface.mat-mdc-select-panel {
-  max-height: 400px !important;
-  height: 400px !important;
-}
-
 .width100percent {
   width: 100%;
 }

Original file line number	Diff line number	Diff line change
`@@ -61,7 +61,7 @@ const applicationRoutes: Routes = [`
`61`	`61`	`},`
`62`	`62`	`],`
`63`	`63`	`},`
`64`		`- { path: "datatarget-new", component: DatatargetNewComponent },`
	`64`	`+ { path: "datatarget-new", component: DatatargetNewComponent, },`
`65`	`65`	`{ path: "datatarget-edit", component: DatatargetEditComponent },`
`66`	`66`	`{`
`67`	`67`	`path: "datatarget-edit/:datatargetId",`