From f708616b7059b03601eb239d5434fc118f1c8431 Mon Sep 17 00:00:00 2001 From: danpros Date: Wed, 3 Mar 2021 21:05:25 +0700 Subject: [PATCH] Use font awesome for markdown editor --- system/admin/editor/css/editor.css | 10 +---- system/admin/editor/js/Markdown.Editor.js | 75 ++++++++++++------------------- 2 files changed, 30 insertions(+), 55 deletions(-) diff --git a/system/admin/editor/css/editor.css b/system/admin/editor/css/editor.css index 8294c11..e26efc3 100644 --- a/system/admin/editor/css/editor.css +++ b/system/admin/editor/css/editor.css @@ -48,25 +48,19 @@ blockquote { background-color: Silver; list-style: none; float: left; - margin: 0.25em 5px; + margin: 5px; } .wmd-button { - width: 20px; - height: 20px; - padding-left: 5px; - padding-right: 5px; list-style: none; cursor: pointer; float: left; } .wmd-button > span { - background-image: url(../img/wmd-buttons.png); background-repeat: no-repeat; background-position: 0px 0px; - width: 20px; - height: 20px; + display: inline-block; } diff --git a/system/admin/editor/js/Markdown.Editor.js b/system/admin/editor/js/Markdown.Editor.js index 86b6c79..3d27c02 100644 --- a/system/admin/editor/js/Markdown.Editor.js +++ b/system/admin/editor/js/Markdown.Editor.js @@ -1395,33 +1395,12 @@ function setupButton(button, isEnabled) { - var normalYShift = "0px"; - var disabledYShift = "-20px"; - var highlightYShift = "-40px"; + var normalYShift = "note-btn btn btn-light btn-sm"; + var disabledYShift = "note-btn btn btn-light btn-sm disabled"; + var highlightYShift = ""; var image = button.getElementsByTagName("span")[0]; if (isEnabled) { - image.style.backgroundPosition = button.XShift + " " + normalYShift; - button.onmouseover = function () { - image.style.backgroundPosition = this.XShift + " " + highlightYShift; - }; - - button.onmouseout = function () { - image.style.backgroundPosition = this.XShift + " " + normalYShift; - }; - - // IE tries to select the background image "button" text (it's - // implemented in a list item) so we have to cache the selection - // on mousedown. - if (uaSniffed.isIE) { - button.onmousedown = function () { - if (doc.activeElement && doc.activeElement !== panels.input) { // we're not even in the input box, so there's no selection - return; - } - panels.ieCachedRange = document.selection.createRange(); - panels.ieCachedScrollTop = panels.input.scrollTop; - }; - } - + image.className = normalYShift; if (!button.isHelp) { button.onclick = function () { if (this.onmouseout) { @@ -1433,7 +1412,7 @@ } } else { - image.style.backgroundPosition = button.XShift + " " + disabledYShift; + image.className = disabledYShift; button.onmouseover = button.onmouseout = button.onclick = function () { }; } @@ -1451,25 +1430,27 @@ var buttonBar = panels.buttonBar; - var normalYShift = "0px"; - var disabledYShift = "-20px"; - var highlightYShift = "-40px"; + var normalYShift = "note-btn btn btn-light btn-sm"; + var disabledYShift = "note-btn btn btn-light btn-sm disabled"; + var highlightYShift = ""; var buttonRow = document.createElement("ul"); + buttonRow.style.padding = "0px 10px"; buttonRow.id = "wmd-button-row" + postfix; buttonRow.className = 'wmd-button-row'; buttonRow = buttonBar.appendChild(buttonRow); var xPosition = 0; - var makeButton = function (id, title, XShift, textOp) { + var makeButton = function (id, title, XClass, textOp) { var button = document.createElement("li"); button.className = "wmd-button"; - button.style.left = xPosition + "px"; - xPosition += 25; var buttonImage = document.createElement("span"); + var buttonIcon = document.createElement("i"); + buttonImage.className = "note-btn btn btn-light btn-sm"; + buttonIcon.className = XClass; + buttonImage.appendChild(buttonIcon); button.id = id + postfix; button.appendChild(buttonImage); button.title = title; - button.XShift = XShift; if (textOp) button.textOp = textOp; setupButton(button, true); @@ -1481,31 +1462,31 @@ spacer.className = "wmd-spacer wmd-spacer" + num; spacer.id = "wmd-spacer" + num + postfix; buttonRow.appendChild(spacer); - xPosition += 25; + //xPosition += 25; } - buttons.bold = makeButton("wmd-bold-button", getString("bold"), "0px", bindCommand("doBold")); - buttons.italic = makeButton("wmd-italic-button", getString("italic"), "-20px", bindCommand("doItalic")); + buttons.bold = makeButton("wmd-bold-button", getString("bold"), "fa fa-bold", bindCommand("doBold")); + buttons.italic = makeButton("wmd-italic-button", getString("italic"), "fa fa-italic", bindCommand("doItalic")); makeSpacer(1); - buttons.link = makeButton("wmd-link-button", getString("link"), "-40px", bindCommand(function (chunk, postProcessing) { + buttons.link = makeButton("wmd-link-button", getString("link"), "fa fa-link", bindCommand(function (chunk, postProcessing) { return this.doLinkOrImage(chunk, postProcessing, false); })); - buttons.quote = makeButton("wmd-quote-button", getString("quote"), "-60px", bindCommand("doBlockquote")); - buttons.code = makeButton("wmd-code-button", getString("code"), "-80px", bindCommand("doCode")); - buttons.image = makeButton("wmd-image-button", getString("image"), "-100px", bindCommand(function (chunk, postProcessing) { + buttons.quote = makeButton("wmd-quote-button", getString("quote"), "fa fa-quote-right", bindCommand("doBlockquote")); + buttons.code = makeButton("wmd-code-button", getString("code"), "fa fa-code", bindCommand("doCode")); + buttons.image = makeButton("wmd-image-button", getString("image"), "fa fa-image", bindCommand(function (chunk, postProcessing) { return this.doLinkOrImage(chunk, postProcessing, true); })); makeSpacer(2); - buttons.olist = makeButton("wmd-olist-button", getString("olist"), "-120px", bindCommand(function (chunk, postProcessing) { + buttons.olist = makeButton("wmd-olist-button", getString("olist"), "fa fa-list-ol", bindCommand(function (chunk, postProcessing) { this.doList(chunk, postProcessing, true); })); - buttons.ulist = makeButton("wmd-ulist-button", getString("ulist"), "-140px", bindCommand(function (chunk, postProcessing) { + buttons.ulist = makeButton("wmd-ulist-button", getString("ulist"), "fa fa-list-ul", bindCommand(function (chunk, postProcessing) { this.doList(chunk, postProcessing, false); })); - buttons.heading = makeButton("wmd-heading-button", getString("heading"), "-160px", bindCommand("doHeading")); - buttons.hr = makeButton("wmd-hr-button", getString("hr"), "-180px", bindCommand("doHorizontalRule")); + buttons.heading = makeButton("wmd-heading-button", getString("heading"), "fa fa-header", bindCommand("doHeading")); + buttons.hr = makeButton("wmd-hr-button", getString("hr"), "fa fa-ellipsis-h", bindCommand("doHorizontalRule")); makeSpacer(3); - buttons.undo = makeButton("wmd-undo-button", getString("undo"), "-200px", null); + buttons.undo = makeButton("wmd-undo-button", getString("undo"), "fa fa-undo", null); buttons.undo.execute = function (manager) { if (manager) manager.undo(); }; @@ -1514,7 +1495,7 @@ getString("redo") : getString("redomac"); // mac and other non-Windows platforms - buttons.redo = makeButton("wmd-redo-button", redoTitle, "-220px", null); + buttons.redo = makeButton("wmd-redo-button", redoTitle, "fa fa-repeat", null); buttons.redo.execute = function (manager) { if (manager) manager.redo(); }; @@ -1525,7 +1506,7 @@ helpButton.appendChild(helpButtonImage); helpButton.className = "wmd-button wmd-help-button"; helpButton.id = "wmd-help-button" + postfix; - helpButton.XShift = "-240px"; + helpButton.XClass = "note-btn btn btn-light btn-sm"; helpButton.isHelp = true; helpButton.style.right = "0px"; helpButton.title = getString("help");