Merge pull request #9539 from opf/refactor-stylesheet-bim

refactoring the stylesheets in bim

frontend/src/app/features/bim/ifc_models/bcf/list-container/bcf-list-container.component.html

@@ -1,37 +1,37 @@
-<div class="result-overlay"
+<div class="op-bcf-list-container--result-overlay"
      *ngIf="(showResultOverlay$ | async) && showTableView"></div>
 
 <!-- TABLE + TIMELINE horizontal split -->
-<div class="work-packages-split-view--tabletimeline-container"
+<div class="op-bcf-list-container--work-packages-split-view--tabletimeline-container"
-     [ngClass]="{ '-with-resizer': showResizerInCardView() }"
+     [ngClass]="{ '_with-resizer': showResizerInCardView() }"
      *ngIf="tableInformationLoaded && showTableView">
-  <wp-resizer elementClass="work-packages-partitioned-page--content-right"
+<wp-resizer elementClass="work-packages-partitioned-page--content-right"
           localStorageKey="openProject-splitViewFlexBasis">
-  </wp-resizer>
+</wp-resizer>
 
-  <wp-table [projectIdentifier]="CurrentProject.identifier"
+<wp-table [projectIdentifier]="CurrentProject.identifier"
           [configuration]="wpTableConfiguration"
           (itemClicked)="handleWorkPackageClicked($event)"
           (stateLinkClicked)="openStateLink($event)"
           class="work-packages-split-view--tabletimeline-content">
-  </wp-table>
+</wp-table>
 </div>
 
 <!-- GRID representation of the WP -->
 <div *ngIf="!showTableView"
-     class="work-packages--card-view-container"
+     class="op-bcf-list-container--work-packages--card-view-container"
-     [ngClass]="{ '-with-resizer': showResizerInCardView() }" >
+     [ngClass]="{ '_with-resizer': showResizerInCardView() }" >
-  <wp-grid [configuration]="wpTableConfiguration"
+<wp-grid [configuration]="wpTableConfiguration"
           [showResizer]="showResizerInCardView()"
           (itemClicked)="handleWorkPackageCardClicked($event)"
           (stateLinkClicked)="openStateLink($event)"
           resizerClass="work-packages-partitioned-page--content-right"
           resizerStorageKey="openProject-splitViewFlexBasis">
-  </wp-grid>
+</wp-grid>
 </div>
 
 <!-- Footer -->
 <div class="work-packages-split-view--tabletimeline-footer hide-when-print"
      *ngIf="tableInformationLoaded">
-  <wp-table-pagination></wp-table-pagination>
+<wp-table-pagination></wp-table-pagination>
 </div>

frontend/src/app/features/bim/ifc_models/bcf/list-container/bcf-list-container.component.sass

@@ -1,18 +1,19 @@
 @import "src/assets/sass/helpers"
 
-.result-overlay
+.op-bcf-list-container
+  &--result-overlay
     @include overlay-background
     background-color: #FFFFFF
     opacity: 0.5
 
-.work-packages--card-view-container
+  &--work-packages--card-view-container
     width: 100%
     overflow: auto
     padding-bottom: 5px
     @include styled-scroll-bar
 
     @media screen and (min-width: 679px)
-    &.-with-resizer
+      &._with-resizer
         padding-left: 10px
 
     @media screen and (max-width: 679px)
@@ -20,13 +21,13 @@
       // --> Move scrollbar out of visible area
       min-width: calc(100vw + 10px)
 
-.work-packages-split-view--tabletimeline-container
+  &--work-packages-split-view--tabletimeline-container
     display: flex
     flex: 1 1 auto
     @include styled-scroll-bar
 
     @media screen and (min-width: 679px)
-    &.-with-resizer
+      &._with-resizer
         padding-left: 10px
 
     @media screen and (max-width: 679px)

frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.html

@@ -1,5 +1,5 @@
 <div #outerContainer
-     class="ifc-model-viewer">
+     class="op-ifc-viewer">
 
   <div *ngIf="modelCount === 0" class="notification-box -info">
     <div class="notification-box--content">
@@ -15,21 +15,26 @@
     </div>
   </div>
 
-  <div class="ifc-model-viewer--container xeokit-busy-modal-backdrop">
+  <div class="op-ifc-viewer--container xeokit-busy-modal-backdrop"
+        data-qa-selector="op-ifc-viewer--container">
     <div *ngIf="modelCount && !keyboardEnabled"
-         class="ifc-model-viewer--focus-warning">
+         class="op-ifc-viewer--focus-warning">
-      <a class="ifc-model-viewer--keyboard-disabled-icon icon-no-color icon-input-disabled"
+      <a class="op-ifc-viewer--keyboard-disabled-icon icon-no-color icon-input-disabled"
          (mousedown)="enableFromIcon($event)"
          [attr.title]="text.keyboard_input_disabled">
       </a>
     </div>
 
-    <div class="ifc-model-viewer--toolbar-container"></div>
+    <div class="op-ifc-viewer--toolbar-container"
+          data-qa-selector="op-ifc-viewer--toolbar-container">
+    </div>
     <canvas #modelCanvas
-            class="ifc-model-viewer--model-canvas"
+            class="op-ifc-viewer--model-canvas"
+            data-qa-selector="op-ifc-viewer--model-canvas"
             tabindex="0">
     </canvas>
   </div>
 
-  <canvas class="ifc-model-viewer--nav-cube-canvas"></canvas>
+  <canvas class="op-ifc-viewer--nav-cube-canvas"
+          data-qa-selector="op-ifc-viewer--nav-cube-canvas" ></canvas>
 </div>

frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.sass

@@ -1,13 +1,13 @@
 @import "src/assets/sass/helpers"
 
-.ifc-model-viewer
+.op-ifc-viewer
   height: 100%
 
   .notification-box
     position: absolute
     right: 10px
 
-.ifc-model-viewer--nav-cube-canvas
+  &--nav-cube-canvas
     position: absolute
     width: 200px
     height: 200px
@@ -15,7 +15,7 @@
     right: 0
     z-index: 10
 
-.ifc-model-viewer--section-planes-overview-canvas
+  &--section-planes-overview-canvas
     position: absolute
     width: 250px
     height: 250px
@@ -23,7 +23,7 @@
     right: 50px
     z-index: 2000
 
-.ifc-model-viewer--container
+  &--container
     position: relative
     width: 100%
     height: 100%
@@ -31,28 +31,28 @@
     overflow: hidden
     min-width: 420px
 
-.ifc-model-viewer--model-canvas
+  &--model-canvas
     width: 100%
     height: 100%
 
     &:focus
       outline: none
 
-.ifc-model-viewer--focus-warning
+  &--focus-warning
     @include without-link-styling
     position: absolute
     top: 6px
     right: 395px
 
-.ifc-model-viewer--keyboard-disabled-icon
+  &--keyboard-disabled-icon
     font-size: 20px
 
-.ifc-model-viewer--toolbar-container,
+  &--toolbar-container,
-.ifc-model-viewer--focus-warning
+  &--focus-warning
     margin-top: 10px
     margin-right: 5px
 
-@media only screen and (max-width: 679px)
+  &--nav-cube-canvas,
-  .ifc-model-viewer--nav-cube-canvas,
+  &--focus-warning
-  .ifc-model-viewer--focus-warning
+    @media only screen and (max-width: 679px)
       display: none

frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.ts

@@ -94,10 +94,10 @@ export class IFCViewerComponent implements OnInit, OnDestroy {
       ).subscribe((manageIfcModelsAllowed) => {
         this.ifcViewer.newViewer(
           {
-            canvasElement: element.find('.ifc-model-viewer--model-canvas')[0], // WebGL canvas
+            canvasElement: element.find('[data-qa-selector="op-ifc-viewer--model-canvas"]')[0], // WebGL canvas
-            explorerElement: jQuery('.ifc-model-viewer--tree-panel')[0], // Left panel
+            explorerElement: jQuery('[data-qa-selector="op-ifc-viewer--tree-panel"]')[0], // Left panel
-            toolbarElement: element.find('.ifc-model-viewer--toolbar-container')[0], // Toolbar
+            toolbarElement: element.find('[data-qa-selector="op-ifc-viewer--toolbar-container"]')[0], // Toolbar
-            navCubeCanvasElement: element.find('.ifc-model-viewer--nav-cube-canvas')[0],
+            navCubeCanvasElement: element.find('[data-qa-selector="op-ifc-viewer--nav-cube-canvas"]')[0],
             busyModelBackdropElement: element.find('.xeokit-busy-modal-backdrop')[0],
             enableEditModels: manageIfcModelsAllowed,
           },

frontend/src/app/features/bim/ifc_models/pages/viewer/styles/generic.sass

@@ -31,7 +31,7 @@
     .work-packages-partitioned-page--content-container
       flex-direction: column
 
-    .ifc-model-viewer--container
+    .op-ifc-viewer--container
       height: 33vh !important
       min-width: unset !important
 

frontend/src/app/features/bim/ifc_models/pages/viewer/styles/tabs.sass

@@ -1,5 +1,5 @@
 // -------------------------- GENERIC --------------------------
-.ifc-model-viewer--tree-panel
+.op-ifc-viewer--tree-panel
   padding: 0 15px
   color: var(--main-menu-font-color)
 

frontend/src/app/features/bim/ifc_models/pages/viewer/styles/toolbar.sass

@@ -1,5 +1,5 @@
 // -------------------------- GENERIC --------------------------
-.ifc-model-viewer--toolbar-container
+.op-ifc-viewer--toolbar-container
   position: absolute
   width: 100%
   padding: 0px 6px
@@ -89,11 +89,11 @@
 // -------------------------- MOBILE specific --------------------------
 
 @media only screen and (max-width: 679px)
-  .ifc-model-viewer--toolbar-container
+  .op-ifc-viewer--toolbar-container
     padding-right: 15px
 
-  .ifc-model-viewer--focus-warning,
+  .op-ifc-viewer--focus-warning,
-  .ifc-model-viewer--toolbar-container
+  .op-ifc-viewer--toolbar-container
     .fa-male,
     .fa-cut
       display: none

modules/bim/app/views/bim/ifc_models/ifc_models/_panels.html.erb

@@ -1 +1 @@
-<div class="ifc-model-viewer--tree-panel active"></div>
+<div class="op-ifc-viewer--tree-panel active" data-qa-selector="op-ifc-viewer--tree-panel"></div>

modules/bim/spec/support/pages/ifc_models/index.rb

@@ -102,7 +102,7 @@ module Pages
       def show_model(model)
         click_model_link model.title
 
-        expect_correct_page_loaded '.ifc-model-viewer--container'
+        expect_correct_page_loaded '[data-qa-selector="op-ifc-viewer--container"]'
 
         expect_model_active(model)
       end
@@ -114,7 +114,7 @@ module Pages
       def show_defaults(models = [])
         click_toolbar_button 'Show defaults'
 
-        expect_correct_page_loaded '.ifc-model-viewer--container'
+        expect_correct_page_loaded '[data-qa-selector="op-ifc-viewer--container"]'
 
         models.each do |model|
           expect_model_active(model, model.is_default)

modules/bim/spec/support/pages/ifc_models/show_default.rb

@@ -54,7 +54,7 @@ module Pages
       end
 
       def model_viewer_visible(visible)
-        selector = '.ifc-model-viewer--model-canvas'
+        selector = '[data-qa-selector="op-ifc-viewer--model-canvas"]'
         expect(page).to (visible ? have_selector(selector, wait: 10) : have_no_selector(selector, wait: 10))
       end
 
@@ -62,12 +62,12 @@ module Pages
         selector = '.xeokit-btn'
 
         if visible
-          within ('.ifc-model-viewer--toolbar-container') do
+          within ('[data-qa-selector="op-ifc-viewer--toolbar-container"]') do
             expect(page).to have_selector(selector, count: 9)
           end
         else
           expect(page).to have_no_selector(selector)
-          expect(page).to have_no_selector('.ifc-model-viewer--toolbar-container')
+          expect(page).to have_no_selector('[data-qa-selector="op-ifc-viewer--toolbar-container"]')
         end
       end