mirror of
https://github.com/documize/community.git
synced 2025-08-02 20:15:26 +02:00
Provide each doc section with TOC controls
Put up/down/indent/outdent options on the section menu dropdown for easier TOC manipulation.
This commit is contained in:
Harvey Kandola
parent
d5157615e0
commit
716bd062d7
9 changed files with 333 additions and 138 deletions
|
|
@ -1,14 +1,43 @@
|
|||
<div id="page-{{page.id}}" data-id="{{page.id}}" data-type="{{page.contentType}}">
|
||||
|
||||
{{#if editMode}}
|
||||
|
||||
<div class="wysiwyg">
|
||||
{{document/document-editor document=document folder=folder page=editPage meta=editMeta onCancel=(action 'onCancelEdit') onAction=(action 'onSavePage')}}
|
||||
{{document/document-editor
|
||||
document=document
|
||||
folder=folder
|
||||
page=editPage
|
||||
meta=editMeta
|
||||
onCancel=(action 'onCancelEdit')
|
||||
onAction=(action 'onSavePage')}}
|
||||
</div>
|
||||
|
||||
{{else}}
|
||||
{{document/page-heading document=document folder=folder page=page meta=meta pending=pending permissions=permissions tabMode=tabMode roles=roles blocks=blocks
|
||||
onEdit=(action 'onEdit') onSavePageAsBlock=(action 'onSavePageAsBlock')
|
||||
onCopyPage=(action 'onCopyPage') onMovePage=(action 'onMovePage') onDeletePage=(action 'onDeletePage') refresh=(action refresh)}}
|
||||
|
||||
{{document/page-heading
|
||||
page=page
|
||||
meta=meta
|
||||
pages=pages
|
||||
roles=roles
|
||||
folder=folder
|
||||
blocks=blocks
|
||||
tabMode=tabMode
|
||||
pending=pending
|
||||
document=document
|
||||
permissions=permissions
|
||||
onEdit=(action 'onEdit')
|
||||
refresh=(action refresh)
|
||||
onCopyPage=(action 'onCopyPage')
|
||||
onMovePage=(action 'onMovePage')
|
||||
onDeletePage=(action 'onDeletePage')
|
||||
onSavePageAsBlock=(action 'onSavePageAsBlock')
|
||||
onPageLevelChange=(action onPageLevelChange)
|
||||
onPageSequenceChange=(action onPageSequenceChange)}}
|
||||
|
||||
<div class="wysiwyg">
|
||||
{{section/base-renderer page=page}}
|
||||
</div>
|
||||
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<i class="material-icons" title="Table of contents" data-toggle="tooltip" data-placement="top">reorder</i>
|
||||
</div>
|
||||
|
||||
<div id="doc-toc" class="document-toc {{if isDesktop 'document-toc-desktop'}}">
|
||||
<div id="doc-toc" class="document-toc">
|
||||
<div class="header">
|
||||
{{#if canEdit}}
|
||||
<div id="tocToolbar" class="toc-controls {{if state.actionablePage 'current-page'}}">
|
||||
|
|
|
|||
|
|
@ -38,6 +38,21 @@
|
|||
{{#if canDelete}}
|
||||
<a class="dropdown-item text-danger" href="#" id={{concat 'delete-page-button-' page.id}} data-toggle="modal" data-target={{concat '#delete-page-modal-' page.id}} data-backdrop="static">Delete</a>
|
||||
{{/if}}
|
||||
{{#if (and canEdit state.actionablePage)}}
|
||||
<div class="dropdown-divider"></div>
|
||||
{{#unless state.indentDisabled}}
|
||||
<a class="dropdown-item" href="#" id={{concat 'toc-indent-button-' page.id}} {{action 'pageIndent'}}>Indent</a>
|
||||
{{/unless}}
|
||||
{{#unless state.outdentDisabled}}
|
||||
<a class="dropdown-item" href="#" id={{concat 'toc-outdent-button-' page.id}} {{action 'pageOutdent'}}>Outdent</a>
|
||||
{{/unless}}
|
||||
{{#unless state.upDisabled}}
|
||||
<a class="dropdown-item" href="#" id={{concat 'toc-up-button-' page.id}} {{action 'pageUp'}}>Move up</a>
|
||||
{{/unless}}
|
||||
{{#unless state.downDisabled}}
|
||||
<a class="dropdown-item" href="#" id={{concat 'toc-down-button-' page.id}} {{action 'pageDown'}}>Move down</a>
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,125 +1,151 @@
|
|||
{{#if hasPages}}
|
||||
{{#each pages key="id" as |item index|}}
|
||||
|
||||
{{#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="margin-top-70" />
|
||||
{{/if}}
|
||||
{{document/document-page
|
||||
roles=roles
|
||||
pages=pages
|
||||
folder=folder
|
||||
toEdit=toEdit
|
||||
blocks=blocks
|
||||
page=item.page
|
||||
meta=item.meta
|
||||
document=document
|
||||
pending=item.pending
|
||||
permissions=permissions
|
||||
refresh=(action refresh)
|
||||
onSavePage=(action 'onSavePage')
|
||||
onCopyPage=(action 'onCopyPage')
|
||||
onMovePage=(action 'onMovePage')
|
||||
onDeletePage=(action 'onDeletePage')
|
||||
onSavePageAsBlock=(action 'onSavePageAsBlock')
|
||||
onPageLevelChange=(action onPageLevelChange)
|
||||
onPageSequenceChange=(action onPageSequenceChange)}}
|
||||
{{/each}}
|
||||
|
||||
{{#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-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>
|
||||
{{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 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}}
|
||||
<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 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>
|
||||
</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 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>
|
||||
|
||||
<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 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-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>
|
||||
<div class='title'>{{section.title}}</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>
|
||||
|
||||
<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>
|
||||
</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}}
|
||||
{{/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