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>