Better UX for managing teams

- Moves the add team member to an inline box, rather than a popup
- Feedback bar is now used to show when a member is added, invited or removed
- Fixes bugs around using the view on mobile

Fixes #1509
This commit is contained in:
Joseph Schorr 2016-09-15 16:06:56 -04:00
parent 949ceae4eb
commit b272771147
6 changed files with 69 additions and 51 deletions

View file

@ -16,27 +16,25 @@
</div>
<div class="co-main-content-panel">
<div class="team-view-header">
<div ng-show="canEditMembers" class="side-controls">
<div class="hidden-xs">
<button class="btn btn-primary"
id="showAddMember"
data-title="Add Team Member"
data-content-template="/static/directives/team-view-add.html"
data-placement="bottom-right"
bs-popover="bs-popover">
<i class="fa fa-plus"></i>
Add Team Member
</button>
</div>
</div>
<div class="feedback-bar" feedback="feedback"></div>
<!-- Description -->
<div class="section-header">Team Description</div>
<div class="team-view-header">
<div class="description markdown-input" content="team.description"
can-write="organization.is_admin"
content-changed="updateForDescription"
field-title="'team description'"></div>
</div>
<!-- Members -->
<div ng-show="canEditMembers" style="float:right; margin-top: 10px;">
<div class="hidden-xs">
<div ng-include="'/static/directives/team-view-add.html'" style="max-width: 500px;"></div>
</div>
</div>
<div class="section-header">Team Members</div>
<div class="empty" ng-if="!members.length">
<div class="empty-primary-msg">This team has no members.</div>
<div class="empty-secondary-msg">
@ -57,7 +55,7 @@
<span class="entity-reference" entity="member" namespace="organization.name"
show-avatar="true" avatar-size="24"></span>
</td>
<td>
<td class="options-col">
<span class="cor-options-menu" ng-if="canEditMembers">
<span class="cor-option" option-click="removeMember(member.name)">
<i class="fa fa-times"></i> Remove {{ member.name }}
@ -77,7 +75,7 @@
<td class="user entity">
<span class="entity-reference" entity="member" namespace="organization.name"></span>
</td>
<td>
<td class="options-col">
<span class="cor-options-menu" ng-if="canEditMembers">
<span class="cor-option" option-click="removeMember(member.name)">
<i class="fa fa-times"></i> Remove {{ member.name }}
@ -103,7 +101,7 @@
{{ member.email }}
</span>
</td>
<td>
<td class="options-col">
<span class="cor-options-menu" ng-if="canEditMembers">
<span class="cor-option" option-click="revokeInvite(member)">
<i class="fa fa-times"></i> Revoke invite
@ -113,12 +111,13 @@
</tr>
</table>
<!-- Add team member (mobile) -->
<div ng-show="canEditMembers">
<div ng-if-media="'(max-width: 767px)'">
<div ng-include="'/static/directives/team-view-add.html'"></div>
<div class="visible-xs" style="margin-top: 20px; padding-top: 10px; border-top: 1px solid #eee;">
<div class="section-header">Add team member</div>
<div ng-include="'/static/directives/team-view-add.html'" style="max-width: 500px;"></div>
</div>
</div>
</div>
</div>
</div>