Rename files and mock Board view

gulpfile.js

@@ -57,7 +57,7 @@ gulp.task('html', () => {
 });
 
 gulp.task('fonts', () => {
-    return gulp.src('src/fonts/*.*')
+    return gulp.src('src/fonts/fontello.*')
         .pipe(gulp.dest('dist/css/fonts/'));
 });
 

src/app/app.component.html

@@ -2,7 +2,9 @@
 
 <tb-top-nav></tb-top-nav>
 
-<tb-dashboard></tb-dashboard>
+<tb-board></tb-board>
+
+<!--<tb-dashboard></tb-dashboard>-->
 
 <!--<tb-settings></tb-settings>-->
 

src/app/app.component.ts

@@ -2,13 +2,14 @@ import { Component } from '@angular/core';
 
 import { Login } from './login/login.component';
 import { TopNav } from './top-nav/top-nav.component';
+import { Board } from './board/board.component';
 import { Settings } from './settings/settings.component';
 import { Dashboard } from './dashboard/dashboard.component';
 
 @Component({
     selector: 'app-component',
-    directives: [ Login, TopNav, Settings, Dashboard ],
-    templateUrl: 'app/app.template.html'
+    directives: [ Login, TopNav, Board, Settings, Dashboard ],
+    templateUrl: 'app/app.component.html'
 })
 export class AppComponent {
 }

src/app/board/board.component.html

@@ -0,0 +1,146 @@
+<div class="board-nav">
+    <label>
+        Select Board:
+        <select>
+            <option>Board Name Here</option>
+        </select>
+    </label>
+    <div class="right">
+        <label>
+            Hide Filtered Items:
+            <input type="checkbox">
+        </label>
+        <label>
+            User Filter:
+            <select>
+                <option>Any</option>
+            </select>
+        </label>
+        <label>
+            Category Filter:
+            <select>
+                <option>Any</option>
+            </select>
+        </label>
+    </div>
+</div>
+
+<div class="board">
+    <div class="column">
+        <h3>
+            <span class="icon icon-minus-squared-alt" title="Collapse All Tasks"></span>
+            To Do
+            <span class="badge" title="Tasks in Column">2</span>
+            <span class="icon icon-angle-double-up"
+                title="Expand Column"></span>
+            <span class="right icon icon-angle-double-down"
+                title="Collapse Column"></span>
+        </h3>
+        <div class="task">
+            <h4>
+                <span class="icon icon-minus-squared-alt" title="Collapse Task"></span>
+                Something to Get Done
+                <span class="badge right" title="Points">3</span>
+            </h4>
+            <div class="description">
+                <p>This is the thing that needs to get done.</p>
+            </div>
+            <div class="stats">
+                Assigned To: admin
+                <span class="right">
+                    <span class="icon icon-chat-empty" title="4 Comments"></span>
+                    <span class="icon icon-attach" title="2 Attachments"></span>
+                    <span class="category" title="Category"></span>
+                </span>
+            </div>
+        </div>
+        <div class="task">
+            <h4>
+                <span class="icon icon-minus-squared-alt" title="Collapse Task"></span>
+                A Task With a Very Long Title to Test How it Wraps
+                <span class="badge right" title="Points">3</span>
+            </h4>
+            <div class="description">
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+                <p>Fusce ut commodo urna, vitae lacinia quam. Cras eleifend magna massa, vitae porttitor dolor lacinia quis.</p>
+                <p>Nam tortor risus, faucibus nec lacinia ac, laoreet vitae diam.</p>
+                <p>Nullam viverra elementum mi, at tincidunt nisl pretium a. Fusce risus risus, ornare facilisis leo a, dictum porta nibh.</p>
+                <p>Quisque ut augue tortor. Phasellus hendrerit placerat molestie.</p>
+            </div>
+            <div class="stats">
+                Assigned To: admin
+                <span class="right">
+                    <span class="icon icon-chat-empty" title="4 Comments"></span>
+                    <span class="icon icon-attach" title="2 Attachments"></span>
+                    <span class="category" title="Category">Front End</span>
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <div class="column">
+        <h3>
+            <span class="icon icon-plus-squared-alt" title="Expand All Tasks"></span>
+            Doing
+            <span class="badge" title="Tasks in Column">1</span>
+            <span class="icon icon-angle-double-up"
+                title="Expand Column"></span>
+            <span class="right icon icon-angle-double-down"
+                title="Collapse Column"></span>
+        </h3>
+        <div class="task compact">
+            <h4>
+                <span class="icon icon-plus-squared-alt" title="Expand Task"></span>
+                Something Else to Get Done
+                <span class="badge right" title="Points">5</span>
+            </h4>
+            <div class="description">
+                <p>This really needs to be taken care of as well.</p>
+                <p>But probably not as quickly as the other one. Maybe.</p>
+            </div>
+            <div class="stats">
+                Assigned To: Unassigned
+                <span class="right">
+                    <span class="category" title="Category">API</span>
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <div class="column">
+        <h3>
+            Done
+            <span class="badge" title="Tasks in Column">0</span>
+            <span class="icon icon-angle-double-up"
+                title="Expand Column"></span>
+            <span class="right icon icon-angle-double-down"
+                title="Collapse Column"></span>
+        </h3>
+    </div>
+
+    <div class="column collapsed">
+        <h3>
+            <span class="icon icon-minus-squared-alt" title="Collapse All Tasks"></span>
+            Archived
+            <span class="badge" title="Tasks in Column">1</span>
+            <span class="icon icon-angle-double-up"
+                title="Expand Column"></span>
+            <span class="right icon icon-angle-double-down"
+                title="Collapse Column"></span>
+        </h3>
+        <div class="task">
+            <h4>Something Else to Get Done <span class="badge right" title="Points">5</span></h4>
+            <div class="description">
+                <p>This really needs to be taken care of as well.</p>
+                <p>But probably not as quickly as the other one. Maybe.</p>
+            </div>
+            <div class="stats">
+                Assigned To: Unassigned
+                <span class="right">
+                    <span class="category" title="Category">API</span>
+                </span>
+            </div>
+        </div>
+    </div>
+</div>
+

src/app/board/board.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'tb-board',
+    templateUrl: 'app/board/board.component.html'
+})
+export class Board {
+
+}
+

src/app/dashboard/calendar/calendar.component.ts

@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 
 @Component({
     selector: 'tb-calendar',
-    templateUrl: 'app/dashboard/calendar/calendar.template.html'
+    templateUrl: 'app/dashboard/calendar/calendar.component.html'
 })
 export class Calendar {
     @Input('board-id') boardId: number;

src/app/dashboard/charts/charts.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, AfterViewInit } from '@angular/core';
 
 @Component({
     selector: 'tb-charts',
-    templateUrl: 'app/dashboard/charts/charts.template.html'
+    templateUrl: 'app/dashboard/charts/charts.component.html'
 })
 export class Charts implements AfterViewInit {
     @Input('chart-name') chartName: string;

src/app/dashboard/dashboard.component.ts

@@ -5,7 +5,7 @@ import { Calendar } from './calendar/calendar.component';
 
 @Component({
     selector: 'tb-dashboard',
-    templateUrl: 'app/dashboard/dashboard.template.html',
+    templateUrl: 'app/dashboard/dashboard.component.html',
     directives: [ Charts, Calendar ]
 })
 export class Dashboard {

src/app/login/login.component.html

@@ -2,6 +2,7 @@
     <h1>TaskBoard</h1>
     <input type="text" placeholder="Username" title="Username">
     <input type="password" placeholder="Password" title="Password">
+    <label><input type="checkbox"> Remember Me</label>
     <button>Sign In</button>
     <p>v{{ version }}</p>
 </div>

src/app/login/login.component.ts

@@ -1,10 +1,10 @@
 import { Component } from "@angular/core";
 
-import { Constants } from '../constants.injectable';
+import { Constants } from '../app.constants';
 
 @Component({
     selector: 'tb-login',
-    templateUrl: 'app/login/login.template.html'
+    templateUrl: 'app/login/login.component.html'
 })
 export class Login {
     version: string;

src/app/main.ts

@@ -4,7 +4,7 @@ import { HTTP_PROVIDERS } from '@angular/http';
 //import { enableProdMode } from '@angular/core';
 
 import { AppComponent } from './app.component';
-import { Constants } from './constants.injectable';
+import { Constants } from './app.constants';
 
 //enableProdMode();
 

src/app/settings/settings.component.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'tb-settings',
-    templateUrl: 'app/settings/settings.template.html'
+    templateUrl: 'app/settings/settings.component.html'
 })
 export class Settings {
 }

src/app/top-nav/top-nav.component.html

@@ -10,8 +10,8 @@
     </h1>
 
     <div class="buttons">
-        <button>Dashboard</button>
-        <button class="flat">Boards</button>
+        <button class="flat">Dashboard</button>
+        <button>Boards</button>
         <button class="flat">Settings</button>
         <button class="flat">Logout (username)</button>
     </div>

src/app/top-nav/top-nav.component.ts

@@ -1,17 +1,17 @@
 import { Component } from '@angular/core';
 
-import { Constants } from '../constants.injectable';
+import { Constants } from '../app.constants';
 
 @Component({
     selector: 'tb-top-nav',
-    templateUrl: 'app/top-nav/top-nav.template.html'
+    templateUrl: 'app/top-nav/top-nav.component.html'
 })
 export class TopNav {
     pageName: string;
     version: string;
 
     constructor(constants: Constants) {
-        this.pageName = 'Dashboard';
+        this.pageName = 'TaskBoard Re-Write';
         this.version = constants.VERSION;
     }
 }

src/fonts/config.json

@@ -0,0 +1,112 @@
+{
+  "name": "fontello",
+  "css_prefix_text": "icon-",
+  "css_use_suffix": false,
+  "hinting": true,
+  "units_per_em": 1000,
+  "ascent": 850,
+  "glyphs": [
+    {
+      "uid": "41087bc74d4b20b55059c60a33bf4008",
+      "css": "edit",
+      "code": 59393,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "44e04715aecbca7f266a17d5a7863c68",
+      "css": "plus",
+      "code": 59394,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "f48ae54adfb27d8ada53d0fd9e34ee10",
+      "css": "trash-empty",
+      "code": 59392,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "17ebadd1e3f274ff0205601eef7b9cc4",
+      "css": "help-circled",
+      "code": 59395,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "5211af474d3a9848f67f945e2ccaf143",
+      "css": "cancel",
+      "code": 59396,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "9a76bc135eac17d2c8b8ad4a5774fc87",
+      "css": "download",
+      "code": 59397,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "eeec3208c90b7b48e804919d0d2d4a41",
+      "css": "upload",
+      "code": 59398,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "c5fd349cbd3d23e4ade333789c29c729",
+      "css": "eye",
+      "code": 59399,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "9c1376672bb4f1ed616fdd78a23667e9",
+      "css": "comment-empty",
+      "code": 59400,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "31951fbb9820ed0690f675b3d495c8da",
+      "css": "chat-empty",
+      "code": 59401,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "0d6ab6194c0eddda2b8c9cedf2ab248e",
+      "css": "attach",
+      "code": 59402,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "745f12abe1472d14f8f658de7e5aba66",
+      "css": "angle-double-left",
+      "code": 59403,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "fdfbd1fcbd4cb229716a810801a5f207",
+      "css": "angle-double-right",
+      "code": 59404,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "dfec4ffa849d8594c2e4b86f6320b8a6",
+      "css": "angle-double-down",
+      "code": 59405,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "63b3012c8cbe3654ba5bea598235aa3a",
+      "css": "angle-double-up",
+      "code": 59406,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "2d3be3e856fc1e4ac067590d2ded1b07",
+      "css": "plus-squared-alt",
+      "code": 61846,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "18ef25350258541e8e54148ed79845c0",
+      "css": "minus-squared-alt",
+      "code": 61767,
+      "src": "fontawesome"
+    }
+  ]
+}

src/fonts/fontello.svg

@@ -33,6 +33,12 @@
 <glyph glyph-name="angle-double-right" unicode="&#xe80c;" d="M332 314q0-7-6-13l-260-260q-5-5-12-5t-13 5l-28 28q-6 6-6 13t6 13l219 219-219 220q-6 5-6 12t6 13l28 28q5 6 13 6t12-6l260-260q6-5 6-13z m214 0q0-7-5-13l-260-260q-6-5-13-5t-13 5l-28 28q-5 6-5 13t5 13l219 219-219 220q-5 5-5 12t5 13l28 28q6 6 13 6t13-6l260-260q5-5 5-13z" horiz-adv-x="571.4" />
 
 <glyph glyph-name="angle-double-down" unicode="&#xe80d;" d="M600 368q0-7-6-13l-260-260q-5-6-13-6t-12 6l-260 260q-6 6-6 13t6 13l27 28q6 5 13 5t13-5l219-220 220 220q5 5 13 5t12-5l28-28q6-6 6-13z m0 214q0-7-6-13l-260-260q-5-5-13-5t-12 5l-260 260q-6 6-6 13t6 13l27 28q6 5 13 5t13-5l219-219 220 219q5 5 13 5t12-5l28-28q6-6 6-13z" horiz-adv-x="642.9" />
+
+<glyph glyph-name="angle-double-up" unicode="&#xe80e;" d="M600 118q0-7-6-13l-28-28q-5-5-12-5t-13 5l-220 219-219-219q-5-5-13-5t-13 5l-27 28q-6 6-6 13t6 13l260 260q5 5 12 5t13-5l260-260q6-6 6-13z m0 214q0-7-6-13l-28-28q-5-5-12-5t-13 5l-220 220-219-220q-5-5-13-5t-13 5l-27 28q-6 6-6 13t6 13l260 260q5 6 12 6t13-6l260-260q6-6 6-13z" horiz-adv-x="642.9" />
+
+<glyph glyph-name="minus-squared-alt" unicode="&#xf147;" d="M643 404v-36q0-8-5-13t-13-5h-464q-8 0-13 5t-5 13v36q0 7 5 12t13 5h464q8 0 13-5t5-12z m71-250v464q0 37-26 63t-63 26h-464q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63z m72 464v-464q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h464q66 0 114-48t47-113z" horiz-adv-x="785.7" />
+
+<glyph glyph-name="plus-squared-alt" unicode="&#xf196;" d="M643 404v-36q0-8-5-13t-13-5h-196v-196q0-8-5-13t-13-5h-36q-8 0-13 5t-5 13v196h-196q-8 0-13 5t-5 13v36q0 7 5 12t13 5h196v197q0 8 5 13t13 5h36q8 0 13-5t5-13v-197h196q8 0 13-5t5-12z m71-250v464q0 37-26 63t-63 26h-464q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63z m72 464v-464q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h464q66 0 114-48t47-113z" horiz-adv-x="785.7" />
 </font>
 </defs>
 </svg>

src/scss/_board.scss

@@ -0,0 +1,151 @@
+.board-nav {
+    margin: 5px;
+    width: 99%;
+
+    label {
+        display: inline-block;
+
+        select {
+            width: auto;
+        }
+    }
+}
+
+.board {
+    display: flex;
+    height: calc(100% - 96px);
+    overflow-x: auto;
+    white-space: nowrap;
+    width: 100%;
+
+    .icon-minus-squared-alt,
+    .icon-plus-squared-alt {
+        cursor: pointer;
+        margin-right: 5px;
+    }
+
+    .column {
+        @include shadow-low();
+        @include clearfix();
+
+        background-color: #fff;
+        flex: 1 0 300px;
+        height: calc(100% - 7px);
+        margin-left: 7px;
+        overflow: auto;
+        white-space: normal;
+
+        h3 {
+            background-color: $color-heading-bg;
+            border-bottom: 1px solid lighten($color-border, 18%);
+            font-size: 24px;
+            padding: 5px;
+
+            span {
+                cursor: pointer;
+            }
+
+            .icon-angle-double-up {
+                display: none;
+            }
+
+            .badge {
+                display: none;
+            }
+        }
+
+        &:last-of-type {
+            margin-right: 7px;
+        }
+
+        &.collapsed {
+            background-color: $color-heading-bg;
+            flex: 0 0 35px;
+            overflow: hidden;
+
+            h3 {
+                border: 0;
+                transform: rotate(90deg)
+                    translateX(-35px)
+                    translateY(5px);
+                transform-origin: left bottom;
+                white-space: nowrap;
+            }
+
+            .icon-minus-squared-alt,
+            .icon-plus-squared-alt {
+                display: none;
+            }
+
+            .badge {
+                display: inline-block;
+                font-size: .6em;
+                margin-left: 1em;
+                transform: rotate(-90deg) translateX(4px);
+            }
+
+            .task {
+                display: none;
+            }
+
+            .icon-angle-double-up {
+                display: inline-block;
+            }
+
+            .icon-angle-double-down {
+                display: none;
+            }
+        }
+    }
+
+    .task {
+        @include shadow-low();
+
+        background-color: #ffffe0;
+        margin: 5px;
+
+        h4 {
+            border-bottom: 1px solid lighten($color-border, 25%);
+            cursor: move;
+            font-size: 18px;
+            line-height: 1.5em;
+            padding: 0 5px 2px;
+
+            .badge {
+                font-size: .5em;
+                margin-right: -3px;
+                margin-top: 3px;
+            }
+        }
+
+        .description {
+            max-height: 12em;
+            overflow: auto;
+            padding: 5px;
+
+            p {
+                margin: 0 0 10px;
+            }
+
+            p:last-of-type {
+                margin: 0;
+            }
+        }
+
+        .stats {
+            font-size: .9em;
+            padding: 0 5px;
+        }
+
+        .category {
+            font-weight: 700;
+        }
+
+        &.compact {
+            .description {
+                display: none;
+            }
+        }
+    }
+}
+

src/scss/_core.scss

@@ -1,6 +1,9 @@
 html {
-    background-color: $color-background;
     background-image: url('../images/bg.png');
+}
+
+html,
+body {
     height: 100%;
 }
 
@@ -82,10 +85,11 @@ button {
     background-color: $color-tertiary;
     border-radius: 33%;
     box-shadow: inset 1px 1px rgba(0, 0, 0, .1);
+    font-family: 'Fira Mono';
     font-size: .75em;
     font-weight: 700;
-    line-height: 2.3em;
+    line-height: 1.7em;
     margin: 2px;
-    padding: 0 7px;
+    padding: 3px 5px 1px;
 }
 

src/scss/_icons.scss

@@ -36,4 +36,7 @@
 .icon-angle-double-left:before { content: '\e80b'; }
 .icon-angle-double-right:before { content: '\e80c'; }
 .icon-angle-double-down:before { content: '\e80d'; }
+.icon-angle-double-up:before { content: '\e80e'; }
+.icon-minus-squared-alt:before { content: '\f147'; }
+.icon-plus-squared-alt:before { content: '\f196'; }
 

src/scss/_login.scss

@@ -26,8 +26,13 @@
         text-align: center;
     }
 
+    label {
+        display: inline-block;
+        margin-top: .5em;
+    }
+
     button {
-        margin-top: 1em;
+        margin-top: .5em;
         width: 100%;
     }
 

src/scss/_settings.scss

@@ -56,6 +56,7 @@
 
             .badge {
                 float: right;
+                margin-top: 4px;
             }
         }
 

src/scss/main.scss

@@ -15,6 +15,7 @@
 @import 'core';
 @import 'login';
 @import 'nav-top';
+@import 'board';
 @import 'settings';
 @import 'dashboard';
 @import 'icons';