Skip to content
This repository has been archived by the owner on Nov 9, 2017. It is now read-only.

Commit

Permalink
HAWKULAR-682
Browse files Browse the repository at this point in the history 
- Updated the code to not show the white blank slate. Juca, can you
verify if it is correct?
- Organization memberships shows a lot of changes because I removed the
top <div class=“row”>. You don’t need to have a div row if you use
col-md-12 right below.
- For the feedback of inviting, should be the same pattern, success
message “Person successfully invited.”
- Updated also the top part (heading breadcrumb) to look like the
console (same code).
  • Loading branch information
@cardosogabriel
cardosogabriel committed Oct 8, 2015
1 parent 2f058ff commit 889c3af
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 86 deletions.
170 changes: 87 additions & 83 deletions console/src/main/scripts/plugins/accounts/html/organization-memberships.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,39 @@
<div class="row">
<div class="col-md-12" ng-controller="HawkularAccounts.OrganizationMembershipController as controller">
<ol class="breadcrumb" ng-show="!controller.loading">
<li><a data-ng-href="/hawkular-ui/organizations">&laquo; All organizations</a></li>
</ol>
<div class="hk-organization-memberships" ng-controller="HawkularAccounts.OrganizationMembershipController as controller">

<h1 class="text-center" ng-show="!controller.loading">{{controller.organization.name}} Members</h1>
<div class="hk-screen-top-nav">
<div class="row hk-top-row" >
<div class="col-xs-6" ng-show="!controller.loading">
<a data-ng-href="/hawkular-ui/organizations">&laquo; All organizations</a>
</div>
</div>
<div class="hk-heading">
<h1 ng-show="!controller.loading">{{controller.organization.name}} Members</h1>
</div>
</div>

<div class="text-right" ng-show="controller.memberships.length && !controller.loading && controller.foundOrganization">
<button
class="btn btn-primary"
type="button"
role="button"
ng-click="controller.showInviteModal()"
ng-show="controller.isAllowedToInvite">
Invite People
</button>
</div>

<div class="text-center hk-spinner-container-alone" ng-show="controller.loading">
<div class="spinner spinner-lg"></div>
<p class="hk-spinner-legend-below">Loading...</p>
</div>

<div class="text-right" ng-show="controller.memberships.length && !controller.loading && controller.foundOrganization">
<div ng-show="!controller.loading && controller.foundOrganization">
<div class="blank-slate-pf" ng-show="!controller.memberships.length">
<div class="blank-slate-pf-icon">
<i class="fa fa-users" id="empty-organizations-icon"></i>
</div>
<!-- <h2>No members for this organization (not even you?). Found organization: {{controller.foundOrganization}}</h2> -->
<h1>No members.</h1>
<button
class="btn btn-primary"
type="button"
Expand All @@ -16,88 +43,65 @@ <h1 class="text-center" ng-show="!controller.loading">{{controller.organization.
Invite People
</button>
</div>
</div>

<div class="text-center hk-spinner-container-alone" ng-show="controller.loading">
<div class="spinner spinner-lg"></div>
<p class="hk-spinner-legend-below">Loading...</p>
</div>

<div class="blank-slate-pf" ng-show="!controller.loading && controller.foundOrganization">
<div ng-show="!controller.memberships.length">
<div class="blank-slate-pf-icon">
<i class="fa fa-users" id="empty-organizations-icon"></i>
</div>
<!-- <h2>No members for this organization (not even you?). Found organization: {{controller.foundOrganization}}</h2> -->
<h1>No members.</h1>
<button
class="btn btn-primary"
type="button"
role="button"
ng-click="controller.showInviteModal()"
ng-show="controller.isAllowedToInvite">
Invite People
</button>
</div>
</div>

<div class="hk-table-container" ng-show="controller.memberships.length">
<table class="table table-bordered hk-table-clean">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="membership in controller.memberships">
<td>{{membership.member.name}}</td>
<td>
<span ng-show="membership.member.id === controller.organization.owner.id">Owner</span>
<div class="hk-table-container" ng-show="controller.memberships.length">
<table class="table table-bordered hk-table-clean">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="membership in controller.memberships">
<td>{{membership.member.name}}</td>
<td>
<span ng-show="membership.member.id === controller.organization.owner.id">Owner</span>

<span ng-show="membership.member.id !== controller.organization.owner.id">
<span ng-show="controller.isAllowedToChangeRoleOfMembers">
<select
ng-model="membership.role"
ng-change="controller.changeRole(membership)"
ng-options="role.name for role in controller.possibleRoles track by role.name"
>
</select>
</span>
<span ng-show="membership.member.id !== controller.organization.owner.id">
<span ng-show="controller.isAllowedToChangeRoleOfMembers">
<select
ng-model="membership.role"
ng-change="controller.changeRole(membership)"
ng-options="role.name for role in controller.possibleRoles track by role.name"
>
</select>
</span>

<span ng-show="!controller.isAllowedToChangeRoleOfMembers">
{{membership.role.name}}
</span>
<span ng-show="!controller.isAllowedToChangeRoleOfMembers">
{{membership.role.name}}
</span>

<span ng-show="controller.membershipsToUpdate[membership.id] === PersistenceState.PERSISTING">
<i class="fa fa-spinner fa-spin"></i>
</span>
<span ng-show="controller.membershipsToUpdate[membership.id] === PersistenceState.SUCCESS">
<i class="fa fa-check"></i>
</span>
<span ng-show="controller.membershipsToUpdate[membership.id] === PersistenceState.ERROR">
<i class="fa fa-exclamation"></i>
</span>
<span ng-show="controller.membershipsToUpdate[membership.id] === PersistenceState.PERSISTING">
<i class="fa fa-spinner fa-spin"></i>
</span>
</td>
</tr>
<tr ng-repeat="invitation in controller.pending" ng-show="controller.isAllowedToListPending">
<td>{{invitation.email}} <span class="label label-default">INVITED</span></td>
<td>{{invitation.role.name}}</td>
</tr>
</tbody>
</table>
</div>
<span ng-show="controller.membershipsToUpdate[membership.id] === PersistenceState.SUCCESS">
<i class="fa fa-check"></i>
</span>
<span ng-show="controller.membershipsToUpdate[membership.id] === PersistenceState.ERROR">
<i class="fa fa-exclamation"></i>
</span>
</span>
</td>
</tr>
<tr ng-repeat="invitation in controller.pending" ng-show="controller.isAllowedToListPending">
<td>{{invitation.email}} <span class="label label-default">INVITED</span></td>
<td>{{invitation.role.name}}</td>
</tr>
</tbody>
</table>
</div>

<div class="blank-slate-pf" ng-show="!controller.loading && !controller.foundOrganization">
<div class="blank-slate-pf-icon">
<i class="fa fa-building-o" id="empty-organizations-icon"></i>
</div>
<h1>Organization not found.</h1>
<p>
The requested organization could not be found. You can try to find it in the <a href="#">organizations list</a>.
</p>
<div class="blank-slate-pf" ng-show="!controller.loading && !controller.foundOrganization">
<div class="blank-slate-pf-icon">
<i class="fa fa-building-o" id="empty-organizations-icon"></i>
</div>

<h1>Organization not found.</h1>
<p>
The requested organization could not be found. You can try to find it in the <a href="#">organizations list</a>.
</p>
</div>
<!-- /col -->

<!-- /col -->
</div>
13 changes: 13 additions & 0 deletions console/src/main/scripts/plugins/accounts/less/accounts.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,3 +75,16 @@ body.inactivity-modal-open #main, body.inactivity-modal-open .navbar, body.inact
.hk-organizations .text-right .btn-primary {
margin-bottom: @grid-gutter-width/4;
}

// Organization memberships screen

.hk-organization-memberships {

.text-right .btn-primary {
margin-bottom: @grid-gutter-width/4;
}

td .label {
margin-left: @grid-gutter-width/4;
}
}
7 changes: 5 additions & 2 deletions console/src/main/scripts/plugins/metrics/less/metrics.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,10 @@ h3 {
}
}

h1, h2 {
font-weight: 100;
}

.hk-spinner-legend-below {
color: @gray-light;
font-size: ceil(@font-size-base + 2);
Expand Down Expand Up @@ -563,8 +567,7 @@ a:hover {
}

.label {
padding: 1px 8px;
border-radius: 3px;
font-size: ceil(@font-size-base - 2);
}

.label-alert {
Expand Down
2 changes: 1 addition & 1 deletion console/src/main/webapp/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<!-- endbower -->
</head>

<body style="background-color: #f5f5f5" class="ng-cloak"> <!-- FIXME: Add CSS rule -->
<body class="ng-cloak">
<nav class="navbar navbar-default navbar-pf" role="navigation">
<div idle-countdown="countdown" ng-init="countdown=30" id="idle">
<strong>You'll be logged out in {{countdown}} second(s).</strong>.
Expand Down

0 comments on commit 889c3af

Please sign in to comment.