mirror of
https://github.com/documize/community.git
synced 2025-07-31 02:59:44 +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
parent
3d2060ca60
commit
93253be0f2
27 changed files with 528 additions and 553 deletions
|
|
@ -1,38 +1,40 @@
|
|||
{{#if (eq document.lifecycle constants.Lifecycle.Live)}}
|
||||
<div id="document-lifecycle-popover" class="document-lifecycle-live text-uppercase" {{action "onEditLifecycle"}}>{{document.lifecycleLabel}}</div>
|
||||
{{/if}}
|
||||
{{#if (eq document.lifecycle constants.Lifecycle.Draft)}}
|
||||
<div id="document-lifecycle-popover" class="document-lifecycle-draft text-uppercase" {{action "onEditLifecycle"}}>{{document.lifecycleLabel}}</div>
|
||||
{{/if}}
|
||||
<div class="document-meta">
|
||||
{{#link-to 'folder.index' space.id space.slug class="no-print"}}
|
||||
{{ui/ui-button light=true color=constants.Color.Yellow uppercase=false
|
||||
icon=constants.Icon.ArrowLeft label=space.name}}
|
||||
{{/link-to}}
|
||||
|
||||
<div class="d-block d-sm-none margin-top-20" />
|
||||
<div class="d-sm-inline-block margin-left-20" />
|
||||
{{ui/ui-spacer size=300}}
|
||||
|
||||
{{#if (eq document.protection constants.ProtectionType.None)}}
|
||||
<div id="document-protection-popover" class="document-protection-unlocked text-uppercase" {{action "onEditProtection"}}>OPEN</div>
|
||||
{{/if}}
|
||||
{{#if (eq document.protection constants.ProtectionType.Review)}}
|
||||
<div id="document-protection-popover" class="document-protection-review text-uppercase" {{action "onEditProtection"}}>PROTECTED</div>
|
||||
{{/if}}
|
||||
{{#if (eq document.protection constants.ProtectionType.Lock)}}
|
||||
<div id="document-protection-popover" class="document-protection-locked text-uppercase" {{action "onEditProtection"}}>LOCKED</div>
|
||||
{{/if}}
|
||||
<div class="title">CATEGORY / TAG</div>
|
||||
{{#each selectedCategories as |cat|}}
|
||||
<div class="meta-label">
|
||||
<i class="dicon {{constants.Icon.Category}}"/>
|
||||
{{cat.category}}
|
||||
{{#attach-tooltip showDelay=1000}}Category{{/attach-tooltip}}
|
||||
</div>
|
||||
{{/each}}
|
||||
{{#each tagz as |t|}}
|
||||
<div class="meta-label">
|
||||
<i class="dicon {{constants.Icon.Tag}}"/>
|
||||
{{t}}
|
||||
{{#attach-tooltip showDelay=1000}}Tag{{/attach-tooltip}}
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
<div class="d-block d-sm-none margin-top-20" />
|
||||
<div class="d-sm-inline-block margin-left-20" />
|
||||
{{ui/ui-spacer size=200}}
|
||||
|
||||
{{#each selectedCategories as |cat|}}
|
||||
<div class="document-category {{if isSpaceAdmin "cursor-pointer"}}" {{action "onEditCategory"}}>
|
||||
{{cat.category}}
|
||||
{{#attach-tooltip showDelay=1000}}Category{{/attach-tooltip}}
|
||||
<div class="title">STATUS</div>
|
||||
<div class="{{if (eq document.lifecycle constants.Lifecycle.Draft) "label-draft"}}
|
||||
{{if (eq document.lifecycle constants.Lifecycle.Live) "label-live"}}
|
||||
{{if (eq document.lifecycle constants.Lifecycle.Archived) "label-archived"}}">
|
||||
{{document.lifecycleLabel}}
|
||||
{{#attach-tooltip showDelay=1000}}Lifecycle: Draft · Live · Archived{{/attach-tooltip}}
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
<div class="d-block d-sm-none margin-top-20" />
|
||||
|
||||
{{#each tagz as |t|}}
|
||||
<div class="document-tag {{if isSpaceAdmin "cursor-pointer"}}" {{action "onEditCategory"}}>
|
||||
{{#attach-tooltip showDelay=1000}}Tag{{/attach-tooltip}}
|
||||
{{concat "#" t}}
|
||||
<div class="label-approval">
|
||||
{{#if (eq document.protection constants.ProtectionType.None)}}OPEN{{/if}}
|
||||
{{#if (eq document.protection constants.ProtectionType.Review)}}PROTECTED{{/if}}
|
||||
{{#if (eq document.protection constants.ProtectionType.Lock)}}LOCKED{{/if}}
|
||||
{{#attach-tooltip showDelay=1000}}Change Control: Open · Protected · Locked{{/attach-tooltip}}
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
|
|
|||
92
gui/app/templates/components/document/document-toolbar.hbs
Normal file
92
gui/app/templates/components/document/document-toolbar.hbs
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<div class="no-print">
|
||||
{{#if session.authenticated}}
|
||||
{{#if permissions.documentEdit}}
|
||||
{{#link-to "document.settings" space.id space.slug document.id document.slug class="button-icon-gray align-middle"}}
|
||||
<i class="material-icons">settings</i>
|
||||
{{#attach-tooltip showDelay=1000}}Settings — meta, lifecycle, workflow{{/attach-tooltip}}
|
||||
{{/link-to}}
|
||||
<div class="button-icon-gap" />
|
||||
{{/if}}
|
||||
{{#if permissions.documentAdd}}
|
||||
<div id="document-template-button" class="button-icon-gray align-middle">
|
||||
<i class="material-icons" data-toggle="modal" data-target="#document-template-modal" data-backdrop="static">content_copy</i>
|
||||
{{#attach-tooltip showDelay=1000}}Save as template{{/attach-tooltip}}
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
<div id="document-print-button" class="button-icon-gray align-middle" {{action "onPrintDocument"}}>
|
||||
<i class="material-icons">print</i>
|
||||
{{#attach-tooltip showDelay=1000}}Print{{/attach-tooltip}}
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
|
||||
<div id="space-export-button" class="button-icon-danger align-middle" {{action "onExport"}}>
|
||||
<i class="material-icons">import_export</i>
|
||||
{{#attach-tooltip showDelay=1000}}Export as HTML{{/attach-tooltip}}
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
|
||||
{{#if pinState.isPinned}}
|
||||
<div id="document-pin-button" class="button-icon-gold align-middle" {{action "onUnpin"}}>
|
||||
<i class="material-icons">star</i>
|
||||
{{#attach-tooltip showDelay=1000}}Remove bookmark{{/attach-tooltip}}
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
{{else if session.authenticated}}
|
||||
<div id="document-pin-button" class="button-icon-gray align-middle" {{action "onPin"}}>
|
||||
<i class="material-icons">star</i>
|
||||
{{#attach-tooltip showDelay=1000}}Add bookmark{{/attach-tooltip}}
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
{{/if}}
|
||||
|
||||
{{#if permissions.documentDelete}}
|
||||
<div id="document-delete-button" class="button-icon-danger align-middle">
|
||||
<i class="material-icons" data-toggle="modal" data-target="#document-delete-modal" data-backdrop="static">delete</i>
|
||||
{{#attach-tooltip showDelay=1000}}Delete{{/attach-tooltip}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div id="document-template-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Save as Template</div>
|
||||
<div class="modal-body">
|
||||
<form onsubmit={{action "onSaveTemplate"}}>
|
||||
<div class="form-group">
|
||||
<label for="new-template-name">Name</label>
|
||||
{{input id="new-template-name" value=saveTemplate.name type="email" class="form-control mousetrap" placeholder="Template name"}}
|
||||
<small class="form-text text-muted">Good template name conveys document type</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="new-template-desc">Description</label>
|
||||
{{textarea id="new-template-desc" value=saveTemplate.description class="form-control" rows="5"}}
|
||||
<small class="form-text text-muted">Explain use case for this template</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 "onSaveTemplate"}}>Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="document-delete-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Delete Document</div>
|
||||
<div class="modal-body">
|
||||
<p>Are you sure you want to delete this document?</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 "onDocumentDelete"}}>Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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}}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
{{#if hasPages}}
|
||||
|
||||
{{#each pages key="id" as |item|}}
|
||||
{{#if canEdit}}
|
||||
<div class="start-section" {{action "onShowSectionWizard" item.page}}>
|
||||
<div class="start-button">
|
||||
<div class="cta">+ SECTION</div>
|
||||
</div>
|
||||
<div class="start-section">
|
||||
<i class="dicon {{constants.Icon.Plus}}" {{action "onShowSectionWizard" item.page}}>
|
||||
{{#attach-tooltip showDelay=1000}}Insert section here{{/attach-tooltip}}
|
||||
</i>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="margin-top-70" />
|
||||
{{ui/ui-spacer size=700}}
|
||||
{{/if}}
|
||||
{{document/document-page
|
||||
roles=roles
|
||||
|
|
@ -32,10 +31,10 @@
|
|||
{{/each}}
|
||||
|
||||
{{#if canEdit}}
|
||||
<div class="start-section" {{action "onShowSectionWizard"}}>
|
||||
<div class="start-button">
|
||||
<div class="cta">+ SECTION</div>
|
||||
</div>
|
||||
<div class="start-section">
|
||||
<i class="dicon {{constants.Icon.Plus}}" {{action "onShowSectionWizard"}}>
|
||||
{{#attach-tooltip showDelay=1000}}Insert section here{{/attach-tooltip}}
|
||||
</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
|
|
@ -56,17 +55,14 @@
|
|||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{else }}
|
||||
|
||||
{{#if canEdit}}
|
||||
<div class="start-section" {{action "onShowSectionWizard"}}>
|
||||
<div class="start-button">
|
||||
<div class="cta">+ SECTION</div>
|
||||
</div>
|
||||
<div class="start-section">
|
||||
<i class="dicon {{constants.Icon.Plus}}" {{action "onShowSectionWizard"}}>
|
||||
{{#attach-tooltip showDelay=1000}}Insert section here{{/attach-tooltip}}
|
||||
</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{/if}}
|
||||
|
||||
{{#if canEdit}}
|
||||
|
|
|
|||
13
gui/app/templates/components/document/zdocument-meta.hbs
Normal file
13
gui/app/templates/components/document/zdocument-meta.hbs
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
{{#each selectedCategories as |cat|}}
|
||||
<div class="document-category {{if isSpaceAdmin "cursor-pointer"}}" {{action "onEditCategory"}}>
|
||||
{{cat.category}}
|
||||
{{#attach-tooltip showDelay=1000}}Category{{/attach-tooltip}}
|
||||
</div>
|
||||
{{/each}}
|
||||
|
||||
{{#each tagz as |t|}}
|
||||
<div class="document-tag {{if isSpaceAdmin "cursor-pointer"}}" {{action "onEditCategory"}}>
|
||||
{{#attach-tooltip showDelay=1000}}Tag{{/attach-tooltip}}
|
||||
{{concat "#" t}}
|
||||
</div>
|
||||
{{/each}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue