fix: styles broken by migration to newer angular version #636

sipcapture · Jun 5, 2024 · 0837e08 · 0837e08
1 parent fc4b49a
commit 0837e08
Show file tree

Hide file tree

Showing 21 changed files with 66 additions and 113 deletions.
diff --git a/src/app/components/controls/transaction-filter/transaction-filter.component.html b/src/app/components/controls/transaction-filter/transaction-filter.component.html
@@ -1,5 +1,5 @@
 <button mat-icon-button
-    class="button-icon-right-top"
+    class="button-icon-right-top fa-icon-custom"
     (click)="doOpenFilter()">
     <fa-icon icon="filter"></fa-icon>
 </button>

diff --git a/src/app/components/dashboard/edit-dialog/edit-dialog.component.html b/src/app/components/dashboard/edit-dialog/edit-dialog.component.html
@@ -66,7 +66,8 @@ <h4>{{'dashboard.editDialog.dashboardGridConfigurations.title' | translate}}</h4
         <mat-option [value]="'horizontalFixed'">{{'dashboard.editDialog.dashboardGridConfigurations.gridTypes.horizontalFixed' | translate}}</mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-checkbox labelPosition="before" [(ngModel)]="data.pushing">{{'dashboard.editDialog.dashboardGridConfigurations.pushing' | translate}}</mat-checkbox>
+    <mat-checkbox [(ngModel)]="data.pushing">{{'dashboard.editDialog.dashboardGridConfigurations.pushing' |
+        translate}}</mat-checkbox>
   </div>
   <div *ngIf="data.type !== 2 && data.type !== 7" style="display: flex; flex-direction: column">
     <hr style="width: 100%;">
@@ -79,8 +80,10 @@ <h4>{{'dashboard.editDialog.widgetControl.title' | translate}}</h4>
   <div *ngIf="data.type === 7" style="display: flex; flex-direction: column">
     <hr style="width: 100%;">
     <h4>{{'dashboard.editDialog.grafanaControl.title' | translate}}</h4>
-    <mat-checkbox labelPosition="before" [(ngModel)]="data.grafanaTimestamp">{{'dashboard.editDialog.grafanaControl.grafanaTimestamp' | translate}}</mat-checkbox>
-    <mat-checkbox labelPosition="before" [(ngModel)]="data.grafanaProxy">{{'dashboard.editDialog.grafanaControl.grafanaProxy' | translate}}</mat-checkbox>
+    <mat-checkbox [(ngModel)]="data.grafanaTimestamp">{{'dashboard.editDialog.grafanaControl.grafanaTimestamp' |
+        translate}}</mat-checkbox>
+    <mat-checkbox [(ngModel)]="data.grafanaProxy">{{'dashboard.editDialog.grafanaControl.grafanaProxy' |
+        translate}}</mat-checkbox>
     <div *ngIf="isSameOrigin">
         <mat-checkbox color="primary"
             [(ngModel)]="data.hasVariables"
@@ -92,8 +95,7 @@ <h4>{{'dashboard.editDialog.grafanaControl.title' | translate}}</h4>
   <hr style="width: 100%;">
   <div>
     <button mat-raised-button class="setting-btn-ok" (click)="onExport()">{{'dashboard.editDialog.export' | translate}}</button>
-  </div>
-  <hr style="width: 100%;">
+</div>
 </div>
 
 <div mat-dialog-actions style="float: right; margin-bottom: 0rem;">

diff --git a/src/app/components/dashboard/edit-dialog/edit-dialog.component.scss b/src/app/components/dashboard/edit-dialog/edit-dialog.component.scss
@@ -1,5 +1,4 @@
 .title {
-    margin: -1.5rem -1.5rem 2rem -1.5rem;
     width: initial !important;
     display: flex;
     justify-content: space-between;

diff --git a/src/app/components/menu/menu.component.scss b/src/app/components/menu/menu.component.scss
@@ -284,7 +284,6 @@ button {
   margin-bottom: -11px;
   margin-left: 40px;
 }
-
 .tab-menu-title {
   justify-content: flex-end;
 }
diff --git a/src/app/components/preference/dialogs/dialog-alias/dialog-alias.component.scss b/src/app/components/preference/dialogs/dialog-alias/dialog-alias.component.scss
@@ -1,10 +1,7 @@
 ::ng-deep .mat-mdc-dialog-container {
   padding:24px;
   padding-bottom:12px;
-  .mat-mdc-dialog-actions {
-    padding:0px;
-    margin-top:3px;
-  }
+
 }
 .chack-list {
   margin-right: 1.3rem;

diff --git a/src/app/components/preference/dialogs/dialog-users/dialog-users.component.html b/src/app/components/preference/dialogs/dialog-users/dialog-users.component.html
@@ -12,7 +12,7 @@
       <p [ngClass]="isCopy && isNotChanged ? 'copy-warning': ''">
         <span *ngIf="isCopy && isNotChanged">{{ 'preference.users.dialog.userCopy' | translate }}</span>
       </p>
-      <div style="display: grid; grid-template-columns: repeat(2, 50%); width: calc(100% - 10px); grid-gap: 10px; ">
+    <div style="display: grid; grid-template-columns: repeat(2, 50%); width: calc(100% - 17px); grid-gap: 10px; ">
         <mat-form-field *ngIf="username">
           <mat-label>{{ 'preference.users.dialog.username' | translate }}</mat-label>
           <input matInput
@@ -70,7 +70,7 @@
         </mat-form-field> -->
       </div>
 
-      <div style="display: grid; grid-template-columns: repeat(2, 50%); width: calc(100% - 10px); grid-gap: 10px;">
+    <div style="display: grid; grid-template-columns: repeat(2, 50%); width: calc(100% - 17px); grid-gap: 10px;">
         <mat-form-field>
           <input matInput
             autocomplete="new-password"
@@ -123,7 +123,7 @@
 </div>
       <strong>{{ 'preference.users.dialog.personalInfo' | translate }}</strong>
       <hr />
-      <div style="display: grid; grid-template-columns: repeat(2, 50%); width: calc(100% - 10px); grid-gap: 10px;">
+    <div style="display: grid; grid-template-columns: repeat(2, 50%); width: calc(100% - 17px); grid-gap: 10px;">
         <mat-form-field>
           <mat-label>{{ 'preference.users.dialog.firstName' | translate }}</mat-label>
           <input matInput
@@ -157,7 +157,7 @@
           </mat-error>
         </mat-form-field>
       </div>
-      <div style="display: grid; grid-template-columns: repeat(2, 50%); width: calc(100% - 10px); grid-gap: 10px;">
+    <div style="display: grid; grid-template-columns: repeat(2, 50%); width: calc(100% - 17px); grid-gap: 10px;">
         <mat-form-field>
           <mat-label>{{ 'preference.users.dialog.email' | translate }}</mat-label>
           <input matInput

diff --git a/src/app/components/preference/pages/page-admin/page-admin.component.scss b/src/app/components/preference/pages/page-admin/page-admin.component.scss
@@ -41,54 +41,7 @@
     }
 }
 
-.in-widget {
-    margin-left: 0;
 
-    .setting-btn {
-        border-top-right-radius: 0px !important;
-        border-bottom-right-radius: 0px !important;
-        box-shadow: none !important;
-        width: 80%;
-        margin-right: 0px;
-    }
-
-    .setting-select {
-        position: relative;
-        width: 10px;
-        min-width: unset;
-        margin-left: 0px !important;
-        border-top-left-radius: 0px !important;
-        border-bottom-left-radius: 0px !important;
-        border-left: 1px black solid;
-        box-shadow: none !important;
-        background-color: #009cbf22;
-        /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
-        /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
-        ::ng-deep.mat-select-value {
-            position: absolute;
-        }
-        /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
-        /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
-        /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
-        /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
-        ::ng-deep.mat-select-arrow-wrapper {
-            display: block;
-            /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
-            /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
-            .mat-select-arrow {
-                margin: 0px !important;
-                margin-left: -5px !important;
-            }
-        }
-    }
-}
-
-.in-select {
-    width: 100%;
-    margin: unset;
-    background-color: #009cbf22;
-    color: #009cbf;
-}
 
 .page-admin {
     display: flex;

diff --git a/src/app/components/preference/pages/page-reset/page-reset.component.html b/src/app/components/preference/pages/page-reset/page-reset.component.html
@@ -18,24 +18,28 @@ <h3>{{ page | titlecase }}</h3>
                     {{'LINK.localStorage' | translate}}</mat-card-title>
                 <mat-card-subtitle>{{'preference.pageReset.localStorageSetting' | translate }}</mat-card-subtitle>
             </mat-card-header>
-            <mat-card-body>
-                <div class="setting-button-container">
-                    <span style='display: flex;' class='in-widget'>
-                        <button mat-raised-button class="setting-btn"
-                            (click)="onClearLocalData(false)">{{'preference.pageReset.clearUserLocalData' | translate }}
-                        </button>
-                        <button mat-raised-button class="setting-select" (click)='select.open()'>
-                            <mat-select style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;"
-                                #select>
-                                <mat-option style="padding: 2px 0">
-                                    <button mat-raised-button class="setting-btn in-select"
-                                        (click)="onClearLocalData(true)">{{'preference.pageReset.clearAllLocalData' | translate }}</button>
-                                </mat-option>
-                            </mat-select>
-                        </button>
-                    </span>
-                </div>
-            </mat-card-body>
+            <div class="setting-button-container">
+                <span style='display: flex;' class='in-widget'>
+                    <button mat-raised-button class="setting-btn"
+                        (click)="onClearLocalData(false)">{{'preference.pageReset.clearUserLocalData' | translate }}
+                    </button>
+            <button mat-raised-button class="setting-select" color="primary">
+                <button class="function-menu-trigger" mat-button [matMenuTriggerFor]="reset">
+                    <svg viewBox="0 0 24 24" width="24px" height="24px" focusable="false">
+                        <path d="M7 10l5 5 5-5z"></path>
+                    </svg>
+                </button>
+                <mat-menu #reset="matMenu">
+                    <div class="function-menu-wrapper" style="padding: 0;">
+                        <button mat-raised-button class="setting-btn in-select"
+                                    (click)="onClearLocalData(true)">{{'preference.pageReset.clearAllLocalData' | translate
+                                    }}</button>
+                            </div>
+                        </mat-menu>
+
+                    </button>
+                </span>
+            </div>
         </mat-card>
         <mat-card appearance="outlined" class="reset-card" *ngIf="isResetDashboard">
             <mat-card-header class="flex-between">

diff --git a/src/app/components/preference/pages/page-reset/page-reset.component.scss b/src/app/components/preference/pages/page-reset/page-reset.component.scss
@@ -35,7 +35,6 @@
     margin-bottom: 21px;
 
     & .setting-btn {
-        height: 35px;
         background: #009cbf !important;
         color: white;
         margin-right: 7px;
@@ -54,11 +53,12 @@
         border-top-right-radius: 0px !important;
         border-bottom-right-radius: 0px !important;
         box-shadow: none !important;
-        width: 80%;
+        width: 85%;
         margin-right: 0px;
     }
 
     .setting-select {
+        overflow: hidden;
         position: relative;
         width: 10px;
         min-width: unset;
@@ -68,21 +68,13 @@
         border-left: 2px #6687bd solid;
         box-shadow: none !important;
         background-color: #009cbf;
-        /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
-        /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
         ::ng-deep.mat-select-value {
             position: absolute;
         }
-        /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
-        /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
-        /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
-        /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
-        ::ng-deep.mat-select-arrow-wrapper {
+::ng-deep.mat-mdc-select-arrow-wrapper {
             display: block;
-            /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
-            /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
-            .mat-select-arrow {
-                color:white;
+.mat-mdc-select-arrow {
+        color: white;
                 margin: 0px !important;
                 margin-left: -5px !important;
             }
@@ -92,9 +84,12 @@
 
 .in-select {
     width: 100%;
-    margin: unset;
+    margin-bottom: 5px;
     background-color: #009cbf22;
     color: #009cbf;
+    &:last-of-type {
+            margin-bottom: unset;
+        }
 }
 
 .page-reset {

diff --git a/src/app/components/preference/service-dialogs/dialog-import/dialog-import.component.html b/src/app/components/preference/service-dialogs/dialog-import/dialog-import.component.html
@@ -33,8 +33,7 @@
     </div>
 </div>
 
-  <div mat-dialog-actions style="float: right; margin-bottom: 0rem;">
-    <button mat-raised-button (click)="onNoClick()"></button>
+<div mat-dialog-actions style="float: right; margin-bottom: 0rem;">
     <button mat-raised-button class="setting-btn-ok" cdkFocusInitial
       (click)="onNoClick()">{{'LINK.buttons.close' | translate}}</button>
-  </div>
+</div>
diff --git a/src/app/components/search-grid-call/export-dialog/export-dialog.component.scss b/src/app/components/search-grid-call/export-dialog/export-dialog.component.scss
@@ -8,7 +8,6 @@
 }
 
 .title {
-    margin: -1.5rem -1.5rem 2rem -1.5rem;
     width: initial !important;
     display: flex;
     justify-content: space-between;

diff --git a/src/app/components/search-grid-call/grid-settings-dialog/grid-settings-dialog.scss b/src/app/components/search-grid-call/grid-settings-dialog/grid-settings-dialog.scss
@@ -3,7 +3,6 @@
 }
 
 .title {
-    margin: -1.5rem -1.5rem 2rem -1.5rem;
     width: initial !important;
     display: flex;
     justify-content: space-between;

diff --git a/src/app/components/search-grid-call/search-grid-call.component.scss b/src/app/components/search-grid-call/search-grid-call.component.scss
@@ -23,7 +23,7 @@
 .regex-container {
 	font-size: 13px;
 	position: fixed;
-	top: 2px;
+    top: 8px;
 	right: 46px;
 	max-width: 275px;
 	display: flex;

diff --git a/src/app/components/widgets/ace-editor-widget/settings-ace-editor-widget.component.scss b/src/app/components/widgets/ace-editor-widget/settings-ace-editor-widget.component.scss
@@ -1,5 +1,4 @@
 .title {
-    margin: -1.5rem -1.5rem 2rem -1.5rem;
     width: initial !important;
     display: flex;
     justify-content: space-between;

diff --git a/src/app/components/widgets/alert-widget/setting-alert-widget.component.scss b/src/app/components/widgets/alert-widget/setting-alert-widget.component.scss
@@ -1,5 +1,4 @@
 .title {
-    margin: -1.5rem -1.5rem 2rem -1.5rem;
     width: initial !important;
     display: flex;
     justify-content: space-between;

diff --git a/src/app/components/widgets/clock-widget/setting-clock-widget.component.scss b/src/app/components/widgets/clock-widget/setting-clock-widget.component.scss
@@ -1,5 +1,4 @@
 .title {
-    margin: -1.5rem -1.5rem 2rem -1.5rem;
     width: initial !important;
     display: flex;
     justify-content: space-between;

diff --git a/src/app/components/widgets/protosearch-widget/protosearch-widget.component.scss b/src/app/components/widgets/protosearch-widget/protosearch-widget.component.scss
@@ -15,13 +15,20 @@
         z-index: 2;
     }
 }
+.search-menu-trigger {
+    min-width: 0 !important;
+    width: 0;
+    padding-right: 17px !important;
 
+    svg {
+        fill: rgba(0, 0, 0, 0.54);
+    }
+}
 .chack-list {
     margin-right: 1.3rem;
 }
 
 .title {
-    margin: -1.5rem -1.5rem 2rem -1.5rem;
     width: initial !important;
     display: flex;
     justify-content: space-between;

diff --git a/src/app/components/widgets/protosearch-widget/setting-protosearch-widget.component.scss b/src/app/components/widgets/protosearch-widget/setting-protosearch-widget.component.scss
@@ -3,7 +3,6 @@
 }
 
 .title {
-	margin: -1.5rem -1.5rem 2rem -1.5rem;
 	width: initial !important;
 	display: flex;
 	justify-content: space-between;
@@ -28,7 +27,7 @@
 	padding: 5px;
 	position: relative;
 	padding-top: 8px;
-	bottom: 0px;
+    bottom: 1px;
 	right: 0px;
 	display: flex;
 	justify-content: flex-end;

diff --git a/src/app/components/widgets/result-chart-widget/setting-result-chart-widget.component.scss b/src/app/components/widgets/result-chart-widget/setting-result-chart-widget.component.scss
@@ -1,5 +1,4 @@
 .title {
-    margin: -1.5rem -1.5rem 2rem -1.5rem;
     width: initial !important;
     display: flex;
     justify-content: space-between;

diff --git a/src/app/components/widgets/result-widget/setting-result-widget.component.scss b/src/app/components/widgets/result-widget/setting-result-widget.component.scss
@@ -1,5 +1,4 @@
 .title {
-    margin: -1.5rem -1.5rem 2rem -1.5rem;
     width: initial !important;
     display: flex;
     justify-content: space-between;

diff --git a/src/styles.scss b/src/styles.scss
@@ -52,10 +52,7 @@
     }
     letter-spacing: normal !important;
 }
-* {
-    scrollbar-width: thin;
-    scrollbar-color: rgba(199, 199, 199, 0.748) transparent;
-}
+
 // using Roboto bold. light, normal
 
 /// fonts settings :
@@ -1348,3 +1345,12 @@ app-root {
     cursor: pointer;
     line-height: 14px;
 }
+.fa-icon-custom {
+    width: 40px !important;
+    height: 40px !important;
+    padding: 6px 12px 18px 12px !important;
+
+    svg {
+        width: 14px !important;
+    }
+}