mirror of
https://github.com/documize/community.git
synced 2025-08-05 05:25:27 +02:00
new UX for category management
This commit is contained in:
Harvey Kandola
parent
1c08a7fbcf
commit
1f0fc844a8
29 changed files with 287 additions and 397 deletions
|
|
@ -1,74 +1,77 @@
|
|||
<div class="space-settings">
|
||||
<div class="panel">
|
||||
<div class="form-header">
|
||||
<div class="title">Categories</div>
|
||||
<div class="tip">Sub-divide spaces and secure document access with categories</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="space-admin mt-4 mb-5">
|
||||
<h1 class="title">Categories</h1>
|
||||
<p class="sub-title">Sub-divide spaces into categories which can contain documents with restricted access.</p>
|
||||
<form class="form-inline" onsubmit={{action 'onAdd'}}>
|
||||
<div class="form-group mr-3">
|
||||
{{input id="new-category-name" type='text' class="form-control mousetrap" placeholder="Category name" value=newCategory}}
|
||||
</div>
|
||||
<button type="button" class="btn btn-success" onclick={{action 'onAdd'}}>Add</button>
|
||||
</form>
|
||||
</div>
|
||||
<form id="category-form" {{action 'onAdd' on='submit'}}>
|
||||
<div class="input-control">
|
||||
<div class="category-table">
|
||||
{{#each category as |cat|}}
|
||||
<div class="row">
|
||||
{{#if cat.editMode}}
|
||||
<div class="input-control input-transparent width-60">
|
||||
{{focus-input id=(concat 'edit-category-' cat.id) type="text" value=cat.category class="input-inline"}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="category">
|
||||
<div class="name">{{cat.category}}</div>
|
||||
<div class="info">
|
||||
{{cat.documents}} {{if (eq cat.documents 1) 'document' 'documents' }}, {{cat.users}} {{if (eq cat.users 1) 'person' 'people' }}</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="pull-right buttons">
|
||||
{{#if cat.editMode}}
|
||||
<button type="submit" class="round-button-mono" {{action 'onSave' cat.id}}>
|
||||
<i class="material-icons color-green">check</i>
|
||||
</button>
|
||||
<div class="round-button-mono" {{action 'onEditCancel' cat.id}}>
|
||||
<i class="material-icons color-gray">close</i>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="">
|
||||
<div id="category-access-button-{{cat.id}}" data-tooltip="Set user access" data-tooltip-position="top center" class="action round-button-mono button-white" {{action 'onShowAccessPicker' cat.id}}>
|
||||
<i class="material-icons">person</i>
|
||||
</div>
|
||||
<div {{action 'onEdit' cat.id}} class="action round-button-mono button-white">
|
||||
<i class="material-icons">edit</i>
|
||||
</div>
|
||||
<div id="{{concat 'delete-category-' cat.id}}" class="action round-button-mono button-white">
|
||||
<i class="material-icons">delete</i>
|
||||
</div>
|
||||
{{#dropdown-dialog target=(concat 'delete-category-' cat.id) position="bottom right" button="Delete" color="flat-red" onAction=(action 'onDelete' cat.id)}}
|
||||
<p>Are you sure you want to delete category <b>{{cat.category}}?</b></p>
|
||||
{{/dropdown-dialog}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="margin-top-30"><i>No categories defined yet</i></div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="input-control margin-top-50 width-60">
|
||||
<label>Add Category</label>
|
||||
<div class="tip">Provide a short name</div>
|
||||
{{focus-input id="new-category-name" type="text" value=newCategory}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="regular-button button-blue" {{action 'onAdd'}}>add</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-dialog category-access-dialog">
|
||||
<div class="content">
|
||||
<p class="heading">Select who can view documents within category</p>
|
||||
{{ui/ui-list-picker items=categoryUsers nameField='fullname'}}
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="space-admin mt-4 mb-5">
|
||||
<div class="categories">
|
||||
{{#each category as |cat|}}
|
||||
<div class="item row">
|
||||
{{#if cat.editMode}}
|
||||
<form onsubmit={{action 'onSave' cat.id bubbles=false}} class="col-8">
|
||||
{{focus-input id=(concat 'edit-category-' cat.id) type="text" value=cat.category class="form-control"}}
|
||||
</form>
|
||||
{{else}}
|
||||
<div class="category col-8">
|
||||
<div class="name">{{cat.category}}</div>
|
||||
<div class="info">{{cat.documents}} {{if (eq cat.documents 1) 'document' 'documents' }}, {{cat.users}} {{if (eq cat.users 1) 'person' 'people' }}</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="col-4 buttons text-right">
|
||||
{{#if cat.editMode}}
|
||||
<button type="button" class="btn btn-outline-secondary" {{action 'onEditCancel' cat.id}}>Cancel</button>
|
||||
<button type="button" class="btn btn-outline-success" {{action 'onSave' cat.id}}>Save</button>
|
||||
{{else}}
|
||||
<div id="category-access-button-{{cat.id}}" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Category access" {{action 'onShowAccessPicker' cat.id}}>
|
||||
<i class="material-icons">security</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
<div class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Rename" {{action 'onEdit' cat.id}} >
|
||||
<i class="material-icons">edit</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
<div id="{{concat 'delete-category-' cat.id}}" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Delete" {{action 'onShowDelete' cat.id}}>
|
||||
<i class="material-icons">delete</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="margin-top-30"><i>No categories defined yet</i></div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="flat-button" {{action 'onGrantCancel'}}>cancel</div>
|
||||
<div class="flat-button flat-blue" {{action 'onGrantAccess'}}>set access</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
<div id="category-delete-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Category Deletion</div>
|
||||
<div class="modal-body">
|
||||
<p>Are you sure you want to delete this category?</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
|
||||
<button type="button" class="btn btn-danger" onclick={{action 'onDelete'}}>Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#ui/ui-dialog title="Set Cateogory Access" confirmCaption="Save" buttonType="btn-outline-success" show=showCategoryAccess onAction=(action 'onGrantAccess')}}
|
||||
<p>Select who can view documents within category</p>
|
||||
{{ui/ui-list-picker items=categoryUsers nameField='fullname' singleSelect=false}}
|
||||
{{/ui/ui-dialog}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue