updated-list-views: added new table layout to additional pages

public/app/features/org/partials/orgApiKeys.html

@@ -5,7 +5,7 @@
 </topnav>
 
 <div class="page-container" style="background: transparent; border: 0;">
-	<div class="page">
+	<div class="page-wide">
 		<h2>
 			API Keys
 		</h2>
@@ -93,7 +93,7 @@
 					</td>
 					<td>{{t.name}}</td>
 					<td>{{t.role}}</td>
-					<td style="width: 1%">
+					<td>
 						<a ng-click="removeToken(t.id)" class="btn btn-danger btn-mini">
 							<i class="fa fa-remove"></i>
 						</a>

public/app/features/org/partials/orgUsers.html

@@ -5,7 +5,7 @@
 </topnav>
 
 <div class="page-container" style="background: transparent; border: 0;">
-	<div class="page">
+	<div class="page-wide">
 
 		<h2>Organization users</h2>
 
@@ -67,6 +67,7 @@
 				<table class="filter-table form-inline">
 					<thead>
 						<tr>
+							<th style="width: 48px;"></th>
 							<th>Login</th>
 							<th>Email</th>
 							<th>Role</th>
@@ -74,6 +75,10 @@
 						</tr>
 					</thead>
 					<tr ng-repeat="user in users">
+						<td>
+							<input class="cr1" id="alert1" type="checkbox">
+	            <label for="alert1" class="cr1"></label>
+						</td>
 						<td>{{user.login}}</td>
 						<td><span class="ellipsis">{{user.email}}</span></td>
 						<td>
@@ -89,36 +94,100 @@
 				</table>
 			</tab>
 			<tab heading="Pending Invitations ({{pendingInvites.length}})">
-				<div class="grafana-list-item" ng-repeat="invite in pendingInvites" ng-click="invite.expanded = !invite.expanded">
-					{{invite.email}}
-					<span ng-show="invite.name" style="padding-left: 20px"> {{invite.name}}</span>
-					<span class="pull-right">
-						<button class="btn btn-inverse btn-mini " data-clipboard-text="{{invite.url}}" clipboard-button ng-click="copyInviteToClipboard($event)"
-							<i class="fa fa-clipboard"></i> Copy Invite
-						</button>
-						&nbsp;
-						<a class="pointer">
-							<i ng-show="!invite.expanded" class="fa fa-caret-right"></i>
-							<i ng-show="invite.expanded" class="fa fa-caret-down"></i>
-						</a>
-					</span>
-					<div ng-show="invite.expanded">
-						<a href="{{invite.url}}">{{invite.url}}</a><br>
-						<button class="btn btn-inverse btn-mini">
-							<i class="fa fa-envelope-o"></i> Resend invite
-						</button>
-						&nbsp;
-						<button class="btn btn-inverse btn-mini" ng-click="revokeInvite(invite, $event)">
-							<i class="fa fa-remove" style="color: red"></i> Revoke invite
-						</button>
-						<span style="padding-left: 15px">
-							Invited: <em> {{invite.createdOn | date: 'shortDate'}} by {{invite.invitedBy}} </em>
-						</span>
-					<div>
-				</div>
+
+			<div class="filter-controls-filters">
+		      <div class="tight-form last">
+		        <ul class="tight-form-list">
+		          <li class="tight-form-item">Filters:</li>
+		          <li class="tight-form-item">Email</li>
+		          <li><!-- <value-select-dropdown></value-select-dropdown> --></li>
+		          <li class="tight-form-item">Name</li>
+		          <li><!-- <value-select-dropdown></value-select-dropdown> --></li>
+		          <li class="tight-form-item">
+		            <a class="pointer">
+		              <i class="fa fa-pencil"></i>
+		            </a>
+		          </li>
+		        </ul>
+		        <div class="clearfix"></div>
+		      </div>
+		    </div>
+
+		    <ul class="filter-controls-actions">
+		      <li>
+		        <div class="dropdown">
+		          <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
+		            <input class="cr1" id="state-enabled" type="checkbox">
+		            <label for="state-enabled" class="cr1"></label> <span class="caret"></span>
+		          </button>
+		          <ul class="dropdown-menu" role="menu">
+		            <li><a>All</a></li>
+		          </ul>
+		        </div>
+		      </li>
+		      <li>
+		        <div class="dropdown">
+		          <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
+		            Bulk Actions &nbsp; <span class="caret"></span>
+		          </button>
+		          <ul class="dropdown-menu" role="menu">
+		            <li><a>Update notifications</a></li>
+		          </ul>
+		        </div>
+		      </li>
+		      <li>
+		        <span class="filter-controls-actions-selected">0 selected, showing 1 of 1 total</span>
+		      </li>
+		    </ul>
+
+				<table class="filter-table form-inline">
+					<thead>
+						<tr>
+							<th style="width: 48px;"></th>
+							<th>Email</th>
+							<th>Name</th>
+							<th></th>
+						</tr>
+					</thead>
+					<tbody ng-repeat="invite in pendingInvites">
+						<tr ng-click="invite.expanded = !invite.expanded" ng-class="{'expanded': invite.expanded}">
+							<td>
+								<input class="cr1" id="alert1" type="checkbox">
+		            <label for="alert1" class="cr1"></label>
+							</td>
+							<td>{{invite.email}}</td>
+							<td ng-show="invite.name">{{invite.name}}</td>
+							<td class="text-right">
+								<button class="btn btn-inverse btn-mini " data-clipboard-text="{{invite.url}}" clipboard-button ng-click="copyInviteToClipboard($event)"
+									<i class="fa fa-clipboard"></i> Copy Invite
+								</button>
+								&nbsp;
+								<a class="pointer">
+									<i ng-show="!invite.expanded" class="fa fa-caret-right"></i>
+									<i ng-show="invite.expanded" class="fa fa-caret-down"></i>
+								</a>
+							</td>
+						</tr>
+						<tr ng-show="invite.expanded">
+							<td></td>
+							<td colspan="3">
+								<a href="{{invite.url}}">{{invite.url}}</a><br><br>
+								<button class="btn btn-inverse btn-mini">
+									<i class="fa fa-envelope-o"></i> Resend invite
+								</button>
+								&nbsp;
+								<button class="btn btn-inverse btn-mini" ng-click="revokeInvite(invite, $event)">
+									<i class="fa fa-remove" style="color: red"></i> Revoke invite
+								</button>
+								<span style="padding-left: 15px">
+									Invited: <em> {{invite.createdOn | date: 'shortDate'}} by {{invite.invitedBy}} </em>
+								</span>
+							</td>
+						</tr>
+					</tbody>
+				</table>
 			</tab>
 		</tabset>
-
 	</div>
 </div>