Show avatar at top right in account-dropdown button
* When avatars are enabled, show it instead of full name.
* Port away from 'gr-ajax' for getting server config.
* Cleanup 'gr-rest-api-interface' test a bit.
Change-Id: Ib735a4efee4dd4386885693bc30b55f73a813ec7
diff --git a/polygerrit-ui/app/elements/change/gr-message/gr-message.html b/polygerrit-ui/app/elements/change/gr-message/gr-message.html
index 5733acd..7c287db 100644
--- a/polygerrit-ui/app/elements/change/gr-message/gr-message.html
+++ b/polygerrit-ui/app/elements/change/gr-message/gr-message.html
@@ -19,6 +19,7 @@
<link rel="import" href="../../shared/gr-button/gr-button.html">
<link rel="import" href="../../shared/gr-date-formatter/gr-date-formatter.html">
<link rel="import" href="../../shared/gr-linked-text/gr-linked-text.html">
+<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
<link rel="import" href="../gr-comment-list/gr-comment-list.html">
@@ -120,6 +121,7 @@
<gr-button small on-tap="_handleReplyTap">Reply</gr-button>
</div>
</div>
+ <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
</template>
<script src="gr-message.js"></script>
</dom-module>
diff --git a/polygerrit-ui/app/elements/change/gr-message/gr-message.js b/polygerrit-ui/app/elements/change/gr-message/gr-message.js
index 1ab5e6c..26b9fb9 100644
--- a/polygerrit-ui/app/elements/change/gr-message/gr-message.js
+++ b/polygerrit-ui/app/elements/change/gr-message/gr-message.js
@@ -57,7 +57,7 @@
},
ready: function() {
- app.configReady.then(function(cfg) {
+ this.$.restAPI.getConfig().then(function(cfg) {
this.showAvatar = !!(cfg && cfg.plugin && cfg.plugin.has_avatars) &&
this.message && this.message.author;
}.bind(this));
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 0d549d9..4538cec 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,6 +17,7 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/iron-dropdown/iron-dropdown.html">
<link rel="import" href="../../shared/gr-button/gr-button.html">
+<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
<dom-module id="gr-account-dropdown">
<style>
@@ -36,6 +37,11 @@
font: inherit;
padding: .3em 0;
}
+ gr-avatar {
+ height: 1.3em;
+ width: 1.3em;
+ vertical-align: -.25em;
+ }
ul {
list-style: none;
}
@@ -59,7 +65,11 @@
</style>
<template>
<gr-button link class="dropdown-trigger" id="trigger"
- on-tap="_showDropdownTapHandler">[[account.name]]</gr-button>
+ on-tap="_showDropdownTapHandler">
+ <span hidden$="[[_hasAvatars]]" hidden>[[account.name]]</span>
+ <gr-avatar account="[[account]]" hidden$="[[!_hasAvatars]]" hidden
+ image-size="32"></gr-avatar>
+ </gr-button>
<iron-dropdown id="dropdown"
vertical-align="top"
vertical-offset="25"
@@ -77,6 +87,7 @@
</ul>
</div>
</iron-dropdown>
+ <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
</template>
<script src="gr-account-dropdown.js"></script>
</dom-module>
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 09de6c1..62212a3 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
@@ -19,6 +19,13 @@
properties: {
account: Object,
+ _hasAvatars: Boolean,
+ },
+
+ attached: function() {
+ this.$.restAPI.getConfig().then(function(cfg) {
+ this._hasAvatars = !!(cfg && cfg.plugin && cfg.plugin.has_avatars);
+ }.bind(this));
},
_showDropdownTapHandler: function(e) {
diff --git a/polygerrit-ui/app/elements/gr-app.html b/polygerrit-ui/app/elements/gr-app.html
index 67ab50f..d7c6c64 100644
--- a/polygerrit-ui/app/elements/gr-app.html
+++ b/polygerrit-ui/app/elements/gr-app.html
@@ -56,7 +56,6 @@
color: #b71c1c;
}
</style>
- <gr-ajax auto url="/config/server/info" last-response="{{config}}"></gr-ajax>
<gr-ajax auto url="/config/server/version" last-response="{{version}}"></gr-ajax>
<gr-ajax id="diffPreferencesXHR"
url="/accounts/self/preferences.diff"
diff --git a/polygerrit-ui/app/elements/gr-app.js b/polygerrit-ui/app/elements/gr-app.js
index a40e61b..e115d4b 100644
--- a/polygerrit-ui/app/elements/gr-app.js
+++ b/polygerrit-ui/app/elements/gr-app.js
@@ -32,20 +32,7 @@
}.bind(this));
},
},
- config: {
- type: Object,
- observer: '_configChanged',
- },
- configReady: {
- type: Object,
- readOnly: true,
- notify: true,
- value: function() {
- return new Promise(function(resolve) {
- this._resolveConfigReady = resolve;
- }.bind(this));
- },
- },
+ config: Object,
version: String,
params: Object,
keyEventTarget: {
@@ -82,6 +69,9 @@
this.$.restAPI.getAccount().then(function(account) {
this.account = account;
}.bind(this));
+ this.$.restAPI.getConfig().then(function(config) {
+ this.config = config;
+ }.bind(this));
},
ready: function() {
@@ -137,10 +127,6 @@
}
},
- _configChanged: function(config) {
- this._resolveConfigReady(config);
- },
-
_viewChanged: function(view) {
this.set('_showChangeListView', view == 'gr-change-list-view');
this.set('_showDashboardView', view == 'gr-dashboard-view');
diff --git a/polygerrit-ui/app/elements/shared/gr-avatar/gr-avatar.html b/polygerrit-ui/app/elements/shared/gr-avatar/gr-avatar.html
index 3491443..55655c0 100644
--- a/polygerrit-ui/app/elements/shared/gr-avatar/gr-avatar.html
+++ b/polygerrit-ui/app/elements/shared/gr-avatar/gr-avatar.html
@@ -15,6 +15,7 @@
-->
<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../gr-rest-api-interface/gr-rest-api-interface.html">
<dom-module id="gr-avatar">
<template>
@@ -26,6 +27,7 @@
background-color: var(--background-color, #f1f2f3);
}
</style>
+ <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
</template>
<script src="gr-avatar.js"></script>
</dom-module>
diff --git a/polygerrit-ui/app/elements/shared/gr-avatar/gr-avatar.js b/polygerrit-ui/app/elements/shared/gr-avatar/gr-avatar.js
index 8f289ca..3655975 100644
--- a/polygerrit-ui/app/elements/shared/gr-avatar/gr-avatar.js
+++ b/polygerrit-ui/app/elements/shared/gr-avatar/gr-avatar.js
@@ -32,8 +32,8 @@
this.hidden = true;
},
- ready: function() {
- app.configReady.then(function(cfg) {
+ attached: function() {
+ this.$.restAPI.getConfig().then(function(cfg) {
var hasAvatars = !!(cfg && cfg.plugin && cfg.plugin.has_avatars);
if (hasAvatars) {
this.hidden = false;
diff --git a/polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface.js b/polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface.js
index 09b6d35..5ac846a 100644
--- a/polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface.js
+++ b/polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface.js
@@ -82,6 +82,10 @@
}.bind(this));
},
+ getConfig: function() {
+ return this._fetchSharedCacheURL('/config/server/info');
+ },
+
getAccount: function() {
return this._fetchSharedCacheURL('/accounts/self/detail');
},
diff --git a/polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface_test.html b/polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface_test.html
index b0a6649..3902707f 100644
--- a/polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface_test.html
+++ b/polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface_test.html
@@ -42,7 +42,7 @@
var testJSON = ')]}\'\n{"hello": "bonjour"}';
var fetchStub = sinon.stub(window, 'fetch', function() {
- return Promise.resolve({ text: function() {
+ return Promise.resolve({text: function() {
return Promise.resolve(testJSON);
}});
});
@@ -65,7 +65,7 @@
Promise.all(promises).then(function(results) {
assert.deepEqual(results, [1, 1, 1]);
- element._fetchSharedCacheURL('/foo').then(function(foo) {
+ element._fetchSharedCacheURL('/foo').then(function(foo) {
assert.equal(foo, 1);
fetchJSONStub.restore();
done();
@@ -84,7 +84,7 @@
test('params are properly encoded', function() {
var fetchStub = sinon.stub(window, 'fetch', function() {
- return Promise.resolve({ text: function() {
+ return Promise.resolve({text: function() {
return Promise.resolve(')]}\'\n{}');
}});
});
@@ -101,7 +101,7 @@
test('request callbacks can be canceled', function(done) {
var cancelCalled = false;
var fetchStub = sinon.stub(window, 'fetch', function() {
- return Promise.resolve({ body: {
+ return Promise.resolve({body: {
cancel: function() { cancelCalled = true; }
}});
});
@@ -140,6 +140,7 @@
assert.deepEqual(obj.comments[0], {
message: 'this isn’t quite right',
});
+ fetchJSONStub.restore();
done();
});
});
@@ -190,6 +191,7 @@
assert.deepEqual(obj.comments[1], {
message: '¯\\_(ツ)_/¯',
});
+ fetchJSONStub.restore();
done();
});
});
