From f8fb4c982d2e45747f265cc7f70b2ac2f1927119 Mon Sep 17 00:00:00 2001 From: Becky Siegel Date: Mon, 28 Nov 2016 13:46:58 -0800 Subject: [PATCH] Introduce gr-dropdown element Creates a new element based on the gr-account-dropdown that can also be used to replace the css-only version in the main header. gr-dropdown accepts two arrays as input-- "items" for links and "topContent" for text to display above the links. TopContent was needed for the account dropdown use case, as it displays name and email address. It also accepts a horizontal-align parameter. gr-account-dropdown is refactored to use the generalized element. Bug: Issue 4666 Change-Id: I65905b81504d1daa46e78312f576bf7482a4577c --- .../gr-account-dropdown.html | 61 ++-------- .../gr-account-dropdown.js | 29 +++-- .../gr-account-dropdown_test.html | 9 +- .../shared/gr-dropdown/gr-dropdown.html | 112 ++++++++++++++++++ .../shared/gr-dropdown/gr-dropdown.js | 57 +++++++++ .../shared/gr-dropdown/gr-dropdown_test.html | 74 ++++++++++++ 6 files changed, 272 insertions(+), 70 deletions(-) create mode 100644 polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html create mode 100644 polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.js create mode 100644 polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown_test.html diff --git a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.html b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.html index 1d31c12159..ceaf02dee6 100644 --- a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.html +++ b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.html @@ -17,21 +17,12 @@ limitations under the License. + diff --git a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.js b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.js index ad944dc06e..4011135202 100644 --- a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.js +++ b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown.js @@ -20,26 +20,31 @@ properties: { account: Object, _hasAvatars: Boolean, + links: { + type: Array, + value: [ + {name: 'Settings', url: '/settings'}, + {name: 'Switch account', url: '/switch-account'}, + {name: 'Sign out', url: '/logout'}, + ], + }, + topContent: { + type: Array, + computed: '_getTopContent(account)', + }, }, attached: function() { this.$.restAPI.getConfig().then(function(cfg) { this._hasAvatars = !!(cfg && cfg.plugin && cfg.plugin.has_avatars); }.bind(this)); - - this.listen(this.$.dropdown, 'tap', '_handleDropdownTap'); }, - _handleDropdownTap: function(e) { - this.$.dropdown.close(); - }, - - _showDropdownTapHandler: function(e) { - this.$.dropdown.open(); - }, - - _computeRelativeURL: function(path) { - return '//' + window.location.host + path; + _getTopContent: function(account) { + return [ + {text: account.name, bold: true}, + {text: account.email}, + ]; }, }); })(); diff --git a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown_test.html b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown_test.html index 8c39da8902..ec9141ff76 100644 --- a/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown_test.html +++ b/polygerrit-ui/app/elements/core/gr-account-dropdown/gr-account-dropdown_test.html @@ -41,11 +41,10 @@ limitations under the License. element = fixture('basic'); }); - test('tap on trigger opens menu', function() { - assert.isFalse(element.$.dropdown.opened); - MockInteractions.tap(element.$.trigger); - assert.isTrue(element.$.dropdown.opened); + test('account information', function() { + element.account = {name: 'John Doe', email: 'john@doe.com'}; + assert.deepEqual(element.topContent, + [{text: 'John Doe', bold: true}, {text: 'john@doe.com'}]); }); - }); diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html new file mode 100644 index 0000000000..00d50e98db --- /dev/null +++ b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html @@ -0,0 +1,112 @@ + + + + + + + + + + + diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.js b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.js new file mode 100644 index 0000000000..d10d219fd7 --- /dev/null +++ b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.js @@ -0,0 +1,57 @@ +// Copyright (C) 2016 The Android Open Source Project +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +(function() { + 'use strict'; + + Polymer({ + is: 'gr-dropdown', + + properties: { + items: Array, + topContent: Object, + horizontalAlign: { + type: String, + value: 'left', + }, + _hasAvatars: String, + }, + + attached: function() { + this.$.restAPI.getConfig().then(function(cfg) { + this._hasAvatars = !!(cfg && cfg.plugin && cfg.plugin.has_avatars); + }.bind(this)); + }, + + _handleDropdownTap: function(e) { + this.$.dropdown.close(); + }, + + _showDropdownTapHandler: function(e) { + this.$.dropdown.open(); + }, + + _getClassIfBold: function(bold) { + return bold ? 'bold-text' : ''; + }, + + _computeURLHelper: function(host, path) { + return '//' + host + path; + }, + + _computeRelativeURL: function(path) { + var host = window.location.host; + return this._computeURLHelper(host, path); + }, + }); +})(); diff --git a/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown_test.html b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown_test.html new file mode 100644 index 0000000000..b2f2d21022 --- /dev/null +++ b/polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown_test.html @@ -0,0 +1,74 @@ + + + + +gr-dropdown + + + + + + + + + + + +