Modal animation and board admin tweaks

src/app/settings/board-admin/board-admin.component.html

@@ -50,7 +50,7 @@
                         <ul>
                             <li *ngFor="let col of board.columns">
                                 {{ col.name }}
-                                <span class="badge" title="Item Count">{{ col.tasks.length }}</span>
+                                <span class="badge" title="Task Count">{{ col.tasks.length }}</span>
                             </li>
                         </ul>
                     </td>
@@ -101,6 +101,15 @@
     </div>
 </section>
 
+<tb-modal modal-title="Confirm Board Removal" blocking="true"
+    modal-id="{{ MODAL_CONFIRM_ID }}">
+    <div class="center">Removing a board cannot be undone.<br>Continue?</div>
+    <div class="buttons">
+        <button class="flat" (click)="removeBoard()">Yes</button>
+        <button (click)="modal.close(MODAL_CONFIRM_ID)">No</button>
+    </div>
+</tb-modal>
+
 <tb-modal modal-title="{{ modalProps.title }} Board"
     modal-id="{{ MODAL_ID }}" wide="true">
     <label>
@@ -223,9 +232,11 @@
     </div>
 
     <div class="buttons">
-        <button (click)="addBoard()">
+        <button (click)="addEditBoard()">
-            <i class="icon icon-plus"></i>
+            <i class="icon"
-            Add Board
+                [ngClass]="{ 'icon-plus': modalProps.title === 'Add', 'icon-floppy': modalProps.title !== 'Add' }"></i>
+            {{ modalProps.title === 'Add' ? 'Add' : 'Save' }}
+            Board
         </button>
         <button class="flat" (click)="modal.close(MODAL_ID)">
             Cancel

src/app/settings/board-admin/board-admin.component.ts

@@ -34,11 +34,13 @@ export class BoardAdmin {
     private activeUser: User;
     private modalProps: BoardData;
     private noBoardsMessage: string;
+    private boardToRemove: Board;
 
     private hasBAUsers = false;
     private loading = true;
 
     private MODAL_ID: string;
+    private MODAL_CONFIRM_ID: string;
 
     constructor(private auth: AuthService,
             private modal: ModalService,
@@ -47,6 +49,8 @@ export class BoardAdmin {
             private notes: NotificationsService,
             private dragula: DragulaService) {
         this.MODAL_ID = 'board-addedit-form';
+        this.MODAL_CONFIRM_ID = 'board-remove-confirm';
+
         this.users = [];
         this.boards = [];
         this.modalProps = new BoardData();
@@ -97,7 +101,7 @@ export class BoardAdmin {
         });
     }
 
-    addBoard(): void {
+    addEditBoard(): void {
         this.setBoardUsers();
 
         if (this.validateBoard()) {
@@ -105,11 +109,9 @@ export class BoardAdmin {
                 .subscribe((response: ApiResponse) => {
                     response.alerts.forEach(note => this.notes.add(note));
 
-                    console.log(response);
-                    // TODO: Update boards list
-
                     if (response.status === 'success') {
                         this.modal.close(this.MODAL_ID);
+                        this.settings.updateBoards(response.data[1]);
                     }
                 });
         }
@@ -164,11 +166,11 @@ export class BoardAdmin {
     }
 
     private getTrackerRegExp(i: number): string {
-        return this.modalProps.issueTrackers[i].bugId;
+        return this.modalProps.issueTrackers[i].regex;
     }
 
     private onTrackerRegExpEdit(e: string, i: number): void {
-        this.modalProps.issueTrackers[i].bugId = e;
+        this.modalProps.issueTrackers[i].regex = e;
     }
 
     private getColor(category: any): string {
@@ -179,7 +181,7 @@ export class BoardAdmin {
         return category.defaultColor;
     }
 
-    private showModal(title: string): void {
+    private showModal(title: string, board?: Board): void {
         let isAdd = (title === 'Add');
 
         this.modalProps = new BoardData(title);
@@ -189,10 +191,19 @@ export class BoardAdmin {
                 user.selected = false;
             });
         } else {
-            // TODO: Load board data in constructor
+            this.modalProps.boardName = board.name;
+            this.modalProps.columns = board.columns;
+            this.modalProps.categories = board.categories;
+            this.modalProps.issueTrackers = board.issue_trackers;
+            this.modalProps.users = board.users;
         }
 
         this.modal.open(this.MODAL_ID);
     }
+
+    private showConfirmModal(board: Board): void {
+        this.boardToRemove = board;
+        this.modal.open(this.MODAL_CONFIRM_ID);
+    }
 }
 

src/app/settings/board-admin/board-data.model.ts

@@ -59,7 +59,7 @@ export class BoardData {
 
         this.issueTrackers.push({
             url: this.issueTrackerUrl,
-            bugId: this.issueTrackerBugId
+            regex: this.issueTrackerBugId
         });
         this.issueTrackerUrl = '';
         this.issueTrackerBugId = '';

src/app/shared/modal/modal.component.html

@@ -1,7 +1,10 @@
-<div [hidden]="!isOpen">
+<div class="modal-container" [ngClass]="{ 'modal-open': isOpen }">
-    <div class="modal-overlay" (click)="close(true)"></div>
+    <div class="modal-overlay"
+        [ngClass]="{ animated: animate, 'modal-closed': !isOpen }"
+        (click)="close(true)"></div>
 
-    <div class="modal" [ngClass]="{ wide: wide }">
+    <div class="modal"
+        [ngClass]="{ wide: wide, animated: animate, 'modal-closed': !isOpen }">
         <div class="title" *ngIf="modalTitle">
             <h2>
                 {{ modalTitle }}

src/app/shared/modal/modal.component.ts

@@ -16,7 +16,9 @@ export class Modal implements OnInit {
     @Input('modal-title') modalTitle = '';
     @Input() blocking = false;
     @Input() wide = false;
+
     isOpen = false;
+    animate = true;
 
     constructor(private modalService: ModalService) {
     }

src/app/shared/modal/modal.service.ts

@@ -1,13 +1,16 @@
 import { Injectable } from '@angular/core';
 
+import { AuthService, UserOptions } from '../index';
 import { Modal } from './modal.component';
 
 @Injectable()
 export class ModalService {
     private modals: Array<Modal>;
+    private userOptions: UserOptions;
 
-    constructor() {
+    constructor(private auth: AuthService) {
         this.modals = [];
+        this.userOptions = auth.userOptions;
     }
 
     registerModal(newModal: Modal): void {
@@ -25,6 +28,7 @@ export class ModalService {
         var modal = this.findModal(modalId);
 
         if (modal) {
+            modal.animate = this.userOptions.show_animations;
             modal.isOpen = true;
         }
     }

src/scss/_modal.scss

@@ -1,3 +1,11 @@
+.modal-container {
+    visibility: hidden;
+
+    &.modal-open {
+        visibility: visible;
+    }
+}
+
 .modal-overlay {
     background-color: rgba(0, 0, 0, .4);
     bottom: 0;
@@ -6,27 +14,45 @@
     right: 0;
     top: 0;
     z-index: 1000;
+
+    &.animated {
+        transition: all .3s;
+    }
+
+    &.modal-closed {
+        opacity: 0;
+    }
 }
 
 .modal {
     @include shadow-float();
 
     background-color: $white;
-    left: calc(50% - 200px);
+    left: 50%;
     max-height: calc(100% - 10em);
     max-width: 100%;
     min-height: 10em;
     overflow-y: auto;
     position: fixed;
-    top: 5em;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%) translateZ(0);
     width: 400px;
     z-index: 1100;
+    -webkit-font-smoothing: subpixel-antialiased;
+
+    &.animated {
+        transition: all .3s;
+    }
 
     &.wide {
-        left: calc(50% - 300px);
         width: 600px;
     }
 
+    &.modal-closed {
+        opacity: 0;
+        transform: translateX(-50%) translateY(-100%);
+    }
+
     .title {
         background-color: $color-heading-bg;
 

src/scss/_settings.scss

@@ -231,6 +231,10 @@
             }
         }
 
+        tbody label {
+            display: inline;
+        }
+
         .filters {
             margin-top: -2.5em;
             max-width: 75%;