Add user preferences panel to PolyGerrit UI
Change-Id: I3cf653c0fe672f4612cb8b10f801d8fd651e358d
diff --git a/src/main/resources/static/gr-imagare-pref-menu-item.html b/src/main/resources/static/gr-imagare-pref-menu-item.html
new file mode 100644
index 0000000..ee8b989
--- /dev/null
+++ b/src/main/resources/static/gr-imagare-pref-menu-item.html
@@ -0,0 +1,29 @@
+<!--
+@license
+Copyright (C) 2019 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.
+-->
+
+<dom-module id="gr-imagare-pref-menu-item">
+ <template>
+ <style include="shared-styles"></style>
+ <style include="gr-page-nav-styles">
+ li {
+ padding-left: 1.5em;
+ padding-right: 1.5em;
+ }
+ </style>
+ <li class="navStyles">
+ <a href="#ImagarePreferences">Imagare Preferences</a>
+ </li>
+ </template>
+ <script src="gr-imagare-pref-menu-item.js"></script>
+</dom-module>
diff --git a/src/main/resources/static/gr-imagare-pref-menu-item.js b/src/main/resources/static/gr-imagare-pref-menu-item.js
new file mode 100644
index 0000000..3e1a7b0
--- /dev/null
+++ b/src/main/resources/static/gr-imagare-pref-menu-item.js
@@ -0,0 +1,21 @@
+// Copyright (C) 2019 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-imagare-pref-menu-item',
+ });
+})();
diff --git a/src/main/resources/static/gr-imagare-preferences.html b/src/main/resources/static/gr-imagare-preferences.html
new file mode 100644
index 0000000..ae26388
--- /dev/null
+++ b/src/main/resources/static/gr-imagare-preferences.html
@@ -0,0 +1,60 @@
+<!--
+@license
+Copyright (C) 2019 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.
+-->
+
+<dom-module id="gr-imagare-preferences">
+ <template>
+ <style include="shared-styles"></style>
+ <style include="gr-form-styles"></style>
+ <h2 id="ImagarePreferences">Imagare Preferences</h2>
+ <fieldset class="gr-form-styles">
+ <section>
+ <span class="title">Link Decoration</span>
+ <span class="value">
+ <gr-select bind-value="{{_linkDecoration}}">
+ <select on-change="_handlePrefsChanged">
+ <option value="NONE">none</option>
+ <option value="INLINE">inline</option>
+ <option value="TOOLTIP">tooltip</option>
+ </select>
+ </gr-select>
+ </span>
+ </section>
+ <section>
+ <span class="title">Default Project</span>
+ <span class="value">
+ <gr-autocomplete id="imagareDefaultProjectInput" text="{{_defaultImageProject}}"
+ value="{{_defaultImageProject}}" query="[[_query]]"
+ on-commit="_handlePrefsChanged" on-keyup="_handlePrefsChanged">
+ [[_defaultImageProject]]
+ </gr-autocomplete>
+ </span>
+ </section>
+ <section>
+ <span class="title">Stage images before upload</span>
+ <span class="value">
+ <input id="stageImages"
+ type="checkbox"
+ checked$="[[_stageImages]]"
+ on-change="_handleStageImagesChanged">
+ </span>
+ </section>
+ <gr-button id="saveButton"
+ on-tap="_handleImagarePrefsSave"
+ disabled="[[!_prefsChanged]]">
+ Save Changes
+ </gr-button>
+ </fieldset>
+ </template>
+ <script src="gr-imagare-preferences.js"></script>
+</dom-module>
diff --git a/src/main/resources/static/gr-imagare-preferences.js b/src/main/resources/static/gr-imagare-preferences.js
new file mode 100644
index 0000000..d1f868f
--- /dev/null
+++ b/src/main/resources/static/gr-imagare-preferences.js
@@ -0,0 +1,101 @@
+// Copyright (C) 2019 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-imagare-preferences',
+
+ properties: {
+ _defaultImageProject: String,
+ _linkDecoration: String,
+ _stageImages: Boolean,
+ _prefsChanged: {
+ type: Boolean,
+ value: false
+ },
+ _query: {
+ type: Function,
+ value() {
+ return this._queryProjects.bind(this);
+ },
+ },
+ },
+
+ attached() {
+ this._getUserPreferences();
+ },
+
+ _getUserPreferences() {
+ this.plugin.restApi('/accounts/self/')
+ .get(`imagare~preference`)
+ .then(config => {
+ if (!config) {
+ return;
+ }
+
+ this._linkDecoration = config.link_decoration;
+ this._defaultImageProject = config.default_project;
+ this._stageImages = config.stage;
+ }).catch(response => {
+ this.fire('show-error', {message: response});
+ });
+ },
+
+ _handleImagarePrefsSave(){
+ this.plugin.restApi('/accounts/self/')
+ .put(`imagare~preference`, {
+ default_project: this._defaultImageProject,
+ link_decoration: this._linkDecoration,
+ stage: this._stageImages,
+ }).then(() => {
+ this._prefsChanged = false;
+ }).catch(response => {
+ this.fire('show-error', {message: response});
+ });
+ },
+
+ _handlePrefsChanged() {
+ this._prefsChanged = true;
+ },
+
+ _handleStageImagesChanged(event){
+ this._handlePrefsChanged();
+ this._stageImages = event.target.checked;
+ },
+
+ _queryProjects(input) {
+ let query;
+ if (!input || input === this._defaultImageProject) {
+ query = '';
+ } else {
+ query = `?prefix=${input}`;
+ }
+
+ return this.plugin.restApi('/a/projects/').get(query)
+ .then(response => {
+ const projects = [];
+ for (const key in response) {
+ if (!response.hasOwnProperty(key)) { continue; }
+ projects.push({
+ name: key,
+ value: decodeURIComponent(response[key].id),
+ });
+ }
+ return projects;
+ });
+ },
+ });
+})();
diff --git a/src/main/resources/static/imagare.html b/src/main/resources/static/imagare.html
index a06d629..2d2077d 100644
--- a/src/main/resources/static/imagare.html
+++ b/src/main/resources/static/imagare.html
@@ -16,6 +16,8 @@
-->
<link rel="import" href="./gr-imagare-inline.html">
+<link rel="import" href="./gr-imagare-preferences.html">
+<link rel="import" href="./gr-imagare-pref-menu-item.html">
<link rel="import" href="./gr-imagare-upload.html">
<dom-module id="imagare">
@@ -29,6 +31,8 @@
}
});
plugin.registerCustomComponent('change-view-integration', 'gr-imagare-inline');
+ plugin.registerCustomComponent('settings-screen', 'gr-imagare-preferences');
+ plugin.registerCustomComponent('settings-menu-item', 'gr-imagare-pref-menu-item');
});
</script>
</dom-module>
