(Scrumboard) final touches..

src/app/core/components/material-color-picker/material-color-picker.component.html

@@ -1,4 +1,5 @@
 <button md-icon-button
+        type="button"
         class="mat-elevation-z1"
         [mdMenuTriggerFor]="colorMenu"
         (onMenuOpen)="onMenuOpen()"

src/app/main/content/apps/scrumboard/board.model.ts

@@ -0,0 +1,84 @@
+import { FuseUtils } from '../../../../core/fuseUtils';
+import { List } from './list.model';
+import { Card } from './card.model';
+
+const sampleLabels = [
+    {
+        'id'   : '56027e4119ad3a5dc28b36cd',
+        'name' : 'Design',
+        'color': 'md-red-500-bg'
+    },
+    {
+        'id'   : '5640635e19ad3a5dc21416b2',
+        'name' : 'App',
+        'color': 'md-blue-500-bg'
+    },
+    {
+        'id'   : '6540635g19ad3s5dc31412b2',
+        'name' : 'Feature',
+        'color': 'md-green-400-bg'
+    }
+];
+
+const sampleMembers = [
+    {
+        id    : '56027c1930450d8bf7b10758',
+        name  : 'Alice Freeman',
+        avatar: 'assets/images/avatars/alice.jpg'
+    },
+    {
+        id    : '26027s1930450d8bf7b10828',
+        name  : 'Danielle Obrien',
+        avatar: 'assets/images/avatars/danielle.jpg'
+    },
+    {
+        id    : '76027g1930450d8bf7b10958',
+        name  : 'James Lewis',
+        avatar: 'assets/images/avatars/james.jpg'
+    },
+    {
+        id    : '36027j1930450d8bf7b10158',
+        name  : 'Vincent Munoz',
+        avatar: 'assets/images/avatars/vincent.jpg'
+    }
+];
+
+export class Board
+{
+    name: string;
+    uri: string;
+    id: string;
+    settings: {
+        color: string,
+        subscribed: boolean,
+        cardCoverImages: boolean
+    };
+    lists: List[];
+    cards: Card[];
+    members: {
+        id: string,
+        name: string,
+        avatar: string
+    }[];
+    labels: {
+        id: string,
+        name: string,
+        color: string
+    }[];
+
+    constructor(board)
+    {
+        this.name = board.name || 'Untitled Board';
+        this.uri = board.uri || 'untitled-board';
+        this.id = board.id || FuseUtils.generateGUID();
+        this.settings = board.settings || {
+            color          : '',
+            subscribed     : true,
+            cardCoverImages: true
+        };
+        this.lists = [];
+        this.cards = [];
+        this.members = board.members || sampleMembers;
+        this.labels = board.labels || sampleLabels;
+    }
+}

src/app/main/content/apps/scrumboard/board/board.component.html

@@ -1,13 +1,14 @@
 <md-sidenav-container>
 
     <div id="board">
-        <!-- HEADER -->
-        <div class="header md-accent-bg p-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column">
 
-            <div class="header-content" fxLayout="row" fxLayoutAlign="space-between" fxFlex>
+        <!-- HEADER -->
+        <div class="header md-accent-bg p-16 p-sm-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column">
+
+            <div class="header-content" fxLayout="row" fxLayoutAlign="space-between" fxFlex="1 0 auto" fxLayoutWrap>
 
                 <!-- BOARD SELECTION BUTTON -->
-                <div fxLayout="row" fxLayoutAlign="center center">
+                <div fxLayout="row" fxLayoutAlign="center center" fxFlexOrder="2" fxFlexOrder.gt-xs="1">
                     <button md-raised-button class="mat-accent header-boards-button"
                             [class]="'md-'+board.settings.color+'-700-bg'"
                             routerLink="/apps/scrumboard/boards"
@@ -19,18 +20,24 @@
                 <!-- / BOARD SELECTION BUTTON -->
 
                 <!-- BOARD NAME -->
-                <div class="header-board-name" fxLayout="row" fxLayoutAlign="center center">
+                <div class="header-board-name mb-8 mb-sm-0"
-                    <md-icon *ngIf="board.settings.subscribed" class="board-subscribe s-16">remove_red_eye</md-icon>
+                     fxLayout="row" fxLayoutAlign="center center"
-                    <fuse-scrumboard-edit-board-name
+                     fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="center center"
-                        fxFlex="1 0 auto"
+                     fxFlex="1 0 100%" fxFlex.gt-xs="1 0 auto"
-                        [board]="board"
+                     fxFlexOrder="1" fxFlexOrder.gt-xs="2">
-                        (onNameChanged)="onBoardNameChanged($event)">
+                    <div>
-                    </fuse-scrumboard-edit-board-name>
+                        <md-icon *ngIf="board.settings.subscribed" class="board-subscribe s-16">remove_red_eye</md-icon>
+                        <fuse-scrumboard-edit-board-name
+                            fxFlex="1 0 auto"
+                            [board]="board"
+                            (onNameChanged)="onBoardNameChanged($event)">
+                        </fuse-scrumboard-edit-board-name>
+                    </div>
                 </div>
                 <!-- / BOARD NAME -->
 
                 <!-- TOOLBAR -->
-                <div class="toolbar" fxLayout="row" fxLayoutAlign="space-between center" flex-order="3">
+                <div class="toolbar" fxLayout="row" fxLayoutAlign="space-between center" fxFlexOrder="3">
 
                     <!-- BOARD SETTINGS BUTTON -->
                     <button md-icon-button (click)="settingsSidenav.toggle()"
@@ -46,10 +53,10 @@
         </div>
         <!-- / HEADER -->
 
-        <div fxFlex class="board-content-wrapper p-24">
+        <div fxFlex class="board-content-wrapper p-16 p-sm-24">
 
             <!-- BOARD -->
-            <div class="board-content ngx-dnd-container" [class]="board.settings.color+'-100-bg'" fxLayout="row"
+            <div class="board-content ngx-dnd-container p-16 p-sm-24" [class]="board.settings.color+'-100-bg'" fxLayout="row"
                  ngxDroppable="list" [model]="board.lists" (out)="onDrop($event)">
 
                 <!-- LIST -->

src/app/main/content/apps/scrumboard/board/board.component.scss

@@ -19,9 +19,7 @@
 
             > .header {
                 position: relative;
-                height: 96px;
                 min-height: 96px;
-                max-height: 96px;
                 background-image: none;
                 z-index: 49;
 
@@ -111,7 +109,6 @@
                     left: 0;
                     height: 100%;
                     background: #E5E7E8;
-                    padding: 24px;
                     overflow-y: hidden;
                     overflow-x: auto;
                     -webkit-overflow-scrolling: touch;
@@ -133,19 +130,3 @@
         }
     }
 }
-
-.is-mobile {
-
-    #board {
-
-        .list-card {
-
-            .list-card-sort-handle {
-                display: block;
-            }
-        }
-    }
-}
-
-.list-card-sort-helper {
-}

src/app/main/content/apps/scrumboard/board/board.component.ts

@@ -2,8 +2,8 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { ScrumboardService } from '../scrumboard.service';
 import { Subscription } from 'rxjs/Subscription';
-import { FuseUtils } from '../../../../../core/fuseUtils';
 import { Location } from '@angular/common';
+import { List } from '../list.model';
 
 @Component({
     selector   : 'fuse-scrumboard-board',
@@ -38,13 +38,8 @@ export class FuseScrumboardBoardComponent implements OnInit, OnDestroy
         {
             return;
         }
-        const newList = {
-            id     : FuseUtils.generateGUID(),
-            name   : newListName,
-            idCards: []
-        };
 
-        this.scrumboardService.addList(newList);
+        this.scrumboardService.addList(new List({name: newListName}));
     }
 
     onBoardNameChanged(newName)

src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html

@@ -74,7 +74,7 @@
                     <form class="px-16 py-8" #newChecklistForm="ngForm" (submit)="addChecklist(newChecklistForm)" (click)="$event.stopPropagation()"
                           fxLayout="column" fxLayoutAlign="start end">
 
-                        <md-input-container floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex >
+                        <md-input-container floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex>
                             <input #newCheckListTitleField mdInput ngModel #checklistTitle="ngModel" name="checklistTitle" placeholder="Checklist title" required>
                         </md-input-container>
 
@@ -125,10 +125,11 @@
 
 <div *ngIf="card" md-dialog-content class="p-24 m-0" perfect-scrollbar>
 
-    <div fxLayout="row" fxLayoutAlign="space-between center">
+    <div fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center"
+         fxLayout.xs="column" fxLayoutAlign="center center">
 
         <!-- BREADCRUMB -->
-        <div class="card-breadcrumb" fxLayout="row" fxLayoutAlign="start center">
+        <div class="card-breadcrumb mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
             <span>{{board.name}}</span>
             <md-icon class="s-20">chevron_right</md-icon>
             <span>{{list.name}}</span>
@@ -171,7 +172,8 @@
     <div class="sections">
 
         <!-- LABELS SECTION -->
-        <div *ngIf="card.idLabels[0] || card.idMembers[0]" class="section" fxLayout="row">
+        <div *ngIf="card.idLabels[0] || card.idMembers[0]" class="section"
+             fxLayout="column" fxLayout.gt-xs="row">
 
             <div *ngIf="card.idLabels[0]" fxFlex class="labels">
                 <div class="section-header" fxLayout="row" fxLayoutAlign="start center">
@@ -224,7 +226,9 @@
 
                     <div class="attachment" *ngFor="let item of card.attachments" [ngSwitch]="item.type">
 
-                        <div *ngSwitchCase="'image'" fxLayout="row">
+                        <div *ngSwitchCase="'image'"
+                             fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center"
+                             fxLayout="column" fxLayoutAlign="center start">
 
                             <div class="attachment-preview mat-elevation-z2"
                                  [ngStyle]="{'background-image': 'url('+item.src+')'}">

src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss

@@ -59,10 +59,10 @@
 
             .card-name {
                 width: 100%;
-                font-size: 24px;
+                font-size: 22px;
 
-                .editable-input {
+                @include media-breakpoint(xs) {
-                    font-size: 24px;
+                    font-size: 14px;
                 }
             }
 

src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html

@@ -12,7 +12,7 @@
 
         <div fxFlex fxLayout="column" perfect-scrollbar>
 
-            <div class="label pl-12 mx-8 mb-8" *ngFor="let label of board.labels" fxFlex="1 0 auto" fxLayout="row" fxFlexAlign="space-between center"
+            <div class="label pl-12 mx-8 mb-8" *ngFor="let label of board.labels" fxFlex="0 0 auto" fxLayout="row" fxFlexAlign="space-between center"
                  [class]="label.color">
 
                 <md-checkbox fxFlex fxLayout="row" fxLayoutAlign="start center" [checked]="card.idLabels.indexOf(label.id) > -1"
@@ -41,7 +41,7 @@
                 <input mdInput placeholder="Name" [(ngModel)]="selectedLabel.name" (change)="onLabelChange()">
             </md-input-container>
 
-            <fuse-material-color-picker [(selectedClass)]="selectedLabel.color" class="ml-8" (change)="onLabelChange()"></fuse-material-color-picker>
+            <fuse-material-color-picker [(selectedClass)]="selectedLabel.color" class="ml-8" (change)="$event.preventDefault;onLabelChange()"></fuse-material-color-picker>
         </div>
 
     </div>

src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html

@@ -10,7 +10,7 @@
       class="board-name-form" fxFlex="1 0 auto"
       *ngIf="formActive" fxFlex="row">
 
-    <input formControlName="name" #nameInput fxFlex placeholder="Write a board name">
+    <input formControlName="name" #nameInput fxFlex="1 0 auto" placeholder="Write a board name">
 
     <button md-icon-button fxFlex="0 1 auto">
         <md-icon>check</md-icon>

src/app/main/content/apps/scrumboard/board/list/card/card.component.scss

@@ -11,10 +11,6 @@
     transition: box-shadow 150ms ease;
     cursor: pointer;
 
-    &.ui-sortable-helper {
-        box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
-    }
-
     .list-card-sort-handle {
         display: none;
         position: absolute;

src/app/main/content/apps/scrumboard/board/list/list.component.scss

@@ -7,10 +7,6 @@
     padding-right: 24px;
     height: 100%;
 
-    &.ui-sortable-helper .list {
-        box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
-    }
-
     .list {
         max-height: 100%;
         background-color: #EEF0F2;
@@ -24,6 +20,10 @@
             padding: 0 8px 0 16px;
             border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 
+            @include media-breakpoint(xs) {
+                height: 48px;
+                min-height: 48px;
+            }
         }
 
         .list-content {
@@ -36,14 +36,6 @@
                 position: relative;
                 min-height: 32px;
                 padding: 0 16px;
-
-                .card-sortable-placeholder {
-                    background: rgba(0, 0, 0, 0.06);
-                }
-
-                > div {
-                    transition: none !important;
-                }
             }
         }
 

src/app/main/content/apps/scrumboard/board/list/list.component.ts

@@ -7,6 +7,7 @@ import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
 import { MdDialog, MdDialogRef } from '@angular/material';
 import { FuseScrumboardCardDialogComponent } from '../dialogs/card/card.component';
 import { FuseConfirmDialogComponent } from '../../../../../../core/components/confirm-dialog/confirm-dialog.component';
+import { Card } from '../../card.model';
 
 @Component({
     selector     : 'fuse-scrumboard-board-list',
@@ -56,24 +57,7 @@ export class FuseScrumboardBoardListComponent implements OnInit, OnDestroy
             return;
         }
 
-        const newCard = {
+        this.scrumboardService.addCard(this.list.id, new Card({name: newCardName}));
-            id               : FuseUtils.generateGUID(),
-            name             : newCardName,
-            description      : '',
-            idAttachmentCover: '',
-            idMembers        : [],
-            idLabels         : [],
-            attachments      : [],
-            subscribed       : false,
-            checklists       : [],
-            checkItems       : 0,
-            checkItemsChecked: 0,
-            comments         : [],
-            activities       : [],
-            due              : null
-        };
-
-        this.scrumboardService.addCard(this.list.id, newCard);
 
         setTimeout(() => {
             this.listScroll.scrollToBottom(0, 400);

src/app/main/content/apps/scrumboard/card.model.ts

@@ -0,0 +1,37 @@
+import { FuseUtils } from '../../../../core/fuseUtils';
+
+export class Card
+{
+    id: string;
+    name: string;
+    description: string;
+    idAttachmentCover: string;
+    idMembers: string[];
+    idLabels: string[];
+    attachments: any[];
+    subscribed: boolean;
+    checklists: any[];
+    checkItems: number;
+    checkItemsChecked: number;
+    comments: any[];
+    activities: any[];
+    due: string;
+
+    constructor(card)
+    {
+        this.id = card.id || FuseUtils.generateGUID();
+        this.name = card.name || '';
+        this.description = card.description || '';
+        this.idAttachmentCover = card.idAttachmentCover || '';
+        this.idMembers = card.idMembers || [];
+        this.idLabels = card.idLabels || [];
+        this.attachments = card.attachments || [];
+        this.subscribed = card.subscribed || true;
+        this.checklists = card.checklists || [];
+        this.checkItems = card.checkItems || 0;
+        this.checkItemsChecked = card.checkItemsChecked || 0;
+        this.comments = card.comments || [];
+        this.activities = card.activities || [];
+        this.due = card.due || '';
+    }
+}

src/app/main/content/apps/scrumboard/list.model.ts

@@ -0,0 +1,15 @@
+import { FuseUtils } from '../../../../core/fuseUtils';
+
+export class List
+{
+    id: string;
+    name: string;
+    idCards: string[];
+
+    constructor(list)
+    {
+        this.id = list.id || FuseUtils.generateGUID();
+        this.name = list.name || '';
+        this.idCards = [];
+    }
+}

src/app/main/content/apps/scrumboard/scrumboard.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ScrumboardService } from './scrumboard.service';
 import { Subscription } from 'rxjs/Subscription';
-import { FuseUtils } from '../../../../core/fuseUtils';
 import { Router } from '@angular/router';
+import { Board } from './board.model';
 
 @Component({
     selector   : 'fuse-scrumboard',
@@ -34,63 +34,7 @@ export class FuseScrumboardComponent implements OnInit, OnDestroy
 
     newBoard()
     {
-        const newBoard = {
+        const newBoard = new Board({});
-            name    : 'Untitled Board',
-            uri     : 'untitled-board',
-            id      : FuseUtils.generateGUID(),
-            settings: {
-                color          : '',
-                subscribed     : true,
-                cardCoverImages: true
-            },
-            lists   : [],
-            cards   : [],
-            members : [
-                {
-                    id    : '56027c1930450d8bf7b10758',
-                    name  : 'Alice Freeman',
-                    avatar: 'assets/images/avatars/alice.jpg'
-                },
-                {
-                    id    : '26027s1930450d8bf7b10828',
-                    name  : 'Danielle Obrien',
-                    avatar: 'assets/images/avatars/danielle.jpg'
-                },
-                {
-                    id    : '76027g1930450d8bf7b10958',
-                    name  : 'James Lewis',
-                    avatar: 'assets/images/avatars/james.jpg'
-                },
-                {
-                    id    : '36027j1930450d8bf7b10158',
-                    name  : 'Vincent Munoz',
-                    avatar: 'assets/images/avatars/vincent.jpg'
-                }
-            ],
-            labels  : [
-                {
-                    id   : '26022e4129ad3a5sc28b36cd',
-                    name : 'High Priority',
-                    color: 'red'
-                },
-                {
-                    id   : '56027e4119ad3a5dc28b36cd',
-                    name : 'Design',
-                    color: 'orange'
-                },
-                {
-                    id   : '5640635e19ad3a5dc21416b2',
-                    name : 'App',
-                    color: 'blue'
-                },
-                {
-                    id   : '6540635g19ad3s5dc31412b2',
-                    name : 'Feature',
-                    color: 'green'
-                }
-            ]
-        };
-
         this.scrumboardService.createNewBoard(newBoard).then(() => {
             this.router.navigate(['/apps/scrumboard/boards/' + newBoard.id + '/' + newBoard.uri]);
         });