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;
     4.1 --- a/static/wysihtml/wysihtml_liquidfeedback_rules.js	Thu Feb 03 16:02:40 2022 +0100
     4.2 +++ b/static/wysihtml/wysihtml_liquidfeedback_rules.js	Thu Feb 03 16:03:09 2022 +0100
     4.3 @@ -19,6 +19,7 @@
     4.4      h5: {},
     4.5      h6: {},
     4.6      sup: {},
     4.7 -    sub: {}
     4.8 +    sub: {},
     4.9 +    pre: {}
    4.10    }
    4.11  };

Impressum / About Us