ux(): combined page header and tab views

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

@@ -4,79 +4,93 @@
 <div class="page-container">
 	<div class="page-header">
 		<h1>Organization users</h1>
-		<button class="btn btn-success" ng-click="ctrl.openInviteModal()">
-			<i class="fa fa-plus"></i>
-			Add or Invite
-		</button>
+
+		<div class="page-header-tabs">
+			<button class="btn btn-success" ng-click="ctrl.openInviteModal()">
+				<i class="fa fa-plus"></i>
+				Add or Invite
+			</button>
+
+			<ul class="gf-tabs">
+				<li class="gf-tabs-item">
+					<a class="gf-tabs-link" ng-click="ctrl.editor.index = 0" ng-class="{active: ctrl.editor.index === 0}">
+						Users ({{ctrl.users.length}})
+					</a>
+				</li>
+				<li class="gf-tabs-item">
+					<a class="gf-tabs-link" ng-click="ctrl.editor.index = 1" ng-class="{active: ctrl.editor.index === 1}">
+						Pending Invitations ({{ctrl.pendingInvites.length}})
+					</a>
+				</li>
+			</ul>
+		</div>
+	</div>
+
+	<div ng-if="ctrl.editor.index === 0" class="tab-content">
+		<table class="filter-table form-inline">
+			<thead>
+				<tr>
+					<th>Login</th>
+					<th>Email</th>
+					<th>Role</th>
+					<th style="width: 34px;"></th>
+				</tr>
+			</thead>
+			<tr ng-repeat="user in ctrl.users">
+				<td>{{user.login}}</td>
+				<td><span class="ellipsis">{{user.email}}</span></td>
+				<td>
+					<select type="text" ng-model="user.role" class="input-medium" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="ctrl.updateOrgUser(user)">
+					</select>
+				</td>
+				<td>
+					<a ng-click="ctrl.removeUser(user)" class="btn btn-danger btn-mini">
+						<i class="fa fa-remove"></i>
+					</a>
+				</td>
+			</tr>
+		</table>
 	</div>
 
-		<tabset>
-			<tab heading="Users ({{ctrl.users.length}})">
-				<table class="filter-table form-inline">
-					<thead>
-						<tr>
-							<th>Login</th>
-							<th>Email</th>
-							<th>Role</th>
-							<th style="width: 34px;"></th>
-						</tr>
-					</thead>
-					<tr ng-repeat="user in ctrl.users">
-						<td>{{user.login}}</td>
-						<td><span class="ellipsis">{{user.email}}</span></td>
-						<td>
-							<select type="text" ng-model="user.role" class="input-medium" ng-options="f for f in ['Viewer', 'Editor', 'Read Only Editor', 'Admin']" ng-change="ctrl.updateOrgUser(user)">
-							</select>
-						</td>
-						<td>
-							<a ng-click="ctrl.removeUser(user)" class="btn btn-danger btn-mini">
-								<i class="fa fa-remove"></i>
-							</a>
-						</td>
-					</tr>
-				</table>
-			</tab>
-			<tab heading="Pending Invitations ({{ctrl.pendingInvites.length}})">
-				<table class="filter-table form-inline">
-					<thead>
-						<tr>
-							<th>Email</th>
-							<th>Name</th>
-							<th></th>
-						</tr>
-					</thead>
-					<tbody ng-repeat="invite in ctrl.pendingInvites">
-						<tr ng-click="invite.expanded = !invite.expanded" ng-class="{'expanded': invite.expanded}">
-							<td>{{invite.email}}</td>
-							<td>{{invite.name}}</td>
-							<td class="text-right">
-								<button class="btn btn-inverse btn-mini " data-clipboard-text="{{invite.url}}" clipboard-button ng-click="ctrl.copyInviteToClipboard($event)">
-									<i class="fa fa-clipboard"></i> Copy Invite
-								</button>
-								&nbsp;
-								<button class="btn btn-inverse btn-mini">
-									Details
-									<i ng-show="!invite.expanded" class="fa fa-caret-right"></i>
-									<i ng-show="invite.expanded" class="fa fa-caret-down"></i>
-								</button>
-							</td>
-						</tr>
-						<tr ng-show="invite.expanded">
-							<td colspan="3">
-								<a href="{{invite.url}}">{{invite.url}}</a><br><br>
-								&nbsp;
-								<button class="btn btn-inverse btn-mini" ng-click="ctrl.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 ng-if="ctrl.editor.index === 1" >
+		<table class="filter-table form-inline">
+			<thead>
+				<tr>
+					<th>Email</th>
+					<th>Name</th>
+					<th></th>
+				</tr>
+			</thead>
+			<tbody ng-repeat="invite in ctrl.pendingInvites">
+				<tr ng-click="invite.expanded = !invite.expanded" ng-class="{'expanded': invite.expanded}">
+					<td>{{invite.email}}</td>
+					<td>{{invite.name}}</td>
+					<td class="text-right">
+						<button class="btn btn-inverse btn-mini " data-clipboard-text="{{invite.url}}" clipboard-button ng-click="ctrl.copyInviteToClipboard($event)">
+							<i class="fa fa-clipboard"></i> Copy Invite
+						</button>
+						&nbsp;
+						<button class="btn btn-inverse btn-mini">
+							Details
+							<i ng-show="!invite.expanded" class="fa fa-caret-right"></i>
+							<i ng-show="invite.expanded" class="fa fa-caret-down"></i>
+						</button>
+					</td>
+				</tr>
+				<tr ng-show="invite.expanded">
+					<td colspan="3">
+						<a href="{{invite.url}}">{{invite.url}}</a><br><br>
+						&nbsp;
+						<button class="btn btn-inverse btn-mini" ng-click="ctrl.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>
 
 	</div>
 </div>

public/app/features/styleguide/styleguide.html

@@ -13,13 +13,16 @@
 			<i class="fa fa-refresh"></i>
 			Reload
 		</a>
-	</div>
 
-	<ul class="nav nav-tabs">
-		<li ng-repeat="page in ctrl.pages" ng-class="{active: ctrl.page[page]}" class="tab">
-			<a href="styleguide/{{page}}">{{page}}</a>
-		</li>
-	</ul>
+		<div class="page-header-tabs">
+			<ul class="gf-tabs">
+				<li class="gf-tabs-item" ng-repeat="page in ctrl.pages">
+					<a class="gf-tabs-link" href="styleguide/{{page}}" ng-class="{active: ctrl.page[page]}">{{page}}</a>
+				</li>
+			</ul>
+		</div>
+
+	</div>
 
 	<div class="tab-pane" ng-if="ctrl.page.colors">
 		<ul>

public/sass/components/_tabbed_view.scss

@@ -25,10 +25,10 @@
 }
 
 .tabbed-view-title {
-  margin-left: $spacer*1.5;
   float: left;
   font-style: italic;
-  padding-top: 0.2rem;
+  padding-top: 0.5rem;
+  margin: 0 $spacer*1.5 0 $spacer*1.5;
 }
 
 .tabbed-view-close-btn {
@@ -37,7 +37,7 @@
   margin: 0;
   background-color: transparent;
   border: none;
-  padding: 8px;
+  padding: $spacer * 0.8;
   i {
     font-size: 120%;
   }

public/sass/components/_tabs.scss

@@ -35,7 +35,7 @@
 .gf-tabs {
   @include clearfix();
   float: left;
-  margin: 0.5rem 0 0 2rem;
+  margin: 0.4rem 0 0 0;
 }
 
 .gf-tabs-item {
@@ -46,10 +46,9 @@
 .gf-tabs-link {
   padding: 0.60rem 1rem 0.50rem 1rem;
   margin-right: $spacer/2;
-  line-height: $line-height-base;
   border: 1px solid transparent;
   position: relative;
-  top: 5px;
+  display: block;
 
   @include border-radius(2px 2px 0 0);
 
@@ -63,7 +62,9 @@
   &.active:focus {
     @include border-radius(3px);
     border-color: rgba(216, 131, 40, 0.77);
-    border-bottom: 1px solid $panel-bg;
+    border-bottom: 2px solid $panel-bg;
     color: $link-color;
+    position: relative;
+    top: 2px;
   }
 }

public/sass/layout/_page.scss

@@ -36,20 +36,19 @@
 }
 
 .page-header {
-  padding: $spacer 0 $spacer/2 0;
+  padding: $spacer 0 0 0;
   margin-bottom: 2rem;
-
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-end;
-  flex-wrap: wrap-reverse;
   @include brand-bottom-border();
+  @include clearfix();
 
   h1 {
     flex-grow: 1;
+    display: inline-block;
+    margin-bottom: $spacer*1.5;
   }
 
   button, a {
+    float: right;
     margin-left: $spacer;
   }
 }