Merge "Adds some user preferences to the PolyGerrit settings page"
This commit is contained in:
@@ -15,8 +15,10 @@ limitations under the License.
|
||||
-->
|
||||
|
||||
<link rel="import" href="../../../bower_components/polymer/polymer.html">
|
||||
<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-rest-api-interface/gr-rest-api-interface.html">
|
||||
<link rel="import" href="../../shared/gr-select/gr-select.html">
|
||||
|
||||
<dom-module id="gr-settings-view">
|
||||
<template>
|
||||
@@ -25,69 +27,136 @@ limitations under the License.
|
||||
background-color: var(--view-background-color);
|
||||
display: block;
|
||||
}
|
||||
main {
|
||||
margin: 2em auto;
|
||||
max-width: 40em;
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: .1em;
|
||||
}
|
||||
fieldset {
|
||||
border: none;
|
||||
display: table;
|
||||
margin: 0 0 2em 2em;
|
||||
}
|
||||
section {
|
||||
display: table-row;
|
||||
}
|
||||
section:not(:first-of-type) {
|
||||
margin-top: 1em;
|
||||
}
|
||||
section:not(:first-of-type) .title,
|
||||
section:not(:first-of-type) .value {
|
||||
padding-top: .5em;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
.title,
|
||||
.value {
|
||||
display: table-cell;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.title {
|
||||
color: #666;
|
||||
font-weight: bold;
|
||||
width: 15em;
|
||||
padding-right: .5em;
|
||||
}
|
||||
.loading {
|
||||
color: #666;
|
||||
padding: 1em var(--default-horizontal-margin);
|
||||
}
|
||||
@media only screen and (max-width: 50em) {
|
||||
@media only screen and (max-width: 40em) {
|
||||
.loading {
|
||||
padding: 0 var(--default-horizontal-margin);
|
||||
}
|
||||
main {
|
||||
margin: 2em 1em;
|
||||
}
|
||||
section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.title,
|
||||
.value {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="loading" hidden$="[[!_loading]]">Loading...</div>
|
||||
<div hidden$="[[_loading]]" hidden>
|
||||
<h1>User Settings</h1>
|
||||
<h2>Profile</h2>
|
||||
<fieldset>
|
||||
<section>
|
||||
<span class="title">ID</span>
|
||||
<span class="value">[[account._account_id]]</span>
|
||||
</section>
|
||||
<section>
|
||||
<span class="title">Name</span>
|
||||
<span class="value">[[account.name]]</span>
|
||||
</section>
|
||||
<section>
|
||||
<span class="title">Email</span>
|
||||
<span class="value">[[account.email]]</span>
|
||||
</section>
|
||||
<section hidden$="[[!account.username]]">
|
||||
<span class="title">Username</span>
|
||||
<span class="value">[[account.username]]</span>
|
||||
</section>
|
||||
<section>
|
||||
<span class="title">Registered</span>
|
||||
<span class="value">
|
||||
<gr-date-formatter
|
||||
date-str="[[account.registered_on]]"></gr-date-formatter>
|
||||
</span>
|
||||
</section>
|
||||
</fieldset>
|
||||
<main>
|
||||
<h1>User Settings</h1>
|
||||
<h2>Profile</h2>
|
||||
<fieldset>
|
||||
<section>
|
||||
<span class="title">ID</span>
|
||||
<span class="value">[[account._account_id]]</span>
|
||||
</section>
|
||||
<section>
|
||||
<span class="title">Name</span>
|
||||
<span class="value">[[account.name]]</span>
|
||||
</section>
|
||||
<section>
|
||||
<span class="title">Email</span>
|
||||
<span class="value">[[account.email]]</span>
|
||||
</section>
|
||||
<section hidden$="[[!account.username]]">
|
||||
<span class="title">Username</span>
|
||||
<span class="value">[[account.username]]</span>
|
||||
</section>
|
||||
<section>
|
||||
<span class="title">Registered</span>
|
||||
<span class="value">
|
||||
<gr-date-formatter
|
||||
date-str="[[account.registered_on]]"></gr-date-formatter>
|
||||
</span>
|
||||
</section>
|
||||
</fieldset>
|
||||
<h2>Preferences</h2>
|
||||
<fieldset>
|
||||
<section>
|
||||
<span class="title">Maximum Changes Per Page</span>
|
||||
<span class="value">
|
||||
<select is="gr-select" bind-value="{{prefs.changes_per_page}}">
|
||||
<option value="10">10 rows per page</option>
|
||||
<option value="25">25 rows per page</option>
|
||||
<option value="50">50 rows per page</option>
|
||||
<option value="100">100 rows per page</option>
|
||||
</select>
|
||||
</span>
|
||||
</section>
|
||||
<section>
|
||||
<span class="title">Date/Time Format</span>
|
||||
<span class="value">
|
||||
<select is="gr-select" bind-value="{{prefs.date_format}}">
|
||||
<option value="STD">Jun 3 ; Jun 3, 2016</option>
|
||||
<option value="US">06/03 ; 06/03/16</option>
|
||||
<option value="ISO">06-03 ; 2016-06-03</option>
|
||||
<option value="EURO">3. Jun ; 03.06.2016</option>
|
||||
<option value="UK">03/06 ; 03/06/2016</option>
|
||||
</select>
|
||||
<select is="gr-select" bind-value="{{prefs.time_format}}">
|
||||
<option value="HHMM_12">4:10 PM</option>
|
||||
<option value="HHMM_24">16:10</option>
|
||||
</select>
|
||||
</span>
|
||||
</section>
|
||||
<section>
|
||||
<span class="title">Email Notifications</span>
|
||||
<span class="value">
|
||||
<select is="gr-select" bind-value="{{prefs.email_strategy}}">
|
||||
<option value="ENABLED">Enabled</option>
|
||||
<option
|
||||
value="CC_ON_OWN_COMMENTS">CC Me On Comments I Write</option>
|
||||
<option value="DISABLED">Disabled</option>
|
||||
</select>
|
||||
</span>
|
||||
</section>
|
||||
<section>
|
||||
<span class="title">Diff View</span>
|
||||
<span class="value">
|
||||
<select is="gr-select" bind-value="{{prefs.diff_view}}">
|
||||
<option value="SIDE_BY_SIDE">Side by Side</option>
|
||||
<option value="UNIFIED_DIFF">Unified Diff</option>
|
||||
</select>
|
||||
</span>
|
||||
</section>
|
||||
<gr-button
|
||||
id="savePrefs"
|
||||
on-tap="_handleSavePreferences"
|
||||
disabled="[[!_prefsChanged]]">Save Changes</gr-button>
|
||||
</fieldset>
|
||||
</main>
|
||||
</div>
|
||||
<gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
|
||||
</template>
|
||||
|
@@ -30,8 +30,16 @@
|
||||
type: Boolean,
|
||||
value: true,
|
||||
},
|
||||
_prefsChanged: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_handlePrefsChanged(prefs.*)',
|
||||
],
|
||||
|
||||
attached: function() {
|
||||
var promises = [];
|
||||
|
||||
@@ -52,5 +60,16 @@
|
||||
if (!registered) { return ''; }
|
||||
return util.parseDate(registered).toGMTString();
|
||||
},
|
||||
|
||||
_handlePrefsChanged: function() {
|
||||
if (this._loading || this._loading === undefined) { return; }
|
||||
this._prefsChanged = true;
|
||||
},
|
||||
|
||||
_handleSavePreferences: function() {
|
||||
this.$.restAPI.savePreferences(this.prefs).then(function() {
|
||||
this._prefsChanged = false;
|
||||
}.bind(this));
|
||||
},
|
||||
});
|
||||
})();
|
||||
|
@@ -198,6 +198,11 @@
|
||||
}.bind(this));
|
||||
},
|
||||
|
||||
savePreferences: function(prefs, opt_errFn, opt_ctx) {
|
||||
return this.send('PUT', '/accounts/self/preferences', prefs, opt_errFn,
|
||||
opt_ctx);
|
||||
},
|
||||
|
||||
saveDiffPreferences: function(prefs, opt_errFn, opt_ctx) {
|
||||
return this.send('PUT', '/accounts/self/preferences.diff', prefs,
|
||||
opt_errFn, opt_ctx);
|
||||
|
20
polygerrit-ui/app/elements/shared/gr-select/gr-select.html
Normal file
20
polygerrit-ui/app/elements/shared/gr-select/gr-select.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<!--
|
||||
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.
|
||||
-->
|
||||
|
||||
<link rel="import" href="../../../bower_components/polymer/polymer.html">
|
||||
<dom-module id="gr-select">
|
||||
<script src="gr-select.js"></script>
|
||||
</dom-module>
|
55
polygerrit-ui/app/elements/shared/gr-select/gr-select.js
Normal file
55
polygerrit-ui/app/elements/shared/gr-select/gr-select.js
Normal file
@@ -0,0 +1,55 @@
|
||||
// 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-select',
|
||||
|
||||
extends: 'select',
|
||||
|
||||
properties: {
|
||||
bindValue: {
|
||||
type: String,
|
||||
notify: true,
|
||||
},
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_valueChanged(bindValue)',
|
||||
],
|
||||
|
||||
attached: function() {
|
||||
this.addEventListener('change', function() {
|
||||
this.bindValue = this.value;
|
||||
});
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
// If not set via the property, set bind-value to the element value.
|
||||
if (!this.bindValue) { this.bindValue = this.value; }
|
||||
},
|
||||
|
||||
_valueChanged: function(bindValue) {
|
||||
var options = Polymer.dom(this.root).querySelectorAll('option');
|
||||
for (var i = 0; i < options.length; i++) {
|
||||
if (options[i].getAttribute('value') === bindValue + '') {
|
||||
options[i].setAttribute('selected', true);
|
||||
this.value = bindValue;
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
})();
|
@@ -0,0 +1,81 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
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.
|
||||
-->
|
||||
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
||||
<title>gr-select</title>
|
||||
|
||||
<script src="../../../bower_components/webcomponentsjs/webcomponents.min.js"></script>
|
||||
<script src="../../../bower_components/web-component-tester/browser.js"></script>
|
||||
|
||||
<link rel="import" href="gr-select.html">
|
||||
|
||||
<test-fixture id="basic">
|
||||
<template>
|
||||
<select is="gr-select">
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</select>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
suite('gr-select tests', function() {
|
||||
var element;
|
||||
|
||||
setup(function() {
|
||||
element = fixture('basic');
|
||||
});
|
||||
|
||||
test('bidirectional binding property-to-attribute', function() {
|
||||
var changeStub = sinon.stub();
|
||||
element.addEventListener('bind-value-changed', changeStub);
|
||||
|
||||
// The selected element should be the first one by default.
|
||||
assert.equal(element.value, '1');
|
||||
assert.equal(element.bindValue, '1');
|
||||
assert.isFalse(changeStub.called);
|
||||
|
||||
// Now change the value.
|
||||
element.bindValue = '2';
|
||||
|
||||
// It should be updated.
|
||||
assert.equal(element.value, '2');
|
||||
assert.equal(element.bindValue, '2');
|
||||
assert.isTrue(changeStub.called);
|
||||
});
|
||||
|
||||
test('bidirectional binding attribute-to-property', function() {
|
||||
var changeStub = sinon.stub();
|
||||
element.addEventListener('bind-value-changed', changeStub);
|
||||
|
||||
// The selected element should be the first one by default.
|
||||
assert.equal(element.value, '1');
|
||||
assert.equal(element.bindValue, '1');
|
||||
assert.isFalse(changeStub.called);
|
||||
|
||||
// Now change the value.
|
||||
element.value = '3';
|
||||
element.fire('change');
|
||||
|
||||
// It should be updated.
|
||||
assert.equal(element.value, '3');
|
||||
assert.equal(element.bindValue, '3');
|
||||
assert.isTrue(changeStub.called);
|
||||
});
|
||||
});
|
||||
</script>
|
@@ -65,6 +65,7 @@ limitations under the License.
|
||||
'shared/gr-editable-label/gr-editable-label_test.html',
|
||||
'shared/gr-js-api-interface/gr-js-api-interface_test.html',
|
||||
'shared/gr-linked-text/gr-linked-text_test.html',
|
||||
'shared/gr-select/gr-select_test.html',
|
||||
'shared/gr-rest-api-interface/gr-rest-api-interface_test.html',
|
||||
'shared/gr-storage/gr-storage_test.html',
|
||||
].forEach(function(file) {
|
||||
|
Reference in New Issue
Block a user