From 3a9010d4c8a86983d06d6d5be3f68d6c03999e77 Mon Sep 17 00:00:00 2001 From: Cam Jackson Date: Thu, 29 Oct 2015 21:28:44 +1100 Subject: Add the user settings icon, with a popup box --- web-ui/app/index.html | 9 ++-- web-ui/app/js/page/default.js | 6 +++ web-ui/app/js/page/events.js | 3 ++ web-ui/app/js/page/user_settings_box.js | 46 +++++++++++++++++++ web-ui/app/js/page/user_settings_icon.js | 35 ++++++++++++++ web-ui/app/js/views/templates.js | 2 + web-ui/app/scss/styles.scss | 58 ++++++++++++++++++++++-- web-ui/app/templates/page/user_settings_box.hbs | 5 ++ web-ui/app/templates/page/user_settings_icon.hbs | 8 ++++ 9 files changed, 165 insertions(+), 7 deletions(-) create mode 100644 web-ui/app/js/page/user_settings_box.js create mode 100644 web-ui/app/js/page/user_settings_icon.js create mode 100644 web-ui/app/templates/page/user_settings_box.hbs create mode 100644 web-ui/app/templates/page/user_settings_icon.hbs (limited to 'web-ui/app') diff --git a/web-ui/app/index.html b/web-ui/app/index.html index 1ff5a116..5eb82450 100644 --- a/web-ui/app/index.html +++ b/web-ui/app/index.html @@ -48,10 +48,10 @@
-
0.3.1-beta
- - - + + +
0.3.1-beta
+
@@ -80,6 +80,7 @@
+
diff --git a/web-ui/app/js/page/default.js b/web-ui/app/js/page/default.js index c3d39cd3..c8b88a08 100644 --- a/web-ui/app/js/page/default.js +++ b/web-ui/app/js/page/default.js @@ -42,6 +42,8 @@ define( 'views/i18n', 'views/recipientListFormatter', 'flight/lib/logger', + 'page/user_settings_icon', + 'page/user_settings_box', 'page/logout', 'page/logout_shortcut', 'feedback/feedback_trigger', @@ -77,6 +79,8 @@ define( viewI18n, recipientListFormatter, withLogging, + userSettingsIcon, + userSettingsBox, logout, logoutShortcut, feedback, @@ -113,6 +117,8 @@ define( leftPaneDispatcher.attachTo(document); offCanvas.attachTo(document); + userSettingsIcon.attachTo('#user-settings-icon'); + userSettingsBox.attachTo('#user-settings-box'); logout.attachTo('#logout'); logoutShortcut.attachTo('#logout-shortcut'); version.attachTo('.version'); diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js index 6897cf63..1bed8cd1 100644 --- a/web-ui/app/js/page/events.js +++ b/web-ui/app/js/page/events.js @@ -96,6 +96,9 @@ define(function () { doCompleteInput: 'ui:recipients:doCompleteInput', doCompleteRecipients: 'ui:recipients:doCompleteRecipients', clickToEdit: 'ui:recipients:clickToEdit' + }, + userSettingsBox: { + toggle: 'ui:userSettingsBox:toggle' } }, search: { diff --git a/web-ui/app/js/page/user_settings_box.js b/web-ui/app/js/page/user_settings_box.js new file mode 100644 index 00000000..32a06ed3 --- /dev/null +++ b/web-ui/app/js/page/user_settings_box.js @@ -0,0 +1,46 @@ +/* + * 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 . + */ +define(['flight/lib/component', 'features', 'views/templates', 'page/events'], function (defineComponent, features, templates, events) { + 'use strict'; + + return defineComponent(function () { + this.defaultAttrs({ + close: '#user-settings-close' + }); + + this.render = function () { + this.$node.html(templates.page.userSettingsBox()); + if (features.isLogoutEnabled()) { + this.$node.addClass('extra-bottom-space'); + } + }; + + this.toggleHidden = function() { + if (this.$node.hasClass('hidden')) { + this.$node.removeClass('hidden'); + } else { + this.$node.addClass('hidden'); + } + }; + + this.after('initialize', function () { + this.render(); + this.on(document, events.ui.userSettingsBox.toggle, this.toggleHidden); + this.on(this.attr.close, 'click', this.toggleHidden); + }); + }); +}); diff --git a/web-ui/app/js/page/user_settings_icon.js b/web-ui/app/js/page/user_settings_icon.js new file mode 100644 index 00000000..2d79c2d0 --- /dev/null +++ b/web-ui/app/js/page/user_settings_icon.js @@ -0,0 +1,35 @@ +/* + * 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 . + */ +define(['flight/lib/component', 'views/templates', 'page/events'], function (defineComponent, templates, events) { + 'use strict'; + + return defineComponent(function () { + + this.render = function () { + this.$node.html(templates.page.userSettingsIcon()); + }; + + this.toggleUserSettingsBox = function() { + this.trigger(document, events.ui.userSettingsBox.toggle); + }; + + this.after('initialize', function () { + this.render(); + this.on('click', this.toggleUserSettingsBox); + }); + }); +}); diff --git a/web-ui/app/js/views/templates.js b/web-ui/app/js/views/templates.js index 80752e8e..e3b8d1f2 100644 --- a/web-ui/app/js/views/templates.js +++ b/web-ui/app/js/views/templates.js @@ -58,6 +58,8 @@ define(['hbs/templates'], function (templates) { trigger: window.Pixelated['app/templates/search/search_trigger.hbs'] }, page: { + userSettingsIcon: window.Pixelated['app/templates/page/user_settings_icon.hbs'], + userSettingsBox: window.Pixelated['app/templates/page/user_settings_box.hbs'], logout: window.Pixelated['app/templates/page/logout.hbs'], logoutShortcut: window.Pixelated['app/templates/page/logout_shortcut.hbs'], version: window.Pixelated['app/templates/page/version.hbs'] diff --git a/web-ui/app/scss/styles.scss b/web-ui/app/scss/styles.scss index 7f4d352a..a29bd078 100644 --- a/web-ui/app/scss/styles.scss +++ b/web-ui/app/scss/styles.scss @@ -21,6 +21,47 @@ background-color: $search-highlight; } +#user-settings-box { + position: absolute; + left: 20px; + bottom: 10px; + z-index: 1; + padding: 20px; + background-color: rgba(#3E3A37, 0.9); + + h1, i { + font-size: 2em; + color: white; + } + + i { + margin-left: 10px; + float: right; + cursor: pointer; + } + + p { + font-size: 1.7em; + color: #FF9C00; + } +} + +#user-settings-box.extra-bottom-space { + bottom: 65px; +} + +.arrow-box:before { + right: 100%; + top: 65%; + border: 20px solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-right-color: rgba(#3E3A37, 0.9); + margin-top: -20px; +} @mixin list-actions { #list-actions { @@ -398,7 +439,7 @@ section { } } - ul#logout, ul#feedback { + ul#logout, ul#feedback, ul#user-settings-icon { li { background-color: $navigation_background; padding: 5px 10px; @@ -423,14 +464,21 @@ section { } } - ul#logout li{ + ul#logout li { color: $action_buttons; &:hover { background-color: $action_buttons; } } - ul#feedback{ + ul#user-settings-icon li { + color: white; + &:hover { + background-color: white; + } + } + + ul#feedback { margin-bottom: 0; li { @@ -671,6 +719,10 @@ button { } } +.hidden { + display: none; +} + .left-off-canvas-menu { width: 222px; -webkit-backface-visibility: hidden; diff --git a/web-ui/app/templates/page/user_settings_box.hbs b/web-ui/app/templates/page/user_settings_box.hbs new file mode 100644 index 00000000..bc6400ef --- /dev/null +++ b/web-ui/app/templates/page/user_settings_box.hbs @@ -0,0 +1,5 @@ +
+

User Settings

+ +
+

$account_email

diff --git a/web-ui/app/templates/page/user_settings_icon.hbs b/web-ui/app/templates/page/user_settings_icon.hbs new file mode 100644 index 00000000..8b61655c --- /dev/null +++ b/web-ui/app/templates/page/user_settings_icon.hbs @@ -0,0 +1,8 @@ + -- cgit v1.2.3