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

public/app/features/admin/partials/orgs.html

@@ -4,31 +4,84 @@
 	</ul>
 </topnav>
 
-<div class="page-container">
-	<div class="page">
+<div class="page-container" style="background: transparent; border: 0;">
+	<div class="page-wide">
 		<h2>
 			Organizations
 		</h2>
 
-		<table class="grafana-options-table">
-			<tr>
-				<th style="text-align:left">Id</th>
-				<th>Name</th>
-				<th></th>
-			</tr>
-			<tr ng-repeat="org in orgs">
-				<td>{{org.name}}</td>
-				<td style="width: 1%">
-					<a href="admin/orgs/edit/{{org.id}}" class="btn btn-inverse btn-small">
-						<i class="fa fa-edit"></i>
-						Edit
-					</a>
-					&nbsp;&nbsp;
-					<a ng-click="deleteOrg(org)" class="btn btn-danger btn-small">
-						<i class="fa fa-remove"></i>
-					</a>
-				</td>
-			</tr>
+		<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">Id</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>Id</th>
+					<th>Name</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr ng-repeat="org in orgs">
+					<td>
+						<input class="cr1" id="alert1" type="checkbox">
+            <label for="alert1" class="cr1"></label>
+					</td>
+					<td>{{org.name}}</td>
+					<td>
+						<a href="admin/orgs/edit/{{org.id}}" class="btn btn-inverse btn-small">
+							<i class="fa fa-edit"></i>
+							Edit
+						</a>
+						&nbsp;&nbsp;
+						<a ng-click="deleteOrg(org)" class="btn btn-danger btn-small">
+							<i class="fa fa-remove"></i>
+						</a>
+					</td>
+				</tr>
+			</tbody>
 		</table>
 
 	</div>

public/app/features/admin/partials/users.html

@@ -5,38 +5,92 @@
 	</ul>
 </topnav>
 
-<div class="page-container">
-	<div class="page">
+<div class="page-container" style="background: transparent; border: 0;">
+	<div class="page-wide">
 		<h2>
 			Users
 		</h2>
 
-		<table class="grafana-options-table">
-			<tr>
-				<th style="text-align:left">Id</th>
-				<th>Name</th>
-				<th>Login</th>
-				<th>Email</th>
-				<th style="white-space: nowrap">Grafana Admin</th>
-				<th></th>
-			</tr>
-			<tr ng-repeat="user in users">
-				<td>{{user.id}}</td>
-				<td>{{user.name}}</td>
-				<td>{{user.login}}</td>
-				<td>{{user.email}}</td>
-				<td>{{user.isAdmin}}</td>
-				<td style="width: 1%">
-					<a href="admin/users/edit/{{user.id}}" class="btn btn-inverse btn-small">
-						<i class="fa fa-edit"></i>
-						Edit
-					</a>
-					&nbsp;&nbsp;
-					<a ng-click="deleteUser(user)" class="btn btn-danger btn-small">
-						<i class="fa fa-remove"></i>
-					</a>
-				</td>
-			</tr>
+		<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">Id</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>Id</th>
+					<th>Name</th>
+					<th>Login</th>
+					<th>Email</th>
+					<th style="white-space: nowrap">Grafana Admin</th>
+					<th></th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr ng-repeat="user in users">
+					<td>
+						<input class="cr1" id="alert1" type="checkbox">
+            <label for="alert1" class="cr1"></label>
+					</td>
+					<td>{{user.id}}</td>
+					<td>{{user.name}}</td>
+					<td>{{user.login}}</td>
+					<td>{{user.email}}</td>
+					<td>{{user.isAdmin}}</td>
+					<td class="text-right">
+						<a href="admin/users/edit/{{user.id}}" class="btn btn-inverse btn-small">
+							<i class="fa fa-edit"></i>
+							Edit
+						</a>
+						&nbsp;&nbsp;
+						<a ng-click="deleteUser(user)" class="btn btn-danger btn-small">
+							<i class="fa fa-remove"></i>
+						</a>
+					</td>
+				</tr>
+			</tbody>
 		</table>
 	</div>
 </div>

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>
 

public/app/features/profile/partials/profile.html

@@ -5,8 +5,8 @@
 	</ul>
 </topnav>
 
-<div class="page-container">
-	<div class="page">
+<div class="page-container" style="background: transparent; border: 0;">
+	<div class="page-wide">
 
 		<h2>Profile</h2>
 
@@ -62,19 +62,28 @@
 
 		<h3>Organizations</h3>
 
-		<table class="grafana-options-table">
-			<tr ng-repeat="org in orgs">
-				<td style="width: 98%"><strong>Name: </strong> {{org.name}}</td>
-				<td><strong>Role: </strong> {{org.role}}</td>
-				<td class="nobg max-width-btns">
-					<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>
+		<table class="filter-table form-inline">
+			<thead>
+				<tr>
+					<th>Name</th>
+					<th>Role</th>
+					<th></th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr ng-repeat="org in orgs">
+					<td><strong>Name: </strong> {{org.name}}</td>
+					<td><strong>Role: </strong> {{org.role}}</td>
+					<td class="text-right">
+						<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>

public/less/filter-table.less

@@ -13,8 +13,8 @@
 
 .filter-table {
   width: 100%;
-  // table-layout: fixed;
   border-collapse: collapse;
+  table-layout: fixed;
 }
 
 .filter-table tr {
@@ -47,3 +47,11 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.filter-table .expanded {
+  border-color: @grafanaPanelBackground;
+}
+
+.filter-table .expanded > td {
+  padding-bottom: 0;
+}