mirror of
https://github.com/documize/community.git
synced 2025-08-02 20:15:26 +02:00
New toolbar styling and layout controls
Built to work with forthcoming feature set that requires display of more options.
This commit is contained in:
parent
08794f8d5f
commit
de273a38ed
19 changed files with 580 additions and 289 deletions
|
@ -1,14 +1,53 @@
|
|||
<div class="text-right no-print">
|
||||
{{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false}}
|
||||
{{#ui/ui-toolbar-icon icon=constants.Icon.Export color=constants.Color.Gray tooltip="Print, PDF, Export"}}
|
||||
{{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false}}
|
||||
{{#if (or showActivity showRevisions)}}
|
||||
{{#ui/ui-toolbar-dropdown label="History" arrow=true}}
|
||||
{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
|
||||
<ul class="menu">
|
||||
<li class="item" {{action "onExport"}}>Export as HTML file</li>
|
||||
<li class="item" {{action "onPrintDocument"}}>Print...</li>
|
||||
{{#if showActivity}}
|
||||
{{#link-to "document.activity" class="item"}}Activity summary{{/link-to}}
|
||||
{{/if}}
|
||||
{{#if showRevisions}}
|
||||
{{#link-to "document.revisions" class="item"}}Revisions{{/link-to}}
|
||||
{{/if}}
|
||||
</ul>
|
||||
{{/attach-popover}}
|
||||
{{/ui/ui-toolbar-icon}}
|
||||
{{/ui/ui-toolbar-dropdown}}
|
||||
<Ui::UiToolbarDivider />
|
||||
{{/if}}
|
||||
|
||||
{{#ui/ui-toolbar-dropdown label="Export" arrow=true}}
|
||||
{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
|
||||
<ul class="menu">
|
||||
<li class="item" {{action "onPrintDocument"}}>Send to print...</li>
|
||||
<li class="item" {{action "onExport"}}>Download HTML file</li>
|
||||
</ul>
|
||||
{{/attach-popover}}
|
||||
{{/ui/ui-toolbar-dropdown}}
|
||||
|
||||
<Ui::UiToolbarDivider />
|
||||
|
||||
{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
|
||||
{{#if permissions.documentEdit}}
|
||||
{{#ui/ui-toolbar-icon icon=constants.Icon.UserAssign color=constants.Color.Gray tooltip="Actions & Sharing"}}
|
||||
{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
|
||||
<ul class="menu">
|
||||
<li class="item" {{action "onShowRequestContributionModal"}}>Request contribution</li>
|
||||
<li class="item" {{action "onShowRequestFeedbackModal"}}>Request feedback</li>
|
||||
<li class="item" {{action "onShowRequestReadModal"}}>Request read</li>
|
||||
{{#if (eq document.lifecycle constants.Lifecycle.Draft)}}
|
||||
<li class="divider"/>
|
||||
<li class="item" {{action "onShowPublishModal"}}>Request publication</li>
|
||||
{{/if}}
|
||||
<li class="divider"/>
|
||||
<li class="item" {{action "onShareModal"}}>Share via secure external link</li>
|
||||
</ul>
|
||||
{{/attach-popover}}
|
||||
{{/ui/ui-toolbar-icon}}
|
||||
<Ui::UiToolbarDivider />
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{#if (or pinState.isPinned session.authenticated)}}
|
||||
{{#if pinState.isPinned}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.BookmarkDelete color=constants.Color.Yellow
|
||||
tooltip="Remove from bookmarks" onClick=(action "onUnpin")}}
|
||||
|
@ -16,57 +55,24 @@
|
|||
{{ui/ui-toolbar-icon icon=constants.Icon.BookmarkAdd color=constants.Color.Gray
|
||||
tooltip="Bookmark" onClick=(action "onPin")}}
|
||||
{{/if}}
|
||||
|
||||
{{#if permissions.documentEdit}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.Settings color=constants.Color.Gray
|
||||
tooltip="Rename, Categories, Tag, Status, Workflow" linkTo="document.settings"}}
|
||||
{{/if}}
|
||||
{{/ui/ui-toolbar}}
|
||||
|
||||
{{#if hasToolbar}}
|
||||
{{#ui/ui-toolbar dark=false light=true raised=true large=true bordered=true}}
|
||||
{{#if (eq appMeta.edition constants.Product.EnterpriseEdition)}}
|
||||
{{#if permissions.documentEdit}}
|
||||
{{#ui/ui-toolbar-icon icon=constants.Icon.UserAssign color=constants.Color.Gray tooltip="Actions & Sharing"}}
|
||||
{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
|
||||
<ul class="menu">
|
||||
<li class="item" {{action "onShowRequestContributionModal"}}>Request contribution</li>
|
||||
<li class="item" {{action "onShowRequestFeedbackModal"}}>Request feedback</li>
|
||||
<li class="item" {{action "onShowRequestReadModal"}}>Request read</li>
|
||||
{{#if (eq document.lifecycle constants.Lifecycle.Draft)}}
|
||||
<li class="divider"/>
|
||||
<li class="item" {{action "onShowPublishModal"}}>Request publication</li>
|
||||
{{/if}}
|
||||
<li class="divider"/>
|
||||
<li class="item" {{action "onShareModal"}}>Share via secure external link</li>
|
||||
</ul>
|
||||
{{/attach-popover}}
|
||||
{{/ui/ui-toolbar-icon}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{#if showActivity}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.Pulse color=constants.Color.Gray
|
||||
tooltip="See content activity" linkTo="document.activity"}}
|
||||
{{/if}}
|
||||
|
||||
{{#if showRevisions}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.TimeBack color=constants.Color.Gray
|
||||
tooltip="Revisions and rollback" linkTo="document.revisions"}}
|
||||
{{/if}}
|
||||
|
||||
{{#if permissions.documentAdd}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.Copy color=constants.Color.Gray
|
||||
tooltip="Save as template" onClick=(action "onShowTemplateModal")}}
|
||||
{{/if}}
|
||||
|
||||
{{#if permissions.documentDelete}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.Delete color=constants.Color.Gray
|
||||
tooltip="Delete" onClick=(action "onShowDeleteModal")}}
|
||||
{{/if}}
|
||||
{{/ui/ui-toolbar}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if permissions.documentAdd}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.Copy
|
||||
tooltip="Save as template" onClick=(action "onShowTemplateModal")}}
|
||||
{{/if}}
|
||||
|
||||
{{#if permissions.documentDelete}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.Delete
|
||||
tooltip="Delete" onClick=(action "onShowDeleteModal")}}
|
||||
{{/if}}
|
||||
|
||||
{{#if permissions.documentEdit}}
|
||||
<Ui::UiToolbarDivider />
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.Settings color=constants.Color.Green
|
||||
tooltip="Rename, Categories, Tag, Status, Workflow" linkTo="document.settings"}}
|
||||
{{/if}}
|
||||
{{/ui/ui-toolbar}}
|
||||
|
||||
<div id="document-template-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
{{#ui/ui-toolbar dark=false light=false raised=false large=true bordered=false}}
|
||||
{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
|
||||
{{#if hasDocuments}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.Export color=constants.Color.Gray
|
||||
tooltip="Export as HTML" onClick=(action "onShowExport")}}
|
||||
|
@ -18,9 +18,8 @@
|
|||
{{/ui/ui-toolbar}}
|
||||
|
||||
{{#if permissions.documentAdd}}
|
||||
{{#ui/ui-toolbar dark=false light=true raised=true large=false bordered=true}}
|
||||
{{ui/ui-toolbar-icon icon=constants.Icon.Plus color=constants.Color.Green}}
|
||||
{{ui/ui-toolbar-label label="CONTENT" color=constants.Color.Green}}
|
||||
{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
|
||||
{{ui/ui-toolbar-button color=constants.Color.Green uppercase=false icon=constants.Icon.Plus label="CONTENT"}}
|
||||
{{#attach-popover class="ember-attacher-popper" hideOn="clickout" showOn="click" isShown=false}}
|
||||
<div class="menu">
|
||||
<a class="item" href="#" {{action "onShowEmptyDocModal"}}>Blank canvas</a>
|
||||
|
@ -31,88 +30,88 @@
|
|||
</div>
|
||||
{{/attach-popover}}
|
||||
{{/ui/ui-toolbar}}
|
||||
{{/if}}
|
||||
|
||||
<div id="empty-doc-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Blank Canvas</div>
|
||||
<div class="modal-body">
|
||||
<form onsubmit={{action "onAddEmptyDoc"}}>
|
||||
<div class="form-group">
|
||||
<label for="empty-doc-name">Document Name</label>
|
||||
{{input id="empty-doc-name" type="text" value=emptyDocName placeholder="Enter name" class=(if emptyDocNameError "form-control mousetrap is-invalid" "form-control mousetrap") autocomplete="off"}}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
|
||||
{{ui/ui-button-gap}}
|
||||
{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Add onClick=(action "onAddEmptyDoc")}}
|
||||
</div>
|
||||
<div id="empty-doc-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Blank Canvas</div>
|
||||
<div class="modal-body">
|
||||
<form onsubmit={{action "onAddEmptyDoc"}}>
|
||||
<div class="form-group">
|
||||
<label for="empty-doc-name">Document Name</label>
|
||||
{{input id="empty-doc-name" type="text" value=emptyDocName placeholder="Enter name" class=(if emptyDocNameError "form-control mousetrap is-invalid" "form-control mousetrap") autocomplete="off"}}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
|
||||
{{ui/ui-button-gap}}
|
||||
{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Add onClick=(action "onAddEmptyDoc")}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="template-doc-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">From Template</div>
|
||||
<div class="modal-body">
|
||||
<form onsubmit={{action "onAddTemplateDoc"}}>
|
||||
<div class="form-group">
|
||||
<label for="template-doc-name">Document Name</label>
|
||||
{{input id="template-doc-name" type="text" value=templateDocName placeholder="Enter name" class=(if templateDocNameError "form-control mousetrap is-invalid" "form-control mousetrap") autocomplete="off"}}
|
||||
</div>
|
||||
<div class="widget-list-picker">
|
||||
<ul class="options">
|
||||
{{#each templates as |item|}}
|
||||
<li class="option {{if item.selected "selected"}}" {{action "onSelectTemplate" item}}>
|
||||
<div class="text text-truncate">
|
||||
{{item.name}}<br>{{item.excerpt}}
|
||||
</div>
|
||||
{{#if item.selected}}
|
||||
<i class="dicon {{constants.Icon.Tick}}" />
|
||||
{{/if}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
|
||||
{{ui/ui-button-gap}}
|
||||
{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Add onClick=(action "onAddTemplateDoc")}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="import-doc-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Import Files</div>
|
||||
<div class="modal-body">
|
||||
<div class="import-zone">
|
||||
<button id="import-document-button" type="button" class="dmz-button-yellow-light text-center">
|
||||
<br>
|
||||
Click to select files or drag-drop files
|
||||
<br><br>
|
||||
.doc, .docx, .md, .markdown
|
||||
<br><br>
|
||||
</button>
|
||||
<div class="import-status">
|
||||
{{#each importStatus as |status|}}
|
||||
<p>{{status}}</p>
|
||||
</div>
|
||||
<div id="template-doc-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">From Template</div>
|
||||
<div class="modal-body">
|
||||
<form onsubmit={{action "onAddTemplateDoc"}}>
|
||||
<div class="form-group">
|
||||
<label for="template-doc-name">Document Name</label>
|
||||
{{input id="template-doc-name" type="text" value=templateDocName placeholder="Enter name" class=(if templateDocNameError "form-control mousetrap is-invalid" "form-control mousetrap") autocomplete="off"}}
|
||||
</div>
|
||||
<div class="widget-list-picker">
|
||||
<ul class="options">
|
||||
{{#each templates as |item|}}
|
||||
<li class="option {{if item.selected "selected"}}" {{action "onSelectTemplate" item}}>
|
||||
<div class="text text-truncate">
|
||||
{{item.name}}<br>{{item.excerpt}}
|
||||
</div>
|
||||
{{#if item.selected}}
|
||||
<i class="dicon {{constants.Icon.Tick}}" />
|
||||
{{/if}}
|
||||
</li>
|
||||
{{/each}}
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
|
||||
{{ui/ui-button-gap}}
|
||||
{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Add onClick=(action "onAddTemplateDoc")}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="import-doc-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">Import Files</div>
|
||||
<div class="modal-body">
|
||||
<div class="import-zone">
|
||||
<button id="import-document-button" type="button" class="dmz-button-yellow-light text-center">
|
||||
<br>
|
||||
Click to select files or drag-drop files
|
||||
<br><br>
|
||||
.doc, .docx, .md, .markdown
|
||||
<br><br>
|
||||
</button>
|
||||
<div class="import-status">
|
||||
{{#each importStatus as |status|}}
|
||||
<p>{{status}}</p>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div id="space-export-modal" class="modal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
|
|
5
gui/app/templates/components/ui/ui-toolbar-button.hbs
Normal file
5
gui/app/templates/components/ui/ui-toolbar-button.hbs
Normal file
|
@ -0,0 +1,5 @@
|
|||
{{#if hasIcon}}
|
||||
<i class="dicon {{iconClass}}"/>
|
||||
{{/if}}
|
||||
<div class="label" title={{label}}>{{label}}</div>
|
||||
{{yield}}
|
0
gui/app/templates/components/ui/ui-toolbar-divider.hbs
Normal file
0
gui/app/templates/components/ui/ui-toolbar-divider.hbs
Normal file
5
gui/app/templates/components/ui/ui-toolbar-dropdown.hbs
Normal file
5
gui/app/templates/components/ui/ui-toolbar-dropdown.hbs
Normal file
|
@ -0,0 +1,5 @@
|
|||
<div class="label" title={{label}}>{{label}}</div>
|
||||
{{#if this.arrow}}
|
||||
<i class="dicon {{iconClass}}"/>
|
||||
{{/if}}
|
||||
{{yield}}
|
Loading…
Add table
Add a link
Reference in a new issue