public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux(): combined page header and tab views

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-03-02 16:56:16 +01:00
parent 10db47bf4c
commit 950455bd93
5 changed files with 107 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/org/partials/orgUsers.html
+85 -71
View File
@@ -4,79 +4,93 @@
<div class="page-container"> <div class="page-container">
<div class="page-header"> <div class="page-header">
<h1>Organization users</h1> <h1>Organization users</h1>
<button class="btn btn-success" ng-click="ctrl.openInviteModal()">
<i class="fa fa-plus"></i> <div class="page-header-tabs">
Add or Invite <button class="btn btn-success" ng-click="ctrl.openInviteModal()">
</button> <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>
<tabset> <div ng-if="ctrl.editor.index === 0" class="tab-content">
<tab heading="Users ({{ctrl.users.length}})"> <table class="filter-table form-inline">
<table class="filter-table form-inline"> <thead>
<thead> <tr>
<tr> <th>Login</th>
<th>Login</th> <th>Email</th>
<th>Email</th> <th>Role</th>
<th>Role</th> <th style="width: 34px;"></th>
<th style="width: 34px;"></th> </tr>
</tr> </thead>
</thead> <tr ng-repeat="user in ctrl.users">
<tr ng-repeat="user in ctrl.users"> <td>{{user.login}}</td>
<td>{{user.login}}</td> <td><span class="ellipsis">{{user.email}}</span></td>
<td><span class="ellipsis">{{user.email}}</span></td> <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 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>
</select> </td>
</td> <td>
<td> <a ng-click="ctrl.removeUser(user)" class="btn btn-danger btn-mini">
<a ng-click="ctrl.removeUser(user)" class="btn btn-danger btn-mini"> <i class="fa fa-remove"></i>
<i class="fa fa-remove"></i> </a>
</a> </td>
</td> </tr>
</tr> </table>
</table> </div>
</tab>
<tab heading="Pending Invitations ({{ctrl.pendingInvites.length}})"> <div ng-if="ctrl.editor.index === 1" >
<table class="filter-table form-inline"> <table class="filter-table form-inline">
<thead> <thead>
<tr> <tr>
<th>Email</th> <th>Email</th>
<th>Name</th> <th>Name</th>
<th></th> <th></th>
</tr> </tr>
</thead> </thead>
<tbody ng-repeat="invite in ctrl.pendingInvites"> <tbody ng-repeat="invite in ctrl.pendingInvites">
<tr ng-click="invite.expanded = !invite.expanded" ng-class="{'expanded': invite.expanded}"> <tr ng-click="invite.expanded = !invite.expanded" ng-class="{'expanded': invite.expanded}">
<td>{{invite.email}}</td> <td>{{invite.email}}</td>
<td>{{invite.name}}</td> <td>{{invite.name}}</td>
<td class="text-right"> <td class="text-right">
<button class="btn btn-inverse btn-mini " data-clipboard-text="{{invite.url}}" clipboard-button ng-click="ctrl.copyInviteToClipboard($event)"> <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 <i class="fa fa-clipboard"></i> Copy Invite
</button> </button>
&nbsp; &nbsp;
<button class="btn btn-inverse btn-mini"> <button class="btn btn-inverse btn-mini">
Details Details
<i ng-show="!invite.expanded" class="fa fa-caret-right"></i> <i ng-show="!invite.expanded" class="fa fa-caret-right"></i>
<i ng-show="invite.expanded" class="fa fa-caret-down"></i> <i ng-show="invite.expanded" class="fa fa-caret-down"></i>
</button> </button>
</td> </td>
</tr> </tr>
<tr ng-show="invite.expanded"> <tr ng-show="invite.expanded">
<td colspan="3"> <td colspan="3">
<a href="{{invite.url}}">{{invite.url}}</a><br><br> <a href="{{invite.url}}">{{invite.url}}</a><br><br>
&nbsp; &nbsp;
<button class="btn btn-inverse btn-mini" ng-click="ctrl.revokeInvite(invite, $event)"> <button class="btn btn-inverse btn-mini" ng-click="ctrl.revokeInvite(invite, $event)">
<i class="fa fa-remove" style="color: red"></i> Revoke invite <i class="fa fa-remove" style="color: red"></i> Revoke invite
</button> </button>
<span style="padding-left: 15px"> <span style="padding-left: 15px">
Invited: <em> {{invite.createdOn | date: 'shortDate'}} by {{invite.invitedBy}} </em> Invited: <em> {{invite.createdOn | date: 'shortDate'}} by {{invite.invitedBy}} </em>
</span> </span>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</tab>
</tabset>
</div> </div>
</div> </div>
public/app/features/styleguide/styleguide.html
+9 -6
View File
@@ -13,13 +13,16 @@
<i class="fa fa-refresh"></i> <i class="fa fa-refresh"></i>
Reload Reload
</a> </a>
</div>
<ul class="nav nav-tabs"> <div class="page-header-tabs">
<li ng-repeat="page in ctrl.pages" ng-class="{active: ctrl.page[page]}" class="tab"> <ul class="gf-tabs">
<a href="styleguide/{{page}}">{{page}}</a> <li class="gf-tabs-item" ng-repeat="page in ctrl.pages">
</li> <a class="gf-tabs-link" href="styleguide/{{page}}" ng-class="{active: ctrl.page[page]}">{{page}}</a>
</ul> </li>
</ul>
</div>
</div>
<div class="tab-pane" ng-if="ctrl.page.colors"> <div class="tab-pane" ng-if="ctrl.page.colors">
<ul> <ul>
public/sass/components/_tabbed_view.scss
+3 -3
View File
@@ -25,10 +25,10 @@
} }
.tabbed-view-title { .tabbed-view-title {
margin-left: $spacer*1.5;
float: left; float: left;
font-style: italic; font-style: italic;
padding-top: 0.2rem; padding-top: 0.5rem;
margin: 0 $spacer*1.5 0 $spacer*1.5;
} }
.tabbed-view-close-btn { .tabbed-view-close-btn {
@@ -37,7 +37,7 @@
margin: 0; margin: 0;
background-color: transparent; background-color: transparent;
border: none; border: none;
padding: 8px; padding: $spacer * 0.8;
i { i {
font-size: 120%; font-size: 120%;
} }
public/sass/components/_tabs.scss
+5 -4
View File
@@ -35,7 +35,7 @@
.gf-tabs { .gf-tabs {
@include clearfix(); @include clearfix();
float: left; float: left;
margin: 0.5rem 0 0 2rem; margin: 0.4rem 0 0 0;
} }
.gf-tabs-item { .gf-tabs-item {
@@ -46,10 +46,9 @@
.gf-tabs-link { .gf-tabs-link {
padding: 0.60rem 1rem 0.50rem 1rem; padding: 0.60rem 1rem 0.50rem 1rem;
margin-right: $spacer/2; margin-right: $spacer/2;
line-height: $line-height-base;
border: 1px solid transparent; border: 1px solid transparent;
position: relative; position: relative;
top: 5px; display: block;
@include border-radius(2px 2px 0 0); @include border-radius(2px 2px 0 0);
@@ -63,7 +62,9 @@
&.active:focus { &.active:focus {
@include border-radius(3px); @include border-radius(3px);
border-color: rgba(216, 131, 40, 0.77); border-color: rgba(216, 131, 40, 0.77);
border-bottom: 1px solid $panel-bg; border-bottom: 2px solid $panel-bg;
color: $link-color; color: $link-color;
position: relative;
top: 2px;
} }
} }
public/sass/layout/_page.scss
+5 -6
View File
@@ -36,20 +36,19 @@
} }
.page-header { .page-header {
padding: $spacer 0 $spacer/2 0; padding: $spacer 0 0 0;
margin-bottom: 2rem; margin-bottom: 2rem;
display: flex;
justify-content: flex-end;
align-items: flex-end;
flex-wrap: wrap-reverse;
@include brand-bottom-border(); @include brand-bottom-border();
@include clearfix();
h1 { h1 {
flex-grow: 1; flex-grow: 1;
display: inline-block;
margin-bottom: $spacer*1.5;
} }
button, a { button, a {
float: right;
margin-left: $spacer; margin-left: $spacer;
} }
} }