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
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>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="text-right non-printable">
|
||||
<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"}}
|
||||
|
|
@ -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}}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
{{#if hasIcon}}
|
||||
<i class="dicon {{iconClass}}"/>
|
||||
{{/if}}
|
||||
<div class="label">{{label}}</div>
|
||||
<div class="label">{{label}}</div>
|
||||
{{yield}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue