gh-512 Remove non-standard CSS selectors

* Update all CSS to not refer to Angular component names as CSS selectors * Created mdm-skeleton-badge component to reduce same copy-paste code
MauroDataMapper · Apr 27, 2022 · 29f32fc · 29f32fc
1 parent fd580e1
commit 29f32fc
Show file tree

Hide file tree

Showing 32 changed files with 171 additions and 323 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -16,13 +16,13 @@
 
 SPDX-License-Identifier: Apache-2.0
 -->
-<div [class]="themeCssSelector">
+<div class="mdm-root" [class]="themeCssSelector">
     <div class="mat-typography mdm-app-component">
         <mdm-navbar></mdm-navbar>
 
         <main ui-view></main>
 
-        <mdm-footer></mdm-footer>
+        <mdm-footer class="mdm-footer"></mdm-footer>
 
         <mdm-loading-indicator></mdm-loading-indicator>
     </div>

diff --git a/src/app/code-set/code-set/code-set.component.html b/src/app/code-set/code-set/code-set.component.html
@@ -47,18 +47,7 @@
     <mat-tab>
       <ng-template mat-tab-label>
         Terms
-        <span *ngIf="isLoadingTerms" class="mdm--skeleton-badge">
-          <ngx-skeleton-loader
-            count="1"
-            appearance="circle"
-            [theme]="{
-              'border-radius': '5px',
-              height: '31px',
-              width: '28px',
-              'background-color': '#b7bbc5'
-            }"
-          ></ngx-skeleton-loader>
-        </span>
+        <mdm-skeleton-badge *ngIf="isLoadingTerms"></mdm-skeleton-badge>
         ({{ termsItemCount }})
       </ng-template>
       <div class="full-width">
@@ -85,18 +74,7 @@
     <mat-tab>
       <ng-template mat-tab-label>
         Rules
-        <span *ngIf="isLoadingRules" class="mdm--skeleton-badge">
-          <ngx-skeleton-loader
-            count="1"
-            appearance="circle"
-            [theme]="{
-              'border-radius': '5px',
-              height: '31px',
-              width: '28px',
-              'background-color': '#b7bbc5'
-            }"
-          ></ngx-skeleton-loader>
-        </span>
+        <mdm-skeleton-badge *ngIf="isLoadingRules"></mdm-skeleton-badge>
         ({{ rulesItemCount }})
       </ng-template>
       <div class="full-width">

diff --git a/src/app/data-type/data-type.component.html b/src/app/data-type/data-type.component.html
@@ -68,18 +68,7 @@
     <mat-tab>
       <ng-template mat-tab-label>
         Rules
-        <span *ngIf="isLoadingRules" class="mdm--skeleton-badge">
-          <ngx-skeleton-loader
-            count="1"
-            appearance="circle"
-            [theme]="{
-              'border-radius': '5px',
-              height: '31px',
-              width: '28px',
-              'background-color': '#b7bbc5'
-            }"
-          ></ngx-skeleton-loader>
-        </span>
+        <mdm-skeleton-badge *ngIf="isLoadingRules"></mdm-skeleton-badge>
         ({{ rulesItemCount }})
       </ng-template>
       <div class="full-width">

diff --git a/src/app/dataElement/data-element/data-element.component.html b/src/app/dataElement/data-element/data-element.component.html
@@ -61,18 +61,7 @@
   <mat-tab>
     <ng-template mat-tab-label>
       Rules
-      <span *ngIf="isLoadingRules" class="mdm--skeleton-badge">
-        <ngx-skeleton-loader
-          count="1"
-          appearance="circle"
-          [theme]="{
-            'border-radius': '5px',
-            height: '31px',
-            width: '28px',
-            'background-color': '#b7bbc5'
-          }"
-        ></ngx-skeleton-loader>
-      </span>
+      <mdm-skeleton-badge *ngIf="isLoadingRules"></mdm-skeleton-badge>
       ({{ rulesItemCount }})
     </ng-template>
     <div class="full-width">

diff --git a/src/app/dataModel/data-model.component.html b/src/app/dataModel/data-model.component.html
@@ -84,7 +84,7 @@ <h4 class="marginless">Search</h4>
   (selectedIndexChange)="tabSelected($event)"
 >
   <mat-tab label="Description">
-    <ng-template matTabContent>      
+    <ng-template matTabContent>
       <mdm-profile-data-view
         [catalogueItem]="dataModel"
         (savingDefault)="save($event)"
@@ -95,18 +95,7 @@ <h4 class="marginless">Search</h4>
   <mat-tab>
     <ng-template mat-tab-label>
       Schema
-      <span *ngIf="isLoadingSchema" class="mdm--skeleton-badge">
-        <ngx-skeleton-loader
-          count="1"
-          appearance="circle"
-          [theme]="{
-            'border-radius': '5px',
-            height: '31px',
-            width: '28px',
-            'background-color': '#b7bbc5'
-          }"
-        ></ngx-skeleton-loader>
-      </span>
+      <mdm-skeleton-badge *ngIf="isLoadingSchema"></mdm-skeleton-badge>
       ({{ schemaItemCount }})
     </ng-template>
     <div class="full-width">
@@ -184,18 +173,7 @@ <h4 class="marginless">Search</h4>
   <mat-tab>
     <ng-template mat-tab-label>
       Types
-      <span *ngIf="isLoadingTypes" class="mdm--skeleton-badge">
-        <ngx-skeleton-loader
-          count="1"
-          appearance="circle"
-          [theme]="{
-            'border-radius': '5px',
-            height: '31px',
-            width: '28px',
-            'background-color': '#b7bbc5'
-          }"
-        ></ngx-skeleton-loader>
-      </span>
+      <mdm-skeleton-badge *ngIf="isLoadingTypes"></mdm-skeleton-badge>
       ({{ typesItemCount }})
     </ng-template>
     <div class="full-width">
@@ -305,18 +283,7 @@ <h4 class="marginless">Search</h4>
   <mat-tab>
     <ng-template mat-tab-label>
       Rules
-      <span *ngIf="isLoadingRules" class="mdm--skeleton-badge">
-        <ngx-skeleton-loader
-          count="1"
-          appearance="circle"
-          [theme]="{
-            'border-radius': '5px',
-            height: '31px',
-            width: '28px',
-            'background-color': '#b7bbc5'
-          }"
-        ></ngx-skeleton-loader>
-      </span>
+      <mdm-skeleton-badge *ngIf="isLoadingRules"></mdm-skeleton-badge>
       ({{ rulesItemCount }})
     </ng-template>
     <div class="full-width">
@@ -403,18 +370,7 @@ <h4 class="marginless">Search</h4>
   <mat-tab>
     <ng-template mat-tab-label>
       History
-      <span *ngIf="isLoadingHistory" class="mdm--skeleton-badge">
-        <ngx-skeleton-loader
-          count="1"
-          appearance="circle"
-          [theme]="{
-            'border-radius': '5px',
-            height: '31px',
-            width: '28px',
-            'background-color': '#b7bbc5'
-          }"
-        ></ngx-skeleton-loader>
-      </span>
+      <mdm-skeleton-badge *ngIf="isLoadingHistory"></mdm-skeleton-badge>
       ({{ historyItemCount }})
     </ng-template>
 

diff --git a/src/app/folder/folder.component.css b/src/app/folder/folder.component.css
@@ -15,7 +15,4 @@ See the License for the specific language governing permissions and
 limitations under the License.
 
 SPDX-License-Identifier: Apache-2.0
-*/
-ngx-tab:not(.active) {
-    opacity: 0;
-}
+*/
diff --git a/src/app/folder/folder.component.html b/src/app/folder/folder.component.html
@@ -83,18 +83,7 @@ <h4 class="marginless">Search</h4>
       <mat-tab>
         <ng-template mat-tab-label>
           Rules
-          <span *ngIf="isLoadingRules" class="mdm--skeleton-badge">
-            <ngx-skeleton-loader
-              count="1"
-              appearance="circle"
-              [theme]="{
-                'border-radius': '5px',
-                height: '31px',
-                width: '28px',
-                'background-color': '#b7bbc5'
-              }"
-            ></ngx-skeleton-loader>
-          </span>
+          <mdm-skeleton-badge *ngIf="isLoadingRules"></mdm-skeleton-badge>
           ({{ rulesItemCount }})
         </ng-template>
         <div class="full-width">
@@ -181,18 +170,7 @@ <h4 class="marginless">Search</h4>
       <mat-tab>
         <ng-template mat-tab-label>
           History
-          <span *ngIf="isLoadingHistory" class="mdm--skeleton-badge">
-            <ngx-skeleton-loader
-              count="1"
-              appearance="circle"
-              [theme]="{
-                'border-radius': '5px',
-                height: '31px',
-                width: '28px',
-                'background-color': '#b7bbc5'
-              }"
-            ></ngx-skeleton-loader>
-          </span>
+          <mdm-skeleton-badge *ngIf="isLoadingHistory"></mdm-skeleton-badge>
           ({{ historyItemCount }})
         </ng-template>
 

diff --git a/src/app/modals/versioning-graph-modal/versioning-graph-modal.component.html b/src/app/modals/versioning-graph-modal/versioning-graph-modal.component.html
@@ -32,6 +32,6 @@ <h4 mat-dialog-title>Versioning graph</h4>
     mode="model-merging-graph"
     [isPopup]="false"
     [canMoveUp]="false"
-    class="block"
+    class="block mdm-diagram-tab"
   ></mdm-diagram-tab>
 </mat-dialog-content>
diff --git a/src/app/modals/versioning-graph-modal/versioning-graph-modal.component.scss b/src/app/modals/versioning-graph-modal/versioning-graph-modal.component.scss
@@ -17,6 +17,6 @@ limitations under the License.
 SPDX-License-Identifier: Apache-2.0
 */
 
-mdm-diagram-tab {
+.mdm-diagram-tab {
   min-width: 1200px;
 }
diff --git a/src/app/modules/catalogue/catalogue.module.ts b/src/app/modules/catalogue/catalogue.module.ts
@@ -196,6 +196,7 @@ import { CreateTermRelationshipDialogComponent } from '@mdm/term/create-term-rel
 import { NewerVersionsComponent } from '@mdm/subscribed-catalogues/newer-versions/newer-versions.component';
 import { BulkEditModule } from '@mdm/bulk-edit/bulk-edit.module';
 import { TerminologyMainComponent } from '../../wizards/terminology/terminology-main/terminology-main.component';
+import { SkeletonBadgeComponent } from '@mdm/utility/skeleton-badge/skeleton-badge.component';
 
 @NgModule({
   declarations: [
@@ -363,7 +364,8 @@ import { TerminologyMainComponent } from '../../wizards/terminology/terminology-
     ProfileDataViewComponent,
     TermRelationshipListComponent,
     NewerVersionsComponent,
-    TerminologyMainComponent
+    TerminologyMainComponent,
+    SkeletonBadgeComponent
   ],
   imports: [
     AdminModule,
@@ -544,7 +546,8 @@ import { TerminologyMainComponent } from '../../wizards/terminology/terminology-
     OpenIdConnectAuthorizeComponent,
     ProfileDataViewComponent,
     NewerVersionsComponent,
-    TerminologyMainComponent
+    TerminologyMainComponent,
+    SkeletonBadgeComponent
   ]
 })
 export class CatalogueModule { }
diff --git a/src/app/referenceData/reference-data.component.html b/src/app/referenceData/reference-data.component.html
@@ -46,18 +46,7 @@
   <mat-tab>
     <ng-template mat-tab-label>
       Elements
-      <span *ngIf="isLoadingElements" class="mdm--skeleton-badge">
-        <ngx-skeleton-loader
-          count="1"
-          appearance="circle"
-          [theme]="{
-            'border-radius': '5px',
-            height: '31px',
-            width: '28px',
-            'background-color': '#b7bbc5'
-          }"
-        ></ngx-skeleton-loader>
-      </span>
+      <mdm-skeleton-badge *ngIf="isLoadingElements"></mdm-skeleton-badge>
       ({{ elementsItemCount }})
     </ng-template>
     <div class="full-width">
@@ -71,18 +60,7 @@
   <mat-tab>
     <ng-template mat-tab-label>
       Types
-      <span *ngIf="isLoadingTypes" class="mdm--skeleton-badge">
-        <ngx-skeleton-loader
-          count="1"
-          appearance="circle"
-          [theme]="{
-            'border-radius': '5px',
-            height: '31px',
-            width: '28px',
-            'background-color': '#b7bbc5'
-          }"
-        ></ngx-skeleton-loader>
-      </span>
+      <mdm-skeleton-badge *ngIf="isLoadingTypes"></mdm-skeleton-badge>
       ({{ typesItemCount }})
     </ng-template>
     <div class="full-width">
@@ -96,18 +74,7 @@
   <mat-tab>
     <ng-template mat-tab-label>
       Data
-      <span *ngIf="isLoadingData" class="mdm--skeleton-badge">
-        <ngx-skeleton-loader
-          count="1"
-          appearance="circle"
-          [theme]="{
-            'border-radius': '5px',
-            height: '31px',
-            width: '28px',
-            'background-color': '#b7bbc5'
-          }"
-        ></ngx-skeleton-loader>
-      </span>
+      <mdm-skeleton-badge *ngIf="isLoadingData"></mdm-skeleton-badge>
       ({{ dataItemCount }})
     </ng-template>
     <div class="full-width">
@@ -122,18 +89,7 @@
   <mat-tab>
     <ng-template mat-tab-label>
       Rules
-      <span *ngIf="isLoadingRules" class="mdm--skeleton-badge">
-        <ngx-skeleton-loader
-          count="1"
-          appearance="circle"
-          [theme]="{
-            'border-radius': '5px',
-            height: '31px',
-            width: '28px',
-            'background-color': '#b7bbc5'
-          }"
-        ></ngx-skeleton-loader>
-      </span>
+      <mdm-skeleton-badge *ngIf="isLoadingRules"></mdm-skeleton-badge>
       ({{ rulesItemCount }})
     </ng-template>
     <div class="full-width">

diff --git a/src/app/shared/classified-elements-list/classified-elements-list.component.html b/src/app/shared/classified-elements-list/classified-elements-list.component.html
@@ -18,7 +18,7 @@
 -->
 <div class="heading-container">
     <h4 class="marginless">Classified Elements</h4>
-    <span *ngIf="isLoadingResults" class="mdm--skeleton-badge"><ngx-skeleton-loader count="1" appearance="circle" [theme]="{'border-radius': '5px', 'height':'31px', 'width':'28px', 'background-color': '#b7bbc5'}"></ngx-skeleton-loader></span>
+    <mdm-skeleton-badge *ngIf="isLoadingResults"></mdm-skeleton-badge>
     <span *ngIf="!isLoadingResults" class="mdm--badge mdm--element-count">{{totalItemCount}}</span>
     <i class="fas fa-filter" (click)="filterClick()" matTooltip="Toggle search"></i>
 </div>

diff --git a/src/app/shared/data-classes-list/data-classes-list.component.html b/src/app/shared/data-classes-list/data-classes-list.component.html
@@ -21,7 +21,7 @@
      <div fxFlex fxLayout="row" fxFlex="50" fxFlex.md="50" fxFlex.sm="50" fxFlex.xs="100" fxLayoutAlign="start center">
        <h4 class="marginless">
          <span>Data Classes</span>
-         <span *ngIf="isLoadingResults" class="mdm--skeleton-badge"><ngx-skeleton-loader count="1" appearance="circle" [theme]="{'border-radius': '5px', 'height':'31px', 'width':'28px', 'background-color': '#b7bbc5'}"></ngx-skeleton-loader></span>
+         <mdm-skeleton-badge *ngIf="isLoadingResults"></mdm-skeleton-badge>
          <span class="mdm--badge mdm--element-count" *ngIf="!isLoadingResults">{{totalDataClassCount}}</span>
          <i class="fas fa-filter" (click)="filterClick()" matTooltip="Toggle search"></i>
        </h4>

diff --git a/src/app/shared/data-elements-list/data-elements-list.component.html b/src/app/shared/data-elements-list/data-elements-list.component.html
@@ -21,7 +21,7 @@
     <div fxFlex fxLayout="row" fxFlex="50" fxFlex.md="50" fxFlex.sm="50" fxFlex.xs="100" fxLayoutAlign="start center">
       <h4 class="marginless">
         <span>Data Elements</span>
-        <span *ngIf="isLoadingResults" class="mdm--skeleton-badge"><ngx-skeleton-loader count="1" appearance="circle" [theme]="{'border-radius': '5px', 'height':'31px', 'width':'28px', 'background-color': '#b7bbc5'}"></ngx-skeleton-loader></span>
+        <mdm-skeleton-badge *ngIf="isLoadingResults"></mdm-skeleton-badge>
         <span class="mdm--badge mdm--element-count" *ngIf="!isLoadingResults">{{totalDataElementCount}}</span>
         <i class="fas fa-filter" (click)="filterClick()" matTooltip="Toggle search"></i>
       </h4>

diff --git a/src/app/shared/element-owned-data-type-list/element-owned-data-type-list.component.html b/src/app/shared/element-owned-data-type-list/element-owned-data-type-list.component.html
@@ -21,7 +21,7 @@
         <div fxFlex fxLayout="row" fxFlex="40" fxFlex.md="40" fxFlex.sm="40" fxFlex.xs="100" fxLayoutAlign="flex-start center">
             <h4 class="marginless">
                 Data Types
-                <span *ngIf="isLoadingResults" class="mdm--skeleton-badge"><ngx-skeleton-loader count="1" appearance="circle" [theme]="{'border-radius': '5px', 'height':'31px', 'width':'28px', 'background-color': '#b7bbc5'}"></ngx-skeleton-loader></span>
+                <mdm-skeleton-badge *ngIf="isLoadingResults"></mdm-skeleton-badge>
                 <span *ngIf="!isLoadingResults" class="mdm--badge mdm--element-count">{{totalItemCount}}</span>
                 <i class="fas fa-filter" (click)="filterClick()" matTooltip="Toggle search"></i>
             </h4>