Merge "Adds navigation to settings"
This commit is contained in:
commit
9b511bec11
@ -55,21 +55,63 @@ limitations under the License.
|
|||||||
#newEmailInput {
|
#newEmailInput {
|
||||||
width: 20em;
|
width: 20em;
|
||||||
}
|
}
|
||||||
@media only screen and (max-width: 40em) {
|
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 {
|
.loading {
|
||||||
padding: 0 var(--default-horizontal-margin);
|
padding: 0 var(--default-horizontal-margin);
|
||||||
}
|
}
|
||||||
main {
|
main {
|
||||||
margin: 2em 1em;
|
margin: 2em 1em;
|
||||||
}
|
}
|
||||||
|
nav {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style include="gr-settings-styles"></style>
|
<style include="gr-settings-styles"></style>
|
||||||
<div class="loading" hidden$="[[!_loading]]">Loading...</div>
|
<div class="loading" hidden$="[[!_loading]]">Loading...</div>
|
||||||
<div hidden$="[[_loading]]" hidden>
|
<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="#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">
|
<main class="gr-settings-styles">
|
||||||
<h1>User Settings</h1>
|
<h1>User Settings</h1>
|
||||||
<h2 class$="[[_computeHeaderClass(_accountInfoChanged)]]">Profile</h2>
|
<h2
|
||||||
|
id="Profile"
|
||||||
|
class$="[[_computeHeaderClass(_accountInfoChanged)]]">Profile</h2>
|
||||||
<fieldset id="profile">
|
<fieldset id="profile">
|
||||||
<gr-account-info
|
<gr-account-info
|
||||||
id="accountInfo"
|
id="accountInfo"
|
||||||
@ -80,7 +122,9 @@ limitations under the License.
|
|||||||
hidden$="[[!_accountInfoMutable]]"
|
hidden$="[[!_accountInfoMutable]]"
|
||||||
disabled="[[!_accountInfoChanged]]">Save Changes</gr-button>
|
disabled="[[!_accountInfoChanged]]">Save Changes</gr-button>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<h2 class$="[[_computeHeaderClass(_prefsChanged)]]">Preferences</h2>
|
<h2
|
||||||
|
id="Preferences"
|
||||||
|
class$="[[_computeHeaderClass(_prefsChanged)]]">Preferences</h2>
|
||||||
<fieldset id="preferences">
|
<fieldset id="preferences">
|
||||||
<section>
|
<section>
|
||||||
<span class="title">Changes Per Page</span>
|
<span class="title">Changes Per Page</span>
|
||||||
@ -144,7 +188,9 @@ limitations under the License.
|
|||||||
on-tap="_handleSavePreferences"
|
on-tap="_handleSavePreferences"
|
||||||
disabled="[[!_prefsChanged]]">Save Changes</gr-button>
|
disabled="[[!_prefsChanged]]">Save Changes</gr-button>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<h2 class$="[[_computeHeaderClass(_diffPrefsChanged)]]">
|
<h2
|
||||||
|
id="DiffPreferences"
|
||||||
|
class$="[[_computeHeaderClass(_diffPrefsChanged)]]">
|
||||||
Diff Preferences
|
Diff Preferences
|
||||||
</h2>
|
</h2>
|
||||||
<fieldset id="diffPreferences">
|
<fieldset id="diffPreferences">
|
||||||
@ -209,7 +255,9 @@ limitations under the License.
|
|||||||
on-tap="_handleSaveMenu"
|
on-tap="_handleSaveMenu"
|
||||||
disabled="[[!_menuChanged]]">Save Changes</gr-button>
|
disabled="[[!_menuChanged]]">Save Changes</gr-button>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<h2 class$="[[_computeHeaderClass(_watchedProjectsChanged)]]">
|
<h2
|
||||||
|
id="Notifications"
|
||||||
|
class$="[[_computeHeaderClass(_watchedProjectsChanged)]]">
|
||||||
Notifications
|
Notifications
|
||||||
</h2>
|
</h2>
|
||||||
<fieldset id="watchedProjects">
|
<fieldset id="watchedProjects">
|
||||||
@ -221,7 +269,9 @@ limitations under the License.
|
|||||||
disabled$="[[!_watchedProjectsChanged]]"
|
disabled$="[[!_watchedProjectsChanged]]"
|
||||||
id="_handleSaveWatchedProjects">Save Changes</gr-button>
|
id="_handleSaveWatchedProjects">Save Changes</gr-button>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<h2 class$="[[_computeHeaderClass(_emailsChanged)]]">
|
<h2
|
||||||
|
id="EmailAddresses"
|
||||||
|
class$="[[_computeHeaderClass(_emailsChanged)]]">
|
||||||
Email Addresses
|
Email Addresses
|
||||||
</h2>
|
</h2>
|
||||||
<fieldset id="email">
|
<fieldset id="email">
|
||||||
@ -258,17 +308,19 @@ limitations under the License.
|
|||||||
disabled="[[!_computeAddEmailButtonEnabled(_newEmail, _addingEmail)]]"
|
disabled="[[!_computeAddEmailButtonEnabled(_newEmail, _addingEmail)]]"
|
||||||
on-tap="_handleAddEmailButton">Send Verification</gr-button>
|
on-tap="_handleAddEmailButton">Send Verification</gr-button>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<h2>HTTP Credentials</h2>
|
<h2 id="HTTPCredentials">HTTP Credentials</h2>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<gr-http-password id="httpPass"></gr-http-password>
|
<gr-http-password id="httpPass"></gr-http-password>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<div hidden$="[[!_serverConfig.sshd]]">
|
<div hidden$="[[!_serverConfig.sshd]]">
|
||||||
<h2 class$="[[_computeHeaderClass(_keysChanged)]]">SSH Keys</h2>
|
<h2
|
||||||
|
id="SSHKeys"
|
||||||
|
class$="[[_computeHeaderClass(_keysChanged)]]">SSH Keys</h2>
|
||||||
<gr-ssh-editor
|
<gr-ssh-editor
|
||||||
id="sshEditor"
|
id="sshEditor"
|
||||||
has-unsaved-changes="{{_keysChanged}}"></gr-ssh-editor>
|
has-unsaved-changes="{{_keysChanged}}"></gr-ssh-editor>
|
||||||
</div>
|
</div>
|
||||||
<h2>Groups</h2>
|
<h2 id="Groups">Groups</h2>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<gr-group-list id="groupList"></gr-group-list>
|
<gr-group-list id="groupList"></gr-group-list>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
@ -81,6 +81,7 @@
|
|||||||
value: null,
|
value: null,
|
||||||
},
|
},
|
||||||
_serverConfig: Object,
|
_serverConfig: Object,
|
||||||
|
_headerHeight: Number,
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* For testing purposes.
|
* For testing purposes.
|
||||||
@ -125,6 +126,27 @@
|
|||||||
this._loadingPromise = Promise.all(promises).then(function() {
|
this._loadingPromise = Promise.all(promises).then(function() {
|
||||||
this._loading = false;
|
this._loading = false;
|
||||||
}.bind(this));
|
}.bind(this));
|
||||||
|
|
||||||
|
this.listen(window, 'scroll', '_handleBodyScroll');
|
||||||
|
},
|
||||||
|
|
||||||
|
detached: function() {
|
||||||
|
this.unlisten(window, 'scroll', '_handleBodyScroll');
|
||||||
|
},
|
||||||
|
|
||||||
|
_handleBodyScroll: function(e) {
|
||||||
|
if (this._headerHeight === undefined) {
|
||||||
|
var top = this.$.settingsNav.offsetTop;
|
||||||
|
for (var offsetParent = this.$.settingsNav.offsetParent;
|
||||||
|
offsetParent;
|
||||||
|
offsetParent = offsetParent.offsetParent) {
|
||||||
|
top += offsetParent.offsetTop;
|
||||||
|
}
|
||||||
|
this._headerHeight = top;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$.settingsNav.classList.toggle('pinned',
|
||||||
|
window.scrollY >= this._headerHeight);
|
||||||
},
|
},
|
||||||
|
|
||||||
_isLoading: function() {
|
_isLoading: function() {
|
||||||
|
Loading…
Reference in New Issue
Block a user