Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-08-05 05:25:27 +02:00
Code Releases Activity

More UI conversion to new framework

Browse source
This commit is contained in:
Harvey Kandola 2018-05-24 18:09:38 +01:00
parent a453052087
commit 5d757c992f
17 changed files with 442 additions and 416 deletions
Download patch file Download diff file Expand all files Collapse all files

10
gui/app/templates/components/folder/category-admin-sidebar.hbs Normal file
View file

@ -0,0 +1,10 @@
<div class="space-admin">
<h1>Categories</h1>
<p>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">
{{focus-input id="new-category-name" type='text' class="form-control mousetrap" placeholder="Category name" value=newCategory}}
</div>
<button type="button" class="btn btn-success font-weight-bold" onclick={{action 'onAdd'}}>Add</button>
</form>
</div>

175
gui/app/templates/components/folder/category-admin.hbs
View file

@ -1,111 +1,90 @@
<div class="container">
<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">
{{focus-input id="new-category-name" type='text' class="form-control mousetrap" placeholder="Category name" value=newCategory}}
<div class="space-admin">
<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' }} &middot; {{cat.users}} users/groups</div>
</div>
<button type="button" class="btn btn-success" onclick={{action 'onAdd'}}>Add</button>
</form>
</div>
</div>
</div>
<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' }} &middot; {{cat.users}} users/groups</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-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-danger align-middle" data-toggle="tooltip" data-placement="top" title="Delete" {{action 'onShowDelete' cat.id}}>
<i class="material-icons">delete</i>
</div>
{{/if}}
</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-success" {{action 'onSave' cat.id}}>Save</button>
{{else}}
<div class="margin-top-30"><i>No categories</i></div>
{{/each}}
<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-danger 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</i></div>
{{/each}}
</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>
<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 Category Access" confirmCaption="Save" buttonType="btn-success" show=showCategoryAccess onAction=(action 'onGrantAccess')}}
<p>Select who can view documents within category</p>
{{#ui/ui-dialog title="Set Category Access" confirmCaption="Save" buttonType="btn-success" show=showCategoryAccess onAction=(action 'onGrantAccess')}}
<p>Select who can view documents within category</p>
<div class="widget-list-picker">
<ul class="options">
{{#each categoryPermissions as |permission|}}
<li class="option {{if permission.selected 'selected'}}" {{action 'onToggle' permission}}>
<div class="text text-truncate">
{{#if (eq permission.who "role")}}
<div class="widget-list-picker">
<ul class="options">
{{#each categoryPermissions as |permission|}}
<li class="option {{if permission.selected 'selected'}}" {{action 'onToggle' permission}}>
<div class="text text-truncate">
{{#if (eq permission.who "role")}}
<span class="button-icon-gray button-icon-small align-middle">
<i class="material-icons">people</i>
</span>
{{else}}
{{#if (eq permission.whoId constants.EveryoneUserId)}}
<span class="button-icon-gray button-icon-small align-middle">
<i class="material-icons">people</i>
<i class="material-icons">language</i>
</span>
{{else}}
{{#if (eq permission.whoId constants.EveryoneUserId)}}
<span class="button-icon-gray button-icon-small align-middle">
<i class="material-icons">language</i>
</span>
{{else}}
<span class="button-icon-gray button-icon-small align-middle">
<i class="material-icons">person</i>
</span>
{{/if}}
<span class="button-icon-gray button-icon-small align-middle">
<i class="material-icons">person</i>
</span>
{{/if}}
&nbsp;{{permission.name}}
{{#if (eq permission.whoId session.user.id)}}
<small class="form-text text-muted d-inline-block">(you)</small>
{{/if}}
</div>
{{#if permission.selected}}
<i class="material-icons">check</i>
{{/if}}
</li>
{{/each}}
</ul>
</div>
{{/ui/ui-dialog}}
</div>
&nbsp;{{permission.name}}
{{#if (eq permission.whoId session.user.id)}}
<small class="form-text text-muted d-inline-block">(you)</small>
{{/if}}
</div>
{{#if permission.selected}}
<i class="material-icons">check</i>
{{/if}}
</li>
{{/each}}
</ul>
</div>
{{/ui/ui-dialog}}

44
gui/app/templates/components/folder/space-heading.hbs
View file

@ -1,28 +1,20 @@
<div class="container">
<div class="row">
<div class="col">
<div class="mt-4 mb-5">
{{#unless editMode}}
<div class="view-space">
<div class="heading">
<h1 class="view-heading {{if permissions.spaceOwner 'cursor-pointer'}}" onclick={{if permissions.spaceOwner (action 'toggleEdit')}}>
{{space.name}}
</h1>
</div>
</div>
{{else}}
<form {{action "onSave" on="submit"}}>
<div class="view-space">
<div class="heading">
<div class="form-group">
{{focus-input id="space-name" type="text" value=spaceName class=(if hasNameError 'form-control is-invalid' 'form-control') placeholder="Space name" autocomplete="off"}}
<small class="form-text text-muted">Press Enter to save or Escape to cancel</small>
</div>
</div>
</div>
</form>
{{/unless}}
</div>
{{#unless editMode}}
<div class="view-space">
<div class="heading">
<h1 class="view-heading {{if permissions.spaceOwner 'cursor-pointer'}}" onclick={{if permissions.spaceOwner (action 'toggleEdit')}}>
{{space.name}}
</h1>
</div>
</div>
</div>
{{else}}
<form {{action "onSave" on="submit"}}>
<div class="view-space">
<div class="heading">
<div class="form-group">
{{focus-input id="space-name" type="text" value=spaceName class=(if hasNameError 'form-control is-invalid' 'form-control') placeholder="Space name" autocomplete="off"}}
<small class="form-text text-muted">Press Enter to save or Escape to cancel</small>
</div>
</div>
</div>
</form>
{{/unless}}

83
gui/app/templates/components/folder/space-view.hbs
View file

@ -1,52 +1,35 @@
{{folder/space-heading space=space permissions=permissions }}
<div class="container">
<div class="row">
<div class="col-12 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}}
{{/if}}
</ul>
</div>
</div>
<div class="float-left">
<div class="view-space">
<div class="filter-caption mt-4">
{{categories.length}} categories
{{#if hasCategories}}
{{#if spaceSettings}}
&nbsp;&nbsp;{{#link-to 'folder.category' space.id space.slug class="admin-link margin-top-5"}}{{categoryLinkName}}&nbsp;&rarr;{{/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}}&nbsp;&rarr;{{/link-to}}
{{/if}}
{{/unless}}
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
{{folder/documents-list documents=filteredDocs spaces=spaces space=space
templates=templates permissions=permissions
onDeleteDocument=(action 'onDeleteDocument') onMoveDocument=(action 'onMoveDocument')}}
</div>
</div>
<div class="view-space">
<div class="filter-caption mt-4">{{documents.length}} documents</div>
<ul class="tabnav-control tabnav-control-centered w-75">
<li class="tab tab-vertical {{if spaceSelected 'selected'}}" {{action 'onDocumentFilter' 'space' space.id}}>All ({{documents.length}})</li>
{{#if hasCategories}}
{{#if (gt rootDocCount 0)}}
<li class="tab tab-vertical {{if uncategorizedSelected 'selected'}}" {{action 'onDocumentFilter' 'uncategorized' space.id}}>Uncategorized ({{rootDocCount}})</li>
{{/if}}
{{/if}}
</ul>
</div>
<div class="view-space">
<div class="filter-caption mt-5">
{{categories.length}}
{{#if (gt categories.length 1) }}
categories
{{else if (eq categories.length 0) }}
categories
{{else}}
category
{{/if}}
</div>
<ul class="tabnav-control tabnav-control-centered w-75">
{{#each categories as |cat index|}}
<li class="tab tab-vertical {{if cat.selected 'selected'}}" {{action 'onDocumentFilter' 'category' cat.id}}>{{cat.category}} ({{cat.docCount}})</li>
{{/each}}
</ul>
{{#if spaceSettings}}
<div class="text-center {{if (gt categories.length 0) 'mt-4'}}">
{{#link-to 'folder.category' space.id space.slug class="btn btn-secondary font-weight-bold"}}{{categoryLinkName}}{{/link-to}}
</div>
{{/if}}
</div>

219
gui/app/templates/components/toolbar/for-space.hbs
View file

@ -1,11 +1,101 @@
{{#toolbar/t-toolbar}}
<div class="row justify-content-between no-gutters">
{{#toolbar/t-links selectItem="spaces"}}
{{/toolbar/t-links}}
<div class="col-6">
{{#if permissions.documentAdd}}
<div class="btn-group" role="group">
<button id="btnGroupDocument" type="button" class="btn btn-success font-weight-bold dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">+ CONTENT</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDocument">
<a class="dropdown-item" href="#" {{action 'onShowEmptyDocModal'}}>Blank canvas</a>
{{#if hasTemplates}}
<a class="dropdown-item" href="#" {{action 'onShowTemplateDocModal'}}>From template</a>
{{/if}}
<a class="dropdown-item" href="#" {{action 'onShowImportDocModal'}}>Import files</a>
</div>
</div>
<div id="empty-doc-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">Blank Canvas</div>
<div class="modal-body">
<form onsubmit={{action 'onAddEmptyDoc'}}>
<div class="form-group">
<label for="empty-doc-name">Document Name</label>
{{input id="empty-doc-name" type="text" value=emptyDocName placeholder="Enter name" class=(if emptyDocNameError 'form-control mousetrap is-invalid' 'form-control mousetrap') autocomplete="off"}}
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" onclick={{action 'onAddEmptyDoc'}}>Add</button>
</div>
</div>
</div>
</div>
<div id="template-doc-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">From Template</div>
<div class="modal-body">
<form onsubmit={{action 'onAddTemplateDoc'}}>
<div class="form-group">
<label for="template-doc-name">Document Name</label>
{{input id="template-doc-name" type="text" value=templateDocName placeholder="Enter name" class=(if templateDocNameError 'form-control mousetrap is-invalid' 'form-control mousetrap') autocomplete="off"}}
</div>
<div class="widget-list-picker">
<ul class="options">
{{#each templates as |item|}}
<li class="option {{if item.selected 'selected'}}" {{action 'onSelectTemplate' item}}>
<div class="text text-truncate">
{{item.title}}<br/>{{item.description}}
</div>
{{#if item.selected}}
<i class="material-icons">check</i>
{{/if}}
</li>
{{/each}}
</ul>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" onclick={{action 'onAddTemplateDoc'}}>Add</button>
</div>
</div>
</div>
</div>
<div id="import-doc-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">Import Files</div>
<div class="modal-body">
<div class="import-zone">
<button id="import-document-button" type="button" class="btn btn-outline-secondary btn-lg btn-block">
<br/>
Click to select files or drag-drop files
<br/><br/>
.doc, .docx, .md, .markdown
<br/><br/>
</button>
<div class="import-status">
{{#each importStatus as |status|}}
<p>{{status}}</p>
{{/each}}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{{/if}}
</div>
{{#toolbar/t-actions}}
<div class="col-6 text-right">
{{#if spaceSettings}}
<div id="space-settings-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Set permissions">
<div id="space-permissions-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" />
@ -77,34 +167,6 @@
</div>
{{/if}}
{{#if permissions.spaceOwner}}
<div id="space-delete-button" class="button-icon-danger align-middle" data-toggle="tooltip" data-placement="top" title="Delete space">
<i class="material-icons" data-toggle="modal" data-target="#space-delete-modal" data-backdrop="static">delete</i>
</div>
<div class="button-icon-gap" />
<div id="space-delete-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">Space Deletion</div>
<div class="modal-body">
<form onsubmit={{action 'onSpaceDelete'}}>
<p>Are you sure you want to delete this space and all documents?</p>
<div class="form-group">
<label for="delete-space-name">Please type space name to confirm</label>
{{input type='text' id="delete-space-name" class="form-control mousetrap" placeholder="Space name" value=deleteSpaceName}}
<small class="form-text text-muted">This will delete all documents and templates within this space!</small>
</div>
</form>
</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 'onSpaceDelete'}}>Delete</button>
</div>
</div>
</div>
</div>
{{/if}}
{{#if (or permissions.spaceOwner permissions.spaceManage)}}
<div id="space-settings-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Settings">
<i class="material-icons" data-toggle="modal" data-target="#space-settings-modal" data-backdrop="static">settings</i>
@ -158,98 +220,35 @@
<div class="button-icon-gap" />
{{/if}}
{{#if permissions.documentAdd}}
<div class="btn-group" role="group">
<button id="btnGroupDocument" type="button" class="btn btn-success font-weight-bold dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">+ DOCUMENT</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDocument">
<a class="dropdown-item" href="#" {{action 'onShowEmptyDocModal'}}>Empty document</a>
{{#if hasTemplates}}
<a class="dropdown-item" href="#" {{action 'onShowTemplateDocModal'}}>From template</a>
{{/if}}
<a class="dropdown-item" href="#" {{action 'onShowImportDocModal'}}>Import files</a>
</div>
{{#if permissions.spaceOwner}}
<div id="space-delete-button" class="button-icon-danger align-middle" data-toggle="tooltip" data-placement="top" title="Delete space">
<i class="material-icons" data-toggle="modal" data-target="#space-delete-modal" data-backdrop="static">delete</i>
</div>
<div id="empty-doc-modal" class="modal" tabindex="-1" role="dialog">
<div class="button-icon-gap" />
<div id="space-delete-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">Empty Document</div>
<div class="modal-header">Space Deletion</div>
<div class="modal-body">
<form onsubmit={{action 'onAddEmptyDoc'}}>
<form onsubmit={{action 'onSpaceDelete'}}>
<p>Are you sure you want to delete this space and all documents?</p>
<div class="form-group">
<label for="empty-doc-name">Document Name</label>
{{input id="empty-doc-name" type="text" value=emptyDocName placeholder="Enter name" class=(if emptyDocNameError 'form-control mousetrap is-invalid' 'form-control mousetrap') autocomplete="off"}}
<label for="delete-space-name">Please type space name to confirm</label>
{{input type='text' id="delete-space-name" class="form-control mousetrap" placeholder="Space name" value=deleteSpaceName}}
<small class="form-text text-muted">This will delete all documents and templates within this space!</small>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" onclick={{action 'onAddEmptyDoc'}}>Add</button>
</div>
</div>
</div>
</div>
<div id="template-doc-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">Document From Template</div>
<div class="modal-body">
<form onsubmit={{action 'onAddTemplateDoc'}}>
<div class="form-group">
<label for="template-doc-name">Document Name</label>
{{input id="template-doc-name" type="text" value=templateDocName placeholder="Enter name" class=(if templateDocNameError 'form-control mousetrap is-invalid' 'form-control mousetrap') autocomplete="off"}}
</div>
<div class="widget-list-picker">
<ul class="options">
{{#each templates as |item|}}
<li class="option {{if item.selected 'selected'}}" {{action 'onSelectTemplate' item}}>
<div class="text text-truncate">
{{item.title}}<br/>{{item.description}}
</div>
{{#if item.selected}}
<i class="material-icons">check</i>
{{/if}}
</li>
{{/each}}
</ul>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" onclick={{action 'onAddTemplateDoc'}}>Add</button>
</div>
</div>
</div>
</div>
<div id="import-doc-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">Import Documents</div>
<div class="modal-body">
<div class="import-zone">
<button id="import-document-button" type="button" class="btn btn-outline-secondary btn-lg btn-block">
<br/>
Click to select files or drag-drop files
<br/><br/>
.doc, .docx, .md, .markdown
<br/><br/>
</button>
<div class="import-status">
{{#each importStatus as |status|}}
<p>{{status}}</p>
{{/each}}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger" onclick={{action 'onSpaceDelete'}}>Delete</button>
</div>
</div>
</div>
</div>
{{/if}}
{{/toolbar/t-actions}}
{{/toolbar/t-toolbar}}
</div>
</div>
{{folder/permission-admin folders=spaces folder=space onRefresh=onRefresh}}