summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--web-ui/app/index.html4
-rw-r--r--web-ui/app/js/page/default.js7
-rw-r--r--web-ui/app/js/page/logout_shortcut.js33
-rw-r--r--web-ui/app/js/views/templates.js3
-rw-r--r--web-ui/app/scss/styles.scss33
-rw-r--r--web-ui/app/templates/page/logout.hbs9
-rw-r--r--web-ui/app/templates/page/logout_shortcut.hbs6
-rw-r--r--web-ui/test/spec/page/logout.spec.js14
-rw-r--r--web-ui/test/spec/page/logout_shortcut.spec.js31
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
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-25 20:26:56 +0000