From ac3b5b3b046a69773f1b02da37cfa9eb0044798d Mon Sep 17 00:00:00 2001 From: N-Shar-ma Date: Tue, 23 Apr 2024 04:58:39 +0530 Subject: [PATCH] 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 | 9 +-- web/shared/icons/collapse-diagonal.svg | Bin 0 -> 407 bytes web/shared/icons/expand-diagonal.svg | Bin 0 -> 398 bytes web/src/compose_setup.js | 4 +- web/src/compose_ui.ts | 4 -- web/src/tippyjs.ts | 2 + web/styles/app_variables.css | 16 +++++ web/styles/compose.css | 77 ++++++++++++++++++++++++- web/styles/dark_theme.css | 2 - web/templates/compose.hbs | 6 +- 10 files changed, 104 insertions(+), 16 deletions(-) create mode 100644 web/shared/icons/collapse-diagonal.svg create mode 100644 web/shared/icons/expand-diagonal.svg diff --git a/help/resize-the-compose-box.md b/help/resize-the-compose-box.md index 9a17c71a9a..d91015871a 100644 --- a/help/resize-the-compose-box.md +++ b/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 ** icon** in the top - right corner of the compose box. +1. Click on the ** 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 ** icon** in the top right corner of the compose box. +1. With the compose box in the expanded state, click on the ** icon** in the top right corner of the compose box, + which is visible on hovering over the compose box. {end_tabs} diff --git a/web/shared/icons/collapse-diagonal.svg b/web/shared/icons/collapse-diagonal.svg new file mode 100644 index 0000000000000000000000000000000000000000..c6676d592e3927fb1291eb910c2975f91db601c8 GIT binary patch literal 407 zcmZ8d!ES>v4E+_$JI6Q#LYaWWPCcwY&|9@Kg2bR&QPR(^JvL3P^!${_FYnoDu5p0d z*EC;S4C{J%&9amdB}dEmkmbyri2@;w=QXrwJwoWmA*|c^bDX9Y=Vk5@;@GFR<<=qt zgY^RJn#*You&G|e4B_13!4_0hV5xK;l>1-!ojjwuc(*JJKIBxK$X5bsh@%!cx39^S z((r<H;{5&*UV_2t6q@hy$@b9&*ju2}MJk2NnJ&fL^NTsIDJIGCGh% k7|l?B2TG3`2{F1?Ni0iqP_ep~T7RqkI2|$T8vXC?4vd&ykN^Mx literal 0 HcmV?d00001 diff --git a/web/shared/icons/expand-diagonal.svg b/web/shared/icons/expand-diagonal.svg new file mode 100644 index 0000000000000000000000000000000000000000..16b7e0bba813034c11e09b9c6673d473073df132 GIT binary patch literal 398 zcmZutv2KGf5dD?Yb@pLnW7iQdbYe)>4A~+=F%p5OK{%hEbLf()(!KM^etPen%lq2H z<2p|F3d6G8c3Bo9br)nK1()4wofVs4PP0hCVFY{5_0gh0{EB2B8)^epIn3l9-9kPyJQnzk3=WXD7 zb`XlR26;4O)!viy;7BEkEfRi7 { + $("#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(); diff --git a/web/src/compose_ui.ts b/web/src/compose_ui.ts index 30cfe6a46c..51640745c3 100644 --- a/web/src/compose_ui.ts +++ b/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"); } diff --git a/web/src/tippyjs.ts b/web/src/tippyjs.ts index 3d531bf405..17e268019c 100644 --- a/web/src/tippyjs.ts +++ b/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, diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css index c54b01bff9..eb07f0f029 100644 --- a/web/styles/app_variables.css +++ b/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%); diff --git a/web/styles/compose.css b/web/styles/compose.css index 72cb84fd92..05aa973597 100644 --- a/web/styles/compose.css +++ b/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 { diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css index c9a6372157..f88ebf9eb2 100644 --- a/web/styles/dark_theme.css +++ b/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, diff --git a/web/templates/compose.hbs b/web/templates/compose.hbs index d6b97aa134..0e71308421 100644 --- a/web/templates/compose.hbs +++ b/web/templates/compose.hbs @@ -50,8 +50,6 @@
- -
@@ -83,6 +81,10 @@
+
+ + +