feat(bucket): Option to delete

* chore: version bump

* build: set up github release from gren config

* feat: github base api setup

* feat(wip): setup add update gists service and settings

* feat(wip): load remote gist

* feat: added option to delete bucket

Author: lokesh-coder

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

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

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

@@ -5,7 +5,7 @@ import { Observable } from 'rxjs';
 import { filter, tap, map } from 'rxjs/operators';
 import { AddInkColor, LoadInkColorsInBucket } from '../../store/actions/ink.action';
 import { BucketService } from '../../services/bucket.service';
-import { RenameBucket } from '../../store/actions/bucket.action';
+import { RenameBucket, DeleteBucket } from '../../store/actions/bucket.action';
 import { InkColorService } from '../../services/ink.service';
 
 @Component({
@@ -43,4 +43,10 @@ export class BucketComponent implements OnInit {
       this._store.dispatch(new RenameBucket(this.bucketData._id, bucket.name));
     });
   }
+
+  deleteBucket() {
+    this._bucketService.deleteBucket(this.bucketData._id).then(bucket => {
+      this._store.dispatch(new DeleteBucket(this.bucketData._id));
+    });
+  }
 }

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

@@ -1,9 +1,13 @@
-<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>
+<div class="inkapp--titlebar" [ngClass]="{'-has-prompt':editable}">
+  <div class="title" (dblclick)="allowEditing()">
+    <i class="prefix">#{{index}}</i> {{title}}
+  </div>
+  <div class="action">
+    <button class="btn -is-plain -is-compact --only-on-parent-hover" (click)="delete.emit()">
+      <i class="ink-icon icon-trash text-danger"></i>
+    </button>
+  </div>
+  <div class="prompt">
+    <input type="text" class="form-control -is-inline" [(ngModel)]="newTitle" (keyup.enter)="done()" (keyup.esc)="cancel()">
+  </div>
+</div>

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

@@ -7,6 +7,8 @@ import { Component, OnInit, EventEmitter, Output, Input, HostListener } from '@a
 export class MagicTitleComponent implements OnInit {
   @Output() changed: EventEmitter<string> = new EventEmitter<string>();
   @Input() title: string;
+  @Input() index: number;
+  @Output() delete: EventEmitter<string> = new EventEmitter();
   editable = false;
   newTitle: string;
   constructor() {}
@@ -15,8 +17,7 @@ export class MagicTitleComponent implements OnInit {
     this.newTitle = this.title;
   }
 
-  @HostListener('dblclick', ['$event.target'])
-  onDblClick(e) {
+  allowEditing(e) {
     this.editable = true;
   }
 

src/app/services/bucket.service.ts

@@ -35,4 +35,15 @@ export class BucketService {
         return null;
       });
   }
+
+  async deleteBucket(bucketId: string) {
+    const db = await this._db.getDatabase();
+    return db.bucket
+      .findOne(bucketId)
+      .remove()
+      .catch(error => {
+        console.error('Error while removing bucket name');
+        return null;
+      });
+  }
 }

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

@@ -20,6 +20,11 @@ export class RenameBucket {
 }
 
 export class ClearBuckets {
-  static readonly type = '[Bucket] clear all';
+  static readonly type = '[Bucket] Clear all';
   constructor() {}
 }
+
+export class DeleteBucket {
+  static readonly type = '[Bucket] Delete';
+  constructor(public bucketId:string) {}
+}

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

@@ -1,6 +1,13 @@
 import { State, Action, StateContext } from '@ngxs/store';
 import { InkAppSettings, InkBucket } from '../../models';
-import { CreateBucket, UpdateBucket, LoadBuckets, RenameBucket, ClearBuckets } from '../actions/bucket.action';
+import {
+  CreateBucket,
+  UpdateBucket,
+  LoadBuckets,
+  RenameBucket,
+  ClearBuckets,
+  DeleteBucket
+} from '../actions/bucket.action';
 import { DBService } from '../../services/db.service';
 import { LoadInitialData } from '../actions/general.action';
 import { UtilService } from '../../services/util.service';
@@ -46,4 +53,10 @@ export class BucketState {
   clearBuckets(ctx: StateContext<InkBucket>, action: ClearBuckets) {
     ctx.setState([]);
   }
+  @Action(DeleteBucket)
+  deleteBucket(ctx: StateContext<InkBucket>, action: DeleteBucket) {
+    const state: any = ctx.getState();
+    const newState = state.filter(b => b._id !== action.bucketId);
+    ctx.setState(newState);
+  }
 }

src/styles/_config.scss

@@ -13,6 +13,7 @@ $ink--themes: (
 $ink--colors-basic: (
   'bg': #fff,
   'bg2': #f3f3f7a6,
+  'bg3': #fefefe,
   'text': #aaaab1,
   'heading': #35335a,
   'border': #ededef,

src/styles/base/__index.scss

@@ -4,3 +4,5 @@
 @import './reset';
 @import './typography';
 @import './utility';
+@import './input';
+@import './buttons';

src/styles/base/_buttons.scss

@@ -0,0 +1,8 @@
+button.btn.-is-plain {
+  background-color: transparent;
+  border-color: transparent;
+}
+
+button.btn.-is-compact {
+  padding: 0;
+}

src/styles/base/_icons.scss

@@ -32,7 +32,7 @@ $icons: (
   search: '\e91e',
   settings: '\e91f',
   sliders: '\e920',
-  trash-2: '\e921',
+  trash: '\e921',
   x: '\e922',
   x-square: '\e923'
 );

src/styles/base/_input.scss

@@ -0,0 +1,13 @@
+input.form-control {
+  font-weight: 500;
+  font-size: 1.25rem;
+  border: 0;
+  padding: 0.75rem 1rem;
+  line-height: 1;
+  background: clr('bg2');
+}
+
+input.form-control.-is-inline {
+  padding: 0.4rem 1rem;
+  color: clr('heading');
+}

src/styles/base/_utility.scss

@@ -28,3 +28,7 @@
 
 .ff-asap {
 }
+
+.--only-on-parent-hover {
+  display: none !important;
+}

src/styles/components/__index.scss

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

src/styles/components/_color-container.scss

@@ -1,4 +1,10 @@
 .ink-color-container {
+  &:hover {
+    background-color: clr('bg3');
+    .--only-on-parent-hover {
+      display: inherit !important;
+    }
+  }
   &.ink-view-thin {
     border-bottom: 0;
     margin-bottom: 0;

src/styles/components/_ink-bucket.scss

@@ -6,21 +6,4 @@ inkapp-bucket {
   border-bottom: 1px dashed transparentize(clr('primary', 'theme'), 0.82);
   // box-shadow: 0px 8px 13px clr('shadow');
   margin-bottom: 1rem;
-  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;
-  }
 }

src/styles/components/_titlebar.scss

@@ -0,0 +1,31 @@
+.inkapp--titlebar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .title {
+    color: clr('heading');
+    font-size: fs('h5');
+    font-weight: 500;
+    .prefix {
+      color: clr('primary', 'theme');
+      font-style: normal;
+    }
+  }
+  .action {
+  }
+  .prompt {
+    display: none;
+    flex: 1;
+  }
+
+  &.-has-prompt {
+    .title,
+    .action {
+      display: none;
+    }
+    .prompt {
+      display: flex;
+    }
+  }
+}