Merge branch 'fixes/quill-style' of git://github.com/m4n1ok/twill int…

…o m4n1ok-fixes/quill-style
area17 · Jul 21, 2019 · febf8b3 · febf8b3
2 parents 7382c64 + ff9a831
commit febf8b3
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 45 deletions.
diff --git a/docs/.sections/crud-modules.md b/docs/.sections/crud-modules.md
@@ -613,6 +613,59 @@ You can also rename the content section by passing a `contentFieldsetLabel` prop
     'note' => 'Hint message',
 ])
 ```
+WYSIWYG field is based on [Quill](https://quilljs.com/) Rich Text Editor with Snow theme enabled. 
+
+You can add all [toolbar options](https://quilljs.com/docs/modules/toolbar/) from Quill with `toolbarOption` key. You need need to pass value as array of array.
+
+For example, this configuration will render a `wysiwyg` field with all features from Quill and Snow theme.
+
+```
+ @formField('wysiwyg', [
+     'name' => 'case_study',
+     'label' => 'Case study text',
+     'toolbarOptions' => [
+        [
+            ["header" => [2, 3, 4, 5, 6, false]],
+            ["font" => ["serif", "sans-serif", "monospace"]],
+            ["size" => ['small', false, 'large', 'huge']],
+        ],
+        [
+            "bold", "italic", "underline", "strike"
+        ],
+        [
+            ["color" => []],
+            ["background" => []],
+            ["align" => []]
+        ],
+        [
+            ["script" => "super"],
+            ["script" => "sub"]
+        ],
+        [
+            "blockquote", "code-block",
+        ],
+        [
+            ["list" => "ordered"],
+            ["list" => "bullet"],
+            ["indent" => "-1"],
+            ["indent" => "+1"]
+        ],
+        [
+            "link",
+            "image",
+            "video",
+            "formula"
+        ],
+        [
+            "clean"
+        ]
+    ],
+     'placeholder' => 'Case study text',
+     'maxlength' => 200,
+     'editSource' => true,
+     'note' => 'Hint message`',
+ ])
+```
 
 #### Medias
 ![screenshot](/docs/_media/medias.png)

diff --git a/frontend/js/components/Wysiwyg.vue b/frontend/js/components/Wysiwyg.vue
@@ -368,7 +368,8 @@
     .ql-snow.ql-toolbar {
       padding: 13px 8px;
 
-      button {
+      button,
+      .ql-align {
         width: 24px;
         margin-right: 35px - 6px - 6px - 6px - 6px;
         text-align:center;
@@ -389,6 +390,10 @@
 
     .ql-snow.ql-toolbar .ql-formats {
       border-right:1px solid $color__border--light;
+
+      &:last-child {
+        border-right: none;
+      }
     }
 
     .ql-snow.ql-toolbar,
@@ -425,52 +430,57 @@
     }
 
     /* dropdown style */
-    .ql-toolbar.ql-snow .ql-picker-label {
-      border:0 none;
-      position:relative;
-      padding-right: 30px;
-
-      &::after {
-        content: " ";
-        position: absolute;
-        top: 50%;
-        right: 1em;
-        z-index: 2;
-        position:absolute;
-        width: 0;
-        height: 0;
-        margin-top: -3px;
-        border-width: 4px 4px 0;
-        border-style: solid;
-        border-color: $color__text transparent transparent;
-      }
+    .ql-toolbar.ql-snow .ql-header,
+    .ql-toolbar.ql-snow .ql-size,
+    .ql-toolbar.ql-snow .ql-font {
+      .ql-picker-label {
+        border: 0 none;
+        position: relative;
+        /*padding-right: 30px;*/
+
+        &::after {
+          content: " ";
+          position: absolute;
+          top: 50%;
+          right: 1em;
+          z-index: 2;
+          position: absolute;
+          width: 0;
+          height: 0;
+          margin-top: -3px;
+          border-width: 4px 4px 0;
+          border-style: solid;
+          border-color: $color__text transparent transparent;
+        }
 
-      svg {
-        opacity:0;
+        svg {
+          opacity: 0;
+        }
       }
-    }
-    .ql-toolbar.ql-snow .ql-picker-options {
-      background:rgba($color__background,0.98);
-      border-radius:2px;
-      box-shadow:$box-shadow;
-      padding:10px 0;
-      border:0 none;
-      margin-top:6px;
-
-      .ql-picker-item {
-        display:block;
-        color:$color__text--light;
-        padding:0 15px;
-        padding-right:50px;
-        height:40px;
-        line-height: 40px;
-        text-decoration: none;
-        white-space: nowrap;
-        font-family:inherit;
-
-        &:hover {
-          color:$color__text;
-          background:$color__light;
+
+      .ql-picker-options {
+        background: rgba($color__background, 0.98);
+        border-radius: 2px;
+        box-shadow: $box-shadow;
+        padding: 10px 0;
+        border: 0 none;
+        margin-top: 6px;
+
+        .ql-picker-item {
+          display: block;
+          color: $color__text--light;
+          padding: 0 15px;
+          padding-right: 50px;
+          height: 40px;
+          line-height: 40px;
+          text-decoration: none;
+          white-space: nowrap;
+          font-family: inherit;
+
+          &:hover {
+            color: $color__text;
+            background: $color__light;
+          }
         }
       }
     }