liquid_feedback_frontend
changeset 1845:71916d0badca
Reworked WYSIWYG editor, added pre formatting
author | bsw |
---|---|
date | Thu Feb 03 16:03:09 2022 +0100 (2022-02-03) |
parents | 138a1508cdf3 |
children | d257418700bf |
files | app/main/draft/new.lua env/ui/field/wysihtml.lua static/lf4.css static/wysihtml/wysihtml_liquidfeedback_rules.js |
line diff
1.1 --- a/app/main/draft/new.lua Thu Feb 03 16:02:40 2022 +0100 1.2 +++ b/app/main/draft/new.lua Thu Feb 03 16:03:09 2022 +0100 1.3 @@ -330,8 +330,7 @@ 1.4 } 1.5 end } 1.6 end 1.7 - 1.8 - ui.container { content = _"Enter your proposal and/or reasons:" } 1.9 + 1.10 ui.field.wysihtml{ 1.11 name = "content", 1.12 multiline = true,
2.1 --- a/env/ui/field/wysihtml.lua Thu Feb 03 16:02:40 2022 +0100 2.2 +++ b/env/ui/field/wysihtml.lua Thu Feb 03 16:03:09 2022 +0100 2.3 @@ -1,23 +1,26 @@ 2.4 function ui.field.wysihtml(args) 2.5 2.6 local toolbar = { 2.7 - { command = "bold", title ="CTRL+B", icon = "format_bold" }, 2.8 - { command = "italic", title ="CTRL+I", icon = "format_italic" }, 2.9 - { command = "createLink", icon = "insert_link" }, 2.10 - { command = "removeLink", icon = "insert_link", crossed = "\\" }, 2.11 --- { command = "insertImage", icon = "insert_image" }, 2.12 + { command = "formatBlock", command_blank = "true", icon = "view_headline" }, 2.13 { command = "formatBlock", command_value = "h1", icon = "title", head_level = "1" }, 2.14 { command = "formatBlock", command_value = "h2", icon = "title", head_level = "2" }, 2.15 { command = "formatBlock", command_value = "h3", icon = "title", head_level = "3" }, 2.16 - { command = "formatBlock", command_blank = "true", icon = "format_clear" }, 2.17 - { command = "insertBlockQuote", icon = "format_quote" }, 2.18 + { command = "formatBlock", command_value = "pre", icon = "code" }, 2.19 + { }, 2.20 + { command = "bold", title ="CTRL+B", icon = "format_bold" }, 2.21 + { command = "italic", title ="CTRL+I", icon = "format_italic" }, 2.22 + { }, 2.23 { command = "insertUnorderedList", icon = "format_list_bulleted" }, 2.24 { command = "insertOrderedList", icon = "format_list_numbered" }, 2.25 + { }, 2.26 { command = "outdentList", icon = "format_indent_decrease" }, 2.27 { command = "indentList", icon = "format_indent_increase" }, 2.28 --- { command = "alignLeftStyle", icon = "format_align_left" }, 2.29 --- { command = "alignRightStyle", icon = "format_align_right" }, 2.30 --- { command = "alignCenterStyle", icon = "format_align_center" }, 2.31 + { }, 2.32 + { command = "insertBlockQuote", icon = "format_quote" }, 2.33 + { }, 2.34 + { command = "createLink", icon = "insert_link" }, 2.35 + { command = "removeLink", icon = "link_off" }, 2.36 + { }, 2.37 { command = "undo", icon = "undo" }, 2.38 { command = "redo", icon = "redo" } 2.39 } 2.40 @@ -37,15 +40,22 @@ 2.41 2.42 ui.container{ attr = { id = "toolbar", class = "toolbar", style = "display: none;" }, content = function() 2.43 for i, t in ipairs(toolbar) do 2.44 - 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() 2.45 - ui.tag{ tag = "i", attr = { class = "material-icons" }, content = t.icon } 2.46 - if t.crossed then 2.47 - ui.tag{ attr = { class = "crossed" }, content = t.crossed } 2.48 - end 2.49 - if t.head_level then 2.50 - ui.tag{ attr = { class = "head_level" }, content = t.head_level } 2.51 - end 2.52 - end } 2.53 + if t.command then 2.54 + ui.tag{ tag = "a", attr = { 2.55 + class = "mdl-button mdl-button--raised", 2.56 + ["data-wysihtml-command"] = t.command, 2.57 + ["data-wysihtml-command-value"] = t.command_value, 2.58 + ["data-wysihtml-command-blank-value"] = t.command_blank, 2.59 + title = t.shortcut 2.60 + }, content = function() 2.61 + ui.tag{ tag = "i", attr = { class = "material-icons" }, content = t.icon } 2.62 + if t.head_level then 2.63 + ui.tag{ attr = { class = "head_level" }, content = t.head_level } 2.64 + end 2.65 + end } 2.66 + else 2.67 + slot.put(" ") 2.68 + end 2.69 end 2.70 slot.put([[ 2.71 <div data-wysihtml-dialog="createLink" style="display: none;"> 2.72 @@ -87,7 +97,9 @@ 2.73 var editor = new wysihtml.Editor("]] .. args.attr.id .. [[", { 2.74 toolbar: "toolbar", 2.75 parserRules: wysihtmlParserRules, 2.76 - useLineBreaks: true 2.77 + useLineBreaks: true, 2.78 + stylesheets: "]] .. request.get_absolute_baseurl() .. [[static/lf4.css", 2.79 + name: "draft" 2.80 }); 2.81 } 2.82 if(window.addEventListener){
3.1 --- a/static/lf4.css Thu Feb 03 16:02:40 2022 +0100 3.2 +++ b/static/lf4.css Thu Feb 03 16:03:09 2022 +0100 3.3 @@ -11,6 +11,10 @@ 3.4 src: url("font/RobotoSlab-Regular.ttf"); 3.5 } 3.6 @font-face { 3.7 + font-family: "Roboto Slab Bold"; 3.8 + src: url("font/RobotoSlab-Bold.ttf"); 3.9 +} 3.10 +@font-face { 3.11 font-family: 'Material Icons'; 3.12 font-style: normal; 3.13 font-weight: 400; 3.14 @@ -298,31 +302,33 @@ 3.15 padding: 16px; 3.16 border-radius: 2px; 3.17 } 3.18 + 3.19 +.toolbar { 3.20 + margin-bottom: 5px; 3.21 +} 3.22 + 3.23 .toolbar a { 3.24 color: #000; 3.25 display: inline-block; 3.26 - border: 1px solid #ccc; 3.27 + padding: 0; 3.28 + min-width: 0; 3.29 + height: inherit; 3.30 + line-height: 1.5; 3.31 position: relative; 3.32 + margin-right: 5px; 3.33 } 3.34 3.35 .toolbar a.wysihtml-command-active { 3.36 - background: #000; 3.37 + background: #555; 3.38 color: #fff; 3.39 - 3.40 } 3.41 3.42 -.toolbar a span.crossed { 3.43 - position: absolute; 3.44 - top: 0; 3.45 - left: 8px; 3.46 - font-weight: bold; 3.47 - font-size: 200%; 3.48 - line-height: 80%; 3.49 -} 3.50 .toolbar a span.head_level { 3.51 position: absolute; 3.52 - right: 0; 3.53 - bottom: 0; 3.54 + right: 1px; 3.55 + bottom: 3px; 3.56 + font-size: 90%; 3.57 + line-height: 1; 3.58 } 3.59 3.60 textarea { 3.61 @@ -344,11 +350,13 @@ 3.62 height: 9px; 3.63 } 3.64 .draft { 3.65 - font-family: 'Roboto Slab'; 3.66 + font-family: 'Roboto Slab' !important; 3.67 + font-size: 14px !important; 3.68 font-weight: 300; 3.69 overflow: auto; 3.70 clear: left; 3.71 } 3.72 + 3.73 .draft img { 3.74 float: right; 3.75 margin-left: 1em; 3.76 @@ -394,16 +402,28 @@ 3.77 } 3.78 3.79 .draft h1 { 3.80 + font-family: 'Roboto'; 3.81 + font-weight: 300; 3.82 font-size: 150%; 3.83 margin-bottom: 0; 3.84 + line-height: 1.35; 3.85 + margin-top: 24px; 3.86 } 3.87 .draft h2 { 3.88 + font-family: 'Roboto'; 3.89 + font-weight: 300; 3.90 font-size: 133%; 3.91 margin-bottom: 0; 3.92 + line-height: 48px; 3.93 + margin-top: 24px; 3.94 } 3.95 .draft h3 { 3.96 + font-family: 'Roboto'; 3.97 + font-weight: 300; 3.98 font-size: 125%; 3.99 margin-bottom: 0; 3.100 + line-height: 40px; 3.101 + margin-top: 24px; 3.102 } 3.103 .draft > a:first-child + h1, 3.104 .draft > h1:first-child, 3.105 @@ -417,6 +437,12 @@ 3.106 } 3.107 } 3.108 3.109 +.draft > pre { 3.110 + background: #eee; 3.111 + padding: 5px 10px; 3.112 + border-radius: 5px; 3.113 +} 3.114 + 3.115 3.116 .suggestion-content { 3.117 position: relative;