mirror of
https://github.com/documize/community.git
synced 2025-08-02 20:15:26 +02:00
Revamp document view using new layout
New master page system and UI framework implemented on document view. Sidebar contains ToC and Attachments.
This commit is contained in:
Harvey Kandola
parent
b4b3dbcb4c
commit
7cdf97aa86
27 changed files with 348 additions and 263 deletions
|
|
@ -36,9 +36,3 @@
|
|||
{{concat "#" t}}
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
<div class="document-meta">
|
||||
{{document/view-attachment document=document permissions=permissions}}
|
||||
</div>
|
||||
|
||||
<div class="margin-top-70" />
|
||||
|
|
|
|||
|
|
@ -1,53 +0,0 @@
|
|||
<div id="sidebar" class="sidebar-white document-sidebar">
|
||||
|
||||
<div class="sidebar-view-switcher d-flex align-items-center justify-content-center">
|
||||
<i class="material-icons">reorder</i>
|
||||
</div>
|
||||
|
||||
<div id="doc-toc" class="document-toc">
|
||||
<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|}}
|
||||
<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"}}"
|
||||
title={{item.page.title}}>
|
||||
<span class="numbering">{{item.page.numbering}}</span>
|
||||
{{#if (or item.userHasChangePending userHasNewPagePending)}}
|
||||
<span class="color-red-600" >[*] </span>
|
||||
{{#attach-tooltip showDelay=1000}}Pending changes{{/attach-tooltip}}
|
||||
{{/if}}
|
||||
{{#if (or permissions.documentApprove roles.documentApprove)}}
|
||||
{{#if item.changeAwaitingReview}}
|
||||
<span class="color-green-700">[*] </span>
|
||||
{{#attach-tooltip showDelay=1000}}Awaiting approval{{/attach-tooltip}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{item.page.title}}
|
||||
</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
34
gui/app/templates/components/document/sidebar-attachment.hbs
Normal file
34
gui/app/templates/components/document/sidebar-attachment.hbs
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
{{#if canEdit}}
|
||||
<div class="text-center">
|
||||
{{#ui/ui-toolbar dark=true raised=true large=false bordered=true}}
|
||||
{{ui/ui-toolbar-label color=constants.Color.Gray label="Upload Files" id="upload-document-files"}}
|
||||
{{/ui/ui-toolbar}}
|
||||
{{ui/ui-spacer size=100}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if hasAttachments}}
|
||||
<div class="document-sidebar-attachment">
|
||||
<ul class="files">
|
||||
{{#each files key="id" as |file|}}
|
||||
<li class="file">
|
||||
<a href="{{appMeta.endpoint}}/public/attachments/{{appMeta.orgId}}/{{file.id}}">
|
||||
{{file.filename}}
|
||||
</a>
|
||||
{{#if canEdit}}
|
||||
<div class="menu">
|
||||
{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Red
|
||||
onClick=(action "onShowDialog" file.id file.filename)}}
|
||||
{{/ui/ui-toolbar}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#ui/ui-dialog title="Delete Attachment" confirmCaption="Delete" buttonColor=constants.Color.Red show=showDialog onAction=(action "onDelete")}}
|
||||
<p>Are you sure you want to delete {{deleteAttachment.name}}?</p>
|
||||
{{/ui/ui-dialog}}
|
||||
44
gui/app/templates/components/document/sidebar-toc.hbs
Normal file
44
gui/app/templates/components/document/sidebar-toc.hbs
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<div class="title center">table of contents</div>
|
||||
{{#if canEdit}}
|
||||
<div class="document-sidebar-toc">
|
||||
<div class="controls {{if state.actionablePage "current-page"}}">
|
||||
<div id="toc-up-button" class="arrow {{if state.upDisabled "disabled"}}" {{action "pageUp"}}>
|
||||
<i class="dicon {{constants.Icon.ArrowSmallUp}}" />
|
||||
</div>
|
||||
<div id="toc-down-button" class="arrow {{if state.downDisabled "disabled"}}" {{action "pageDown"}}>
|
||||
<i class="dicon {{constants.Icon.ArrowSmallDown}}" />
|
||||
</div>
|
||||
<div id="toc-outdent-button" class="arrow {{if state.outdentDisabled "disabled"}}" {{action "pageOutdent"}}>
|
||||
<i class="dicon {{constants.Icon.ArrowSmallLeft}}" />
|
||||
</div>
|
||||
<div id="toc-indent-button" class="arrow {{if state.indentDisabled "disabled"}}" {{action "pageIndent"}}>
|
||||
<i class="dicon {{constants.Icon.ArrowSmallRight}}" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="document-sidebar-toc">
|
||||
<ul class="index-list">
|
||||
{{#each pages key="id" as |item|}}
|
||||
<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"}}"
|
||||
title={{item.page.title}}>
|
||||
<span class="numbering">{{item.page.numbering}}</span>
|
||||
{{#if (or item.userHasChangePending userHasNewPagePending)}}
|
||||
<span class="color-red-600" >[*] </span>
|
||||
{{#attach-tooltip showDelay=1000}}Pending changes{{/attach-tooltip}}
|
||||
{{/if}}
|
||||
{{#if (or permissions.documentApprove roles.documentApprove)}}
|
||||
{{#if item.changeAwaitingReview}}
|
||||
<span class="color-green-700">[*] </span>
|
||||
{{#attach-tooltip showDelay=1000}}Awaiting approval{{/attach-tooltip}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{item.page.title}}
|
||||
</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<div class="view-attachment d-print-none">
|
||||
{{#if canEdit}}
|
||||
<div class="upload-document-files">
|
||||
<div id="upload-document-files" class="btn btn-secondary text-uppercase bold-700">+ Attachments</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="margin-top-50" />
|
||||
{{/if}}
|
||||
{{#if hasAttachments}}
|
||||
<ul class="list">
|
||||
{{#each files key="id" as |file|}}
|
||||
<li class="item">
|
||||
<a href="{{appMeta.endpoint}}/public/attachments/{{appMeta.orgId}}/{{file.id}}">
|
||||
{{file.filename}}
|
||||
</a>
|
||||
{{#if canEdit}}
|
||||
<div class="delete">
|
||||
<div class="button-icon-danger button-icon-small align-middle" {{action "onShowDialog" file.id file.filename}}>
|
||||
<i class="material-icons">delete</i>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#ui/ui-dialog title="Delete Attachment" confirmCaption="Delete" buttonColor=constants.Color.Red show=showDialog onAction=(action "onDelete")}}
|
||||
<p>Are you sure you want to delete {{deleteAttachment.name}}?</p>
|
||||
{{/ui/ui-dialog}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue