style(view): add new thin color view

Author: lokesh-coder

src/app/components/board/board.component.html

@@ -1,4 +1,4 @@
 <!-- <h4>{{data.name}}</h4> -->
 <ng-container *ngFor="let bucket of buckets|async; index as i">
-  <inkapp-bucket [bucketData]="bucket" [index]="i+1"></inkapp-bucket>
+  <inkapp-bucket [bucketData]="bucket" [index]="i+1" class="ink-color-container" [ngClass]="'ink-view-'+(settings|async)?.value"></inkapp-bucket>
 </ng-container>

src/app/components/board/board.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Store, Select } from '@ngxs/store';
-import { InkBucket, InkBoard, InkBoardMeta, InkBucketMeta } from '../../models';
+import { InkBucket, InkBoard, InkBoardMeta, InkBucketMeta, InkAppSettings } from '../../models';
 import { Observable } from 'rxjs';
 import { map, filter, tap } from 'rxjs/operators';
 import { BucketService } from '../../services/bucket.service';
@@ -11,8 +11,9 @@ import { LoadBuckets } from '../../store/actions/bucket.action';
   templateUrl: './board.component.html'
 })
 export class BoardComponent implements OnInit {
-  buckets: Observable<InkBucketMeta[]>;
   @Input() data: InkBoardMeta;
+  buckets: Observable<InkBucketMeta[]>;
+  settings: Observable<InkAppSettings>;
   constructor(private _store: Store, private _bucketService: BucketService) {}
 
   ngOnInit() {
@@ -22,5 +23,6 @@ export class BoardComponent implements OnInit {
     this._bucketService.getBucketsInBoard(this.data._id).then(buckets => {
       this._store.dispatch(new LoadBuckets(buckets));
     });
+    this.settings = this._store.select(s => s.settings).pipe(map(s => s.filter(x => x.key === 'view')[0]));
   }
 }

src/app/components/bucket/bucket.component.html

@@ -1,7 +1,7 @@
 <inkapp-magic-title [title]="bucketData.name" (changed)="onTitleChange($event)">
   #{{index}}
 </inkapp-magic-title>
-<div class="d-flex flex-wrap" [ngClass]="'ink-view-'+(settings|async)?.value">
+<div class="d-flex flex-wrap">
   <ng-container *ngFor="let color of ink|async">
     <inkapp-ink [inkData]="color" [bucketId]="bucketData._id"></inkapp-ink>
   </ng-container>

src/app/components/bucket/bucket.component.ts

@@ -17,11 +17,9 @@ export class BucketComponent implements OnInit {
   @Input() index: number;
   @Input() bucketData: InkBucketMeta;
   ink: Observable<Ink>;
-  settings: Observable<InkAppSettings>;
   view: InkAppView;
   constructor(private _store: Store, private _bucketService: BucketService, private _inkColorService: InkColorService) {
     this.ink = this._store.select(s => s.ink).pipe(map(x => x.filter(y => y.bucketId === this.bucketData._id)));
-    this.settings = this._store.select(s => s.settings).pipe(map(s => s.filter(x => x.key === 'view')[0]));
   }
 
   ngOnInit() {

src/styles/components/__index.scss

@@ -5,3 +5,4 @@
 @import './header';
 @import './settings-item';
 @import './json-display';
+@import './color-container';

src/styles/components/_color-container.scss

@@ -0,0 +1,16 @@
+.ink-color-container {
+  &.ink-view-thin {
+    border-bottom: 0;
+    .ink-color-sticker {
+      padding: 1rem 0;
+    }
+    .ink-color {
+      height: 1rem !important;
+      border-radius: 0;
+      box-shadow: none;
+    }
+    .ink-name {
+      font-size: 0.7rem;
+    }
+  }
+}