Issue #242 added logout shortcut for dispatcher mode.

- some new style to logout in expanded nav bar and shortcut.
- to be complemented by #239.

9 files changed, 130 insertions, 10 deletions

diff --git a/web-ui/app/index.html b/web-ui/app/index.html
index 29356e3c..8123c3ef 100644
--- a/web-ui/app/index.html
+++ b/web-ui/app/index.html
@@ -38,11 +38,13 @@
         <a class="left-off-canvas-toggle" href="#" title="View your tags"><i class="fa fa-tags"></i><div class="shortcut-label">Tags</div></a>
         </li>
       </ul>
+      <ul id="logout-shortcut" class="shortcuts">
+      </ul>
     </div>
 
     <section id="left-pane" class="left-off-canvas-menu">
       <nav id="tag-list"></nav>
-      <div id="logout"></div>
+      <nav id="logout"></nav>
     </section>
 
     <article id='middle-pane-container' class="small-5 medium-5 large-5 columns no-padding">
diff --git a/web-ui/app/js/page/default.js b/web-ui/app/js/page/default.js
index 8ad8f1ff..57c7fd00 100644
--- a/web-ui/app/js/page/default.js
+++ b/web-ui/app/js/page/default.js
@@ -41,7 +41,8 @@ define(
     'views/i18n',
     'views/recipientListFormatter',
     'flight/lib/logger',
-    'page/logout'
+    'page/logout',
+    'page/logout_shortcut'
   ],
 
   function (
@@ -70,7 +71,8 @@ define(
     viewI18n,
     recipientListFormatter,
     withLogging,
-    logout) {
+    logout,
+    logoutShortcut) {
 
     'use strict';
     function initialize(path) {
@@ -102,6 +104,7 @@ define(
 
       offCanvas.attachTo(document);
       logout.attachTo('#logout');
+      logoutShortcut.attachTo('#logout-shortcut');
     }
 
     return initialize;
diff --git a/web-ui/app/js/page/logout_shortcut.js b/web-ui/app/js/page/logout_shortcut.js
new file mode 100644
index 00000000..d79b2b9a
--- /dev/null
+++ b/web-ui/app/js/page/logout_shortcut.js
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2014 ThoughtWorks, Inc.
+ *
+ * Pixelated is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Pixelated is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
+ */
+define(['flight/lib/component', 'features', 'views/templates'], function (defineComponent, features, templates) {
+  'use strict';
+
+  return defineComponent(function () {
+
+    this.render = function () {
+      var logoutShortcutHTML = templates.page.logoutShortcut();
+      this.$node.html(logoutShortcutHTML);
+    };
+
+    this.after('initialize', function () {
+      if (features.isLogoutEnabled()) {
+	      this.render();
+      }
+    });
+  });
+});
\ No newline at end of file
diff --git a/web-ui/app/js/views/templates.js b/web-ui/app/js/views/templates.js
index 91333da8..874e691d 100644
--- a/web-ui/app/js/views/templates.js
+++ b/web-ui/app/js/views/templates.js
@@ -53,7 +53,8 @@ define(['hbs/templates'], function (templates) {
       trigger: window.Pixelated['app/templates/search/search_trigger.hbs']
     },
     page: {
-      logout: window.Pixelated['app/templates/page/logout.hbs']
+      logout: window.Pixelated['app/templates/page/logout.hbs'],
+      logoutShortcut: window.Pixelated['app/templates/page/logout_shortcut.hbs']
     }
   };
 
diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss
index d3912da3..0bc40756 100644
--- a/web-ui/app/scss/styles.scss
+++ b/web-ui/app/scss/styles.scss
@@ -255,7 +255,7 @@ section {
     nav {
       padding-bottom: 25px;
       border-right: 1px solid lighten($secondary, 10%);
-      ul#default-tag-list, #custom-tag-list {
+      ul#default-tag-list, #custom-tag-list, #logout {
         li {
           transition: background-color 150ms ease-out;
           padding: 2px 10px;
@@ -319,6 +319,25 @@ section {
         }
       }
 
+       ul#logout {
+         a {
+          color: #000000;
+        }
+        li {
+          color: #000000;
+          background-color: #2ba6cb;
+          padding: 5px 10px;
+          position: relative;
+          @include searching(4px, 19px, #333, 0.7em);
+
+          &:before {
+            font-family: "FontAwesome";
+            margin-right: 10px;
+            font-weight: normal;
+          }
+        }
+      }
+
       h3 {
         color: white;
         text-transform: uppercase;
@@ -327,8 +346,8 @@ section {
         font-weight: 600;
         margin: 0 10px;
         border-bottom: 1px dotted lighten($secondary, 10%);
+        }
       }
-    }
   }
 
   &#middle-pane {
@@ -470,7 +489,11 @@ button {
     top: 0;
     z-index: 10000;
     position: relative;
+    &.logout {
+      color: #2ba6cb;
+    }
   }
+
   ul.shortcuts {
     li {
       position: relative;
@@ -482,8 +505,8 @@ button {
         cursor: default;
         a {
           color: $secondary;
+          }
         }
-      }
       @include searching(6px, 26px, #666, 0.9em);
       a {
         display: block;
@@ -496,6 +519,10 @@ button {
           background: darken($contrast, 10%);
           color: $secondary;
           @include btn-transition;
+          &.logout{
+            color: #000000;
+            background: #2ba6cb;
+          }
         }
         &[title]:hover:after {
           content: attr(title);
diff --git a/web-ui/app/templates/page/logout.hbs b/web-ui/app/templates/page/logout.hbs
index dda07eae..d3895a71 100644
--- a/web-ui/app/templates/page/logout.hbs
+++ b/web-ui/app/templates/page/logout.hbs
@@ -1 +1,8 @@
-<a href="{{logout_url}}">Logout</a>
+<ul id="logout">
+    <li>
+      <a title="logout" href={{logout_url}}>
+          <div class="fa fa-sign-out"></div>
+          <i class="shortcut-label">Logout</i>
+      </a>
+  </li>
+</ul>
\ No newline at end of file
diff --git a/web-ui/app/templates/page/logout_shortcut.hbs b/web-ui/app/templates/page/logout_shortcut.hbs
new file mode 100644
index 00000000..20df5513
--- /dev/null
+++ b/web-ui/app/templates/page/logout_shortcut.hbs
@@ -0,0 +1,6 @@
+<li>
+  <a class="left-off-canvas-toggle logout" title="logout" >
+      <i class="fa fa-sign-out"></i>
+      <div class="shortcut-label">Logout</div>
+  </a>
+</li>
\ No newline at end of file
diff --git a/web-ui/test/spec/page/logout.spec.js b/web-ui/test/spec/page/logout.spec.js
index cf5e3e70..7e384cad 100644
--- a/web-ui/test/spec/page/logout.spec.js
+++ b/web-ui/test/spec/page/logout.spec.js
@@ -11,7 +11,7 @@ describeComponent('page/logout', function () {
     it('should provide logout link if logout is enabled', function () {
       spyOn(features, 'isLogoutEnabled').and.returnValue(true);
 
-      this.setupComponent('<div id="logout"></div>', {});
+      this.setupComponent('<nav id="logout"></nav>', {});
 
       var logout_link = this.component.$node.find('a')[0];
       expect(logout_link).toExist();
@@ -21,11 +21,21 @@ describeComponent('page/logout', function () {
     it('should not provide logout link if disabled', function() {
       spyOn(features, 'isLogoutEnabled').and.returnValue(false);
 
-      this.setupComponent('<div id="logout"></div>', {});
+      this.setupComponent('<nav id="logout"></nav>', {});
 
       var logout_link = this.component.$node.find('a')[0];
       expect(logout_link).not.toExist();
     });
+
+    it('should render logout in collapsed nav bar if logout is enabled', function() {
+      spyOn(features, 'isLogoutEnabled').and.returnValue(true);
+
+      this.setupComponent('<ul id="logout-shortcuts" class="shortcuts"></ul>', {});
+
+      var logout_icon = this.component.$node.find('a')[0];
+      expect(logout_icon).toExist();
+      expect(logout_icon.innerHTML).toContain('<div class="fa fa-sign-out"></div>');
+    });
   });
 });
 
diff --git a/web-ui/test/spec/page/logout_shortcut.spec.js b/web-ui/test/spec/page/logout_shortcut.spec.js
new file mode 100644
index 00000000..9882b343
--- /dev/null
+++ b/web-ui/test/spec/page/logout_shortcut.spec.js
@@ -0,0 +1,31 @@
+describeComponent('page/logout_shortcut', function () {
+  'use strict';
+
+  describe('logout icon', function () {
+    var features;
+
+    beforeEach(function() {
+      features = require('features');
+    });
+
+    it('should provide logout icon if logout is enabled', function () {
+      spyOn(features, 'isLogoutEnabled').and.returnValue(true);
+
+      this.setupComponent('<ul id="logout-shortcut" class="shortcuts">, {}');
+
+      var logout_icon = this.component.$node.find('a')[0];
+      expect(logout_icon).toExist();
+      expect(logout_icon.innerHTML).toContain('i class="fa fa-sign-out"></i>');
+      //expect(logout_icon.innerHTML).toContain('foobar')
+    });
+
+    it('should not provide logout icon if logout is disabled', function () {
+      spyOn(features, 'isLogoutEnabled').and.returnValue(false);
+
+      this.setupComponent('<ul id="logout-shortcut" class="shortcuts">, {}');
+
+      var logout_icon = this.component.$node.find('a')[0];
+      expect(logout_icon).not.toExist();
+    });
+  });
+});
\ No newline at end of file