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

refactoring the stylesheets in bim
pull/9585/head
Henriette Darge 3 years ago committed by GitHub
commit c3112d5cd0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 46
      frontend/src/app/features/bim/ifc_models/bcf/list-container/bcf-list-container.component.html
  2. 55
      frontend/src/app/features/bim/ifc_models/bcf/list-container/bcf-list-container.component.sass
  3. 19
      frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.html
  4. 92
      frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.sass
  5. 8
      frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.ts
  6. 2
      frontend/src/app/features/bim/ifc_models/pages/viewer/styles/generic.sass
  7. 2
      frontend/src/app/features/bim/ifc_models/pages/viewer/styles/tabs.sass
  8. 8
      frontend/src/app/features/bim/ifc_models/pages/viewer/styles/toolbar.sass
  9. 2
      modules/bim/app/views/bim/ifc_models/ifc_models/_panels.html.erb
  10. 4
      modules/bim/spec/support/pages/ifc_models/index.rb
  11. 6
      modules/bim/spec/support/pages/ifc_models/show_default.rb

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

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

@ -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">
<a class="ifc-model-viewer--keyboard-disabled-icon icon-no-color icon-input-disabled"
class="op-ifc-viewer--focus-warning">
<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>

@ -1,58 +1,58 @@
@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
position: absolute
width: 200px
height: 200px
bottom: 0
right: 0
z-index: 10
.ifc-model-viewer--section-planes-overview-canvas
position: absolute
width: 250px
height: 250px
top: 50px
right: 50px
z-index: 2000
.ifc-model-viewer--container
position: relative
width: 100%
height: 100%
padding-bottom: 10px
overflow: hidden
min-width: 420px
.ifc-model-viewer--model-canvas
width: 100%
height: 100%
&:focus
outline: none
&--nav-cube-canvas
position: absolute
width: 200px
height: 200px
bottom: 0
right: 0
z-index: 10
.ifc-model-viewer--focus-warning
@include without-link-styling
position: absolute
top: 6px
right: 395px
&--section-planes-overview-canvas
position: absolute
width: 250px
height: 250px
top: 50px
right: 50px
z-index: 2000
&--container
position: relative
width: 100%
height: 100%
padding-bottom: 10px
overflow: hidden
min-width: 420px
&--model-canvas
width: 100%
height: 100%
&:focus
outline: none
&--focus-warning
@include without-link-styling
position: absolute
top: 6px
right: 395px
.ifc-model-viewer--keyboard-disabled-icon
font-size: 20px
&--keyboard-disabled-icon
font-size: 20px
.ifc-model-viewer--toolbar-container,
.ifc-model-viewer--focus-warning
margin-top: 10px
margin-right: 5px
&--toolbar-container,
&--focus-warning
margin-top: 10px
margin-right: 5px
@media only screen and (max-width: 679px)
.ifc-model-viewer--nav-cube-canvas,
.ifc-model-viewer--focus-warning
display: none
&--nav-cube-canvas,
&--focus-warning
@media only screen and (max-width: 679px)
display: none

@ -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
explorerElement: jQuery('.ifc-model-viewer--tree-panel')[0], // Left panel
toolbarElement: element.find('.ifc-model-viewer--toolbar-container')[0], // Toolbar
navCubeCanvasElement: element.find('.ifc-model-viewer--nav-cube-canvas')[0],
canvasElement: element.find('[data-qa-selector="op-ifc-viewer--model-canvas"]')[0], // WebGL canvas
explorerElement: jQuery('[data-qa-selector="op-ifc-viewer--tree-panel"]')[0], // Left panel
toolbarElement: element.find('[data-qa-selector="op-ifc-viewer--toolbar-container"]')[0], // Toolbar
navCubeCanvasElement: element.find('[data-qa-selector="op-ifc-viewer--nav-cube-canvas"]')[0],
busyModelBackdropElement: element.find('.xeokit-busy-modal-backdrop')[0],
enableEditModels: manageIfcModelsAllowed,
},

@ -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

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

@ -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,
.ifc-model-viewer--toolbar-container
.op-ifc-viewer--focus-warning,
.op-ifc-viewer--toolbar-container
.fa-male,
.fa-cut
display: none

@ -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>

@ -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)

@ -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

Loading…
Cancel
Save