Docker/documize
Docker/documize
1
0
Fork 0
mirror of https://github.com/documize/community.git synced 2025-08-02 12:05:23 +02:00
Code Releases Activity

Turn add section UX into modal flow

Browse source 
At long last we have a modal-driven add section process @HarveyKandola !
This commit is contained in:
sauls8t 2018-06-04 14:37:21 +01:00
parent 716bd062d7
commit fca6cc7ede
8 changed files with 286 additions and 303 deletions
Download patch file Download diff file Expand all files Collapse all files

64
gui/app/templates/components/document/add-section.hbs Normal file
View file

@ -0,0 +1,64 @@
<div id="add-section-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-80" role="document">
<div class="modal-content">
<div class="modal-header">Insert Section</div>
<div class="modal-body">
<div id="new-section-wizard" class="new-section-wizard">
<div class="container box">
<div class="row">
<div class="col-12">
<div class="form-group">
{{focus-input type="text" id="new-section-name" value=newSectionName
class=(if newSectionNameMissing 'mousetrap form-control form-control-lg is-invalid' 'mousetrap form-control form-control-lg')
placeholder="Enter section name" autocomplete="off"}}
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6">
<div class="form-group">
<div class="new-section-caption">Select Section Type</div>
<ul class="preset-list">
{{#each sections as |section|}}
<li class="item" {{action 'onInsertSection' section}}>
<div class="icon">
<img class="img" src="/sections/{{section.contentType}}.png" srcset="/sections/{{section.contentType}}@2x.png" />
</div>
<div class='title'>{{section.title}}</div>
</li>
{{/each}}
</ul>
</div>
</div>
<div class="col-12 col-md-6">
{{#if hasBlocks}}
<div class="new-section-caption">Select Re-usable Content</div>
<ul class="block-list">
{{#each blocks as |block|}}
<li class="item" title="{{block.firstname}} {{block.lastname}}, {{time-ago block.created}}, used: {{ block.used }}" data-toggle="tooltip" data-placement="top">
<div class="details" {{action 'onInsertBlock' block}}>
<div class="title text-truncate">{{block.title}}</div>
<div class="desc text-truncate">{{block.excerpt}}</div>
</div>
</li>
{{/each}}
</ul>
{{else}}
<div class="template-caption">You have no reusable content &mdash; publish any section as a template</div>
{{/if}}
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>