feat: make styles works

phodal · Mar 11, 2020 · 33091fe · 33091fe
1 parent f559f59
commit 33091fe
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 6 deletions.
diff --git a/src/app/features/path/path.component.html b/src/app/features/path/path.component.html
@@ -18,16 +18,16 @@ <h2>Path to Production</h2>
  <div class="page">
  <div class="path">
  <div id="pipe-header">
- <div class="pipe-header" *ngFor="let pipe of pipeData;let i = index" id="{{i}}_header">
+ <div class="pipe-header" *ngFor="let pipe of pipeData;let i = index" id="{{i}}_header" [ngStyle]="getHeaderHeight()">
  <h2>{{pipe.title}}</h2>
  </div>
  </div>
  <div class='wrapper' id="pipe">
  <div class='container' *ngFor="let pipe of pipeData;let i = index"
  id="{{i}}_pipe"
- [ngStyle]="{'background': pipe.backgroundColor,'color': pipe.textColor}">
+ [ngStyle]="getContainerStyle(pipe)">
 
- <div class="editable" *ngFor="let item of pipe.items;let j = index" id="{{i}}_pipe_child{{j}}">
+ <div class="editable"  [ngStyle]="getEditableStyle()" *ngFor="let item of pipe.items;let j = index" id="{{i}}_pipe_child{{j}}">
  {{item}}
  </div>
  </div>

diff --git a/src/app/features/path/path.component.ts b/src/app/features/path/path.component.ts
@@ -1,6 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {StorageMap} from '@ngx-pwa/local-storage';
 
+interface Item {
+ backgroundColor: string;
+ id: number;
+ title: string;
+ items: string[];
+ textColor: string;
+}
+
 @Component({
  selector: 'component-path',
  templateUrl: './path.component.html',
@@ -64,14 +72,67 @@ export class PathComponent implements OnInit {
  textColor: '#ffffff'
  }
  ];
+ private maxLength: number;
 
- constructor(private storage: StorageMap) {}
+ constructor(private storage: StorageMap) {
+ }
 
  ngOnInit(): void {
-
+ this.maxLength = this.getMaxLength(this.pipeData);
  }
 
  addColumn() {
 
  }
+
+ getContainerStyle(pipe: Item) {
+ const {itemWidth, containerHeight} = this.getContainerHeightWidth();
+
+ return {
+ minWidth: this.maxLength * (itemWidth + 21) + 'px',
+ height: containerHeight,
+ background: pipe.backgroundColor,
+ color: pipe.textColor
+ };
+ }
+
+ private getContainerHeightWidth() {
+ const innerWidth = window.innerWidth;
+ let itemWidth = ((innerWidth - 200) / this.maxLength - 20);
+ if (itemWidth < 100) {
+ itemWidth = 100;
+ }
+
+ const itemHeightPx = itemWidth + 'px';
+ const containerHeight = itemWidth + 20 + 2 + 'px';
+ return {itemWidth, containerHeight, itemHeightPx};
+ }
+
+ getEditableStyle() {
+ const itemSize = this.getContainerHeightWidth().itemHeightPx;
+ return {
+ height: itemSize,
+ width: itemSize
+ };
+ }
+
+
+ getHeaderHeight() {
+ return {
+ height: this.getContainerHeightWidth().itemWidth + 20 + 12 + 'px'
+ };
+ }
+
+ private getMaxLength(items: Item[]) {
+ let maxLength = items[0].items.length;
+ // tslint:disable-next-line:prefer-for-of
+ for (let i = 0; i < items.length; i++) {
+ const itemLength = items[i].items.length;
+ if (itemLength > maxLength) {
+ maxLength = itemLength;
+ }
+ }
+
+ return maxLength;
+ }
 }