mirror of
https://github.com/documize/community.git
synced 2025-08-02 20:15:26 +02:00
WIP section editors UX
This commit is contained in:
Harvey Kandola
parent
35947ffbfc
commit
57b3801f87
21 changed files with 210 additions and 308 deletions
|
|
@ -1 +1,4 @@
|
|||
{{component editorType document=document folder=folder page=page meta=meta blockMode=true onCancel=(action 'onCancel') onAction=(action 'onAction')}}
|
||||
<div class="block-editor">
|
||||
{{component editorType document=document folder=folder page=page meta=meta blockMode=true onCancel=(action 'onCancel') onAction=(action 'onAction')}}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
{{#section/base-editor document=document folder=folder page=page isDirty=(action 'isDirty') onCancel=(action 'onCancel')
|
||||
onAction=(action 'onAction')}}
|
||||
<div class="input-control">
|
||||
<label>Airtable embed code</label>
|
||||
<div class="tip">Paste the Airtable embed code snippet</div>
|
||||
{{textarea value=data rows="3" id="airtable-embed-code" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"}}
|
||||
{{#section/base-editor document=document folder=folder page=page isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}}
|
||||
<div class="form-group">
|
||||
<label for="airtable-embed-code">Airtable embed code</label>
|
||||
{{textarea value=data rows="3" id="airtable-embed-code" class="form-control mousetrap" placeholder="Enter code" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"}}
|
||||
<small class="form-text text-muted">Paste the Airtable embed code snippet</small>
|
||||
</div>
|
||||
{{/section/base-editor}}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,22 @@
|
|||
<div id="section-editor-{{pageId}}" class="{{if blockMode 'sectiopn-editor-fullscreen'}}">
|
||||
<div id="section-editor-{{pageId}}">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-9 section-editor">
|
||||
<div class="col-8 section-editor">
|
||||
{{#if blockMode}}
|
||||
<div class="form-group">
|
||||
<label>Name</label>
|
||||
{{focus-input id="page-id-{{pageId}}" value=page.title class="form-control mousetrap"}}
|
||||
{{focus-input id="page-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="Enter name"}}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Description</label>
|
||||
{{textarea id="page-excerpt-{{pageId}}" value=page.excerpt class="form-control mousetrap" rows="3"}}
|
||||
{{textarea id="page-excerpt-{{pageId}}" value=page.excerpt rows="2" class=(if hasDescError 'form-control mousetrap form-control-lg edit-title is-invalid' 'form-control form-control-lg edit-title mousetrap') placeholder="Enter description"}}
|
||||
</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"}}
|
||||
{{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="Enter name"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div class="col-3">
|
||||
<div class="col-4">
|
||||
<div class="float-right">
|
||||
{{#if busy}}
|
||||
<img src="/assets/img/busy-gray.gif" class="busy-indicator" />
|
||||
|
|
@ -29,7 +27,7 @@
|
|||
{{/if}}
|
||||
|
||||
{{#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>
|
||||
<div class="btn btn-primary" id="section-editor-preview-button-{{pageId}}" {{action 'onPreview'}}>{{previewText}}</div>
|
||||
{{/if}}
|
||||
|
||||
<div class="btn btn-success" {{action 'onAction'}}>Save</div>
|
||||
|
|
@ -40,7 +38,7 @@
|
|||
|
||||
<div class="row">
|
||||
<div class="col section-editor">
|
||||
<div class="canvas">
|
||||
<div class="canvas rounded">
|
||||
{{yield}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,45 +1,50 @@
|
|||
<div class="section-editor">
|
||||
<div class="buttons">
|
||||
{{#if busy}}
|
||||
<img src="/assets/img/busy-gray.gif" class="busy-indicator" />
|
||||
{{/if}}
|
||||
<div id="editor-cancel" class="flat-button flat-gray" {{action 'onCancel'}}>{{cancelLabel}}</div>
|
||||
<div class="button-gap" />
|
||||
<div class="regular-button button-green" {{action 'onAction'}}>{{actionLabel}}</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="title">
|
||||
<div class="input-control">
|
||||
<label>Title</label>
|
||||
<div class="tip">{{tip}}</div>
|
||||
{{focus-input type='text' id="page-title" value=page.title class="mousetrap"}}
|
||||
</div>
|
||||
{{#if hasExcerpt}}
|
||||
<div class="margin-top-30">
|
||||
<div class="input-control">
|
||||
<label>Excerpt</label>
|
||||
<div class="tip">Short description</div>
|
||||
{{textarea rows="3" id="page-excerpt" value=page.excerpt class="mousetrap"}}
|
||||
</div>
|
||||
<div id="section-editor-{{pageId}}">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-8 section-editor">
|
||||
<div class="form-group">
|
||||
{{focus-input type="text" id="page-title" 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="Enter name"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="dropdown-dialog cancel-edits-dialog">
|
||||
<div class="content">
|
||||
<p>Do you want to cancel editing and lose unsaved changes?</p>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<div class="flat-button" {{action 'keepEditing'}}>
|
||||
no
|
||||
{{#if hasExcerpt}}
|
||||
<div class="form-group">
|
||||
{{textarea id="page-excerpt" value=page.excerpt rows="2" class=(if hasDescError 'form-control mousetrap form-control-lg edit-title is-invalid' 'form-control form-control-lg edit-title mousetrap') placeholder="Enter description"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<div class="float-right">
|
||||
{{#if busy}}
|
||||
<img src="/assets/img/busy-gray.gif" class="busy-indicator" />
|
||||
{{/if}}
|
||||
|
||||
<div class="btn btn-success" {{action 'onAction'}}>{{actionLabel}}</div>
|
||||
<div class="btn btn-outline-secondary" id="section-editor-cancel-button-{{pageId}}" {{action 'onCancel'}}>{{cancelLabel}}</div>
|
||||
</div>
|
||||
<div class="flat-button flat-red" {{action 'discardEdits'}}>
|
||||
yes
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col section-editor">
|
||||
<div class="canvas rounded">
|
||||
{{yield}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="canvas">
|
||||
{{yield}}
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id={{concat "discard-modal"}} 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 - 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>
|
||||
|
|
@ -3,51 +3,33 @@
|
|||
isDirty=(action 'isDirty') onCancel=(action 'onCancel') onAction=(action 'onAction')}}
|
||||
|
||||
{{#if authenticated}}
|
||||
|
||||
<div class="pull-left width-50">
|
||||
{{#if noBoards}}
|
||||
<div class="input-control">
|
||||
<div class="color-error">You have no team boards to share - personal boards are never shown.</div>
|
||||
{{#if noBoards}}
|
||||
<p>You have no team boards to share - personal boards are never shown</p>
|
||||
{{else}}
|
||||
<div class="form-group">
|
||||
<label>Select Board</label>
|
||||
{{ui-select id="boards-dropdown" content=boards action=(action 'onBoardChange') optionValuePath="id" optionLabelPath="name" selection=config.board}}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="airtable-embed-cod">Select Lists</label>
|
||||
<div class="section-trello-board" style= {{boardStyle}}>
|
||||
<div class="section-trello-board-title">{{config.board.name}}</div>
|
||||
{{#each config.lists as |list|}}
|
||||
<div class="section-trello-list" {{action 'onListCheckbox' list.id}}>
|
||||
{{#if list.included}}
|
||||
<i class="material-icons widget-checkbox checkbox-gray section-trello-list-checkbox">check_box</i>
|
||||
{{else}}
|
||||
<i class="material-icons widget-checkbox checkbox-gray section-trello-list-checkbox">check_box_outline_blank</i>
|
||||
{{/if}}
|
||||
<span class="trello-list-title">{{list.name}}</span>
|
||||
</div>
|
||||
{{/each}}
|
||||
<div class="clearfix" />
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="input-control">
|
||||
<label>Select Board</label>
|
||||
<div class="tip">Choose lists to include from board</div>
|
||||
{{ui-select id="boards-dropdown" content=boards action=(action 'onBoardChange') optionValuePath="id" optionLabelPath="name" selection=config.board}}
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Lists</label>
|
||||
<div class="tip">Select lists to include</div>
|
||||
<div class="section-trello-board" style= {{boardStyle}}>
|
||||
<div class="section-trello-board-title">{{config.board.name}}</div>
|
||||
{{#each config.lists as |list|}}
|
||||
<div class="section-trello-list" {{action 'onListCheckbox' list.id}}>
|
||||
{{#if list.included}}
|
||||
<i class="material-icons widget-checkbox checkbox-gray section-trello-list-checkbox">check_box</i>
|
||||
{{else}}
|
||||
<i class="material-icons widget-checkbox checkbox-gray section-trello-list-checkbox">check_box_outline_blank</i>
|
||||
{{/if}}
|
||||
<span class="trello-list-title">{{list.name}}</span>
|
||||
</div>
|
||||
{{/each}}
|
||||
<div class="clearfix" />
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
|
||||
<div class="pull-left width-50">
|
||||
<form>
|
||||
<div class="form-header">
|
||||
<div class="title">Authentication</div>
|
||||
<div class="tip">Click to authenticate with Trello</div>
|
||||
</div>
|
||||
<div class="regular-button button-blue" {{ action 'auth' }}>Authenticate</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="btn btn-success" {{action 'auth'}}>Authenticate</div>
|
||||
{{/if}}
|
||||
|
||||
{{/section/base-editor}}
|
||||
|
|
@ -3,80 +3,85 @@
|
|||
{{#toolbar/t-links}}
|
||||
{{#link-to "folders" class="link" tagName="li"}}Spaces{{/link-to}}
|
||||
{{#link-to "folder" space.id space.slug class="link" tagName="li"}}{{space.name}}{{/link-to}}
|
||||
{{#if showDocumentLink}}
|
||||
{{#link-to 'document.index' space.id space.slug document.id document.slug class="link"}}{{document.name}}{{/link-to}}
|
||||
{{/if}}
|
||||
{{/toolbar/t-links}}
|
||||
|
||||
{{#toolbar/t-actions}}
|
||||
{{#if session.authenticated}}
|
||||
{{#if permissions.documentAdd}}
|
||||
<div id="document-template-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Save as template">
|
||||
<i class="material-icons" data-toggle="modal" data-target="#document-template-modal" data-backdrop="static">content_copy</i>
|
||||
{{#if showTools}}
|
||||
{{#toolbar/t-actions}}
|
||||
{{#if session.authenticated}}
|
||||
{{#if permissions.documentAdd}}
|
||||
<div id="document-template-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Save as template">
|
||||
<i class="material-icons" data-toggle="modal" data-target="#document-template-modal" data-backdrop="static">content_copy</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
<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>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
<div id="document-print-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Print" {{action 'onPrintDocument'}}>
|
||||
<i class="material-icons">print</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
|
||||
{{#if pinState.isPinned}}
|
||||
<div id="document-pin-button" class="button-icon-gold align-middle" data-toggle="tooltip" data-placement="top" title="Remove favorite" {{action 'onUnpin'}}>
|
||||
<i class="material-icons">star</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
<div id="document-template-modal" class="modal" tabindex="-1" role="dialog">
|
||||
{{else if session.authenticated}}
|
||||
<div id="document-pin-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Save favorite" {{action 'onPin'}}>
|
||||
<i class="material-icons">star</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
{{/if}}
|
||||
|
||||
{{#if permissions.documentDelete}}
|
||||
<div id="document-delete-button" class="button-icon-danger align-middle" data-toggle="tooltip" data-placement="top" title="Delete document">
|
||||
<i class="material-icons" data-toggle="modal" data-target="#document-delete-modal" data-backdrop="static">delete</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
<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">Save as Template</div>
|
||||
<div class="modal-header">Delete Document</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>
|
||||
<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-success" onclick={{action 'onSaveTemplate'}}>Save</button>
|
||||
<button type="button" class="btn btn-danger" onclick={{action 'onDocumentDelete'}}>Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
<div id="document-print-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Print" {{action 'onPrintDocument'}}>
|
||||
<i class="material-icons">print</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
|
||||
{{#if pinState.isPinned}}
|
||||
<div id="document-pin-button" class="button-icon-gold align-middle" data-toggle="tooltip" data-placement="top" title="Remove favorite" {{action 'onUnpin'}}>
|
||||
<i class="material-icons">star</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
{{else if session.authenticated}}
|
||||
<div id="document-pin-button" class="button-icon-gray align-middle" data-toggle="tooltip" data-placement="top" title="Save favorite" {{action 'onPin'}}>
|
||||
<i class="material-icons">star</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
{{/if}}
|
||||
|
||||
{{#if permissions.documentDelete}}
|
||||
<div id="document-delete-button" class="button-icon-danger align-middle" data-toggle="tooltip" data-placement="top" title="Delete document">
|
||||
<i class="material-icons" data-toggle="modal" data-target="#document-delete-modal" data-backdrop="static">delete</i>
|
||||
</div>
|
||||
<div class="button-icon-gap" />
|
||||
<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>
|
||||
{{/if}}
|
||||
{{/toolbar/t-actions}}
|
||||
{{/toolbar/t-actions}}
|
||||
{{/if}}
|
||||
|
||||
{{/toolbar/t-toolbar}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue