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/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 ++ 5 files changed, 92 insertions(+) create mode 100644 web-ui/app/js/page/user_settings_box.js create mode 100644 web-ui/app/js/page/user_settings_icon.js (limited to 'web-ui/app/js') 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'] -- cgit v1.2.3