mirror of
https://github.com/documize/community.git
synced 2025-08-02 20:15:26 +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}}
|
||||
|
|
|
|||
|
|
@ -1,34 +1,43 @@
|
|||
{{folder/space-heading space=space permissions=permissions }}
|
||||
|
||||
{{#if hasCategories}}
|
||||
<div class="clearfix">
|
||||
<div class="float-left mr-5">
|
||||
<div class="view-space">
|
||||
<div class="filter-caption mt-4">{{documents.length}} documents</div>
|
||||
<ul class="tabnav-control">
|
||||
<li class="tab {{if spaceSelected 'selected'}}" {{action 'onDocumentFilter' 'space' space.id}}>All ({{documents.length}})</li>
|
||||
<div class="clearfix">
|
||||
<div class="float-left mr-5">
|
||||
<div class="view-space">
|
||||
<div class="filter-caption mt-4">{{documents.length}} documents</div>
|
||||
<ul class="tabnav-control">
|
||||
<li class="tab {{if spaceSelected 'selected'}}" {{action 'onDocumentFilter' 'space' space.id}}>All ({{documents.length}})</li>
|
||||
{{#if hasCategories}}
|
||||
{{#if (gt rootDocCount 0)}}
|
||||
<li class="tab {{if uncategorizedSelected 'selected'}}" {{action 'onDocumentFilter' 'uncategorized' space.id}}>Uncategorized ({{rootDocCount}})</li>
|
||||
{{/if}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="float-left">
|
||||
<div class="view-space">
|
||||
<div class="filter-caption mt-4">{{categories.length}} categories</div>
|
||||
<ul class="tabnav-control">
|
||||
{{#each categories as |cat index|}}
|
||||
<li class="tab {{if cat.selected 'selected'}}" {{action 'onDocumentFilter' 'category' cat.id}}>{{cat.category}} ({{cat.docCount}})</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
{{/if}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="view-space">
|
||||
<div class="filter-caption">{{documents.length}} documents</div>
|
||||
<div class="float-left">
|
||||
<div class="view-space">
|
||||
<div class="filter-caption mt-4">
|
||||
{{categories.length}} categories
|
||||
{{#if hasCategories}}
|
||||
{{#if spaceSettings}}
|
||||
{{#link-to 'folder.category' space.id space.slug class="admin-link margin-top-5"}}{{categoryLinkName}} →{{/link-to}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<ul class="tabnav-control">
|
||||
{{#each categories as |cat index|}}
|
||||
<li class="tab {{if cat.selected 'selected'}}" {{action 'onDocumentFilter' 'category' cat.id}}>{{cat.category}} ({{cat.docCount}})</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
|
||||
{{#unless hasCategories}}
|
||||
{{#if spaceSettings}}
|
||||
{{#link-to 'folder.category' space.id space.slug class="admin-link margin-top-5"}}{{categoryLinkName}} →{{/link-to}}
|
||||
{{/if}}
|
||||
{{/unless}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{folder/documents-list documents=filteredDocs spaces=spaces space=space
|
||||
templates=templates permissions=permissions
|
||||
|
|
|
|||
|
|
@ -3,24 +3,7 @@
|
|||
{{#link-to "folders" class="link" tagName="li"}}SPACES{{/link-to}}
|
||||
{{/toolbar/t-links}}
|
||||
{{#toolbar/t-actions}}
|
||||
{{#if pinState.isPinned}}
|
||||
<div id="space-pin-button" class="button-icon-gold align-middle" data-toggle="tooltip" data-placement="top" title="Remove favorite" {{action 'onUnpin'}}>
|
||||
<i class="material-icons">star</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
{{else if session.authenticated}}
|
||||
<div id="space-pin-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Save favorite" {{action 'onPin'}}>
|
||||
<i class="material-icons">star</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
{{/if}}
|
||||
|
||||
{{#if spaceSettings}}
|
||||
<div id="space-settings-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Set permissions">
|
||||
<i class="material-icons" data-toggle="modal" data-target="#space-permission-modal" data-backdrop="static">security</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
|
||||
<div id="space-invite-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Invite to space">
|
||||
<i class="material-icons" data-toggle="modal" data-target="#space-invite-modal" data-backdrop="static">person_add</i>
|
||||
</div>
|
||||
|
|
@ -49,6 +32,11 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="space-settings-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Set permissions">
|
||||
<i class="material-icons" data-toggle="modal" data-target="#space-permission-modal" data-backdrop="static">security</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
{{/if}}
|
||||
|
||||
{{#if permissions.spaceOwner}}
|
||||
|
|
@ -79,6 +67,18 @@
|
|||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if pinState.isPinned}}
|
||||
<div id="space-pin-button" class="button-icon-gold align-middle" data-toggle="tooltip" data-placement="top" title="Remove favorite" {{action 'onUnpin'}}>
|
||||
<i class="material-icons">star</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
{{else if session.authenticated}}
|
||||
<div id="space-pin-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Save favorite" {{action 'onPin'}}>
|
||||
<i class="material-icons">star</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
{{/if}}
|
||||
|
||||
{{#if permissions.documentAdd}}
|
||||
<button type="button" class="btn btn-success font-weight-bold" data-toggle="modal" data-target="#add-space-modal" data-backdrop="static">+ DOCUMENT</button>
|
||||
<div id="add-space-modal" class="modal" tabindex="-1" role="dialog">
|
||||
|
|
@ -103,4 +103,4 @@
|
|||
{{/toolbar/t-actions}}
|
||||
{{/toolbar/t-toolbar}}
|
||||
|
||||
{{folder/permission-admin folders=spaces folder=space}}
|
||||
{{folder/permission-admin folders=spaces folder=space}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue