REFACTOR: composer to use flexbox
This commit is contained in:
Régis Hanol
@@ -13,28 +13,6 @@
|
||||
forcePreview=forcePreview
|
||||
composerEvents=true}}
|
||||
|
||||
<div class="composer-bottom-right">
|
||||
{{#if site.mobileView}}
|
||||
{{#if site.mobileView}}
|
||||
<input type="file" id="mobile-uploader" multiple />
|
||||
<a class="mobile-file-upload {{if isUploading 'hidden'}}">{{i18n 'upload'}}</a>
|
||||
|
||||
{{#if showPreview}}
|
||||
{{d-button action='togglePreview' class='hide-preview' label='composer.hide_preview'}}
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<a href {{action "togglePreview"}} class='toggle-preview'>{{{toggleText}}}</a>
|
||||
{{/if}}
|
||||
|
||||
{{#if isUploading}}
|
||||
<div id="file-uploading">
|
||||
{{loading-spinner size="small"}} {{i18n 'upload_selector.uploading'}}
|
||||
{{uploadProgress}}%
|
||||
{{#if isCancellable}}
|
||||
<a href id="cancel-file-upload" {{action "cancelUpload"}}>{{d-icon "times"}}</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
<div id='draft-status' class="{{if isUploading 'hidden'}}">
|
||||
{{draftStatus}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<div class='d-editor-overlay hidden'></div>
|
||||
|
||||
<div class='d-editor-modals'>
|
||||
{{#d-editor-modal class="insert-link" hidden=insertLinkHidden okAction="insertLink"}}
|
||||
<h3>{{i18n "composer.link_dialog_title"}}</h3>
|
||||
@@ -8,19 +9,18 @@
|
||||
</div>
|
||||
|
||||
<div class='d-editor-container'>
|
||||
<div class='d-editor-button-bar'>
|
||||
{{#each toolbar.groups as |group|}}
|
||||
{{#each group.buttons as |b|}}
|
||||
{{d-button action=b.action actionParam=b translatedTitle=b.title label=b.label icon=b.icon class=b.className}}
|
||||
{{/each}}
|
||||
{{#unless group.lastGroup}}
|
||||
<div class='d-editor-spacer'></div>
|
||||
{{/unless}}
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class='d-editor-preview-header'></div>
|
||||
|
||||
<div class="d-editor-textarea-wrapper">
|
||||
<div class='d-editor-button-bar'>
|
||||
{{#each toolbar.groups as |group|}}
|
||||
{{#each group.buttons as |b|}}
|
||||
{{d-button action=b.action actionParam=b translatedTitle=b.title label=b.label icon=b.icon class=b.className}}
|
||||
{{/each}}
|
||||
{{#unless group.lastGroup}}
|
||||
<div class='d-editor-spacer'></div>
|
||||
{{/unless}}
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
{{conditional-loading-spinner condition=loading}}
|
||||
{{textarea tabindex=tabindex value=value class="d-editor-input" placeholder=placeholderTranslated}}
|
||||
{{popup-input-tip validation=validation}}
|
||||
@@ -30,7 +30,7 @@
|
||||
<div class="d-editor-preview">
|
||||
{{{preview}}}
|
||||
</div>
|
||||
{{plugin-outlet name="editor-preview"}}
|
||||
{{plugin-outlet name="editor-preview" classNames="d-editor-plugin"}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
{{#composer-body
|
||||
composer=model
|
||||
openIfDraft="openIfDraft"
|
||||
typed="typed"
|
||||
cancelled="cancelled"
|
||||
save="save"}}
|
||||
{{#composer-body composer=model
|
||||
showPreview=showPreview
|
||||
openIfDraft="openIfDraft"
|
||||
typed="typed"
|
||||
cancelled="cancelled"
|
||||
save="save"}}
|
||||
|
||||
{{#if visible}}
|
||||
<div class='contents'>
|
||||
|
||||
{{#if showPopupMenu}}
|
||||
{{#popup-menu visible=optionsVisible hide="hideOptions" title="composer.options"}}
|
||||
@@ -19,134 +19,169 @@
|
||||
{{/popup-menu}}
|
||||
{{/if}}
|
||||
|
||||
{{composer-messages composer=model messageCount=messageCount addLinkLookup="addLinkLookup"}}
|
||||
{{composer-messages composer=model
|
||||
messageCount=messageCount
|
||||
addLinkLookup="addLinkLookup"}}
|
||||
|
||||
<div class='control'>
|
||||
{{composer-toggles
|
||||
composeState=model.composeState
|
||||
toggleComposer=(action "toggle")
|
||||
toggleToolbar=(action "toggleToolbar")}}
|
||||
{{composer-toggles composeState=model.composeState
|
||||
toggleComposer=(action "toggle")
|
||||
toggleToolbar=(action "toggleToolbar")}}
|
||||
|
||||
{{#if model.viewOpen}}
|
||||
<div class='control-row reply-area'>
|
||||
<div class='composer-fields'>
|
||||
{{plugin-outlet name="composer-open" args=(hash model=model)}}
|
||||
{{#if model.viewOpen}}
|
||||
|
||||
<div class='reply-to'>
|
||||
{{{model.actionTitle}}}
|
||||
{{#unless site.mobileView}}
|
||||
<div class='reply-area {{if canEditTags "with-tags"}}'>
|
||||
|
||||
<div class='composer-fields'>
|
||||
|
||||
{{plugin-outlet name="composer-open" args=(hash model=model)}}
|
||||
|
||||
<div class='reply-to'>
|
||||
{{{model.actionTitle}}}
|
||||
|
||||
{{#unless site.mobileView}}
|
||||
{{#if whisperOrUnlistTopicText}}
|
||||
<span class='whisper'>({{whisperOrUnlistTopicText}})</span>
|
||||
{{/if}}
|
||||
{{/unless}}
|
||||
{{/unless}}
|
||||
|
||||
{{#if canEdit}}
|
||||
{{#if showEditReason}}
|
||||
<div class="edit-reason-input">
|
||||
{{text-field autofocus="true" value=editReason tabindex="7" id="edit-reason" maxlength="255" placeholderKey="composer.edit_reason_placeholder"}}
|
||||
</div>
|
||||
{{else}}
|
||||
<a {{action "displayEditReason"}} class="display-edit-reason">{{i18n 'composer.show_edit_reason'}}</a>
|
||||
{{/if}}
|
||||
{{#if canEdit}}
|
||||
{{#if showEditReason}}
|
||||
{{text-field autofocus="true" value=editReason tabindex="7" id="edit-reason" maxlength="255" placeholderKey="composer.edit_reason_placeholder"}}
|
||||
{{else}}
|
||||
<a {{action "displayEditReason"}} class="display-edit-reason">{{i18n 'composer.show_edit_reason'}}</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
{{#if model.canEditTitle}}
|
||||
<div class='form-element clearfix'>
|
||||
{{#if model.creatingPrivateMessage}}
|
||||
{{composer-user-selector topicId=topicModel.id
|
||||
usernames=model.targetUsernames
|
||||
hasGroups=model.hasTargetGroups
|
||||
focusTarget=focusTarget}}
|
||||
{{#if showWarning}}
|
||||
<div class='add-warning'>
|
||||
<label>
|
||||
{{input type="checkbox" checked=model.isWarning tabindex="3"}}
|
||||
{{i18n "composer.add_warning"}}
|
||||
</label>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
{{composer-title composer=model lastValidatedAt=lastValidatedAt focusTarget=focusTarget}}
|
||||
|
||||
{{#if model.showCategoryChooser}}
|
||||
<div class="category-input">
|
||||
{{category-chooser value=model.categoryId scopedCategoryId=scopedCategoryId tabindex="3"}}
|
||||
{{popup-input-tip validation=categoryValidation}}
|
||||
</div>
|
||||
{{#if model.archetype.hasOptions}}
|
||||
{{d-button action="showOptions" label="topic.options"}}
|
||||
{{/if}}
|
||||
{{#if model.canEditTitle}}
|
||||
{{#if model.creatingPrivateMessage}}
|
||||
<div class='user-selector'>
|
||||
{{composer-user-selector topicId=topicModel.id
|
||||
usernames=model.targetUsernames
|
||||
hasGroups=model.hasTargetGroups
|
||||
focusTarget=focusTarget
|
||||
class="users-input"}}
|
||||
{{#if showWarning}}
|
||||
<label class='add-warning'>
|
||||
{{input type="checkbox" checked=model.isWarning tabindex="3"}}
|
||||
{{i18n "composer.add_warning"}}
|
||||
</label>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{plugin-outlet name="composer-fields" args=(hash model=model)}}
|
||||
</div>
|
||||
|
||||
{{composer-editor topic=topic
|
||||
composer=model
|
||||
lastValidatedAt=lastValidatedAt
|
||||
canWhisper=canWhisper
|
||||
showPopupMenu=showPopupMenu
|
||||
draftStatus=model.draftStatus
|
||||
isUploading=isUploading
|
||||
groupsMentioned="groupsMentioned"
|
||||
cannotSeeMention="cannotSeeMention"
|
||||
importQuote="importQuote"
|
||||
showOptions="showOptions"
|
||||
hideOptions="hideOptions"
|
||||
optionsVisible=optionsVisible
|
||||
showToolbar=showToolbar
|
||||
showUploadSelector="showUploadSelector"
|
||||
afterRefresh="afterRefresh"}}
|
||||
<div class="title-and-category">
|
||||
|
||||
{{#if currentUser}}
|
||||
<div class='submit-panel'>
|
||||
{{plugin-outlet name="composer-fields-below" args=(hash model=model)}}
|
||||
{{#if canEditTags}}
|
||||
{{tag-chooser tags=model.tags tabIndex="4" categoryId=model.categoryId}}
|
||||
{{composer-title composer=model lastValidatedAt=lastValidatedAt focusTarget=focusTarget}}
|
||||
|
||||
{{#if model.showCategoryChooser}}
|
||||
<div class="category-input">
|
||||
{{category-chooser value=model.categoryId scopedCategoryId=scopedCategoryId tabindex="3"}}
|
||||
{{popup-input-tip validation=categoryValidation}}
|
||||
</div>
|
||||
{{#if model.archetype.hasOptions}}
|
||||
{{d-button action="showOptions" label="topic.options"}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{composer-save-button
|
||||
action=(action "save")
|
||||
icon=model.saveIcon
|
||||
label=model.saveLabel
|
||||
disableSubmit=disableSubmit}}
|
||||
|
||||
<a href {{action "cancel"}} class='cancel' tabindex="6">{{i18n 'cancel'}}</a>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if site.mobileView}}
|
||||
{{plugin-outlet name="composer-fields" args=(hash model=model)}}
|
||||
|
||||
</div>
|
||||
|
||||
{{composer-editor topic=topic
|
||||
composer=model
|
||||
lastValidatedAt=lastValidatedAt
|
||||
canWhisper=canWhisper
|
||||
showPopupMenu=showPopupMenu
|
||||
draftStatus=model.draftStatus
|
||||
isUploading=isUploading
|
||||
isCancellable=isCancellable
|
||||
uploadProgress=uploadProgress
|
||||
groupsMentioned="groupsMentioned"
|
||||
cannotSeeMention="cannotSeeMention"
|
||||
importQuote="importQuote"
|
||||
showOptions="showOptions"
|
||||
hideOptions="hideOptions"
|
||||
optionsVisible=optionsVisible
|
||||
togglePreview="togglePreview"
|
||||
showToolbar=showToolbar
|
||||
showUploadSelector="showUploadSelector"
|
||||
afterRefresh="afterRefresh"}}
|
||||
|
||||
<div class='submit-panel {{if canEditTags "with-tags"}}'>
|
||||
{{plugin-outlet name="composer-fields-below" args=(hash model=model)}}
|
||||
|
||||
{{#if canEditTags}}
|
||||
{{tag-chooser tags=model.tags tabIndex="4" categoryId=model.categoryId}}
|
||||
{{/if}}
|
||||
|
||||
<div class='save-or-cancel'>
|
||||
{{composer-save-button action=(action "save")
|
||||
icon=model.saveIcon
|
||||
label=model.saveLabel
|
||||
disableSubmit=disableSubmit}}
|
||||
|
||||
<a href {{action "cancel"}} class='cancel' tabindex="6">{{i18n 'cancel'}}</a>
|
||||
|
||||
{{#if site.mobileView}}
|
||||
{{#if whisperOrUnlistTopic}}
|
||||
<span class='whisper'>
|
||||
{{d-icon "eye-slash"}}
|
||||
</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class='row'>
|
||||
<div class='span24'>
|
||||
<div class='saving-text'>
|
||||
{{#if model.createdPost}}
|
||||
{{i18n 'composer.saved'}} <a class='permalink' href="{{unbound createdPost.url}}" {{action "viewNewReply"}}>{{i18n 'composer.view_new_post'}}</a>
|
||||
{{else}}
|
||||
{{i18n 'composer.saving'}} {{loading-spinner size="small"}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class='draft-text'>
|
||||
{{#if model.topic}}
|
||||
{{d-icon "mail-forward"}} {{{draftTitle}}}
|
||||
{{else}}
|
||||
{{i18n "composer.saved_draft"}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
|
||||
{{#if isUploading}}
|
||||
<div id="file-uploading">
|
||||
{{loading-spinner size="small"}} {{i18n 'upload_selector.uploading'}}
|
||||
{{uploadProgress}}%
|
||||
{{#if isCancellable}}
|
||||
<a href id="cancel-file-upload" {{action "cancelUpload"}}>{{d-icon "times"}}</a>
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
<div id='draft-status' class="{{if isUploading 'hidden'}}">
|
||||
{{model.draftStatus}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="composer-bottom-right">
|
||||
{{#if site.mobileView}}
|
||||
<a class="mobile-file-upload {{if isUploading 'hidden'}}">{{i18n 'upload'}}</a>
|
||||
|
||||
{{#if showPreview}}
|
||||
{{d-button action='togglePreview' class='hide-preview' label='composer.hide_preview'}}
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<a href {{action "togglePreview"}} class='toggle-preview'>{{{toggleText}}}</a>
|
||||
{{/if}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{else}}
|
||||
<div class='saving-text'>
|
||||
{{#if model.createdPost}}
|
||||
{{i18n 'composer.saved'}} <a class='permalink' href="{{unbound createdPost.url}}" {{action "viewNewReply"}}>{{i18n 'composer.view_new_post'}}</a>
|
||||
{{else}}
|
||||
{{i18n 'composer.saving'}} {{loading-spinner size="small"}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<div class='draft-text'>
|
||||
{{#if model.topic}}
|
||||
{{d-icon "mail-forward"}} {{{draftTitle}}}
|
||||
{{else}}
|
||||
{{i18n "composer.saved_draft"}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{/if}}
|
||||
|
||||
{{/composer-body}}
|
||||
|
||||
Reference in New Issue
Block a user