| <!-- |
| 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"> |
| |
| <link rel="import" href="../gr-account-info/gr-account-info.html"> |
| <link rel="import" href="../gr-email-editor/gr-email-editor.html"> |
| <link rel="import" href="../gr-group-list/gr-group-list.html"> |
| <link rel="import" href="../gr-http-password/gr-http-password.html"> |
| <link rel="import" href="../gr-change-table-editor/gr-change-table-editor.html"> |
| <link rel="import" href="../gr-menu-editor/gr-menu-editor.html"> |
| <link rel="import" href="../gr-ssh-editor/gr-ssh-editor.html"> |
| <link rel="import" href="../gr-watched-projects-editor/gr-watched-projects-editor.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"> |
| |
| <link rel="import" href="../../../styles/gr-settings-styles.html"> |
| |
| <dom-module id="gr-settings-view"> |
| <template> |
| <style> |
| :host { |
| background-color: var(--view-background-color); |
| display: block; |
| } |
| main { |
| margin: 2em auto; |
| max-width: 46em; |
| } |
| h1 { |
| margin-bottom: .1em; |
| } |
| h2.edited:after { |
| color: #444; |
| content: ' *'; |
| } |
| .loading { |
| color: #666; |
| padding: 1em var(--default-horizontal-margin); |
| } |
| #newEmailInput { |
| width: 20em; |
| } |
| nav { |
| border: 1px solid #eee; |
| border-top: none; |
| position: absolute; |
| top: 0; |
| width: 14em; |
| } |
| nav.pinned { |
| position: fixed; |
| } |
| nav ul { |
| margin: 1em 2em; |
| } |
| nav a { |
| color: black; |
| display: inline-block; |
| margin: .4em 0; |
| } |
| @media only screen and (max-width: 67em) { |
| main { |
| margin: 2em 0 2em 15em; |
| } |
| } |
| @media only screen and (max-width: 53em) { |
| .loading { |
| padding: 0 var(--default-horizontal-margin); |
| } |
| main { |
| margin: 2em 1em; |
| } |
| nav { |
| display: none; |
| } |
| } |
| </style> |
| <style include="gr-settings-styles"></style> |
| <div class="loading" hidden$="[[!_loading]]">Loading...</div> |
| <div hidden$="[[_loading]]" hidden> |
| <nav id="settingsNav"> |
| <ul> |
| <li><a href="#Profile">Profile</a></li> |
| <li><a href="#Preferences">Preferences</a></li> |
| <li><a href="#DiffPreferences">Diff Preferences</a></li> |
| <li><a href="#Menu">Menu</a></li> |
| <li><a href="#ChangeTableColumns">Change Table Columns</a></li> |
| <li><a href="#Notifications">Notifications</a></li> |
| <li><a href="#EmailAddresses">Email Addresses</a></li> |
| <li><a href="#HTTPCredentials">HTTP Credentials</a></li> |
| <li hidden$="[[!_serverConfig.sshd]]"><a href="#SSHKeys"> |
| SSH Keys |
| </a></li> |
| <li><a href="#Groups">Groups</a></li> |
| </ul> |
| </nav> |
| <main class="gr-settings-styles"> |
| <h1>User Settings</h1> |
| <h2 |
| id="Profile" |
| class$="[[_computeHeaderClass(_accountInfoChanged)]]">Profile</h2> |
| <fieldset id="profile"> |
| <gr-account-info |
| id="accountInfo" |
| mutable="{{_accountNameMutable}}" |
| has-unsaved-changes="{{_accountInfoChanged}}"></gr-account-info> |
| <gr-button |
| on-tap="_handleSaveAccountInfo" |
| disabled="[[!_accountInfoChanged]]">Save changes</gr-button> |
| </fieldset> |
| <h2 |
| id="Preferences" |
| class$="[[_computeHeaderClass(_prefsChanged)]]">Preferences</h2> |
| <fieldset id="preferences"> |
| <section> |
| <span class="title">Changes per page</span> |
| <span class="value"> |
| <select |
| is="gr-select" |
| bind-value="{{_localPrefs.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="{{_localPrefs.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="{{_localPrefs.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="{{_localPrefs.email_strategy}}"> |
| <option value="CC_ON_OWN_COMMENTS">Every comment</option> |
| <option value="ENABLED">Only comments left by others</option> |
| <option value="DISABLED">None</option> |
| </select> |
| </span> |
| </section> |
| <section hidden$="[[!_localPrefs.email_format]]"> |
| <span class="title">Email format</span> |
| <span class="value"> |
| <select |
| is="gr-select" |
| bind-value="{{_localPrefs.email_format}}"> |
| <option value="HTML_PLAINTEXT">HTML and plaintext</option> |
| <option value="PLAINTEXT">Plaintext only</option> |
| </select> |
| </span> |
| </section> |
| <section> |
| <span class="title">Diff view</span> |
| <span class="value"> |
| <select |
| is="gr-select" |
| bind-value="{{_localPrefs.diff_view}}"> |
| <option value="SIDE_BY_SIDE">Side by side</option> |
| <option value="UNIFIED_DIFF">Unified diff</option> |
| </select> |
| </span> |
| </section> |
| <section> |
| <span class="title">Expand inline diffs</span> |
| <span class="value"> |
| <input |
| id="expandInlineDiffs" |
| type="checkbox" |
| checked$="[[_localPrefs.expand_inline_diffs]]" |
| on-change="_handleExpandInlineDiffsChanged"> |
| </span> |
| </section> |
| <gr-button |
| id="savePrefs" |
| on-tap="_handleSavePreferences" |
| disabled="[[!_prefsChanged]]">Save changes</gr-button> |
| </fieldset> |
| <h2 |
| id="DiffPreferences" |
| class$="[[_computeHeaderClass(_diffPrefsChanged)]]"> |
| Diff Preferences |
| </h2> |
| <fieldset id="diffPreferences"> |
| <section> |
| <span class="title">Context</span> |
| <span class="value"> |
| <select |
| is="gr-select" |
| bind-value="{{_diffPrefs.context}}"> |
| <option value="3">3 lines</option> |
| <option value="10">10 lines</option> |
| <option value="25">25 lines</option> |
| <option value="50">50 lines</option> |
| <option value="75">75 lines</option> |
| <option value="100">100 lines</option> |
| <option value="-1">Whole file</option> |
| </select> |
| </span> |
| </section> |
| <section> |
| <span class="title">Fit to screen</span> |
| <span class="value"> |
| <input |
| id="lineWrapping" |
| type="checkbox" |
| checked$="[[_diffPrefs.line_wrapping]]" |
| on-change="_handleLineWrappingChanged"> |
| </span> |
| </section> |
| <section id="columnsPref" hidden$="[[_diffPrefs.line_wrapping]]"> |
| <span class="title">Diff width</span> |
| <span class="value"> |
| <input |
| is="iron-input" |
| type="number" |
| prevent-invalid-input |
| allowed-pattern="[0-9]" |
| bind-value="{{_diffPrefs.line_length}}"> |
| </span> |
| </section> |
| <section> |
| <span class="title">Tab width</span> |
| <span class="value"> |
| <input |
| is="iron-input" |
| type="number" |
| prevent-invalid-input |
| allowed-pattern="[0-9]" |
| bind-value="{{_diffPrefs.tab_size}}"> |
| </span> |
| </section> |
| <section hidden$="[[!_diffPrefs.font_size]]"> |
| <span class="title">Font size</span> |
| <span class="value"> |
| <input |
| is="iron-input" |
| type="number" |
| prevent-invalid-input |
| allowed-pattern="[0-9]" |
| bind-value="{{_diffPrefs.font_size}}"> |
| </span> |
| </section> |
| <section> |
| <span class="title">Show tabs</span> |
| <span class="value"> |
| <input |
| id="showTabs" |
| type="checkbox" |
| checked$="[[_diffPrefs.show_tabs]]" |
| on-change="_handleShowTabsChanged"> |
| </span> |
| </section> |
| <section> |
| <span class="title">Show trailing whitespace</span> |
| <span class="value"> |
| <input |
| id="showTrailingWhitespace" |
| type="checkbox" |
| checked$="[[_diffPrefs.show_whitespace_errors]]" |
| on-change="_handleShowTrailingWhitespaceChanged"> |
| </span> |
| </section> |
| <section> |
| <span class="title">Syntax highlighting</span> |
| <span class="value"> |
| <input |
| id="syntaxHighlighting" |
| type="checkbox" |
| checked$="[[_diffPrefs.syntax_highlighting]]" |
| on-change="_handleSyntaxHighlightingChanged"> |
| </span> |
| </section> |
| <gr-button |
| id="saveDiffPrefs" |
| on-tap="_handleSaveDiffPreferences" |
| disabled$="[[!_diffPrefsChanged]]">Save changes</gr-button> |
| </fieldset> |
| <h2 id="Menu" class$="[[_computeHeaderClass(_menuChanged)]]">Menu</h2> |
| <fieldset id="menu"> |
| <gr-menu-editor menu-items="{{_localMenu}}"></gr-menu-editor> |
| <gr-button |
| id="saveMenu" |
| on-tap="_handleSaveMenu" |
| disabled="[[!_menuChanged]]">Save changes</gr-button> |
| </fieldset> |
| <h2 id="ChangeTableColumns" |
| class$="[[_computeHeaderClass(_changeTableChanged)]]"> |
| Change Table Columns |
| </h2> |
| <fieldset id="changeTableColumns"> |
| <gr-change-table-editor |
| displayed-columns="{{_localChangeTableColumns}}"> |
| </gr-change-table-editor> |
| <gr-button |
| id="saveChangeTable" |
| on-tap="_handleSaveChangeTable" |
| disabled="[[!_changeTableChanged]]">Save changes</gr-button> |
| </fieldset> |
| <h2 |
| id="Notifications" |
| class$="[[_computeHeaderClass(_watchedProjectsChanged)]]"> |
| Notifications |
| </h2> |
| <fieldset id="watchedProjects"> |
| <gr-watched-projects-editor |
| has-unsaved-changes="{{_watchedProjectsChanged}}" |
| id="watchedProjectsEditor"></gr-watched-projects-editor> |
| <gr-button |
| on-tap="_handleSaveWatchedProjects" |
| disabled$="[[!_watchedProjectsChanged]]" |
| id="_handleSaveWatchedProjects">Save changes</gr-button> |
| </fieldset> |
| <h2 |
| id="EmailAddresses" |
| class$="[[_computeHeaderClass(_emailsChanged)]]"> |
| Email Addresses |
| </h2> |
| <fieldset id="email"> |
| <gr-email-editor |
| id="emailEditor" |
| has-unsaved-changes="{{_emailsChanged}}"></gr-email-editor> |
| <gr-button |
| on-tap="_handleSaveEmails" |
| disabled$="[[!_emailsChanged]]">Save changes</gr-button> |
| </fieldset> |
| <fieldset id="newEmail"> |
| <section> |
| <span class="title">New email address</span> |
| <span class="value"> |
| <input |
| id="newEmailInput" |
| bind-value="{{_newEmail}}" |
| is="iron-input" |
| type="text" |
| disabled="[[_addingEmail]]" |
| on-keydown="_handleNewEmailKeydown" |
| placeholder="email@example.com"> |
| </span> |
| </section> |
| <section |
| id="verificationSentMessage" |
| hidden$="[[!_lastSentVerificationEmail]]"> |
| <p> |
| A verification email was sent to |
| <em>[[_lastSentVerificationEmail]]</em>. Please check your inbox. |
| </p> |
| </section> |
| <gr-button |
| disabled="[[!_computeAddEmailButtonEnabled(_newEmail, _addingEmail)]]" |
| on-tap="_handleAddEmailButton">Send verification</gr-button> |
| </fieldset> |
| <h2 id="HTTPCredentials">HTTP Credentials</h2> |
| <fieldset> |
| <gr-http-password id="httpPass"></gr-http-password> |
| </fieldset> |
| <div hidden$="[[!_serverConfig.sshd]]"> |
| <h2 |
| id="SSHKeys" |
| class$="[[_computeHeaderClass(_keysChanged)]]">SSH keys</h2> |
| <gr-ssh-editor |
| id="sshEditor" |
| has-unsaved-changes="{{_keysChanged}}"></gr-ssh-editor> |
| </div> |
| <h2 id="Groups">Groups</h2> |
| <fieldset> |
| <gr-group-list id="groupList"></gr-group-list> |
| </fieldset> |
| </main> |
| </div> |
| <gr-rest-api-interface id="restAPI"></gr-rest-api-interface> |
| </template> |
| <script src="../../../scripts/util.js"></script> |
| <script src="gr-settings-view.js"></script> |
| </dom-module> |