Enable card view for embedded tables and use it for ifc viewer

opf · Jan 17, 2020 · 4b55b51 · 4b55b51
1 parent c87b808
commit 4b55b51
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/app/assets/stylesheets/layout/work_packages/_table_embedded.sass b/app/assets/stylesheets/layout/work_packages/_table_embedded.sass
@@ -62,6 +62,14 @@ $table-timeline--compact-row-height: 28px
     .generic-table--sort-header
       font-size: 12px
 
+  .work-packages-embedded-view--grid-view
+    height: 100%
+    overflow: auto
+    @include styled-scroll-bar
+
+    .wp-cards-container.-horizontal
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
+
   &.-compact-tables
     .wp-table--row
       border-bottom: none !important

diff --git a/frontend/src/app/components/wp-table/embedded/wp-embedded-table.html b/frontend/src/app/components/wp-table/embedded/wp-embedded-table.html
@@ -13,10 +13,16 @@
     </filter-container>
 
     <!-- TABLE + TIMELINE horizontal split -->
-    <wp-table [projectIdentifier]="projectIdentifier"
+    <wp-table *ngIf="!configuration.isCardView"
+              [projectIdentifier]="projectIdentifier"
               [configuration]="configuration"
               class="work-packages-split-view--tabletimeline-content"></wp-table>
 
+    <!-- GRID representation of the WP -->
+    <div class="work-packages-embedded-view--grid-view">
+      <wp-grid *ngIf="configuration.isCardView"></wp-grid>
+    </div>
+
     <!-- Footer -->
     <div class="work-packages-split-view--tabletimeline-footer hide-when-print">
       <wp-table-pagination [hideForSinglePageResults]="true">

diff --git a/frontend/src/app/modules/ifc_models/ifc-base-view/ifc-base-view.component.sass b/frontend/src/app/modules/ifc_models/ifc-base-view/ifc-base-view.component.sass
@@ -1,5 +1,5 @@
-:host
-  max-height: 85%
+*:host
+  height: calc(100% - 60px)
 
 .ifc-base-view--container
   display: flex

diff --git a/frontend/src/app/modules/ifc_models/ifc-base-view/ifc-base-view.component.ts b/frontend/src/app/modules/ifc_models/ifc-base-view/ifc-base-view.component.ts
@@ -45,11 +45,12 @@ export class IfcBaseViewComponent {
   constructor() {
     this.configuration = {
       actionsColumnEnabled: false,
-      columnMenuEnabled: true,
+      columnMenuEnabled: false,
       contextMenuEnabled: false,
       inlineCreateEnabled: false,
       withFilters: true,
       showFilterButton: false,
+      isCardView: true
     };
 
     this.filters.push({ status: {