# HG changeset patch # User bsw # Date 1643900589 -3600 # Node ID 71916d0badca274a3226d53d17efd6931981ed2c # Parent 138a1508cdf35e97150804ba3da29c9449092bc8 Reworked WYSIWYG editor, added pre formatting diff -r 138a1508cdf3 -r 71916d0badca app/main/draft/new.lua --- a/app/main/draft/new.lua Thu Feb 03 16:02:40 2022 +0100 +++ b/app/main/draft/new.lua Thu Feb 03 16:03:09 2022 +0100 @@ -330,8 +330,7 @@ } end } end - - ui.container { content = _"Enter your proposal and/or reasons:" } + ui.field.wysihtml{ name = "content", multiline = true, diff -r 138a1508cdf3 -r 71916d0badca env/ui/field/wysihtml.lua --- a/env/ui/field/wysihtml.lua Thu Feb 03 16:02:40 2022 +0100 +++ b/env/ui/field/wysihtml.lua Thu Feb 03 16:03:09 2022 +0100 @@ -1,23 +1,26 @@ function ui.field.wysihtml(args) local toolbar = { - { command = "bold", title ="CTRL+B", icon = "format_bold" }, - { command = "italic", title ="CTRL+I", icon = "format_italic" }, - { command = "createLink", icon = "insert_link" }, - { command = "removeLink", icon = "insert_link", crossed = "\\" }, --- { command = "insertImage", icon = "insert_image" }, + { command = "formatBlock", command_blank = "true", icon = "view_headline" }, { command = "formatBlock", command_value = "h1", icon = "title", head_level = "1" }, { command = "formatBlock", command_value = "h2", icon = "title", head_level = "2" }, { command = "formatBlock", command_value = "h3", icon = "title", head_level = "3" }, - { command = "formatBlock", command_blank = "true", icon = "format_clear" }, - { command = "insertBlockQuote", icon = "format_quote" }, + { command = "formatBlock", command_value = "pre", icon = "code" }, + { }, + { command = "bold", title ="CTRL+B", icon = "format_bold" }, + { command = "italic", title ="CTRL+I", icon = "format_italic" }, + { }, { command = "insertUnorderedList", icon = "format_list_bulleted" }, { command = "insertOrderedList", icon = "format_list_numbered" }, + { }, { command = "outdentList", icon = "format_indent_decrease" }, { command = "indentList", icon = "format_indent_increase" }, --- { command = "alignLeftStyle", icon = "format_align_left" }, --- { command = "alignRightStyle", icon = "format_align_right" }, --- { command = "alignCenterStyle", icon = "format_align_center" }, + { }, + { command = "insertBlockQuote", icon = "format_quote" }, + { }, + { command = "createLink", icon = "insert_link" }, + { command = "removeLink", icon = "link_off" }, + { }, { command = "undo", icon = "undo" }, { command = "redo", icon = "redo" } } @@ -37,15 +40,22 @@ ui.container{ attr = { id = "toolbar", class = "toolbar", style = "display: none;" }, content = function() for i, t in ipairs(toolbar) do - ui.tag{ tag = "a", attr = { ["data-wysihtml-command"] = t.command, ["data-wysihtml-command-value"] = t.command_value, ["data-wysihtml-command-blank-value"] = t.command_blank, title = t.shortcut }, content = function() - ui.tag{ tag = "i", attr = { class = "material-icons" }, content = t.icon } - if t.crossed then - ui.tag{ attr = { class = "crossed" }, content = t.crossed } - end - if t.head_level then - ui.tag{ attr = { class = "head_level" }, content = t.head_level } - end - end } + if t.command then + ui.tag{ tag = "a", attr = { + class = "mdl-button mdl-button--raised", + ["data-wysihtml-command"] = t.command, + ["data-wysihtml-command-value"] = t.command_value, + ["data-wysihtml-command-blank-value"] = t.command_blank, + title = t.shortcut + }, content = function() + ui.tag{ tag = "i", attr = { class = "material-icons" }, content = t.icon } + if t.head_level then + ui.tag{ attr = { class = "head_level" }, content = t.head_level } + end + end } + else + slot.put("   ") + end end slot.put([[
@@ -87,7 +97,9 @@ var editor = new wysihtml.Editor("]] .. args.attr.id .. [[", { toolbar: "toolbar", parserRules: wysihtmlParserRules, - useLineBreaks: true + useLineBreaks: true, + stylesheets: "]] .. request.get_absolute_baseurl() .. [[static/lf4.css", + name: "draft" }); } if(window.addEventListener){ diff -r 138a1508cdf3 -r 71916d0badca static/lf4.css --- a/static/lf4.css Thu Feb 03 16:02:40 2022 +0100 +++ b/static/lf4.css Thu Feb 03 16:03:09 2022 +0100 @@ -11,6 +11,10 @@ src: url("font/RobotoSlab-Regular.ttf"); } @font-face { + font-family: "Roboto Slab Bold"; + src: url("font/RobotoSlab-Bold.ttf"); +} +@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; @@ -298,31 +302,33 @@ padding: 16px; border-radius: 2px; } + +.toolbar { + margin-bottom: 5px; +} + .toolbar a { color: #000; display: inline-block; - border: 1px solid #ccc; + padding: 0; + min-width: 0; + height: inherit; + line-height: 1.5; position: relative; + margin-right: 5px; } .toolbar a.wysihtml-command-active { - background: #000; + background: #555; color: #fff; - } -.toolbar a span.crossed { - position: absolute; - top: 0; - left: 8px; - font-weight: bold; - font-size: 200%; - line-height: 80%; -} .toolbar a span.head_level { position: absolute; - right: 0; - bottom: 0; + right: 1px; + bottom: 3px; + font-size: 90%; + line-height: 1; } textarea { @@ -344,11 +350,13 @@ height: 9px; } .draft { - font-family: 'Roboto Slab'; + font-family: 'Roboto Slab' !important; + font-size: 14px !important; font-weight: 300; overflow: auto; clear: left; } + .draft img { float: right; margin-left: 1em; @@ -394,16 +402,28 @@ } .draft h1 { + font-family: 'Roboto'; + font-weight: 300; font-size: 150%; margin-bottom: 0; + line-height: 1.35; + margin-top: 24px; } .draft h2 { + font-family: 'Roboto'; + font-weight: 300; font-size: 133%; margin-bottom: 0; + line-height: 48px; + margin-top: 24px; } .draft h3 { + font-family: 'Roboto'; + font-weight: 300; font-size: 125%; margin-bottom: 0; + line-height: 40px; + margin-top: 24px; } .draft > a:first-child + h1, .draft > h1:first-child, @@ -417,6 +437,12 @@ } } +.draft > pre { + background: #eee; + padding: 5px 10px; + border-radius: 5px; +} + .suggestion-content { position: relative; diff -r 138a1508cdf3 -r 71916d0badca static/wysihtml/wysihtml_liquidfeedback_rules.js --- a/static/wysihtml/wysihtml_liquidfeedback_rules.js Thu Feb 03 16:02:40 2022 +0100 +++ b/static/wysihtml/wysihtml_liquidfeedback_rules.js Thu Feb 03 16:03:09 2022 +0100 @@ -19,6 +19,7 @@ h5: {}, h6: {}, sup: {}, - sub: {} + sub: {}, + pre: {} } };