Merge "Adds some user preferences to the PolyGerrit settings page"

polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html

@@ -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,42 +27,54 @@ 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;
+        margin-bottom: .5em;
-      }
-      section:not(:first-of-type) {
-        margin-top: 1em;
-      }
-      section:not(:first-of-type) .title,
-      section:not(:first-of-type) .value {
-        padding-top: .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>
+      <main>
         <h1>User Settings</h1>
         <h2>Profile</h2>
         <fieldset>
@@ -88,6 +102,61 @@ limitations under the License.
             </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>

polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.js

@@ -30,7 +30,15 @@
         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));
+    },
   });
 })();

polygerrit-ui/app/elements/shared/gr-rest-api-interface/gr-rest-api-interface.js

@@ -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);

polygerrit-ui/app/elements/shared/gr-select/gr-select.html

@@ -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>

polygerrit-ui/app/elements/shared/gr-select/gr-select.js

@@ -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;
+        }
+      }
+    },
+  });
+})();

polygerrit-ui/app/elements/shared/gr-select/gr-select_test.html

@@ -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>

polygerrit-ui/app/test/index.html

@@ -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) {