mirror of
https://github.com/documize/community.git
synced 2025-08-02 03:55:24 +02:00
Bring new UX to each admin view
This commit is contained in:
Harvey Kandola
parent
ff1d737c68
commit
edb256e754
26 changed files with 357 additions and 324 deletions
|
|
@ -1,213 +1,196 @@
|
|||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="view-customize">
|
||||
{{ui/ui-button color=constants.Color.Green light=true icon=constants.Icon.People label=constants.Label.Add onClick=(action "onShowAddGroupModal")}}
|
||||
{{ui/ui-spacer size=300}}
|
||||
<div id="add-group-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Add Group</div>
|
||||
<div class="modal-body">
|
||||
<form onsubmit= {{action "onAddGroup"}}>
|
||||
<div class="form-group">
|
||||
<label for="new-group-name">Name</label>
|
||||
{{focus-input id="new-group-name" type="text" class="form-control mousetrap" placeholder="Enter group name" value=newGroup.name}}
|
||||
<small class="form-text text-muted">e.g. Managers, Developers, Acme Team</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-group-desc">Description (optional)</label>
|
||||
{{textarea id="new-group-desc" value=newGroup.purpose class="form-control" rows="3"}}
|
||||
</div>
|
||||
</form>
|
||||
<div class="view-customize">
|
||||
{{ui/ui-button color=constants.Color.Green light=true icon=constants.Icon.People label=constants.Label.Add onClick=(action "onShowAddGroupModal")}}
|
||||
<div id="add-group-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Add Group</div>
|
||||
<div class="modal-body">
|
||||
<form onsubmit= {{action "onAddGroup"}}>
|
||||
<div class="form-group">
|
||||
<label for="new-group-name">Name</label>
|
||||
{{focus-input id="new-group-name" type="text" class="form-control mousetrap" placeholder="Enter group name" value=newGroup.name}}
|
||||
<small class="form-text text-muted">e.g. Managers, Developers, Acme Team</small>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
|
||||
{{ui/ui-button-gap}}
|
||||
{{ui/ui-button color=constants.Color.Red light=true label=constants.Label.Add onClick=(action "onAddGroup")}}
|
||||
<div class="form-group">
|
||||
<label for="new-group-desc">Description (optional)</label>
|
||||
{{textarea id="new-group-desc" value=newGroup.purpose class="form-control" rows="3"}}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
|
||||
{{ui/ui-button-gap}}
|
||||
{{ui/ui-button color=constants.Color.Red light=true label=constants.Label.Add onClick=(action "onAddGroup")}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Put these as cards with nice action CTAs</p>
|
||||
<div class="groups-list">
|
||||
{{#each groups as |group|}}
|
||||
<div class="row group">
|
||||
<div class="col-8">
|
||||
<div class="name">
|
||||
{{group.name}} ({{group.members}})
|
||||
{{#if group.purpose}}
|
||||
<div class="purpose">{{group.purpose}}</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 buttons text-right">
|
||||
<button class="btn btn-primary" {{action "onShowAddMemberModal" group.id}}>Add Member</button>
|
||||
{{#if (gt group.members 0)}}
|
||||
<div class="button-icon-gap" />
|
||||
<button class="btn btn-danger" {{action "onShowRemoveMemberModal" group.id}}>Remove Member</button>
|
||||
{{/if}}
|
||||
<div class="button-icon-gap" />
|
||||
<div class="button-icon-gray align-middle" {{action "onShowEditModal" group.id}}>
|
||||
<i class="material-icons">edit</i>
|
||||
{{#attach-tooltip showDelay=1000}}Edit group{{/attach-tooltip}}
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
<div class="button-icon-danger align-middle" {{action "onShowDeleteModal" group.id}}>
|
||||
<i class="material-icons">delete</i>
|
||||
{{#attach-tooltip showDelay=1000}}Delete group{{/attach-tooltip}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="margin-top-30">
|
||||
<i>No groups</i>
|
||||
</div>
|
||||
{{/each}}
|
||||
{{ui/ui-spacer size=300}}
|
||||
|
||||
<div class="groups-list">
|
||||
{{#each groups as |group|}}
|
||||
<div class="group">
|
||||
<div class="name">
|
||||
{{group.name}} ({{group.members}})
|
||||
</div>
|
||||
<div class="desc">{{group.purpose}}</div>
|
||||
{{ui/ui-spacer size=200}}
|
||||
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.AddUser color=constants.Color.Gray tooltip="Add members" onClick=(action "onShowAddMemberModal" group.id)}}
|
||||
{{#if (gt group.members 0)}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.RemoveUser color=constants.Color.Gray tooltip="Remove members" onClick=(action "onShowRemoveMemberModal" group.id)}}
|
||||
{{/if}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.Edit color=constants.Color.Gray tooltip="Edit group" onClick=(action "onShowEditModal" group.id)}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red tooltip="Delete group" onClick=(action "onShowDeleteModal" group.id)}}
|
||||
{{/ui/ui-toolbar}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
<div id="delete-group-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Delete Group</div>
|
||||
<div class="modal-body">
|
||||
<form onsubmit= {{action "onDeleteGroup"}}>
|
||||
<p>Are you sure you want to delete this group?</p>
|
||||
<div class="form-group">
|
||||
<label for="delete-group-name">Please type group name to confirm</label>
|
||||
{{input id="delete-group-name" type="text" class="form-control mousetrap" placeholder="Group name" value=deleteGroup.name}}
|
||||
<small class="form-text text-muted">This will remove group membership information and associated permissions!</small>
|
||||
</div>
|
||||
</form>
|
||||
<div id="delete-group-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Delete Group</div>
|
||||
<div class="modal-body">
|
||||
<form onsubmit= {{action "onDeleteGroup"}}>
|
||||
<p>Are you sure you want to delete this group?</p>
|
||||
<div class="form-group">
|
||||
<label for="delete-group-name">Please type group name to confirm</label>
|
||||
{{input id="delete-group-name" type="text" class="form-control mousetrap" placeholder="Group name" value=deleteGroup.name}}
|
||||
<small class="form-text text-muted">This will remove group membership information and associated permissions!</small>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
|
||||
{{ui/ui-button-gap}}
|
||||
{{ui/ui-button color=constants.Color.Red light=true label=constants.Label.Delete onClick=(action "onDeleteGroup")}}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
|
||||
{{ui/ui-button-gap}}
|
||||
{{ui/ui-button color=constants.Color.Red light=true label=constants.Label.Delete onClick=(action "onDeleteGroup")}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="edit-group-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Edit Group</div>
|
||||
<div class="modal-body">
|
||||
<form onsubmit= {{action "onEditGroup"}}>
|
||||
<div class="form-group">
|
||||
<label for="edit-group-name">Name</label>
|
||||
{{input id="edit-group-name" type="text" class="form-control mousetrap" placeholder="Enter group name" value=editGroup.name}}
|
||||
<small class="form-text text-muted">e.g. Managers, Developers, Acme Team</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="edit-group-desc">Description (optional)</label>
|
||||
{{textarea id="edit-group-desc" value=editGroup.purpose class="form-control" rows="3"}}
|
||||
</div>
|
||||
</form>
|
||||
<div id="edit-group-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Edit Group</div>
|
||||
<div class="modal-body">
|
||||
<form onsubmit= {{action "onEditGroup"}}>
|
||||
<div class="form-group">
|
||||
<label for="edit-group-name">Name</label>
|
||||
{{input id="edit-group-name" type="text" class="form-control mousetrap" placeholder="Enter group name" value=editGroup.name}}
|
||||
<small class="form-text text-muted">e.g. Managers, Developers, Acme Team</small>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
|
||||
{{ui/ui-button-gap}}
|
||||
{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Save onClick=(action "onEditGroup")}}
|
||||
<div class="form-group">
|
||||
<label for="edit-group-desc">Description (optional)</label>
|
||||
{{textarea id="edit-group-desc" value=editGroup.purpose class="form-control" rows="3"}}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
|
||||
{{ui/ui-button-gap}}
|
||||
{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Save onClick=(action "onEditGroup")}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="group-remove-member-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Remove Member — {{membersGroup.name}} ({{members.length}})</div>
|
||||
<div class="modal-body">
|
||||
<div class="view-customize">
|
||||
<div class="group-users-members my-5">
|
||||
{{#each members as |member|}}
|
||||
<div class="row item">
|
||||
<div class="col-10 fullname">{{member.fullname}}</div>
|
||||
<div class="col-2 text-right">
|
||||
<button class="btn btn-danger" {{action "onLeaveGroup" member.userId}}>Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="group-add-member-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Add Member — {{membersGroup.name}} ({{members.length}})</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="group-members-search">Search users to join this group</label>
|
||||
{{input id="group-members-search" type="text" class="form-control mousetrap" placeholder="Search members and users..." value=searchText key-up=(action "onSearch")}}
|
||||
<small class="form-text text-muted">search firstname, lastname, email</small>
|
||||
</div>
|
||||
<div class="view-customize">
|
||||
<div class="text-center">
|
||||
<div class="btn-group btn-group-toggle">
|
||||
{{#attach-tooltip showDelay=1000}}Number of users to display{{/attach-tooltip}}
|
||||
<label class="btn btn-outline-secondary {{if (eq userLimit 1) "active"}}">
|
||||
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 1}}>1
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary {{if (eq userLimit 10) "active"}}">
|
||||
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 10}}>10
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary {{if (eq userLimit 25) "active"}}">
|
||||
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 25}}>25
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary {{if (eq userLimit 50) "active"}}">
|
||||
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 50}}>50
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary {{if (eq userLimit 100) "active"}}">
|
||||
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 100}}>100
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary {{if (eq userLimit 250) "active"}}">
|
||||
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 250}}>250
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary {{if (eq userLimit 500) "active"}}">
|
||||
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 500}}>500
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary {{if (eq userLimit 1000) "active"}}">
|
||||
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 1000}}>1,000
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary {{if (eq userLimit 99999) "active"}}">
|
||||
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 99999}}>all
|
||||
</label>
|
||||
<div id="group-remove-member-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Remove Member — {{membersGroup.name}} ({{members.length}})</div>
|
||||
<div class="modal-body">
|
||||
<div class="view-customize">
|
||||
<div class="group-users-members my-5">
|
||||
{{#each members as |member|}}
|
||||
<div class="row item">
|
||||
<div class="col-10 fullname">{{member.fullname}}</div>
|
||||
<div class="col-2 text-right">
|
||||
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.RemoveUser color=constants.Color.Red tooltip="Remove member" onClick=(action "onLeaveGroup" member.userId)}}
|
||||
{{/ui/ui-toolbar}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix" />
|
||||
|
||||
<div class="group-users-members my-5">
|
||||
{{#each users as |user|}}
|
||||
<div class="row item">
|
||||
<div class="col-10 fullname">{{user.firstname}} {{user.lastname}}</div>
|
||||
<div class="col-2 text-right">
|
||||
{{#if user.isMember}}
|
||||
<button class="btn btn-danger" {{action "onLeaveGroup" user.id}}>Remove</button>
|
||||
{{else}}
|
||||
<button class="btn btn-success" {{action "onJoinGroup" user.id}}>Add</button>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="group-add-member-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Add Member — {{membersGroup.name}} ({{members.length}})</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<label for="group-members-search">Search users to join this group</label>
|
||||
{{input id="group-members-search" type="text" class="form-control mousetrap" placeholder="Search members and users..." value=searchText key-up=(action "onSearch")}}
|
||||
<small class="form-text text-muted">search firstname, lastname, email</small>
|
||||
</div>
|
||||
<div class="view-customize">
|
||||
<div class="text-center">
|
||||
<div class="btn-group btn-group-toggle">
|
||||
{{#attach-tooltip showDelay=1000}}Number of users to display{{/attach-tooltip}}
|
||||
<label class="btn btn-outline-secondary {{if (eq userLimit 1) "active"}}">
|
||||
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 1}}>1
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary {{if (eq userLimit 10) "active"}}">
|
||||
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 10}}>10
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary {{if (eq userLimit 25) "active"}}">
|
||||
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 25}}>25
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary {{if (eq userLimit 50) "active"}}">
|
||||
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 50}}>50
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary {{if (eq userLimit 100) "active"}}">
|
||||
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 100}}>100
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary {{if (eq userLimit 250) "active"}}">
|
||||
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 250}}>250
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary {{if (eq userLimit 500) "active"}}">
|
||||
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 500}}>500
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary {{if (eq userLimit 1000) "active"}}">
|
||||
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 1000}}>1,000
|
||||
</label>
|
||||
<label class="btn btn-outline-secondary {{if (eq userLimit 99999) "active"}}">
|
||||
<input type="radio" name="options" autocomplete="off" {{action "onLimit" 99999}}>all
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix" />
|
||||
|
||||
<div class="group-users-members my-5">
|
||||
{{#each users as |user|}}
|
||||
<div class="row item">
|
||||
<div class="col-10 fullname">{{user.firstname}} {{user.lastname}}</div>
|
||||
<div class="col-2 text-right">
|
||||
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
|
||||
{{#if user.isMember}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.RemoveUser color=constants.Color.Red tooltip="Remove member" onClick=(action "onLeaveGroup" user.id)}}
|
||||
{{else}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.AddUser color=constants.Color.Green tooltip="Add member" onClick=(action "onJoinGroup" user.id)}}
|
||||
{{/if}}
|
||||
{{/ui/ui-toolbar}}
|
||||
</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Close dismiss=true}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue