Improved ML button styling

assets/css/multilingual.css

@@ -1,26 +1,18 @@
 .field-multilingual{position:relative}
-.field-multilingual .ml-btn{background:transparent;position:absolute;color:#7b7b7b;text-transform:uppercase;font-size:11px;letter-spacing:1px;width:44px;padding-right:0;-webkit-box-shadow:none;box-shadow:none;text-shadow:none;z-index:2}
+.field-multilingual .ml-btn{z-index:2;position:absolute;top:1px;bottom:1px;right:1px;width:auto;max-width:44px;max-height:38px;color:#7b7b7b;background-color:#F8F6F3;box-shadow:none;font-size:11px;letter-spacing:1px;text-transform:uppercase;margin:0 !important;padding:0 12px;border-top-left-radius:0;border-bottom-left-radius:0;transition:color 420ms ease}
 .field-multilingual .ml-btn:hover{color:#555}
-.field-multilingual.field-multilingual-text .form-control{padding-right:44px}
-.field-multilingual.field-multilingual-text .ml-btn{right:4px;top:50%;margin-top:-44px;height:88px}
-.field-multilingual.field-multilingual-textarea textarea{padding-right:30px}
-.field-multilingual.field-multilingual-textarea .ml-btn{right:13px;top:5px;width:24px;text-align:right;padding-left:4px}
-.field-multilingual.field-multilingual-textarea .ml-dropdown-menu{top:39px;right:1px}
-.field-multilingual.field-multilingual-richeditor .ml-btn{top:43px;right:25px;text-align:right}
-.field-multilingual.field-multilingual-richeditor .ml-dropdown-menu{top:74px;right:12px}
-.field-multilingual.field-multilingual-markdowneditor .ml-btn{top:43px;right:25px;text-align:right}
-.field-multilingual.field-multilingual-markdowneditor .ml-dropdown-menu{top:74px !important;right:12px}
-.field-multilingual.field-multilingual-repeater .ml-btn,
-.field-multilingual.field-multilingual-nestedform .ml-btn{top:-27px;right:11px;text-align:right}
+.field-multilingual.field-multilingual-repeater .ml-btn{top:3px;bottom:auto;height:auto;transform:translateY(-100%);border-radius:.375rem}
+.field-multilingual.field-multilingual-textarea textarea{padding-right:2rem}
+.field-multilingual.field-multilingual-textarea .ml-btn{border-bottom-right-radius:0;border-bottom-left-radius:.375rem}
+.field-multilingual.field-multilingual-textarea .ml-dropdown-menu{top:28px;right:1px}
+.field-multilingual.field-multilingual-richeditor .ml-btn{border-radius:0;border-bottom-left-radius:.375rem}
+.field-multilingual.field-multilingual-richeditor .ml-dropdown-menu{top:28px;right:1px}
+.field-multilingual.field-multilingual-markdowneditor .mode-tab .editor-write{padding-right:2rem}
+.field-multilingual.field-multilingual-markdowneditor .mode-split .editor-preview{padding-right:2rem}
+.field-multilingual.field-multilingual-markdowneditor .editor-code{padding-right:inherit}
+.field-multilingual.field-multilingual-markdowneditor .ml-btn{border-radius:0;border-bottom-left-radius:.375rem}
+.field-multilingual.field-multilingual-markdowneditor .ml-dropdown-menu{top:28px;right:1px}
 .field-multilingual.field-multilingual-repeater .ml-dropdown-menu,
-.field-multilingual.field-multilingual-nestedform .ml-dropdown-menu{top:0;right:0}
-.field-multilingual.field-multilingual-repeater.is-empty,
-.field-multilingual.field-multilingual-nestedform.is-empty{padding-top:5px}
-.field-multilingual.field-multilingual-repeater.is-empty .ml-btn,
-.field-multilingual.field-multilingual-nestedform.is-empty .ml-btn{top:-10px;right:5px;text-align:right}
-.field-multilingual.field-multilingual-repeater.is-empty .ml-dropdown-menu,
-.field-multilingual.field-multilingual-nestedform.is-empty .ml-dropdown-menu{top:15px;right:-7px}
-.fancy-layout .form-tabless-fields .field-multilingual .ml-btn{color:rgba(255,255,255,0.8)}
-.fancy-layout .form-tabless-fields .field-multilingual .ml-btn:hover{color:#fff}
-.fancy-layout .field-multilingual-text input.form-control{padding-right:44px}
-.help-block.before-field + .field-multilingual.field-multilingual-textarea .ml-btn{top:-41px}
+.field-multilingual.field-multilingual-nestedform .ml-dropdown-menu{top:2px;right:0}
+.field-multilingual.field-multilingual-mediafinder .ml-btn{border-radius:.375rem}
+.fancy-layout .form-tabless-fields .field-multilingual .ml-btn{background-color:rgba(248,246,243,0.75)}

assets/less/multilingual.less

@@ -6,128 +6,123 @@
     position: relative;
 
     .ml-btn {
-        background: transparent;
+        z-index: 2;
         position: absolute;
+        top: 1px;
+        bottom: 1px;
+        right: 1px;
+
+        width: auto;
+        max-width: 44px;
+        max-height: 38px;
+
         color: lighten(@multilingual-btn-color, 15%);
-        text-transform: uppercase;
+        background-color: #F8F6F3;
+        box-shadow: none;
+
         font-size: 11px;
         letter-spacing: 1px;
-        width: 44px;
-        padding-right: 0;
-        .box-shadow(none);
-        text-shadow: none;
-        z-index: 2;
+        text-transform: uppercase;
+
+        margin: 0 !important;
+        padding: 0 12px;
+
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+
+        transition: color 420ms ease;
 
         &:hover {
             color: @multilingual-btn-color;
         }
     }
 
-    &.field-multilingual-text {
-        .form-control {
-            padding-right: 44px;
-        }
-        .ml-btn {
-            right: 4px;
-            top: 50%;
-            margin-top: -44px;
-            height: 88px;
-        }
+    &.field-multilingual-repeater .ml-btn {
+        top: 3px;
+        bottom: auto;
+        height: auto;
+        transform: translateY(-100%);
+        border-radius: .375rem;
     }
 
     &.field-multilingual-textarea {
         textarea {
-            // increase padding on the right so that the textarea content does not overlap with the language button
-            padding-right: 30px;
+            padding-right: 2rem;
         }
 
         .ml-btn {
-            right: 13px;
-            top: 5px;
-            width: 24px;
-            text-align: right;
-            padding-left: 4px;
+            border-bottom-right-radius: 0px;
+            border-bottom-left-radius: .375rem;
         }
-
+        
         .ml-dropdown-menu {
-            top: 39px;
+            top: 28px;
             right: 1px;
         }
     }
 
     &.field-multilingual-richeditor {
         .ml-btn {
-            top: 43px;
-            right: 25px;
-            text-align: right;
+            border-radius: 0;
+            border-bottom-left-radius: .375rem;
         }
 
         .ml-dropdown-menu {
-            top: 74px;
-            right: 12px;
+            top: 28px;
+            right: 1px;
         }
     }
 
     &.field-multilingual-markdowneditor {
+        .mode-tab .editor-write {
+            padding-right: 2rem;
+        }
+
+        .mode-split .editor-preview {
+            padding-right: 2rem;
+        }
+
+        .editor-code {
+            padding-right: inherit;
+        }
+
         .ml-btn {
-            top: 43px;
-            right: 25px;
-            text-align: right;
+            border-radius: 0;
+            border-bottom-left-radius: .375rem;
         }
 
         .ml-dropdown-menu {
-            top: 74px !important;
-            right: 12px;
+            top: 28px;
+            right: 1px;
         }
     }
 
     &.field-multilingual-repeater,
     &.field-multilingual-nestedform {
-        .ml-btn {
-            top: -27px;
-            right: 11px;
-            text-align: right;
-        }
-
         .ml-dropdown-menu {
-            top: 0;
+            top: 2px;
             right: 0;
         }
+    }
 
-        &.is-empty {
-            padding-top: 5px;
-
-            .ml-btn {
-                top: -10px;
-                right: 5px;
-                text-align: right;
-            }
-
-            .ml-dropdown-menu {
-                top: 15px;
-                right: -7px;
-            }
+    &.field-multilingual-mediafinder {
+        .ml-btn {
+            border-radius: .375rem;
         }
     }
 }
 
 .fancy-layout {
     .form-tabless-fields .field-multilingual {
         .ml-btn {
-            color: rgba(255,255,255,.8);
-
-            &:hover {
-                color: rgba(255,255,255,1);
-            }
+            background-color: rgba(248, 246, 243, 0.75)
         }
     }
-    .field-multilingual-text input.form-control {
-        padding-right: 44px;
-    }
 }
 
-.help-block.before-field + .field-multilingual.field-multilingual-textarea {
-    .ml-btn {
-        top: -41px;
-    }
-}
+// ?? CHECK THIS
+// .help-block.before-field + .field-multilingual.field-multilingual-textarea {
+//     .ml-btn {
+//         top: -41px;
+//     }
+// }

formwidgets/MLTextarea.php

@@ -62,6 +62,7 @@ public function getSaveValue($value)
     protected function loadAssets()
     {
         $this->loadLocaleAssets();
+        $this->addJs('js/mltextarea.js');
     }
 
 }

formwidgets/mlmarkdowneditor/assets/js/mlmarkdowneditor.js

@@ -46,7 +46,12 @@
         this.$el.on('setLocale.oc.multilingual', this.proxy(this.onSetLocale))
         this.$textarea.on('changeContent.oc.markdowneditor', this.proxy(this.onChangeContent))
 
+        this.updateLayout()
+
+        $(window).on('resize', this.proxy(this.updateLayout))
+        $(window).on('oc.updateUi', this.proxy(this.updateLayout))
         this.$el.one('dispose-control', this.proxy(this.dispose))
+
     }
 
     MLMarkdownEditor.prototype.dispose = function() {
@@ -75,6 +80,64 @@
         this.$el.multiLingual('setLocaleValue', value)
     }
 
+    MLMarkdownEditor.prototype.updateLayout = function() {
+        var $toolbar = $('.control-toolbar', this.$el),
+            $btn = $('.ml-btn[data-active-locale]:first', this.$el),
+            $dropdown = $('.ml-dropdown-menu[data-locale-dropdown]:first', this.$el),
+            $container = $('.editor-write', this.$el),
+            $scrollbar = $('.ace_scrollbar', this.$el),
+            $input = $('.ace_text-input', this.$el)
+
+        if ($toolbar.length) {
+            var height = $toolbar.outerHeight(true)
+            if (height) {
+                $btn.css('top', height + 0.5)
+                $dropdown.css('top', height + 34)
+            }
+        }
+
+        // set ML button position
+        var $container = $('.editor-write', this.$el),
+            $previewContainer = $('.editor-preview', this.$el),
+            $scrollbar = $('.ace_scrollbar', this.$el),
+            $input = $('.ace_text-input', this.$el)
+
+        // fix exit fullscreen
+        setTimeout(function() {
+            setMLButtonPosition()
+        }, 0)
+
+        // input listener
+        $input.on('keydown keyup', setMLButtonPosition)
+
+        function setMLButtonPosition() {
+
+            // make sure container is displayed (fix previewmode)
+            $container.css('display', 'initial')
+
+            var scrollbarWidth = $scrollbar[0].offsetWidth - 5
+            if (scrollbarWidth === -5) scrollbarWidth = $previewContainer[0].offsetWidth - $previewContainer[0].clientWidth
+
+            if (scrollbarWidth >= 0) {
+                $container.css('padding-right', scrollbarWidth + 23)
+                $btn.css('right', scrollbarWidth - 1)
+                $dropdown.css('right', scrollbarWidth - 2)
+            } else {
+                $container.css('padding-right', '')
+                $btn.css('right', '')
+                $dropdown.css('right', '')
+            }
+
+            // reset container
+            $container.css('display', '')
+
+        }
+
+    }
+
+    // MLMARKDOWNEDITOR PLUGIN DEFINITION
+    // ============================
+
     var old = $.fn.mlMarkdownEditor
 
     $.fn.mlMarkdownEditor = function (option) {
@@ -94,11 +157,17 @@
 
     $.fn.mlMarkdownEditor.Constructor = MLMarkdownEditor;
 
+    // MLMARKDOWNEDITOR NO CONFLICT
+    // =================
+
     $.fn.mlMarkdownEditor.noConflict = function () {
         $.fn.mlMarkdownEditor = old
         return this
     }
 
+    // MLMARKDOWNEDITOR DATA-API
+    // ===============
+
     $(document).render(function (){
         $('[data-control="mlmarkdowneditor"]').mlMarkdownEditor()
     })

formwidgets/mlricheditor/assets/js/mlricheditor.js

@@ -85,15 +85,46 @@
     MLRichEditor.prototype.updateLayout = function() {
         var $toolbar = $('.fr-toolbar', this.$el),
             $btn = $('.ml-btn[data-active-locale]:first', this.$el),
-            $dropdown = $('.ml-dropdown-menu[data-locale-dropdown]:first', this.$el)
-
-        if (!$toolbar.length) {
-            return
+            $dropdown = $('.ml-dropdown-menu[data-locale-dropdown]:first', this.$el),
+            $element = $('.fr-element', this.$el)
+
+        if ($toolbar.length) {
+            var height = $toolbar.outerHeight(true)
+            if (height) {
+                $btn.css('top', height)
+                $dropdown.css('top', height + 34)
+            }
         }
 
-        var height = $toolbar.outerHeight(true)
-        $btn.css('top', height + 6)
-        $dropdown.css('top', height + 40)
+        // set ML button position
+        var hasScrollbar = false
+        var scrollbarWidth = 0
+        var elementHeight = $element.outerHeight()
+
+        setMLButtonPosition()
+        $element.on('keydown keyup', setMLButtonPosition)
+
+        function setMLButtonPosition() {
+            var scrollHeight = $element[0].scrollHeight
+            var showScrollbar = scrollHeight > elementHeight
+
+            if (!hasScrollbar && showScrollbar) {
+
+                hasScrollbar = true
+                if (!scrollbarWidth) scrollbarWidth = $element[0].offsetWidth - $element[0].clientWidth
+
+                $element.css('padding-right', scrollbarWidth + 23)
+                $btn.css('right', scrollbarWidth - 1)
+                $dropdown.css('right', scrollbarWidth - 2)
+
+            } else if (hasScrollbar && !showScrollbar) {
+                hasScrollbar = false
+                $element.css('padding-right', '')
+                $btn.css('right', '')
+                $dropdown.css('right', '')
+            }
+        }
+
     }
 
     // MLRICHEDITOR PLUGIN DEFINITION