NAS-129773 / 24.10 / Remove some flex layout usages (#10254)

truenas · Jul 5, 2024 · 12db9d9 · 12db9d9
1 parent 1c52eab
commit 12db9d9
Show file tree

Hide file tree

Showing 128 changed files with 213 additions and 620 deletions.
diff --git a/package.json b/package.json
@@ -78,7 +78,7 @@
     "@mdi/font": "~7.4.47",
     "@ngbracket/ngx-layout": "~17.0.1",
     "@ngneat/reactive-forms": "~5.0.2",
-    "@ngneat/spectator": "~18.0.1",
+    "@ngneat/spectator": "~19.0.0",
     "@ngneat/until-destroy": "~9.2.3",
     "@ngrx/component-store": "~17.2.0",
     "@ngrx/effects": "~17.2.0",

diff --git a/src/app/modules/dialog/components/confirm-dialog/confirm-dialog.component.html b/src/app/modules/dialog/components/confirm-dialog/confirm-dialog.component.html
@@ -26,7 +26,6 @@ <h1 mat-dialog-title>{{ options.title | translate }}</h1>
   >
     {{ options.confirmationCheckboxText | translate }}
   </mat-checkbox>
-  <span fxFlex></span>
   <button
     *ngIf="!options.hideCancel"
     mat-button

diff --git a/src/app/modules/dialog/components/confirm-dialog/confirm-dialog.component.scss b/src/app/modules/dialog/components/confirm-dialog/confirm-dialog.component.scss
@@ -5,6 +5,7 @@
 
 .confirm-checkbox {
   margin-left: -10px;
+  margin-right: auto;
   padding-right: 10px;
 }
 

diff --git a/src/app/modules/dialog/components/general-dialog/general-dialog.component.html b/src/app/modules/dialog/components/general-dialog/general-dialog.component.html
@@ -14,7 +14,6 @@ <h1 mat-dialog-title>
   </div>
 </div>
 <div mat-dialog-actions>
-  <span fxFlex></span>
   <button
     *ngIf="!conf.hideCancel"
     mat-button

diff --git a/src/app/modules/dialog/components/info-dialog/info-dialog.component.html b/src/app/modules/dialog/components/info-dialog/info-dialog.component.html
@@ -12,7 +12,6 @@ <h1 mat-dialog-title>
 </div>
 <div mat-dialog-actions>
   &nbsp;
-  <span fxFlex></span>
   <button
     mat-button
     class="mat-mdc-button mat-button mat-accent"

diff --git a/...ix-forms/components/ix-slide-in/components/ix-modal-header/ix-modal-header.component.html b/...ix-forms/components/ix-slide-in/components/ix-modal-header/ix-modal-header.component.html
@@ -1,8 +1,4 @@
-<div
-  class="ix-slidein-title-bar"
-  fxLayout="row"
-  fxLayoutAlign="space-between center"
->
+<div class="ix-slidein-title-bar">
   <h3 class="ix-formtitle">
     {{ title() | translate }}
     <ix-readonly-badge *ngIf="requiredRoles()?.length && !(hasRequiredRoles() | async)"></ix-readonly-badge>

diff --git a/...ix-forms/components/ix-slide-in/components/ix-modal-header/ix-modal-header.component.scss b/...ix-forms/components/ix-slide-in/components/ix-modal-header/ix-modal-header.component.scss
@@ -10,9 +10,11 @@
   align-items: center;
   background-color: var(--bg2);
   border-bottom: 2px solid var(--lines);
+  display: flex;
   height: 75px;
   margin: 0 -20px;
   padding: 0 30px;
+  place-content: center space-between;
 }
 
 .ix-formtitle {

diff --git a/src/app/modules/layout/components/admin-layout/admin-layout.component.html b/src/app/modules/layout/components/admin-layout/admin-layout.component.html
@@ -1,12 +1,4 @@
-<mat-sidenav-container
-  class="app-side-nav-container"
-  fxLayout="row"
-  ngClass.xs="xs"
-  ngClass.sm="sm"
-  ngClass.md="md"
-  ngClass.lg="lg"
-  ngClass.xl="xl"
->
+<mat-sidenav-container class="app-side-nav-container">
   <!-- Main side navigation -->
   <mat-sidenav
     class="sidebar-panel not-alerts"

diff --git a/src/app/modules/layout/components/navigation/navigation.component.html b/src/app/modules/layout/components/navigation/navigation.component.html
@@ -36,7 +36,6 @@
         >
           <ix-icon [name]="item.icon"></ix-icon>
           <span>{{ item.name | translate }}</span>
-          <span fxFlex></span>
           <ix-icon class="menu-caret">keyboard_arrow_right</ix-icon>
         </a>
 

diff --git a/src/app/modules/layout/components/navigation/navigation.component.scss b/src/app/modules/layout/components/navigation/navigation.component.scss
@@ -33,4 +33,8 @@
   mat-nav-list {
     padding-top: 0;
   }
+
+  .menu-caret {
+    margin-left: auto;
+  }
 }
diff --git a/src/app/modules/layout/components/topbar/about-dialog/about-dialog.component.html b/src/app/modules/layout/components/topbar/about-dialog/about-dialog.component.html
@@ -13,20 +13,18 @@
   <div mat-dialog-content>
     <div class="help">{{ helptext.help | translate }}</div>
     <div class="line-item">
-      <div fxFlex="10%">
+      <div>
         <ix-icon name="assignment" class="bullet-icon"></ix-icon>
       </div>
       <div
-        fxFlex="90%"
         class="medium-font"
         [innerHtml]="helptext.docs | translate"
       ></div>
     </div>
 
     <div class="line-item">
-      <div fxFlex="10%"><ix-icon name="group" class="bullet-icon"></ix-icon></div>
+      <div><ix-icon name="group" class="bullet-icon"></ix-icon></div>
       <div
-        fxFlex="90%"
         class="medium-font"
         [innerHtml]="helptext.forums | translate"
       ></div>

diff --git a/src/app/modules/layout/components/topbar/about-dialog/about-dialog.component.scss b/src/app/modules/layout/components/topbar/about-dialog/about-dialog.component.scss
@@ -31,7 +31,16 @@
 }
 
 .line-item {
+  display: flex;
   margin: 20px 10px;
+
+  > *:first-child {
+    flex: 1 1 10%;
+  }
+
+  > *:last-child {
+    flex: 1 1 90%;
+  }
 }
 
 .bullet-icon {

diff --git a/src/app/modules/layout/components/topbar/topbar.component.html b/src/app/modules/layout/components/topbar/topbar.component.html
@@ -14,8 +14,6 @@
 
     <ix-global-search-trigger></ix-global-search-trigger>
 
-    <span fxFlex></span>
-
     <a class="mobile-logo" routerLink="/" ixTest="mobile-logo">
       <div class="mobile-logo-container">
         <ix-icon name="ix:logo_truenas_scale_mark_color" class="logomark"></ix-icon>

diff --git a/src/app/modules/page-header/page-header.module.ts b/src/app/modules/page-header/page-header.module.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { MatButton } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 import { FlexModule } from '@ngbracket/ngx-layout';
 import { TranslateModule } from '@ngx-translate/core';
@@ -22,6 +23,7 @@ import { NewPageBadgeComponent } from './is-new-indicator/new-page-badge.compone
     CommonDirectivesModule,
     TestIdModule,
     AppLoaderModule,
+    MatButton,
   ],
   declarations: [
     BreadcrumbComponent,

diff --git a/src/app/modules/page-header/page-title-header/page-header.component.html b/src/app/modules/page-header/page-title-header/page-header.component.html
@@ -1,5 +1,5 @@
 <div class="header-container">
-  <ix-breadcrumb fxFlex="100%"></ix-breadcrumb>
+  <ix-breadcrumb class="breadcrumbs"></ix-breadcrumb>
   <div class="title-container">
     <div fxLayout="row" fxLayoutAlign="center center">
       <h1>{{ pageTitle ? (pageTitle | translate) : (currentTitle$ | async) | translate }}</h1>

diff --git a/src/app/modules/page-header/page-title-header/page-header.component.scss b/src/app/modules/page-header/page-title-header/page-header.component.scss
@@ -30,9 +30,10 @@
   }
 }
 
-ix-breadcrumb {
+.breadcrumbs {
   position: relative;
   top: 8px;
+  width: 100%;
 }
 
 ix-fake-progress-bar {

diff --git a/src/app/modules/terminal/components/copy-paste-message/copy-paste-message.component.html b/src/app/modules/terminal/components/copy-paste-message/copy-paste-message.component.html
@@ -1,7 +1,6 @@
 <h1 mat-dialog-title>{{ title | translate }}</h1>
 <div mat-dialog-content [innerHtml]="messageHtml"></div>
 <div mat-dialog-actions>
-  <span fxFlex></span>
   <button
     mat-button
     color="primary"

diff --git a/...truecommand/components/truecommand-connect-modal/truecommand-connect-modal.component.html b/...truecommand/components/truecommand-connect-modal/truecommand-connect-modal.component.html
@@ -23,8 +23,6 @@
   </div>
 
   <div mat-dialog-actions>
-    <span fxFlex></span>
-
     <button
       mat-button
       type="button"

diff --git a/src/app/pages/account/users/user-form/user-form.component.html b/src/app/pages/account/users/user-form/user-form.component.html
@@ -3,7 +3,7 @@
 <form class="ix-form-container" [formGroup]="form" (submit)="onSubmit()">
   <ix-fieldset [title]="'Identification' | translate">
     <div class="columns">
-      <div fxFlex="50%">
+      <div>
         <ix-input
           formControlName="full_name"
           [label]="'Full Name' | translate"
@@ -25,7 +25,7 @@
         ></ix-input>
       </div>
 
-      <div fxFlex="50%">
+      <div>
         <ix-slide-toggle
           formControlName="password_disabled"
           [label]="'Disable Password' | translate"
@@ -55,7 +55,7 @@
 
   <ix-fieldset [title]="'User ID and Groups' | translate">
     <div class="columns">
-      <div fxFlex="50%">
+      <div>
         <ix-input
           formControlName="uid"
           type="number"
@@ -71,7 +71,7 @@
         ></ix-slide-toggle>
       </div>
 
-      <div fxFlex="50%">
+      <div>
         <ix-chips
           formControlName="groups"
           [label]="'Auxiliary Groups' | translate"
@@ -94,7 +94,7 @@
   <mat-divider></mat-divider>
 
   <div class="columns">
-    <div fxFlex="50%">
+    <div>
       <ix-fieldset [title]="'Directories and Permissions' | translate">
         <ix-explorer
           formControlName="home"
@@ -117,7 +117,7 @@
       </ix-fieldset>
     </div>
 
-    <div fxFlex="50%">
+    <div>
       <ix-fieldset [title]="'Authentication' | translate">
         <ix-textarea
           formControlName="sshpubkey"

diff --git a/src/app/pages/account/users/user-form/user-form.component.scss b/src/app/pages/account/users/user-form/user-form.component.scss
@@ -13,11 +13,11 @@
   display: flex;
   flex-direction: row;
 
+  > div {
+    flex: 1 1 50%;
+  }
+
   @media (max-width: $breakpoint-tablet) {
     display: block !important;
-
-    > div {
-      max-width: 100% !important;
-    }
   }
 }
diff --git a/...app/pages/data-protection/cloud-backup/cloud-backup-list/cloud-backup-list.component.html b/...app/pages/data-protection/cloud-backup/cloud-backup-list/cloud-backup-list.component.html
@@ -13,7 +13,7 @@
   </button>
 </ix-page-header>
 
-<div class="container" fxLayoutGap="16px">
+<div class="container">
   <div class="table-container" [class.mobile-hidden]="showMobileDetails && dataProvider.expandedRow">
     @if (!isMobileView) {
       <ng-container [ngTemplateOutlet]="thead"></ng-container>

diff --git a/src/app/pages/datasets/components/dataset-management/dataset-management.component.html b/src/app/pages/datasets/components/dataset-management/dataset-management.component.html
@@ -3,7 +3,7 @@
     <ix-empty [conf]="emptyConf()" [requiredRoles]="requiredRoles"></ix-empty>
   </div>
 } @else {
-  <div class="container" fxLayoutGap="16px">
+  <div class="container">
     <div class="table-container">
       @if (!showMobileDetails) {
         <ix-fake-progress-bar
@@ -17,6 +17,7 @@
           (search)="onSearch($event)"
         ></ix-search-input1>
       </div>
+
       <div
         #ixTreeHeader
         class="sticky-header"

diff --git a/src/app/pages/directory-service/directory-services.component.html b/src/app/pages/directory-service/directory-services.component.html
@@ -1,6 +1,6 @@
 @switch (true) {
   @case (!isActiveDirectoryEnabled && !isLdapEnabled) {
-    <div fxLayout="column" fxLayoutAlign="center center" class="everything-disabled">
+    <div class="everything-disabled">
       <ix-empty [conf]="noDirectoryServicesConfig"></ix-empty>
       <div class="actions">
         <button

diff --git a/src/app/pages/directory-service/directory-services.component.scss b/src/app/pages/directory-service/directory-services.component.scss
@@ -12,6 +12,10 @@
 }
 
 .everything-disabled {
+  .actions {
+    justify-content: center;
+  }
+
   button {
     &:last-child {
       margin-right: 0;

diff --git a/.../pages/storage/components/dashboard-pool/disk-health-card/disk-health-card.component.html b/.../pages/storage/components/dashboard-pool/disk-health-card/disk-health-card.component.html
@@ -14,7 +14,7 @@ <h3 mat-card-title>
     </a>
   </mat-card-header>
 
-  <mat-card-content fxLayout="column" fxFlex="100">
+  <mat-card-content class="content">
     <div class="details-item">
       <div class="label">
         {{ 'Disks temperature related alerts' | translate }}:

diff --git a/.../pages/storage/components/dashboard-pool/disk-health-card/disk-health-card.component.scss b/.../pages/storage/components/dashboard-pool/disk-health-card/disk-health-card.component.scss
@@ -14,6 +14,11 @@
     height: 100%;
   }
 
+  .content {
+    display: flex;
+    flex-direction: column;
+  }
+
   .details-item {
     margin: 8px 0;
   }

diff --git a/...pp/pages/storage/components/dashboard-pool/pool-usage-card/pool-usage-card.component.html b/...pp/pages/storage/components/dashboard-pool/pool-usage-card/pool-usage-card.component.html
@@ -1,4 +1,4 @@
-<mat-card class="card" fxLayout="column" [ixUiSearch]="searchableElements.elements.usage">
+<mat-card class="card" [ixUiSearch]="searchableElements.elements.usage">
   <mat-card-header>
     <h3 mat-card-title>
       {{ 'Usage' | translate }}
@@ -14,13 +14,10 @@ <h3 mat-card-title>
     </a>
   </mat-card-header>
 
-  <mat-card-content
-    fxLayout="row"
-    fxFlex="100"
-    fxLayoutAlign="space-around center"
-  >
-    <div class="left" fxLayout="column" fxLayoutAlign="center center">
+  <mat-card-content class="card-content">
+    <div class="left">
       <ix-gauge-chart
+        class="gauge"
         [colorFill]="usedPercentage === 0 ? chartBlankColor : isLowCapacity ? chartLowCapacityColor : chartFillColor"
         [colorBlank]="chartBlankColor"
         [width]="150"
@@ -36,25 +33,25 @@ <h3 mat-card-title>
       </div>
     </div>
 
-    <div class="right" fxLayout="column" fxLayoutAlign="center center">
-      <div class="captions" fxLayout="column">
-        <span class="capacity-caption" fxLayoutAlign="start center">
+    <div class="right">
+      <div class="captions">
+        <div class="capacity-caption">
           <b>{{ 'Usable Capacity' | translate }}:</b>
           <span class="value-caption">
             {{ capacity | ixFileSize }}
           </span>
-        </span>
+        </div>
         <ul class="list-caption">
           <li class="item-caption">
-            <span class="used-caption" fxLayoutAlign="start center">
+            <span class="used-caption">
               <b>{{ 'Used' | translate }}:</b>
               <span class="value-caption">
                 {{ (rootDataset?.used.parsed | ixFileSize) || ('Unknown' | translate) }}
               </span>
             </span>
           </li>
           <li class="item-caption">
-            <span class="available-caption" fxLayoutAlign="start center">
+            <span class="available-caption">
               <b>{{ 'Available' | translate }}:</b>
               <span class="value-caption">
                 {{ (rootDataset?.available.parsed | ixFileSize) || ('Unknown' | translate) }}