Merge pull request #9 from SISheogorath/feature/moveUpload

Move upload button into toolbar
This commit is contained in:
Christoph (Sheogorath) Kern 2019-03-31 15:14:31 +02:00 committed by GitHub
commit 3a0ff5edd3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
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 // FIXME: global referncing in jquery-textcomplete patch
window.editor = editor window.editor = editor
var inlineAttach = inlineAttachment.editors.codemirror4.attach(editor)
defaultTextHeight = parseInt($('.CodeMirror').css('line-height')) defaultTextHeight = parseInt($('.CodeMirror').css('line-height'))
// initalize ui reference // initalize ui reference
@ -801,7 +800,6 @@ function changeMode (type) {
editor.getInputField().blur() editor.getInputField().blur()
} }
if (appState.currentMode === modeType.edit || appState.currentMode === modeType.both) { if (appState.currentMode === modeType.edit || appState.currentMode === modeType.both) {
ui.toolbar.uploadImage.fadeIn()
// add and update status bar // add and update status bar
if (!editorInstance.statusBar) { if (!editorInstance.statusBar) {
editorInstance.addStatusBar() editorInstance.addStatusBar()
@ -814,8 +812,6 @@ function changeMode (type) {
// work around foldGutter might not init properly // work around foldGutter might not init properly
editor.setOption('foldGutter', false) editor.setOption('foldGutter', false)
editor.setOption('foldGutter', true) editor.setOption('foldGutter', true)
} else {
ui.toolbar.uploadImage.fadeOut()
} }
if (appState.currentMode !== modeType.edit) { if (appState.currentMode !== modeType.edit) {
$(document.body).css('background-color', 'white') $(document.body).css('background-color', 'white')
@ -1051,17 +1047,6 @@ ui.toolbar.import.snippet.click(function () {
ui.spinner.hide() 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 // toc
ui.toc.dropdown.click(function (e) { ui.toc.dropdown.click(function (e) {
e.stopPropagation() e.stopPropagation()

View file

@ -138,6 +138,7 @@ export default class Editor {
} }
addToolBar () { addToolBar () {
var inlineAttach = inlineAttachment.editors.codemirror4.attach(this.editor)
this.toolBar = $(toolBarTemplate) this.toolBar = $(toolBarTemplate)
this.toolbarPanel = this.editor.addPanel(this.toolBar[0], { this.toolbarPanel = this.editor.addPanel(this.toolBar[0], {
position: 'top' position: 'top'
@ -157,6 +158,7 @@ export default class Editor {
var makeTable = $('#makeTable') var makeTable = $('#makeTable')
var makeLine = $('#makeLine') var makeLine = $('#makeLine')
var makeComment = $('#makeComment') var makeComment = $('#makeComment')
var uploadImage = $('#uploadImage')
makeBold.click(() => { makeBold.click(() => {
utils.wrapTextWith(this.editor, this.editor, '**') utils.wrapTextWith(this.editor, this.editor, '**')
@ -217,6 +219,13 @@ export default class Editor {
makeComment.click(() => { makeComment.click(() => {
utils.insertText(this.editor, '> []') 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 () { 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"> <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> <i class="fa fa-image fa-fw"></i>
</a> </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"> <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> <i class="fa fa-table fa-fw"></i>
</a> </a>

View file

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

View file

@ -15,9 +15,6 @@
</div> </div>
<a class="navbar-brand pull-left" href="<%- serverURL %>/"><i class="fa fa-file-text"></i> CodiMD</a> <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"> <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"> <a data-toggle="dropdown" class="btn btn-link">
<i class="fa fa-caret-down"></i> <i class="fa fa-caret-down"></i>
</a> </a>
@ -100,9 +97,6 @@
<span class="btn btn-link btn-file ui-help" title="<%= __('Help') %>" data-toggle="modal" data-target=".help-modal"> <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> <i class="fa fa-question-circle"></i>
</span> </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>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
<li id="online-user-list"> <li id="online-user-list">