feat(wip): design changes

theme, color, layout updated
rename of bucket implemented

Author: lokesh-coder

log.txt

@@ -1,6 +1,4 @@
-<ng-container>
-  <h4>{{data.name}}</h4>
-  <ng-container *ngFor="let bucket of buckets|async">
-    <inkapp-bucket [bucketData]="bucket"></inkapp-bucket>
-  </ng-container>
+<!-- <h4>{{data.name}}</h4> -->
+<ng-container *ngFor="let bucket of buckets|async; index as i">
+  <inkapp-bucket [bucketData]="bucket" [index]="i+1"></inkapp-bucket>
 </ng-container>

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

@@ -15,7 +15,7 @@ export class BoardComponent implements OnInit {
   @Input() data: InkBoardMeta;
   constructor(private _store: Store, private _bucketService: BucketService) {}
 
-  ngOnInit() {
+  ngOnInit() { 
     this.buckets = this._store
       .select(s => s.bucket)
       .pipe(map(buckets => buckets.filter(s => s.boardId === this.data._id)));

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

@@ -1,4 +1,6 @@
-<h3>{{bucketData.name}}</h3>
+<inkapp-magic-title [title]="bucketData.name" (changed)="onTitleChange($event)">
+  #{{index}}
+</inkapp-magic-title>
 <div class="d-flex flex-wrap">
   <ng-container *ngFor="let color of ink|async">
     <inkapp-ink [inkData]="color"></inkapp-ink>

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

@@ -4,22 +4,30 @@ import { InkBucket, Ink, InkBucketMeta } from '../../models';
 import { Observable } from 'rxjs';
 import { filter, tap, map } from 'rxjs/operators';
 import { AddNewInk } from '../../store/actions/ink.action';
+import { BucketService } from '../../services/bucket.service';
+import { ENETDOWN } from 'constants';
+import { RenameBucket } from '../../store/actions/bucket.action';
 
 @Component({
   selector: 'inkapp-bucket',
   templateUrl: './bucket.component.html',
   styles: []
 })
 export class BucketComponent implements OnInit {
-  @Input() boardId: number;
+  @Input() index: number;
   @Input() bucketData: InkBucketMeta;
   ink: Observable<Ink>;
-  constructor(private store: Store) {
-    this.ink = this.store.select(s => s.ink).pipe(map(x => x.filter(y => y.bucketId === this.bucketData.id)));
+  constructor(private _store: Store, private _bucketService: BucketService) {
+    this.ink = this._store.select(s => s.ink).pipe(map(x => x.filter(y => y.bucketId === this.bucketData._id)));
   }
 
   ngOnInit() {}
   addNewInk() {
-    this.store.dispatch(new AddNewInk({ bucketId: this.bucketData.id, value: '#fff', meta: {} }));
+    this._store.dispatch(new AddNewInk({ bucketId: this.bucketData._id, value: '#fff', meta: {} }));
+  }
+  onTitleChange(newTitle) {
+    this._bucketService.changeBucketName(this.bucketData._id, newTitle).then(bucket => {
+      this._store.dispatch(new RenameBucket(this.bucketData._id, bucket.name));
+    });
   }
 }

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

@@ -5,3 +5,4 @@ export { PromptComponent } from './prompt/prompt.component';
 export { ColorPickerComponent } from './color-picker/color-picker.component';
 export { ColorFormComponent } from './color-form/color-form.component';
 export { InkComponent } from './ink/ink.component';
+export { MagicTitleComponent } from './magic-title/magic-title.component';

src/app/components/index.ts

@@ -0,0 +1,9 @@
+<ng-container *ngIf="!editable else editableTpl">
+  <h5>
+    <span>
+      <ng-content></ng-content>
+    </span> {{title}}</h5>
+</ng-container>
+<ng-template #editableTpl>
+  <input type="text" class="form-control" [(ngModel)]="newTitle" (keyup.enter)="done()" (keyup.esc)="cancel()">
+</ng-template>

src/app/components/magic-title/magic-title.component.html

@@ -0,0 +1,31 @@
+import { Component, OnInit, EventEmitter, Output, Input, HostListener } from '@angular/core';
+
+@Component({
+  selector: 'inkapp-magic-title',
+  templateUrl: 'magic-title.component.html'
+})
+export class MagicTitleComponent implements OnInit {
+  @Output() changed: EventEmitter<string> = new EventEmitter<string>();
+  @Input() title: string;
+  editable = false;
+  newTitle: string;
+  constructor() {}
+
+  ngOnInit() {
+    this.newTitle = this.title;
+  }
+
+  @HostListener('dblclick', ['$event.target'])
+  onDblClick(e) {
+    this.editable = true;
+  }
+
+  done() {
+    this.editable = false;
+    this.changed.emit(this.newTitle);
+  }
+  cancel() {
+    this.editable = false;
+    this.newTitle = this.title;
+  }
+}

src/app/components/magic-title/magic-title.component.ts

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
+<nav class="navbar navbar-expand-lg mb-5 navbar-dark bg-primary ink-header">
   <div class="container">
     <a class="navbar-brand" href="#">InkBucket</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"

src/app/components/navbar/navbar.component.html

@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgxsModule } from '@ngxs/store';
 import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
@@ -9,7 +10,8 @@ import {
   ColorPickerComponent,
   InkComponent,
   NavbarComponent,
-  PromptComponent
+  PromptComponent,
+  MagicTitleComponent
 } from './components';
 import { InkApp } from './ink.component';
 import { RoutingModule } from './ink.routing';
@@ -22,6 +24,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
 
 export const MODULES = [
   RoutingModule,
+  FormsModule,
   NgxsModule.forRoot([SettingsState, BucketState, BoardState, InkState]),
   NgxsReduxDevtoolsPluginModule.forRoot(),
   ColorModule,
@@ -35,7 +38,8 @@ export const COMPONENTS = [
   PromptComponent,
   ColorPickerComponent,
   ColorFormComponent,
-  InkComponent
+  InkComponent,
+  MagicTitleComponent
 ];
 export const PAGES = [HomePage, SettingsPage];
 

src/app/ink.module.ts

@@ -20,4 +20,19 @@ export class BucketService {
     const db = await this._db.getDatabase();
     return db.bucket.find({ boardId }).exec();
   }
+
+  async changeBucketName(bucketId: string, newName: string) {
+    const db = await this._db.getDatabase();
+    return db.bucket
+      .findOne(bucketId)
+      .update({
+        $set: {
+          name: newName
+        }
+      })
+      .catch(error => {
+        console.error('Error while updating bucket name');
+        return null;
+      });
+  }
 }

src/app/services/bucket.service.ts

@@ -13,3 +13,8 @@ export class LoadBuckets {
   static readonly type = '[Bucket] Load all buckets';
   constructor(public buckets: InkBucketMeta[]) {}
 }
+
+export class RenameBucket {
+  static readonly type = '[Bucket] Change name';
+  constructor(public id: string, public name: string) {}
+}

src/app/store/actions/bucket.action.ts

@@ -1,6 +1,6 @@
 import { State, Action, StateContext } from '@ngxs/store';
 import { InkAppSettings, InkBucket } from '../../models';
-import { CreateBucket, UpdateBucket, LoadBuckets } from '../actions/bucket.action';
+import { CreateBucket, UpdateBucket, LoadBuckets, RenameBucket } from '../actions/bucket.action';
 import { DBService } from '../../services/db.service';
 import { LoadInitialData } from '../actions/general.action';
 import { UtilService } from '../../services/util.service';
@@ -36,4 +36,10 @@ export class BucketState {
     const state: any = ctx.getState();
     ctx.setState([...state, ...action.buckets]);
   }
+  @Action(RenameBucket)
+  renameBucket(ctx: StateContext<InkBucket>, action: RenameBucket) {
+    const state: any = ctx.getState();
+    state.filter(b => b._id === action.id).map(b => (b.name = action.name));
+    ctx.setState([...state]);
+  }
 }

src/app/store/states/bucket.state.ts

@@ -4,23 +4,26 @@ $ink--app-name: 'INK BUCKET';
 $ink--debug: false;
 $ink--font-family: 'Rubik', 'Inter UI', 'Nunito Sans', 'Roboto';
 $ink--font-family-asap: 'Asap', 'Roboto';
+$ink--font-family-roboto: 'Roboto', 'sans-serif';
+$ink--font-family-roboto: 'Roboto', 'sans-serif';
 $ink--current-theme: 'DEFAULT';
 $ink--themes: (
   'default': 'DEFAULT',
   'jummy': 'JIMMY'
 );
 $ink--colors-basic: (
-  'bg': #eff2f7,
+  'bg': #fff,
+  'bg2': #f3f3f7a6,
   'text': #aaaab1,
-  'heading': #333,
+  'heading': #35335a,
   'border': #cbcbcb,
   'para': #808080,
   'dark': #000,
   'shadow': #cbd3da
 );
 
 $ink--colors-theme: (
-  'primary': #f8768f,
+  'primary': #6b66ca,
   'secondary': #41495d,
   'success': #3fc782,
   'warning': #f78f1e,

src/styles/_config.scss

@@ -2,3 +2,4 @@
 @import './ink-bucket';
 @import './ink';
 @import './color-sticker';
+@import './header';

src/styles/components/__index.scss

@@ -11,9 +11,9 @@ $size: 4rem;
     display: flex;
     width: $size;
     height: $size;
-    border-radius: 100%;
+    border-radius: 0.3rem;
     margin-bottom: 1rem;
-    box-shadow: 0px 3px 13px clr('shadow');
+    box-shadow: 0px 3px 5px clr('shadow');
     cursor: pointer;
   }
   &.-empty .ink-color {
@@ -23,7 +23,8 @@ $size: 4rem;
   .ink-name {
     text-transform: uppercase;
     font-weight: 500;
-    color: transparentize($color: clr('dark'), $amount: 0.5);
+    color: transparentize($color: clr('dark'), $amount: 0.62);
     font-size: 0.9rem;
+    font-family: $ink--font-family-roboto;
   }
 }

src/styles/components/_color-sticker.scss

@@ -0,0 +1,4 @@
+.navbar.ink-header {
+  // box-shadow: 0 4px 6px #b7b7b7;
+  padding: 0.57rem 1rem;
+}

src/styles/components/_header.scss

@@ -1,12 +1,26 @@
 inkapp-bucket {
   display: block;
   background: #fff;
-  padding: 2rem;
-  border-radius: 3px;
-  box-shadow: 0px 8px 13px clr('shadow');
+  padding: 1rem;
+  border-radius: 0;
+  border-bottom: 1px dashed transparentize(clr('primary', 'theme'), 0.82);
+  // box-shadow: 0px 8px 13px clr('shadow');
   margin-bottom: 1rem;
-  h3 {
-    font-weight: 400;
-    color: clr('dark', 'theme');
+  h5 {
+    color: clr('heading');
   }
-}
+
+  h5 > span {
+    color: clr('primary', 'theme');
+  }
+
+  input.form-control {
+    color: clr('heading');
+    font-weight: 500;
+    font-size: 1.25rem;
+    background: clr('bg2');
+    border: 0;
+    padding: 0.75rem 1rem;
+    line-height: 1;
+  }
+}