Move upload button into toolbar

Currently we have the odd situation to have two toolbars. One inside the
header and one in the editor.

Since we only show the image upload button when the editor is visible we
should move the upload button into the editor toolbar.

This patch does this by adding the image upload button besides the image
tag button.

Signed-off-by: Sheogorath <sheogorath@shivering-isles.com>
This commit is contained in:
Sheogorath 2019-03-25 17:41:51 +01:00
parent 50c80c99a4
commit 1544b45af5
No known key found for this signature in database
GPG key ID: 1F05CC3635CDDFFD
5 changed files with 13 additions and 23 deletions

View file

@ -304,7 +304,6 @@ var editor = editorInstance.init(textit)
// FIXME: global referncing in jquery-textcomplete patch
window.editor = editor
var inlineAttach = inlineAttachment.editors.codemirror4.attach(editor)
defaultTextHeight = parseInt($('.CodeMirror').css('line-height'))
// initalize ui reference
@ -801,7 +800,6 @@ function changeMode (type) {
editor.getInputField().blur()
}
if (appState.currentMode === modeType.edit || appState.currentMode === modeType.both) {
ui.toolbar.uploadImage.fadeIn()
// add and update status bar
if (!editorInstance.statusBar) {
editorInstance.addStatusBar()
@ -814,8 +812,6 @@ function changeMode (type) {
// work around foldGutter might not init properly
editor.setOption('foldGutter', false)
editor.setOption('foldGutter', true)
} else {
ui.toolbar.uploadImage.fadeOut()
}
if (appState.currentMode !== modeType.edit) {
$(document.body).css('background-color', 'white')
@ -1051,17 +1047,6 @@ ui.toolbar.import.snippet.click(function () {
ui.spinner.hide()
})
})
// import from clipboard
ui.toolbar.import.clipboard.click(function () {
// na
})
// upload image
ui.toolbar.uploadImage.bind('change', function (e) {
var files = e.target.files || e.dataTransfer.files
e.dataTransfer = {}
e.dataTransfer.files = files
inlineAttach.onDrop(e)
})
// toc
ui.toc.dropdown.click(function (e) {
e.stopPropagation()

View file

@ -138,6 +138,7 @@ export default class Editor {
}
addToolBar () {
var inlineAttach = inlineAttachment.editors.codemirror4.attach(this.editor)
this.toolBar = $(toolBarTemplate)
this.toolbarPanel = this.editor.addPanel(this.toolBar[0], {
position: 'top'
@ -157,6 +158,7 @@ export default class Editor {
var makeTable = $('#makeTable')
var makeLine = $('#makeLine')
var makeComment = $('#makeComment')
var uploadImage = $('#uploadImage')
makeBold.click(() => {
utils.wrapTextWith(this.editor, this.editor, '**')
@ -217,6 +219,13 @@ export default class Editor {
makeComment.click(() => {
utils.insertText(this.editor, '> []')
})
uploadImage.bind('change', function (e) {
console.log("tiggered")
var files = e.target.files || e.dataTransfer.files
e.dataTransfer = {}
e.dataTransfer.files = files
inlineAttach.onDrop(e)
})
}
addStatusBar () {

View file

@ -34,6 +34,9 @@
<a id="makeImage" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Image">
<i class="fa fa-image fa-fw"></i>
</a>
<span id="uploadImage" class="btn btn-sm btn-dark btn-file ui-upload-image" title="Upload Image">
<i class="fa fa-upload fa-fw"></i><input type="file" accept="image/*" name="upload" multiple>
</span>
<a id="makeTable" class="btn btn-sm btn-dark text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Table">
<i class="fa fa-table fa-fw"></i>
</a>

View file

@ -35,8 +35,7 @@ export const getUIElements = () => ({
edit: $('.ui-edit'),
view: $('.ui-view'),
both: $('.ui-both'),
night: $('.ui-night'),
uploadImage: $('.ui-upload-image')
night: $('.ui-night')
},
infobar: {
lastchange: $('.ui-lastchange'),

View file

@ -15,9 +15,6 @@
</div>
<a class="navbar-brand pull-left" href="<%- serverURL %>/"><i class="fa fa-file-text"></i> CodiMD</a>
<div class="nav-mobile pull-right visible-xs">
<span class="btn btn-link btn-file ui-upload-image" title="Upload Image" style="display:none;">
<i class="fa fa-camera"></i><input type="file" accept="image/*" name="upload" multiple>
</span>
<a data-toggle="dropdown" class="btn btn-link">
<i class="fa fa-caret-down"></i>
</a>
@ -100,9 +97,6 @@
<span class="btn btn-link btn-file ui-help" title="<%= __('Help') %>" data-toggle="modal" data-target=".help-modal">
<i class="fa fa-question-circle"></i>
</span>
<span class="btn btn-link btn-file ui-upload-image" title="<%= __('Upload Image') %>" style="display:none;">
<i class="fa fa-camera"></i><input type="file" accept="image/*" name="upload" multiple>
</span>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="online-user-list">