compose: Redesign and relocate compose expand / collapse button.

The compose expand / collapse button is moved from the top right of the
compose area to the top right corner inside the compose textarea /
preview.

The textarea / preview and the button area shares the same grid parent.
25px extra padding is added to and margin is subtracted from the right
of the element so the button is visually inside it. It appears only on
hovering the compose area, and uses a new custom icon.

Fixes: #28791.

help/resize-the-compose-box.md

@@ -10,8 +10,8 @@ box also stretches automatically when you type a long message.
 
 {!start-composing.md!}
 
-1. Click on the **<i class="fa fa-chevron-up"></i> icon** in the top
-   right corner of the compose box.
+1. Click on the **<i class="zulip-icon zulip-icon-expand-diagonal"></i> icon** in the top
+   right corner of the compose box, which is visible on hovering over the compose box.
 
 {end_tabs}
 
@@ -19,8 +19,9 @@ box also stretches automatically when you type a long message.
 
 {start_tabs}
 
-1. With the compose box in the expanded state, click on the **<i class="fa
-   fa-chevron-down"></i> icon** in the top right corner of the compose box.
+1. With the compose box in the expanded state, click on the **<i class="zulip-icon
+   zulip-icon-collapse-diagonal"></i> icon** in the top right corner of the compose box,
+   which is visible on hovering over the compose box.
 
 {end_tabs}
 

web/src/compose_setup.js

@@ -435,7 +435,7 @@ export function initialize() {
         compose.clear_preview_area();
     });
 
-    $("#compose").on("click", ".expand_composebox_button", (e) => {
+    $("#compose").on("click", ".expand-composebox-button", (e) => {
         e.preventDefault();
         e.stopPropagation();
 
@@ -447,7 +447,7 @@ export function initialize() {
         message_view.to_compose_target();
     });
 
-    $("#compose").on("click", ".collapse_composebox_button", (e) => {
+    $("#compose").on("click", ".collapse-composebox-button", (e) => {
         e.preventDefault();
         e.stopPropagation();
 

web/src/compose_ui.ts

@@ -375,8 +375,6 @@ export function make_compose_box_full_size(): void {
     // Set the `top` property of compose-box.
     set_compose_box_top(true);
 
-    $(".collapse_composebox_button").show();
-    $(".expand_composebox_button").hide();
     $("#scroll-to-bottom-button-container").removeClass("show");
     $("textarea#compose-textarea").trigger("focus");
 }
@@ -393,8 +391,6 @@ export function make_compose_box_original_size(): void {
     // when compose box was made full screen
     autosize($("textarea#compose-textarea"));
 
-    $(".collapse_composebox_button").hide();
-    $(".expand_composebox_button").show();
     $("textarea#compose-textarea").trigger("focus");
 }
 

web/src/tippyjs.ts

@@ -260,6 +260,8 @@ export function initialize(): void {
     tippy.delegate("body", {
         target: [
             "#compose_top_right [data-tippy-content]",
+            ".expand-composebox-button",
+            ".collapse-composebox-button",
             "#compose_top_right [data-tooltip-template-id]",
         ].join(","),
         delay: LONG_HOVER_DELAY,

web/styles/app_variables.css

@@ -155,6 +155,15 @@
     */
     --compose-recipient-box-min-height: 2.1786em;
 
+    /*
+    Width of the area where the compose box buttons are placed, "inside"
+    the right edge of the compose box. This is used for the negative right
+    margin and the right padding of the textbox to extend it into the compose
+    expand / collapse buttons area, but keep the text from showing under the
+    the buttons.
+    */
+    --composebox-buttons-width: 25px;
+
     /*
     Width to be reserved for document scrollbar when scrolling is disabled.
     Using `scrollbar-gutter` would be more appropriate but doesn't has wide
@@ -337,6 +346,10 @@
     );
     --color-narrow-to-compose-recipients: hsl(227deg 76% 64%);
     --color-narrow-to-compose-recipients-hover: hsl(227deg 78% 59%);
+    --color-composebox-button: hsl(0deg 100% 0% / 55%);
+    --color-composebox-button-hover: var(--color-text-default);
+    --color-composebox-button-background: hsl(0deg 100% 100% / 60%);
+    --color-composebox-button-background-hover: hsl(0deg 0% 95%);
 
     /* Text colors */
     --color-text-default: hsl(0deg 0% 20%);
@@ -676,6 +689,9 @@
     );
     --color-narrow-to-compose-recipients: hsl(224deg 28% 81%);
     --color-narrow-to-compose-recipients-hover: hsl(221deg 100% 95%);
+    --color-composebox-button: hsl(0deg 100% 100% / 55%);
+    --color-composebox-button-background: hsl(231deg 8% 13.5% / 80%);
+    --color-composebox-button-background-hover: hsl(231deg 12% 18%);
 
     /* Text colors */
     --color-text-default: hsl(0deg 0% 100% / 75%);

web/styles/compose.css

@@ -127,6 +127,12 @@
     display: flex;
     flex-flow: column;
     box-sizing: border-box;
+
+    &:hover {
+        .composebox-buttons > button {
+            opacity: 1;
+        }
+    }
 }
 
 .message_comp {
@@ -282,7 +288,65 @@
 #message-content-container {
     grid-area: message-content-container;
     display: grid;
-    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
+    grid-template: minmax(0, 1fr) / minmax(0, 1fr) var(
+            --composebox-buttons-width
+        );
+    grid-template-areas: "message-content composebox-buttons";
+}
+
+#message-content-container .composebox-buttons {
+    grid-area: composebox-buttons;
+    /* z-index is needed to avoid flickering of cursor and the
+    button when hovering it in preview mode. */
+    z-index: 1;
+    padding-top: 1px;
+    padding-right: 1px;
+    height: max-content;
+
+    button {
+        width: 24px;
+        border: none;
+        aspect-ratio: 1 / 1;
+        background-color: var(--color-composebox-button-background);
+        color: var(--color-composebox-button);
+        border-radius: 3px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transition:
+            opacity 0.4s ease-in,
+            color 0.1s ease-in,
+            background-color 0.1s ease-in;
+
+        &:hover {
+            background-color: var(--color-composebox-button-background-hover);
+            color: var(--color-composebox-button-hover);
+        }
+
+        &:focus {
+            outline: 0;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--color-outline-focus);
+        }
+    }
+
+    .collapse-composebox-button {
+        display: none;
+    }
+}
+
+#compose-textarea,
+#preview-message-area-container {
+    grid-area: message-content;
+}
+
+#compose-textarea,
+#preview_message_area {
+    margin-right: calc(var(--composebox-buttons-width) * -1);
+    padding-right: var(--composebox-buttons-width);
 }
 
 #preview-message-area-container {
@@ -403,7 +467,6 @@
     }
 }
 
-.collapse_composebox_button,
 #compose_close {
     display: none;
 }
@@ -749,6 +812,8 @@ textarea.new_message_textarea {
     border-radius: 4px;
     color: hsl(0deg 0% 33%);
     background-color: hsl(0deg 0% 100%);
+    scrollbar-width: thin;
+    scrollbar-color: hsl(0deg 0% 50%) transparent;
 
     &.over_limit,
     &.over_limit:focus {
@@ -1425,6 +1490,14 @@ textarea.new_message_textarea,
         height: 0;
         flex: 1;
     }
+
+    .expand-composebox-button {
+        display: none;
+    }
+
+    .collapse-composebox-button {
+        display: flex;
+    }
 }
 
 .preview_mode {

web/styles/dark_theme.css

@@ -612,8 +612,6 @@
     }
 
     .narrow_to_compose_recipients,
-    .expand_composebox_button,
-    .collapse_composebox_button,
     .clear_search_button,
     .clear_search_button:focus,
     .clear_search_button:active,

web/templates/compose.hbs

@@ -50,8 +50,6 @@
                 <div class="compose_table">
                     <div id="compose_top">
                         <div id="compose_top_right" class="order-2">
-                            <button type="button" class="expand_composebox_button fa fa-chevron-up" aria-label="{{t 'Expand compose' }}" data-tippy-content="{{t 'Expand compose' }}"></button>
-                            <button type="button" class="collapse_composebox_button fa fa-chevron-down" aria-label="{{t 'Collapse compose' }}" data-tippy-content="{{t 'Collapse compose' }}"></button>
                             <button type="button" class="close fa fa-times" id='compose_close' data-tooltip-template-id="compose_close_tooltip_template"></button>
                         </div>
                         <div id="compose-recipient" class="order-1">
@@ -83,6 +81,10 @@
                                         <div class="preview_content rendered_markdown"></div>
                                     </div>
                                 </div>
+                                <div class="composebox-buttons">
+                                    <button type="button" class="expand-composebox-button zulip-icon zulip-icon-expand-diagonal" aria-label="{{t 'Expand compose box' }}" data-tippy-content="{{t 'Expand compose box' }}"></button>
+                                    <button type="button" class="collapse-composebox-button zulip-icon zulip-icon-collapse-diagonal" aria-label="{{t 'Collapse compose box' }}" data-tippy-content="{{t 'Collapse compose box' }}"></button>
+                                </div>
                                 <div class="drag"></div>
                             </div>