Improved ML button styling

[AIC-BV]

Not perfect, but much better than it actually was. Feel free to edit however you see fit!
The button is more obvious. Users will see more easily that they have to translate the corresponding field.

[mjauvin]

@AIC-BV there is a problem with markdown editor:

It is hiding the "preview" (eye) icon:

[AIC-BV]

@mjauvin Must've overlooked it when converting the CSS to LESS (because I tested & fixed it after your comment in discord 😅)

[mjauvin]

In the .ml-btn class, can you remove height:... and add bottom: 1px; and box-shadow: none; ?

[AIC-BV]

Didn't know adding the bottom would actually set its height correctly!
Better now @mjauvin?

[mjauvin]

Really nice, one more thing:

diff --git a/assets/less/multilingual.less b/assets/less/multilingual.less
index db20a4a..a174cc8 100644
--- a/assets/less/multilingual.less
+++ b/assets/less/multilingual.less
@@ -65,12 +65,13 @@
            
     &.field-multilingual-markdowneditor {
         .ml-btn {
-            top: 41px;
+            right: 76px;
+            background-color: transparent;
         }
 
         .ml-dropdown-menu {
-            top: 74px;
-            right: 1px;
+            top: 36px;
+            right: 76px;
         }
     }

[mjauvin]

Would be nice to move the ml-btn on the RichEditor as well, but it seems more difficult.

[AIC-BV]

Really nice, one more thing:

I added this!

[mjauvin]

@AIC-BV can you paste a screenshot of what the repeater ML-button looks like here?

[AIC-BV]

It was like this

but adding bottom: 1px made it like this

Can make it back to the first screenshot by adding
bottom: auto;
(& top: 3px;)

What do you think?

[mjauvin]

Yes, do what's required!

[AIC-BV]

@mjauvin should be done

[mjauvin]

Dam, doesn't work on mobile

[mjauvin]

Returns markdown editor ml-button to previous location and add margin to text input box so that we don't end-up under the ml-button

diff --git a/assets/less/multilingual.less b/assets/less/multilingual.less
index 237ba1a..aaa1dfa 100644
--- a/assets/less/multilingual.less
+++ b/assets/less/multilingual.less
@@ -69,14 +69,17 @@
     }
 
     &.field-multilingual-markdowneditor {
+        .editor-write {
+            margin-right: 2rem;
+        }
         .ml-btn {
-            right: 76px;
-            background-color: transparent;
+            top: 41px;
+            border-radius: 0;
+            border-bottom-left-radius: .375rem;
         }
 
         .ml-dropdown-menu {
-            top: 36px;
-            right: 76px;
+            top: 80px;
         }
     }

[AIC-BV]

Needs this wintercms/winter#997 for markdowneditor

[AIC-BV]

@mjauvin 😄

[mjauvin]

Looks like it's working fine, but it's not triggering all the times when you get back from fullscreen mode (especially if you don't paste a huge amount of text).

[AIC-BV]

Looks like it's working fine, but it's not triggering all the times when you get back from fullscreen mode (especially if you don't paste a huge amount of text).

Can you show a video
For me it works every time but it snaps back with a delay

[mjauvin]

@AIC-BV where were we on this?

[AIC-BV]

For me it is finished 😄
You had an issue you mentioned above but I can't reproduce it

[mjauvin]

@AIC-BV here's a video for the markdown editor that shows it is not updating:
Screencast from 2024-03-18 12-48-53.webm

[mjauvin]

I am using the Winter.Test plugin and added the following to the Post model:

    public $implement = ['@Winter.Translate.Behaviors.TranslatableModel'];
    public $translatable = ['name', 'content_md', 'content_html'];

[AIC-BV]

@mjauvin Markdowneditor has been fixed