mirror of
https://github.com/documize/community.git
synced 2025-08-04 21:15:24 +02:00
WIP new document UX/UI
This commit is contained in:
Harvey Kandola
parent
21ba55a58f
commit
36be6243ad
23 changed files with 910 additions and 4231 deletions
|
|
@ -1,46 +1,47 @@
|
|||
{{#unless emptyState}}
|
||||
<div id="doc-toc" class="document-toc {{if isDesktop 'document-toc-desktop'}}">
|
||||
<div class="header">
|
||||
<div class="title">Contents</div>
|
||||
{{#if canEdit}}
|
||||
<div id="tocToolbar" class="toc-controls {{if state.actionablePage 'current-page'}}">
|
||||
<div id="toc-up-button" class="button-icon-green button-icon-small {{if state.upDisabled 'disabled'}}" {{action 'pageUp'}}>
|
||||
<i class="material-icons">arrow_upward</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
<div id="toc-down-button" class="button-icon-green button-icon-small {{if state.downDisabled 'disabled'}}" {{action 'pageDown'}}>
|
||||
<i class="material-icons">arrow_downward</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
<div id="toc-outdent-button" class="button-icon-green button-icon-small {{if state.outdentDisabled 'disabled'}}" {{action 'pageOutdent'}}>
|
||||
<i class="material-icons">arrow_back</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
<div id="toc-indent-button" class="button-icon-green button-icon-small {{if state.indentDisabled 'disabled'}}" {{action 'pageIndent'}}>
|
||||
<i class="material-icons">arrow_forward</i>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div id="sidebar" class="document-sidebar">
|
||||
<div id="doc-toc" class="document-toc {{if isDesktop 'document-toc-desktop'}}">
|
||||
<div class="header">
|
||||
{{#if canEdit}}
|
||||
<div id="tocToolbar" class="toc-controls {{if state.actionablePage 'current-page'}}">
|
||||
<div id="toc-up-button" class="button-icon-green button-icon-small {{if state.upDisabled 'disabled'}}" {{action 'pageUp'}}>
|
||||
<i class="material-icons">arrow_upward</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
<div id="toc-down-button" class="button-icon-green button-icon-small {{if state.downDisabled 'disabled'}}" {{action 'pageDown'}}>
|
||||
<i class="material-icons">arrow_downward</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
<div id="toc-outdent-button" class="button-icon-green button-icon-small {{if state.outdentDisabled 'disabled'}}" {{action 'pageOutdent'}}>
|
||||
<i class="material-icons">arrow_back</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
<div id="toc-indent-button" class="button-icon-green button-icon-small {{if state.indentDisabled 'disabled'}}" {{action 'pageIndent'}}>
|
||||
<i class="material-icons">arrow_forward</i>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<ul class="index-list">
|
||||
{{#each pages key="id" as |item index|}}
|
||||
<li class="item">
|
||||
<a id="index-{{item.page.id}}" {{action 'onGotoPage' item.page.id}}
|
||||
class="link toc-index-item {{item.page.tocIndentCss}} {{if (eq item.page.id state.pageId) 'selected'}}">
|
||||
<span class="numbering">{{item.page.numbering}}</span>
|
||||
{{#if (or item.userHasChangePending userHasNewPagePending)}}
|
||||
<span class="color-red" title="Pending approval" data-toggle="tooltip" data-placement="top">[*] </span>
|
||||
{{/if}}
|
||||
{{#if (or permissions.documentApprove roles.documentApprove)}}
|
||||
{{#if item.changeAwaitingReview}}
|
||||
<span class="color-green" title="Awaiting approval" data-toggle="tooltip" data-placement="top">[*] </span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{item.page.title}}
|
||||
</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="index-list">
|
||||
{{#each pages key="id" as |item index|}}
|
||||
<li class="item">
|
||||
<a id="index-{{item.page.id}}" {{action 'onGotoPage' item.page.id}}
|
||||
class="link toc-index-item {{item.page.tocIndentCss}} {{if (eq item.page.id state.pageId) 'selected'}}">
|
||||
<span class="numbering">{{item.page.numbering}}</span>
|
||||
{{#if (or item.userHasChangePending userHasNewPagePending)}}
|
||||
<span class="color-red" title="Pending approval" data-toggle="tooltip" data-placement="top">[*] </span>
|
||||
{{/if}}
|
||||
{{#if (or permissions.documentApprove roles.documentApprove)}}
|
||||
{{#if item.changeAwaitingReview}}
|
||||
<span class="color-green" title="Awaiting approval" data-toggle="tooltip" data-placement="top">[*] </span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{item.page.title}}
|
||||
</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{/unless}}
|
||||
|
|
@ -8,8 +8,10 @@
|
|||
<span class="file">{{ a.filename }}</span>
|
||||
</a>
|
||||
{{#if canEdit}}
|
||||
<div class="button-icon-danger align-middle action" {{action 'onShowDialog' a.id a.filename}}>
|
||||
<i class="material-icons">delete</i>
|
||||
<div class="delete">
|
||||
<div class="button-icon-danger align-middle action" {{action 'onShowDialog' a.id a.filename}}>
|
||||
<i class="material-icons">delete</i>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,131 +1,115 @@
|
|||
{{#if hasPages}}
|
||||
{{#each pages key="id" as |item index|}}
|
||||
{{#if canEdit}}
|
||||
<div class="start-section" data-index={{index}} data-before-id={{item.page.id}} id="add-section-button-{{item.page.id}}" {{action 'onShowSectionWizard' item.page}}>
|
||||
<div class="start-button">
|
||||
<div class="cta">+ SECTION</div>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="section-divider" />
|
||||
{{/if}}
|
||||
|
||||
{{document/document-page document=document folder=folder page=item.page meta=item.meta pending=item.pending
|
||||
permissions=permissions toEdit=toEdit roles=roles blocks=blocks
|
||||
onSavePage=(action 'onSavePage') onSavePageAsBlock=(action 'onSavePageAsBlock')
|
||||
onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage') refresh=(action refresh)}}
|
||||
{{/each}}
|
||||
|
||||
{{#if canEdit}}
|
||||
<div class="start-section" data-index="0" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}>
|
||||
<div class="start-button">
|
||||
<div class="cta">+ SECTION</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if showLikes}}
|
||||
<div class=" d-flex justify-content-center">
|
||||
<div class="vote-box">
|
||||
{{#unless voteThanks}}
|
||||
<div class="prompt">
|
||||
{{folder.likes}}
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button type="button" class="btn btn-outline-success font-weight-bold" {{action 'onVote' 1}}>Yes, thanks!</button>
|
||||
<button type="button" class="btn btn-outline-secondary font-weight-bold" {{action 'onVote' 2}}>Not really</button>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="ack">Thanks for the feedback!</div>
|
||||
{{/unless}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{#unless hasPages}}
|
||||
{{#if canEdit}}
|
||||
<div class="start-section" data-index="-1" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}>
|
||||
<div class="start-button">
|
||||
<div class="cta">+ SECTION</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/unless}}
|
||||
|
||||
{{#if hasPages}} {{#each pages key="id" as |item index|}} {{#if canEdit}}
|
||||
<div class="start-section" data-index={{index}} data-before-id={{item.page.id}} id="add-section-button-{{item.page.id}}"
|
||||
{{action 'onShowSectionWizard' item.page}}>
|
||||
<div class="start-button">
|
||||
<div class="cta">+ SECTION</div>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="section-divider" /> {{/if}} {{document/document-page document=document folder=folder page=item.page meta=item.meta pending=item.pending permissions=permissions
|
||||
toEdit=toEdit roles=roles blocks=blocks onSavePage=(action 'onSavePage') onSavePageAsBlock=(action 'onSavePageAsBlock') onCopyPage=(action
|
||||
'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage') refresh=(action refresh)}} {{/each}}
|
||||
{{#if canEdit}}
|
||||
<div id="wizard-placeholder" class="hide margin-top-50" />
|
||||
<div id="new-section-wizard" class="new-section-wizard">
|
||||
<div class="container box">
|
||||
<div class="row clearfix">
|
||||
<div class="col-12 clearfix">
|
||||
<div class="float-right mb-5">
|
||||
<button type="button" class="btn btn-secondary" {{action 'onHideSectionWizard'}}>Close</button>
|
||||
</div>
|
||||
<div class="start-section" data-index="0" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}>
|
||||
<div class="start-button">
|
||||
<div class="cta">+ SECTION</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}} {{#if showLikes}}
|
||||
<div class=" d-flex justify-content-center">
|
||||
<div class="vote-box">
|
||||
{{#unless voteThanks}}
|
||||
<div class="prompt">
|
||||
{{folder.likes}}
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button type="button" class="btn btn-outline-success font-weight-bold" {{action 'onVote' 1}}>Yes, thanks!</button>
|
||||
<button type="button" class="btn btn-outline-secondary font-weight-bold" {{action 'onVote' 2}}>Not really</button>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="ack">Thanks for the feedback!</div>
|
||||
{{/unless}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}} {{/if}} {{#unless hasPages}} {{#if canEdit}}
|
||||
<div class="start-section" data-index="-1" data-before-id="0" id="add-section-button-0" {{action 'onShowSectionWizard'}}>
|
||||
<div class="start-button">
|
||||
<div class="cta">+ SECTION</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}} {{/unless}} {{#if canEdit}}
|
||||
<div id="wizard-placeholder" class="hide margin-top-50" />
|
||||
<div id="new-section-wizard" class="new-section-wizard">
|
||||
<div class="container box">
|
||||
<div class="row clearfix">
|
||||
<div class="col-12 clearfix">
|
||||
<div class="float-right mb-5">
|
||||
<button type="button" class="btn btn-secondary" {{action 'onHideSectionWizard'}}>Close</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="form-group">
|
||||
{{input type="text" id="new-section-name" value=newSectionName class=(if newSectionNameMissing 'mousetrap form-control form-control-lg is-invalid' 'mousetrap form-control form-control-lg') placeholder="Enter section name" autocomplete="off"}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="form-group">
|
||||
{{input type="text" id="new-section-name" value=newSectionName class=(if newSectionNameMissing 'mousetrap form-control form-control-lg
|
||||
is-invalid' 'mousetrap form-control form-control-lg') placeholder="Enter section name" autocomplete="off"}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="form-group">
|
||||
<div class="new-section-caption">Insert section type</div>
|
||||
<ul class="preset-list">
|
||||
{{#each sections as |section|}}
|
||||
<li class="item" {{action 'onInsertSection' section}}>
|
||||
<div class="icon">
|
||||
<img class="img" src="/sections/{{section.contentType}}.png" srcset="/sections/{{section.contentType}}@2x.png" />
|
||||
</div>
|
||||
<div class='title'>{{section.title}}</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="form-group">
|
||||
<div class="new-section-caption">Insert section type</div>
|
||||
<ul class="preset-list">
|
||||
{{#each sections as |section|}}
|
||||
<li class="item" {{action 'onInsertSection' section}}>
|
||||
<div class="icon">
|
||||
<img class="img" src="/sections/{{section.contentType}}.png" srcset="/sections/{{section.contentType}}@2x.png" />
|
||||
</div>
|
||||
<div class='title'>{{section.title}}</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
{{#if hasBlocks}}
|
||||
<div class="new-section-caption">Insert re-usable content</div>
|
||||
<ul class="block-list">
|
||||
{{#each blocks as |block|}}
|
||||
<li class="item" title="{{block.firstname}} {{block.lastname}}, {{time-ago block.created}}, used: {{ block.used }}" data-toggle="tooltip" data-placement="top">
|
||||
<div class="actions">
|
||||
{{#if permissions.documentTemplate}}
|
||||
{{#link-to 'document.block' folder.id folder.slug document.id document.slug block.id class="button-icon-green button-icon-small align-middle"}}
|
||||
<i class="material-icons">edit</i>
|
||||
{{/link-to}}
|
||||
<div class="button-icon-gap" />
|
||||
<div id={{concat 'delete-block-button-' block.id}} class="button-icon-red button-icon-small align-middle" {{action 'onShowDeleteBlockModal' block.id}}>
|
||||
<i class="material-icons">delete</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="details" {{action 'onInsertBlock' block}}>
|
||||
<div class="title text-truncate">{{block.title}}</div>
|
||||
<div class="desc text-truncate">{{block.excerpt}}</div>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{else}}
|
||||
<div class="template-caption">You have no reusable content — publish any section as a template</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
{{#if hasBlocks}}
|
||||
<div class="new-section-caption">Insert re-usable content</div>
|
||||
<ul class="block-list">
|
||||
{{#each blocks as |block|}}
|
||||
<li class="item" title="{{block.firstname}} {{block.lastname}}, {{time-ago block.created}}, used: {{ block.used }}" data-toggle="tooltip"
|
||||
data-placement="top">
|
||||
<div class="actions">
|
||||
{{#if permissions.documentTemplate}} {{#link-to 'document.block' folder.id folder.slug document.id document.slug block.id
|
||||
class="button-icon-gray button-icon-small align-middle"}}
|
||||
<i class="material-icons">edit</i>
|
||||
{{/link-to}}
|
||||
<div class="button-icon-gap" />
|
||||
<div id={{concat 'delete-block-button-' block.id}} class="button-icon-danger button-icon-small align-middle" {{action
|
||||
'onShowDeleteBlockModal' block.id}}>
|
||||
<i class="material-icons">delete</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="details" {{action 'onInsertBlock' block}}>
|
||||
<div class="title text-truncate">{{block.title}}</div>
|
||||
<div class="desc text-truncate">{{block.excerpt}}</div>
|
||||
</div>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{else}}
|
||||
<div class="template-caption">You have no reusable content — publish any section as a template</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if permissions.documentTemplate}}
|
||||
{{#ui/ui-dialog title="Delete Content Block" confirmCaption="Delete" buttonType="btn-danger" show=showDeleteBlockDialog onAction=(action 'onDeleteBlock')}}
|
||||
<p>Are you sure you want to delete this re-usable content block?</p>
|
||||
{{/ui/ui-dialog}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}} {{#if permissions.documentTemplate}} {{#ui/ui-dialog title="Delete Content Block" confirmCaption="Delete" buttonType="btn-danger"
|
||||
show=showDeleteBlockDialog onAction=(action 'onDeleteBlock')}}
|
||||
<p>Are you sure you want to delete this re-usable content block?</p>
|
||||
{{/ui/ui-dialog}} {{/if}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue