1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-08-02 03:55:24 +02:00

Update document view to use new UI framework

1. Sidebar contains ToC & attachments.
2. Document meta moved up before content (to frame  context).
3. Per section toolbar re-designed.

Co-Authored-By: Harvey Kandola <harvey@documize.com>
This commit is contained in:
sauls8t 2018-12-19 18:36:45 +00:00
parent 3d2060ca60
commit 93253be0f2
27 changed files with 528 additions and 553 deletions

View file

@ -1,63 +1,58 @@
<div class="row no-gutters align-items-top">
<div class="col-10">
<div class="document-structure">
<div class="grid-container-8-2">
<div class="grid-cell-1 grid-cell-middle">
<div class="section-heading">
<div class="page-header">
<span class="page-number">{{page.numbering}}</span>
<span class="page-title">{{page.title}}</span>
</div>
</div>
</div>
<div class="col-2">
<div class="grid-cell-2 grid-cell-right grid-cell-middle">
{{#unless (eq document.protection constants.ProtectionType.Lock)}}
<div class="document-structure">
<div class="page-toolbar" id="page-toolbar-{{ page.id }}">
<div class="float-right">
{{#if canEdit}}
<div id="page-edit-button-{{page.id}}" class="button-icon-gray align-middle d-none d-md-inline-block" {{action "onEdit"}}>
<i class="material-icons">mode_edit</i>
</div>
{{/if}}
{{#if hasMenuPermissions}}
<div class="button-icon-gap" />
<div id="page-menu-button-{{page.id}}" class="button-icon-gray align-middle">
<i class="material-icons">more_vert</i>
{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
<div class="menu">
{{#if canEdit}}
<a class="item" href="#" id={{concat "edit-page-button-" page.id}} {{action "onEdit"}}>Edit</a>
{{/if}}
{{#if permissions.documentCopy}}
<a class="item" href="#" id={{concat "copy-page-button-" page.id}} data-toggle="modal" data-target={{concat "#copy-page-modal-" page.id}} data-backdrop="static">Copy</a>
{{/if}}
{{#if canMove}}
<a class="item" href="#" id={{concat "move-page-button-" page.id}} data-toggle="modal" data-target={{concat "#move-page-modal-" page.id}} data-backdrop="static">Move</a>
{{/if}}
{{#if permissions.documentTemplate}}
<a class="item" href="#" id={{concat "publish-page-button-" page.id}} data-toggle="modal" data-target={{concat "#publish-page-modal-" page.id}} data-backdrop="static">Publish</a>
{{/if}}
{{#if canDelete}}
<a class="item red" 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="divider"></div>
{{#unless state.indentDisabled}}
<a class="item" href="#" id={{concat "toc-indent-button-" page.id}} {{action "pageIndent"}}>Indent</a>
{{/unless}}
{{#unless state.outdentDisabled}}
<a class="item" href="#" id={{concat "toc-outdent-button-" page.id}} {{action "pageOutdent"}}>Outdent</a>
{{/unless}}
{{#unless state.upDisabled}}
<a class="item" href="#" id={{concat "toc-up-button-" page.id}} {{action "pageUp"}}>Move up</a>
{{/unless}}
{{#unless state.downDisabled}}
<a class="item" href="#" id={{concat "toc-down-button-" page.id}} {{action "pageDown"}}>Move down</a>
{{/unless}}
{{/if}}
</div>
{{/attach-popover}}
</div>
{{/if}}
</div>
<div class="section-heading no-print" id="page-toolbar-{{ page.id }}">
<div class="section-toolbar">
{{#if canEdit}}
<i class="dicon {{constants.Icon.Edit}}" {{action "onEdit"}} />
{{/if}}
{{#if hasMenuPermissions}}
<div class="gap"/>
<i class="dicon {{constants.Icon.Settings}}">
{{#attach-popover class="ember-attacher-popper" hideOn="clickout click" showOn="click" isShown=false}}
<div class="menu">
{{#if canEdit}}
<a class="item" href="#" id={{concat "edit-page-button-" page.id}} {{action "onEdit"}}>Edit</a>
{{/if}}
{{#if permissions.documentCopy}}
<a class="item" href="#" id={{concat "copy-page-button-" page.id}} data-toggle="modal" data-target={{concat "#copy-page-modal-" page.id}} data-backdrop="static">Copy</a>
{{/if}}
{{#if canMove}}
<a class="item" href="#" id={{concat "move-page-button-" page.id}} data-toggle="modal" data-target={{concat "#move-page-modal-" page.id}} data-backdrop="static">Move</a>
{{/if}}
{{#if permissions.documentTemplate}}
<a class="item" href="#" id={{concat "publish-page-button-" page.id}} data-toggle="modal" data-target={{concat "#publish-page-modal-" page.id}} data-backdrop="static">Publish</a>
{{/if}}
{{#if canDelete}}
<a class="item red" 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="divider"></div>
{{#unless state.indentDisabled}}
<a class="item" href="#" id={{concat "toc-indent-button-" page.id}} {{action "pageIndent"}}>Indent</a>
{{/unless}}
{{#unless state.outdentDisabled}}
<a class="item" href="#" id={{concat "toc-outdent-button-" page.id}} {{action "pageOutdent"}}>Outdent</a>
{{/unless}}
{{#unless state.upDisabled}}
<a class="item" href="#" id={{concat "toc-up-button-" page.id}} {{action "pageUp"}}>Move up</a>
{{/unless}}
{{#unless state.downDisabled}}
<a class="item" href="#" id={{concat "toc-down-button-" page.id}} {{action "pageDown"}}>Move down</a>
{{/unless}}
{{/if}}
</div>
{{/attach-popover}}
</i>
{{/if}}
</div>
</div>
{{/unless}}