New edit user UI

This commit is contained in:
Paul Adam Davis 2014-06-23 14:50:30 +01:00
parent 087c483498
commit b013b1fb65
4 changed files with 62 additions and 14 deletions

View File

@ -1,9 +1,13 @@
<header class="fade-in">
<button class="button-back">Back</button>
<h2 class="title">General</h2>
<section class="page-actions">
<button class="button-save" {{action "save"}}>Save</button>
</section>
<div class="settings-header-inner">
<button class="button-back">Back</button>
<section class="page-actions">
<button class="button-save" {{action "save"}}>Save</button>
</section>
</div>
</header>
<section class="content settings-general fade-in">

View File

@ -1,9 +1,28 @@
<header class="fade-in">
<button class="button-back">Back</button>
<header class="fade-in user-settings-header">
<h2 class="title">Your Profile</h2>
<section class="page-actions">
<button class="button-save" {{action "save"}}>Save</button>
</section>
<div class="settings-header-inner">
<button class="button-back">Back</button>
{{!-- <section class="page-actions page-actions-alt">
<button class="button has-icon users-back"><i class="icon-chevron-left"></i>Users</button>
</section> --}}
<section class="page-actions">
{{!-- {{#gh-popover-button popoverName="user-actions-menu" tagName="a" classNames="button only-has-icon user-actions-cog" title="User Actions"}}
<i class="icon-settings"></i>
<span class="hidden">User Settings</span>
{{/gh-popover-button}}
{{#gh-popover name="user-actions-menu" classNames="user-actions-menu menu-drop-right"}}
{{render "user-actions-menu" model}}
{{/gh-popover}} --}}
<button class="button-save" {{action "save"}}>Save</button>
</section>
</div>
</header>
<section class="content settings-user no-padding fade-in">
@ -24,8 +43,8 @@
</figure>
<div class="form-group">
<label for="user-name" class="hidden">Full Name</label>
{{input value=user.name id="user-name" placeholder="Full Name" autocorrect="off"}}
<label for="user-name">Full Name</label>
{{input value=user.name id="user-name" class="user-name" placeholder="Full Name" autocorrect="off"}}
<p>Use your real name so people can recognise you</p>
</div>
@ -33,12 +52,27 @@
<fieldset class="user-details-bottom">
{{!-- <div class="form-group">
<label for="user-slug">Slug</label>
{{input value=user.slug id="user-slug" placeholder="Slug" autocorrect="off"}}
<p>http://blog-url.com/user/{{user.slug}}</p>
</div> --}}
<div class="form-group">
<label for="user-email">Email</label>
{{input type="email" value=user.email id="user-email" placeholder="Email Address" autocapitalize="off" autocorrect="off"}}
<p>Used for notifications</p>
</div>
{{!-- <div class="form-group">
<label for="user-role">Role</label>
<select id="user-role">
<option value="#">Author</option>
<option value="#">Admin</option>
</select>
<p>What permissions should this user have?</p>
</div> --}}
<div class="form-group">
<label for="user-location">Location</label>
{{input type="text" value=user.location id="user-location"}}

View File

@ -0,0 +1,2 @@
<a href="#">Make Owner</a>
<a href="#" class="delete">Delete User</a>

View File

@ -7,21 +7,29 @@ var SettingsView = Ember.View.extend({
var responsiveAction = mobileUtils.responsiveAction;
Ember.run.scheduleOnce('afterRender', this, function () {
// ### Hide settings page nav items (save, back etc) if the menu is showing
responsiveAction(event, '(max-width: 650px)', function () {
if ($('.settings-sidebar[style]').length === 0) {
$('.settings-header-inner').css('display', 'none');
}
});
// ### Show settings options page when swiping left on settings menu link
$('.settings').on('click', '.settings-menu li', function (event) {
responsiveAction(event, '(max-width: 800px)', function () {
$('.settings-sidebar').animate({right: '100%', left: '-102%', 'margin-right': '15px'}, 300);
$('.settings-sidebar').animate({right: '100%', left: '-110%', 'margin-right': '15px'}, 300);
$('.settings-content').animate({right: '0', left: '0', 'margin-left': '0'}, 300);
$('.settings-content .button-back, .settings-content .button-save').css('display', 'inline-block');
$('.settings-header-inner').css('display', 'block');
});
});
// ### Hide settings options page
$('.settings').on('click', '.settings-content .button-back', function (event) {
responsiveAction(event, '(max-width: 800px)', function () {
$('.settings-header-inner').css('display', 'none');
$('.settings-sidebar').animate({right: '0', left: '0', 'margin-right': '0'}, 300);
$('.settings-content').animate({right: '-100%', left: '100%', 'margin-left': '15'}, 300);
$('.settings-content .button-back, .settings-content .button-save').css('display', 'none');
});
});
});