mirror of
https://github.com/documize/community.git
synced 2025-07-24 15:49:44 +02:00
WIP content linker UX
This commit is contained in:
Harvey Kandola
parent
531e9c88d7
commit
db1b3aef8c
11 changed files with 338 additions and 325 deletions
|
|
@ -1,72 +1,100 @@
|
|||
{{#dropdown-dialog target=contentLinkerButtonId position="bottom right" button="Insert" color="flat-blue" onAction=(action 'onInsertLink')}}
|
||||
<div class="content-linker-dialog">
|
||||
<form>
|
||||
{{ui/ui-tab tabs=tabs onTabSelect=(action 'onTabSelect')}}
|
||||
<div id={{concat "content-linker-modal-" page.id}} class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Insert Link</div>
|
||||
<div class="modal-body">
|
||||
|
||||
<div class="margin-top-40" />
|
||||
<div class="container">
|
||||
|
||||
{{#if showSections}}
|
||||
<ul class="link-list">
|
||||
{{#each candidates.pages as |p|}}
|
||||
<li class="link-item" {{ action 'setSelection' p }}>
|
||||
{{#ui/ui-selection selected=p.selected}}
|
||||
{{p.title}}
|
||||
{{/ui/ui-selection}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<ul class="tabnav-control text-center">
|
||||
<li class="tab {{if tab1Selected 'selected'}}" {{action 'onTabSelect' 1}}>Section</li>
|
||||
<li class="tab {{if tab2Selected 'selected'}}" {{action 'onTabSelect' 2}}>Attachment</li>
|
||||
<li class="tab {{if tab3Selected 'selected'}}" {{action 'onTabSelect' 3}}>Search</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{#if showAttachments}}
|
||||
<ul class="link-list">
|
||||
{{#each candidates.attachments as |a|}}
|
||||
<li class="link-item" {{ action 'setSelection' a }}>
|
||||
{{#ui/ui-selection selected=a.selected}}
|
||||
<img class="icon" src="/assets/img/attachments/{{document/file-icon a.context}}" />
|
||||
{{ a.title }}
|
||||
{{/ui/ui-selection}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
{{#if showSections}}
|
||||
<div class="row">
|
||||
<div class="col content-linker-modal-container">
|
||||
<ul class="link-list">
|
||||
{{#each candidates.pages as |p|}}
|
||||
<li class="link-item" {{ action 'setSelection' p }}>
|
||||
{{#ui/ui-selection selected=p.selected}}
|
||||
{{p.title}}
|
||||
{{/ui/ui-selection}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if showAttachments}}
|
||||
<div class="row">
|
||||
<div class="col content-linker-modal-container">
|
||||
<ul class="link-list">
|
||||
{{#each candidates.attachments as |a|}}
|
||||
<li class="link-item" {{ action 'setSelection' a }}>
|
||||
{{#ui/ui-selection selected=a.selected}}
|
||||
<img class="icon" src="/assets/img/attachments/{{document/file-icon a.context}}" />
|
||||
{{ a.title }}
|
||||
{{/ui/ui-selection}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if showSearch}}
|
||||
<div class="row">
|
||||
<div class="col content-linker-modal-container">
|
||||
<div class="input-control">
|
||||
<label>Search</label>
|
||||
<div class="tip">For content or attachments</div>
|
||||
{{focus-input id="content-linker-search" type="input" value=keywords placeholder="keyword search" autocomplete="off"}}
|
||||
</div>
|
||||
{{#unless hasMatches}}
|
||||
Nothing found.
|
||||
{{/unless}}
|
||||
<ul class="link-list">
|
||||
{{#each matches.documents as |m|}}
|
||||
<li class="link-item" {{ action 'setSelection' m }}>
|
||||
{{#ui/ui-selection selected=m.selected}}
|
||||
{{m.title}}<br/><span class="color-gray">{{m.context}}</span>
|
||||
{{/ui/ui-selection}}
|
||||
</li>
|
||||
{{/each}}
|
||||
{{#each matches.pages as |m|}}
|
||||
<li class="link-item" {{ action 'setSelection' m }}>
|
||||
{{#ui/ui-selection selected=m.selected}}
|
||||
{{m.title}}<br/><span class="color-gray">{{m.context}}</span>
|
||||
{{/ui/ui-selection}}
|
||||
</li>
|
||||
{{/each}}
|
||||
{{#each matches.attachments as |a|}}
|
||||
<li class="link-item" {{ action 'setSelection' a }}>
|
||||
{{#ui/ui-selection selected=a.selected}}
|
||||
<img class="icon" src="/assets/img/attachments/{{document/file-icon a.context}}" />
|
||||
{{ a.title }}
|
||||
{{/ui/ui-selection}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if showSearch}}
|
||||
<div class="input-control">
|
||||
<label>Search</label>
|
||||
<div class="tip">For content or attachments</div>
|
||||
{{focus-input id="content-linker-search" type="input" value=keywords placeholder="keyword search" autocomplete="off"}}
|
||||
</div>
|
||||
{{#unless hasMatches}}
|
||||
Nothing found.
|
||||
{{/unless}}
|
||||
<ul class="link-list">
|
||||
{{#each matches.documents as |m|}}
|
||||
<li class="link-item" {{ action 'setSelection' m }}>
|
||||
{{#ui/ui-selection selected=m.selected}}
|
||||
{{m.title}}<br/><span class="color-gray">{{m.context}}</span>
|
||||
{{/ui/ui-selection}}
|
||||
</li>
|
||||
{{/each}}
|
||||
{{#each matches.pages as |m|}}
|
||||
<li class="link-item" {{ action 'setSelection' m }}>
|
||||
{{#ui/ui-selection selected=m.selected}}
|
||||
{{m.title}}<br/><span class="color-gray">{{m.context}}</span>
|
||||
{{/ui/ui-selection}}
|
||||
</li>
|
||||
{{/each}}
|
||||
{{#each matches.attachments as |a|}}
|
||||
<li class="link-item" {{ action 'setSelection' a }}>
|
||||
{{#ui/ui-selection selected=a.selected}}
|
||||
<img class="icon" src="/assets/img/attachments/{{document/file-icon a.context}}" />
|
||||
{{ a.title }}
|
||||
{{/ui/ui-selection}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
{{/if}}
|
||||
|
||||
<div class="hide regular-button button-blue pull-right" {{ action 'onInsertLink' }}>Insert</div>
|
||||
<div class="hide clearfix" />
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" {{action 'onCancel'}}>Cancel</button>
|
||||
<button type="button" class="btn btn-success" {{action 'onInsertLink'}}>Insert</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/dropdown-dialog}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,64 +1,66 @@
|
|||
<div id={{containerId}} class="document-editor {{if blockMode 'document-editor-full'}}">
|
||||
<div class="toolbar">
|
||||
<div class="buttons pull-right">
|
||||
{{#if busy}}
|
||||
<img src="/assets/img/busy-gray.gif" class="busy-indicator" />
|
||||
{{/if}}
|
||||
<div id="section-editor-{{pageId}}" class="{{if blockMode 'sectiopn-editor-fullscreen'}}">
|
||||
|
||||
{{#if contentLinkerButton}}
|
||||
{{document/content-linker tagName="span" document=document folder=folder page=page onInsertLink=(action 'onInsertLink')}}
|
||||
<div class="round-button-mono" id={{contentLinkerButtonId}} data-tooltip="Reference link" data-tooltip-position="top center">
|
||||
<i class="material-icons color-blue">link</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="row">
|
||||
<div class="col-9 section-editor">
|
||||
{{#if blockMode}}
|
||||
<div class="form-group">
|
||||
<label>Name</label>
|
||||
{{focus-input id="page-id-{{pageId}}" value=page.title class="form-control mousetrap"}}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Description</label>
|
||||
{{textarea id="page-excerpt-{{pageId}}" value=page.excerpt class="form-control mousetrap" rows="3"}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="form-group">
|
||||
{{focus-input type="text" id=pageId value=page.title class=(if hasNameError 'form-control mousetrap form-control-lg edit-title is-invalid' 'form-control form-control-lg edit-title mousetrap') placeholder="Name"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if previewButton}}
|
||||
<div class="round-button-mono" {{action 'onPreview'}} id={{previewButtonId}} data-tooltip="Toggle Preview" data-tooltip-position="top center">
|
||||
<i class="material-icons color-gray">visibility</i>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="col-3">
|
||||
<div class="float-right">
|
||||
{{#if busy}}
|
||||
<img src="/assets/img/busy-gray.gif" class="busy-indicator" />
|
||||
{{/if}}
|
||||
|
||||
<div class="round-button-mono" {{action 'onAction'}}>
|
||||
<i class="material-icons color-green">check</i>
|
||||
</div>
|
||||
<div class="round-button-mono" {{action 'onCancel'}} id={{cancelId}}>
|
||||
<i class="material-icons color-gray">close</i>
|
||||
</div>
|
||||
</div>
|
||||
{{#if blockMode}}
|
||||
<div class="clearfix"></div>
|
||||
<div class="input-control">
|
||||
<label>Name</label>
|
||||
{{focus-input id="page-id-{{pageId}}" value=page.title class="mousetrap"}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Description</label>
|
||||
{{textarea id="page-excerpt-{{pageId}}" value=page.excerpt class="mousetrap" rows="3"}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="input-inline input-transparent edit-title pull-left">
|
||||
{{focus-input type="text" id=pageId value=page.title class=(if hasNameError 'error-inline') placeholder="Name" class="mousetrap"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="clearfix"></div>
|
||||
{{#if contentLinkerButton}}
|
||||
<div class="btn btn-primary" id="section-editor-link-button-{{pageId}}" data-toggle="tooltip" data-placement="top" title="Insert link" {{action 'onShowLinkModal'}}>Link</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="dropdown-dialog cancel-edits-dialog" id={{dialogId}}>
|
||||
<div class="content">
|
||||
<p>Do you want to cancel editing and lose unsaved changes?</p>
|
||||
{{#if previewButton}}
|
||||
<div class="btn btn-primary" id="section-editor-preview-button-{{pageId}}" data-toggle="tooltip" data-placement="top" title="Preview" {{action 'onPreview'}}>Preview</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="btn btn-success" {{action 'onAction'}}>Save</div>
|
||||
<div class="btn btn-outline-secondary" id="section-editor-cancel-button-{{pageId}}" {{action 'onCancel'}}>Cancel</div>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="flat-button" {{action 'keepEditing'}}>
|
||||
no
|
||||
</div>
|
||||
<div class="flat-button flat-red" {{action 'discardEdits'}}>
|
||||
yes
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col section-editor">
|
||||
<div class="canvas">
|
||||
{{yield}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="canvas">
|
||||
{{yield}}
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id={{concat "discard-modal-" page.id}} class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Discard Changes</div>
|
||||
<div class="modal-body">
|
||||
<p>You have made changes to the section - continue editing or discard changes?</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Continue editing</button>
|
||||
<button type="button" class="btn btn-danger" onclick={{action 'onDiscard'}}>Discard changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{document/content-linker document=document folder=folder page=page showModal=showLinkModal onInsertLink=(action 'onInsertLink')}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue