ux(profile): update profile forms with new form markup and classes

This commit is contained in:
Torkel Ödegaard 2016-02-13 20:54:00 +01:00
parent caa765ec32
commit eae4bb74dd
3 changed files with 80 additions and 133 deletions

View File

@ -2,55 +2,33 @@
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
<div class="page">
<h1>Change password</h1> <h1>Change password</h1>
<form name="userForm"> <form name="userForm" class="gf-form-group">
<div> <div class="gf-form">
<div class="norm-form"> <span class="gf-form-label gf-size-m">Old Password</span>
<ul class="norm-form-list"> <input class="gf-form-input gf-size-xxl" type="text" required ng-model="command.oldPassword">
<li class="norm-form-item" style="width: 100px"> </div>
Old Password <br>
</li>
<li>
<input type="password" required ng-model="command.oldPassword" class="input-xlarge norm-form-input last" >
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="norm-form">
<ul class="norm-form-list">
<li class="norm-form-item" style="width: 100px">
New Password
</li>
<li>
<input type="password" required ng-model="command.newPassword" ng-minlength="4" class="input-xlarge norm-form-input last" >
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="norm-form">
<ul class="norm-form-list">
<li class="norm-form-item" style="width: 100px">
Confirm New
</li>
<li>
<input type="password" required ng-model="command.confirmNew" ng-minlength="4" class="input-xlarge norm-form-input last" >
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<br> <div class="gf-form">
<div class="p"> <span class="gf-form-label gf-size-m">New Password</span>
<button type="submit" class="btn btn-success" ng-click="changePassword()">Change Password</button> <input class="gf-form-input gf-size-xxl" type="text" required ng-minlength="4" ng-model="command.newPassword">
&nbsp; </div>
<a class="btn-text" href="profile">Cancel</a> <br>
</div>
</form> <div class="gf-form">
<span class="gf-form-label gf-size-m">Confirm Password</span>
<input class="gf-form-input gf-size-xxl" type="text" required ng-minlength="4" ng-model="command.confirmNew">
</div>
<br>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-success" ng-click="changePassword()">Change Password</button>
<a class="btn-text" href="profile">Cancel</a>
</div>
</form>
</div>
</div> </div>

View File

@ -2,95 +2,64 @@
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
<div class="page-wide">
<h1>Profile</h1> <h1>Profile</h1>
<section class="simple-box"> <form name="userForm" class="gf-form-group">
<h3 class="">Preferences</h3> <div class="gf-form">
</section> <span class="gf-form-label gf-size-s">Name</span>
<form name="userForm"> <input class="gf-form-input gf-size-xxl" type="text" required ng-model="user.name" >
<div class="norm-form"> </div>
<ul class="norm-form-list"> <br>
<li class="norm-form-item" style="width: 100px">
Name
</li>
<li>
<input type="text" required ng-model="user.name" class="input-xlarge norm-form-input last" >
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="norm-form">
<ul class="norm-form-list">
<li class="norm-form-item" style="width: 100px">
Email
</li>
<li>
<input type="email" required ng-model="user.email" class="input-xlarge norm-form-input last" >
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="norm-form">
<ul class="norm-form-list">
<li class="norm-form-item" style="width: 100px">
Username
</li>
<li>
<input type="text" required ng-model="user.login" class="input-xlarge norm-form-input last" >
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="norm-form last"> <div class="gf-form">
<ul class="norm-form-list"> <span class="gf-form-label gf-size-s">Email</span>
<li class="norm-form-item" style="width: 100px"> <input class="gf-form-input gf-size-xxl" type="email" required ng-model="user.email">
UI Theme </div>
</li> <br>
<li>
<select class="input-small norm-form-input" ng-model="user.theme" ng-options="f for f in ['dark', 'light']"></select>
</li>
</ul>
<div class="clearfix"></div>
</div>
<br>
<button type="submit" class="btn btn-success" ng-click="update()">Update</button>
<div class="clearfix"></div>
</form>
<section class="simple-box"> <div class="gf-form">
<h3 class="">Password</h3> <span class="gf-form-label gf-size-s">Username</span>
<a class="btn btn-inverse btn-small" href="profile/password" style="margin: 7px 10px 0 0">Change Password</a> <input class="gf-form-input gf-size-xxl" type="text" required ng-model="user.login">
</section> </div>
<br>
<section class="simple-box"> <div class="gf-form">
<h3 class="">Organizations</h3> <span class="gf-form-label gf-size-s">UI Theme</span>
<table class="filter-table form-inline"> <select class="gf-form-input gf-size-auto" ng-model="user.theme" ng-options="f for f in ['dark', 'light']"></select>
<thead> </div>
<tr>
<th>Name</th> <div class="gf-form-button-row">
<th>Role</th> <button type="submit" class="btn btn-success" ng-click="update()">Update</button>
<th></th> </div>
</tr> </form>
</thead>
<tbody> <h3>Password</h3>
<tr ng-repeat="org in orgs"> <a href="profile/password" class="btn btn-inverse">Change Password</a>
<td>{{org.name}}</td>
<td>{{org.role}}</td> <h3>Organizations</h3>
<td class="text-right"> <table class="filter-table form-inline">
<span class="btn btn-primary btn-mini" ng-show="org.orgId === contextSrv.user.orgId"> <thead>
Current <tr>
</span> <th>Name</th>
<a ng-click="setUsingOrg(org)" class="btn btn-inverse btn-mini" ng-show="org.orgId !== contextSrv.user.orgId"> <th>Role</th>
Select <th></th>
</a> </tr>
</td> </thead>
</tr> <tbody>
</tbody> <tr ng-repeat="org in orgs">
</table> <td>{{org.name}}</td>
</div> <td>{{org.role}}</td>
</section> <td class="text-right">
</div> <span class="btn btn-primary btn-mini" ng-show="org.orgId === contextSrv.user.orgId">
Current
</span>
<a ng-click="setUsingOrg(org)" class="btn btn-inverse btn-mini" ng-show="org.orgId !== contextSrv.user.orgId">
Select
</a>
</td>
</tr>
</tbody>
</table>
</div>

View File

@ -17,7 +17,7 @@
} }
.gf-form-button-row { .gf-form-button-row {
margin-top: 15px; margin-top: 20px;
margin-bottom: 10px; margin-bottom: 10px;
} }