Improve design of the rich text editor (#9533)

New design for rich text composer

Author: florianduros

res/css/_components.pcss

@@ -260,6 +260,7 @@
 @import "./views/rooms/_AuxPanel.pcss";
 @import "./views/rooms/_BasicMessageComposer.pcss";
 @import "./views/rooms/_E2EIcon.pcss";
+@import "./views/rooms/_EmojiButton.pcss";
 @import "./views/rooms/_EditMessageComposer.pcss";
 @import "./views/rooms/_EntityTile.pcss";
 @import "./views/rooms/_EventBubbleTile.pcss";

res/css/views/rooms/_EmojiButton.pcss

@@ -0,0 +1,35 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@import "./_MessageComposerButton.pcss";
+
+.mx_EmojiButton {
+    @mixin composerButton 50%,$accent;
+}
+
+.mx_EmojiButton_highlight {
+    @mixin composerButtonHighLight;
+}
+
+.mx_EmojiButton_icon::before {
+    mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
+}
+
+.mx_MessageComposer_wysiwyg {
+    .mx_EmojiButton {
+        @mixin composerButton 5px,$tertiary-content;
+    }
+}

res/css/views/rooms/_MessageComposer.pcss

@@ -15,6 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+@import "./_MessageComposerButton.pcss";
+
 .mx_MessageComposer_wrapper {
     vertical-align: middle;
     margin: auto;
@@ -59,6 +61,12 @@ limitations under the License.
     width: 100%;
 }
 
+.mx_MessageComposer_actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
 .mx_MessageComposer .mx_MessageComposer_avatar {
     position: absolute;
     left: 26px;
@@ -171,53 +179,16 @@ limitations under the License.
 }
 
 .mx_MessageComposer_button_highlight {
-    background: rgba($accent, 0.25);
-    /* make the icon the accent color too */
-    &::before {
-        background-color: $accent !important;
-    }
+    @mixin composerButtonHighLight;
 }
 
 .mx_MessageComposer_button {
-    --size: 26px;
-    position: relative;
-    cursor: pointer;
-    height: var(--size);
-    line-height: var(--size);
-    width: auto;
-    padding-left: var(--size);
-    border-radius: 50%;
-    margin-right: 6px;
+    @mixin composerButton 50%,$accent;
 
     &:last-child {
         margin-right: auto;
     }
 
-    &::before {
-        content: '';
-        position: absolute;
-        top: 3px;
-        left: 3px;
-        height: 20px;
-        width: 20px;
-        background-color: $icon-button-color;
-        mask-repeat: no-repeat;
-        mask-size: contain;
-        mask-position: center;
-    }
-
-    &::after {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 0;
-        z-index: 0;
-        width: var(--size);
-        height: var(--size);
-        border-radius: 50%;
-    }
-
-    &:hover,
     &.mx_MessageComposer_closeButtonMenu {
         &::after {
             background: rgba($accent, 0.1);
@@ -232,15 +203,43 @@ limitations under the License.
         background-color: $alert;
     }
 }
-
-/*
-    The wysisyg composer increase the size of the MessageComposer. We temporary move the buttons
-    Soon the dom structure of the MessageComposer will change with the next evolution of the wysiwyg composer
-    and this workaround will disappear
-*/
 .mx_MessageComposer_wysiwyg {
-    .mx_MessageComposer_e2eIcon.mx_E2EIcon,.mx_MessageComposer_button, .mx_MessageComposer_sendMessage {
-        margin-top: 28px;
+    .mx_MessageComposer_wrapper {
+        padding-left: 16px;
+        margin-top: 6px;
+        margin-bottom: 12px;
+    }
+
+    .mx_MessageComposer_row {
+        align-items: flex-end;
+    }
+
+    .mx_MessageComposer_actions {
+        /* Height of the composer editor */
+        height: 40px;
+    }
+
+    .mx_MediaBody {
+        padding-top: 4px;
+        padding-bottom: 4px;
+    }
+
+    .mx_MessageComposer_button {
+        @mixin composerButton 5px,$tertiary-content;
+
+        &.mx_MessageComposer_closeButtonMenu {
+            &::after {
+                background: rgba($accent, 0.1);
+            }
+
+            &::before {
+                background-color: $accent;
+            }
+        }
+
+        &.mx_MessageComposer_hangup:not(.mx_AccessibleButton_disabled)::before {
+            background-color: $alert;
+        }
     }
 }
 
@@ -260,10 +259,6 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/live.svg');
 }
 
-.mx_MessageComposer_emoji::before {
-    mask-image: url('$(res)/img/element-icons/room/composer/emoji.svg');
-}
-
 .mx_MessageComposer_plain_text::before {
     mask-image: url('$(res)/img/element-icons/room/composer/plain_text.svg');
 }

res/css/views/rooms/_MessageComposerButton.pcss

@@ -0,0 +1,68 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@define-mixin composerButtonHighLight {
+    background: rgba($accent, 0.25);
+    /* make the icon the accent color too */
+    &::before {
+        background-color: $accent !important;
+    }
+}
+
+@define-mixin composerButton $border-radius,$hover-color {
+    --size: 26px;
+    position: relative;
+    cursor: pointer;
+    height: var(--size);
+    line-height: var(--size);
+    width: auto;
+    padding-left: var(--size);
+    border-radius: $border-radius;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 3px;
+        left: 3px;
+        height: 20px;
+        width: 20px;
+        background-color: $icon-button-color;
+        mask-repeat: no-repeat;
+        mask-size: contain;
+        mask-position: center;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: 0;
+        width: var(--size);
+        height: var(--size);
+        border-radius: $border-radius;
+    }
+
+    &:hover {
+        &::after {
+            background: rgba($hover-color, 0.1);
+        }
+
+        &::before {
+            background-color: $hover-color;
+        }
+    }
+}

res/css/views/rooms/_VoiceRecordComposerTile.pcss

@@ -20,7 +20,7 @@ limitations under the License.
     height: 28px;
     border: 2px solid $voice-record-stop-border-color;
     border-radius: 32px;
-    margin-right: 8px; /* between us and the waveform component */
+    margin-right: 2px; /* between us and the waveform component */
     position: relative;
 
     &::after {
@@ -39,7 +39,7 @@ limitations under the License.
     width: 24px;
     height: 24px;
     vertical-align: middle;
-    margin-right: 8px; /* distance from left edge of waveform container (container has some margin too) */
+    margin-right: 2px; /* distance from left edge of waveform container (container has some margin too) */
     background-color: $voice-record-icon-color;
     mask-repeat: no-repeat;
     mask-size: contain;
@@ -69,7 +69,7 @@ limitations under the License.
     height: 32px;
 
     margin: 6px; /* force the composer area to put a gutter around us */
-    margin-right: 12px; /* isolate from stop/send button */
+    margin-right: 6px; /* isolate from stop/send button */
 
     position: relative; /* important for the live circle */
 
@@ -93,6 +93,14 @@ limitations under the License.
     }
 }
 
+.mx_MessageComposer_wysiwyg .mx_VoiceMessagePrimaryContainer {
+    &.mx_VoiceRecordComposerTile_recording {
+        &::before {
+            top: 15px; /* vertically center (middle align with clock) */
+        }
+    }
+}
+
 /* The keyframes are slightly weird here to help make a ramping/punch effect */
 /* for the recording dot. We start and end at 100% opacity to help make the */
 /* dot feel a bit like a real lamp that is blinking: the animation ends up */

res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss

@@ -24,7 +24,7 @@ limitations under the License.
     gap: 8px;
     padding: 8px var(--EditWysiwygComposer-padding-inline);
 
-    .mx_WysiwygComposer_content {
+    .mx_WysiwygComposer_Editor_content {
         border-radius: 4px;
         border: solid 1px $primary-hairline-color;
         background-color: $background;

res/css/views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss

@@ -22,32 +22,65 @@ limitations under the License.
     /* fixed line height to prevent emoji from being taller than text */
     line-height: $font-18px;
     justify-content: center;
-    margin-right: 6px;
-    /* don't grow wider than available space */
-    min-width: 0;
+    margin-right: 13px;
+    gap: 8px;
 
-    .mx_WysiwygComposer_container {
-        flex: 1;
+    .mx_FormattingButtons {
+        margin-left: 12px;
+    }
+
+    .mx_WysiwygComposer_Editor {
+        border: 1px solid;
+        border-color: $quinary-content;
+        padding: 6px 11px 6px 12px;
         display: flex;
-        flex-direction: column;
-        /* min-height at this level so the mx_BasicMessageComposer_input */
-        /* still stays vertically centered when less than 55px. */
-        /* We also set this to ensure the voice message recording widget */
-        /* doesn't cause a jump. */
-        min-height: 55px;
-
-        .mx_WysiwygComposer_content {
-            border: 1px solid;
-            border-radius: 20px;
-            padding: 8px 10px;
-            /* this will center the contenteditable */
-            /* in it's parent vertically */
-            /* while keeping the autocomplete at the top */
-            /* of the composer. The parent needs to be a flex container for this to work. */
-            margin: auto 0;
-            /* max-height at this level so autocomplete doesn't get scrolled too */
-            max-height: 140px;
-            overflow-y: auto;
+        align-items: flex-end;
+        gap: 10px;
+
+        .mx_E2EIcon {
+            margin: 0 0 7px 0;
+            width: 12px;
+            height: 12px;
+        }
+
+        &[data-is-expanded="true"] {
+            border-radius: 14px;
+
+            .mx_WysiwygComposer_Editor_container {
+                margin-top: 3px;
+                margin-bottom: 3px;
+            }
+        }
+
+        &[data-is-expanded="false"] {
+            border-radius: 40px;
+        }
+
+        .mx_WysiwygComposer_Editor_container {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            min-height: 22px;
+            margin-bottom: 2px;
+            /* don't grow wider than available space */
+            width: 0;
+
+            .mx_WysiwygComposer_Editor_content {
+                /* this will center the contenteditable */
+                /* in it's parent vertically */
+                /* while keeping the autocomplete at the top */
+                /* of the composer. The parent needs to be a flex container for this to work. */
+                margin: auto 0;
+                /* max-height at this level so autocomplete doesn't get scrolled too */
+                max-height: 140px;
+                overflow-y: auto;
+            }
         }
     }
 }
+
+.mx_SendWysiwygComposer-focused {
+    .mx_WysiwygComposer_Editor {
+        border-color: $quaternary-content;
+    }
+}