IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-08 15:13:30 -06:00
Code Issues 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
public/app/features/org/partials/orgUsers.html
View File

@ -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>
<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 === 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>
<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>

15
public/app/features/styleguide/styleguide.html
View File

@ -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>

6
public/sass/components/_tabbed_view.scss
View File

@ -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%;
}

9
public/sass/components/_tabs.scss
View File

@ -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;
}
}

11
public/sass/layout/_page.scss
View File

@ -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;
}
}