Route persistence, dashboard enhancements

ahopkins · Feb 12, 2017 · 4953cc3 · 4953cc3
1 parent 8805a40
commit 4953cc3
Show file tree

Hide file tree

Showing 15 changed files with 238 additions and 93 deletions.
diff --git a/app/css/portermail.css b/app/css/portermail.css
diff --git a/app/css/scss/build/20dashboard.css b/app/css/scss/build/20dashboard.css
diff --git a/app/css/scss/build/20dashboard.css.map b/app/css/scss/build/20dashboard.css.map
diff --git a/app/css/scss/build/21inbox.css b/app/css/scss/build/21inbox.css
diff --git a/app/css/scss/build/21inbox.css.map b/app/css/scss/build/21inbox.css.map
diff --git a/app/css/scss/src/20dashboard.scss b/app/css/scss/src/20dashboard.scss
@@ -46,4 +46,15 @@
             }
         }
     }
+
+    canvas {
+        filter: grayscale(1);
+        -webkit-transition: all 200ms ease-out;
+        -moz-transition:    all 200ms ease-out;
+        -o-transition:      all 200ms ease-out;
+        transition:         all 200ms ease-out;
+    }
+    canvas:hover {
+        filter: grayscale(0);
+    }
 }
diff --git a/app/css/scss/src/21inbox.scss b/app/css/scss/src/21inbox.scss
@@ -120,6 +120,31 @@ $name-width: 240px;
             //             $eb  0    $eb -$eb #bdbdbd, // Right
             //             0    $eb  $eb -$eb #bdbdbd; // Bottom
         }
+
+        .tags {
+            margin: 0;
+            padding: 0;
+            justify-content: flex-start;
+
+            span {
+                margin: 0 5px;
+                font-size: 0.8rem;
+                line-height: 0.8rem;
+                background-color: $near-white;
+                padding: 3px;
+            }
+        }
+
+        &.selected,
+        &:hover {
+            box-shadow: inset 0 0 0 2px $dark-grey;
+        }
+
+        &:hover {
+            .actions a {
+                color: $light-grey;
+            }
+        }
     }
 
     .email-display {
@@ -184,14 +209,14 @@ $name-width: 240px;
 
         .actions {
             a {
-                color: $light-grey;
+                color: transparent;
                 padding: 1rem;
                 i {
                     font-size: 2rem;
                 }
 
                 &:hover {
-                    color: $primary;
+                    color: $primary !important;
                 }
             }
         }

diff --git a/app/js/portermail.render.js b/app/js/portermail.render.js
@@ -2,52 +2,13 @@
 var app = nunjucks.render('/templates/layouts/base.html');
 p.one('.portermail').innerHTML = app;
 
-var data = {
-    datasets: [{
-        data: [
-            11,
-            16,
-            7,
-            3,
-            14,
-            21
-        ],
-        backgroundColor: [
-            "#fd0328",
-            "#fdd803",
-            "#5b03fd",
-            "#03fd5b",
-            "#FD5B03",
-            "#4d4d4d"
-        ],
-        // hoverBackgroundColor: [
-        //     "#FD5B03",
-        //     "#FD5B03",
-        //     "#FD5B03",
-        //     "#FD5B03",
-        //     "#FD5B03",
-        //     "#FD5B03"
-        // ],
-        label: 'My dataset' // for legend
-    }],
-    labels: [
-        "Red",
-        "Green",
-        "Yellow",
-        "Grey",
-        "Blue",
-        "Last"
-    ]
-};
-
-new Chart(p.one("#recipient-chart"), {
-    data: data,
-    type: 'polarArea',
-    options: {
-        elements: {
-            arc: {
-                // borderColor: "#757575"
-            }
+// On path change, update active link menu
+p.events.add('pushPath', function () {
+    var links = p.all('.places a');
+    links.removeClass('active');
+    links.forEach(function (link) {
+        if (link.getAttribute('href') == p.router.current.path) {
+            link.addClass('active');
         }
-    }
-});
+    });
+});
diff --git a/app/js/portermail.routes.js b/app/js/portermail.routes.js
@@ -1,2 +1,4 @@
-// p.router.add('/inbox', views.inbox, true);
-p.router.add('/inbox', views.inbox);
+p.router.add('/inbox', views.inbox, true);
+p.router.add('/', views.dashboard, true);
+
+p.router.trigger();
diff --git a/app/js/portermail.views.js b/app/js/portermail.views.js
@@ -1,19 +1,75 @@
-var pView = function (templateName, context, logic, elem) {
+var pView = function (templateName, context, preLogic, postLogic, elem) {
     return function (e) {
-        logic = logic || null;
+        preLogic = preLogic || null;
+        postLogic = postLogic || null;
         elem = elem || p.one('#content');
 
-        if (typeof logic == 'function') {
-            logic.call();
+        if (typeof preLogic == 'function') {
+            preLogic.call();
         }
 
         var template = nunjucks.render(templateName, context);
         elem.innerHTML = template;
 
         p.load();
+
+        if (typeof postLogic == 'function') {
+            postLogic.call();
+        }
     };
 };
 
 var views = {
-    inbox: pView('templates/views/inbox.html', {name: 'Adam'})
+    inbox: pView('templates/views/inbox.html', {name: 'Adam'}),
+    dashboard: pView('templates/views/dashboard.html', null, null, function () {
+        var data = {
+            datasets: [{
+                data: [
+                    11,
+                    16,
+                    7,
+                    3,
+                    14,
+                    21
+                ],
+                backgroundColor: [
+                    "#fd0328",
+                    "#fdd803",
+                    "#5b03fd",
+                    "#03fd5b",
+                    "#FD5B03",
+                    "#4d4d4d"
+                ],
+                // hoverBackgroundColor: [
+                //     "#FD5B03",
+                //     "#FD5B03",
+                //     "#FD5B03",
+                //     "#FD5B03",
+                //     "#FD5B03",
+                //     "#FD5B03"
+                // ],
+                label: 'My dataset' // for legend
+            }],
+            labels: [
+                "Red",
+                "Green",
+                "Yellow",
+                "Grey",
+                "Blue",
+                "Last"
+            ]
+        };
+
+        new Chart(p.one("#recipient-chart"), {
+            data: data,
+            type: 'polarArea',
+            options: {
+                elements: {
+                    arc: {
+                        // borderColor: "#757575"
+                    }
+                }
+            }
+        });
+    }),
 };
diff --git a/app/templates/layouts/aside.html b/app/templates/layouts/aside.html
@@ -5,7 +5,7 @@
 
     <ul class="places">
         <li>
-            <a href="/" class="active">
+            <a href="/">
                 <i class="p-beer"></i>
                 Overview
             </a>

diff --git a/app/templates/layouts/main.html b/app/templates/layouts/main.html
@@ -1,30 +1,4 @@
 <main>
     {% include "templates/layouts/breadcrumbs.html" %}
-    {# <div id="content"></div> #}
-
-    {# THIS IS A MOCKUP ONLY #}
-    <div id="content">
-        <div  class="vertical-wrapper">
-            <div class="vertical-center horizontal-wrapper">
-                <div class="row dashboard-details">
-                    <div class="sm-1 md-1-2 horizontal-center">
-                        <div class="number">
-                            <h3>Emails sent this week</h3>
-                            <strong>24</strong>
-                            <p>That is <em>5%</em> more than last week.</p>
-                        </div>
-                        <div class="number">
-                            <h3>Emails received this week</h3>
-                            <strong>38</strong>
-                            <p>That is <em class="negative">8%</em> less than last week.</p>
-                        </div>
-                    </div>
-                    <div class="sm-1 md-1-2 horizontal-center">
-                        <h3>Top email participants</h3>
-                        <canvas id="recipient-chart" width="400" height="400"></canvas>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
+    <div id="content"></div>
 </main>