TheDude
/
openproject
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
refactoring the stylesheets in bim
pull/9585/head
Henriette Darge 3 years ago committed by GitHub
parent b339f45bab 7e64289801
commit c3112d5cd0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 125 additions and 119 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  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

46
frontend/src/app/features/bim/ifc_models/bcf/list-container/bcf-list-container.component.html
Unescape View File

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

55
frontend/src/app/features/bim/ifc_models/bcf/list-container/bcf-list-container.component.sass
Unescape View File

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

19
frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.html
Unescape View File

@ -1,5 +1,5 @@
<div #outerContainer <div #outerContainer
class="ifc-model-viewer"> class="op-ifc-viewer">
<div *ngIf="modelCount === 0" class="notification-box -info"> <div *ngIf="modelCount === 0" class="notification-box -info">
<div class="notification-box--content"> <div class="notification-box--content">
@ -15,21 +15,26 @@
</div> </div>
</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" <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)" (mousedown)="enableFromIcon($event)"
[attr.title]="text.keyboard_input_disabled"> [attr.title]="text.keyboard_input_disabled">
</a> </a>
</div> </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 <canvas #modelCanvas
class="ifc-model-viewer--model-canvas" class="op-ifc-viewer--model-canvas"
data-qa-selector="op-ifc-viewer--model-canvas"
tabindex="0"> tabindex="0">
</canvas> </canvas>
</div> </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> </div>

92
frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.sass
Unescape View File

@ -1,58 +1,58 @@
@import "src/assets/sass/helpers" @import "src/assets/sass/helpers"
.ifc-model-viewer .op-ifc-viewer
height: 100% height: 100%
.notification-box .notification-box
position: absolute position: absolute
right: 10px right: 10px
.ifc-model-viewer--nav-cube-canvas &--nav-cube-canvas
position: absolute position: absolute
width: 200px width: 200px
height: 200px height: 200px
bottom: 0 bottom: 0
right: 0 right: 0
z-index: 10 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
.ifc-model-viewer--focus-warning &--section-planes-overview-canvas
@include without-link-styling position: absolute
position: absolute width: 250px
top: 6px height: 250px
right: 395px 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 &--keyboard-disabled-icon
font-size: 20px font-size: 20px
.ifc-model-viewer--toolbar-container, &--toolbar-container,
.ifc-model-viewer--focus-warning &--focus-warning
margin-top: 10px margin-top: 10px
margin-right: 5px 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 display: none

8
frontend/src/app/features/bim/ifc_models/ifc-viewer/ifc-viewer.component.ts
Unescape View File

@ -94,10 +94,10 @@ export class IFCViewerComponent implements OnInit, OnDestroy {
).subscribe((manageIfcModelsAllowed) => { ).subscribe((manageIfcModelsAllowed) => {
this.ifcViewer.newViewer( 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], busyModelBackdropElement: element.find('.xeokit-busy-modal-backdrop')[0],
enableEditModels: manageIfcModelsAllowed, enableEditModels: manageIfcModelsAllowed,
}, },

2
frontend/src/app/features/bim/ifc_models/pages/viewer/styles/generic.sass
Unescape View File

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

2
frontend/src/app/features/bim/ifc_models/pages/viewer/styles/tabs.sass
Unescape View File

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

8
frontend/src/app/features/bim/ifc_models/pages/viewer/styles/toolbar.sass
Unescape View File

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

2
modules/bim/app/views/bim/ifc_models/ifc_models/_panels.html.erb
Unescape View File

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

4
modules/bim/spec/support/pages/ifc_models/index.rb
Unescape View File

@ -102,7 +102,7 @@ module Pages
def show_model(model) def show_model(model)
click_model_link model.title 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) expect_model_active(model)
end end
@ -114,7 +114,7 @@ module Pages
def show_defaults(models = []) def show_defaults(models = [])
click_toolbar_button 'Show defaults' 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| models.each do |model|
expect_model_active(model, model.is_default) expect_model_active(model, model.is_default)

6
modules/bim/spec/support/pages/ifc_models/show_default.rb
Unescape View File

@ -54,7 +54,7 @@ module Pages
end end
def model_viewer_visible(visible) 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)) expect(page).to (visible ? have_selector(selector, wait: 10) : have_no_selector(selector, wait: 10))
end end
@ -62,12 +62,12 @@ module Pages
selector = '.xeokit-btn' selector = '.xeokit-btn'
if visible 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) expect(page).to have_selector(selector, count: 9)
end end
else else
expect(page).to have_no_selector(selector) 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
end end

Write Preview
Loading…
Cancel
Save