From e0ec522f702e5b64f2e5b0e37dbae4ce89dd53bf Mon Sep 17 00:00:00 2001 From: Sayam Samal Date: Wed, 26 Jun 2024 21:13:20 +0530 Subject: [PATCH] send_later_popover: Redesign popover and add accessibility improvements. As part of the popover menu redesign, this redesigns the compose send options popover using the new "popover-menu" tippy theme and improves accessibility by using appropriate ARIA attributes. Fixes #25117. --- web/shared/icons/calendar-clock.svg | Bin 0 -> 858 bytes web/shared/icons/calendar-days.svg | Bin 0 -> 1112 bytes web/shared/icons/calendar.svg | Bin 0 -> 1128 bytes web/shared/icons/file-check.svg | Bin 0 -> 663 bytes web/src/compose_send_menu_popover.js | 3 +- web/styles/compose.css | 74 +++++++-- web/templates/popovers/send_later_popover.hbs | 140 ++++++++++-------- 7 files changed, 140 insertions(+), 77 deletions(-) create mode 100644 web/shared/icons/calendar-clock.svg create mode 100644 web/shared/icons/calendar-days.svg create mode 100644 web/shared/icons/calendar.svg create mode 100644 web/shared/icons/file-check.svg diff --git a/web/shared/icons/calendar-clock.svg b/web/shared/icons/calendar-clock.svg new file mode 100644 index 0000000000000000000000000000000000000000..dbb9e4caeaa33c65fe2136f0410d648333007d94 GIT binary patch literal 858 zcmZuw%WlFj5WMphmV1ul_!YY%Nc6;|R}S1Fpg2+js6+{$-`#a+391sA_0H^THY{($ ziQT*Qe5-iu`|Eq2kK-stEiT`uTuCW&U~o1zhdx%kaGb?sbBcYkznZqK`1x`^ayB%_ z@#Au@xMY$Q4qm=mFt)tbePoIF2KhKURQ%Hlt+jB@?}c_A0>HLH1y8?V4`767gp_8; z(5@c{X2%CIFqvp*+jSvA@ZiUjdSHdYAZCW*B|1ydTZ4YAnIa@s@^nO^*u=1uhH_4k z)RW&>EH>vrXLF9mQP=Z2Oi@NNC>T&hy!n?FaZHHZ5OZ+AqamJ}Ma}RUAYN-4<Yz*=$07*yDm%1BB-7ghZTT=;{?bE<{SVhOTexpBn^ZgRS9Hj@cE-Egepuc rN@)8w5WV{=n(moWC=|K@4}0R`)dM$!E+r8)D*=E0&P;VvaLsO%G7R(a=DpG4 zI=1ZAA5Yhk+hMr8hv76$Vp8J#)rPT@GK2`urfxsjl1G{|d+1s_IQz3Z9!q{YpAMXj z-C_DT-%2i-WRZq1U#}P|TIQnOpcr|;ci9b=?MuE%gw{FB;Y=GD2&FR-n>@g0yvVRZ z%53*=VR87tDU`Co@*VgoiH>>$wda`x4l|dDSW*U9w94x~hS%{NRrZWZ`?V35hiduG zL)8a3wqex7FF_dGV6Wl1nSX`&f8wecEpyU(1ti3T_cgf1cn|IfoUVC@()&V3$Sg5B z;_Mb5(8*$&SZ z758UGO%W-R4s`;uBu`Pek1oooq8RD>(-+p-z-}X>q>wu-bOsKv@JtM-MQ@-dWmG9r z@^=_9(co{$z#?PSdrLG&+BF+Vp|iRV=uVhNjho&`hIv9!8m7W!iT}nGWaxq7?gsW& TgPBw$>0R$4Y}cy-|1j3ydO+}6 literal 0 HcmV?d00001 diff --git a/web/shared/icons/calendar.svg b/web/shared/icons/calendar.svg new file mode 100644 index 0000000000000000000000000000000000000000..64d25c9428b4e3ebd4f5ab2dd4c7b5a312ca06e8 GIT binary patch literal 1128 zcmZWpO>^2n488L!H2VYA`{mti26Lz{zHs${8*KxUf=jK_&YOtUuos%^Jd>0p zf(uE{q%9Rseo~aAk)k=hG|^FQ37h4nTgG5?j&;l#0zD+eb}S);eLk;n5>! zOu440buoMs)}T^up|&$z!w@?RToa=Ki&$`r^D?N_VgMfCQv1IHJ?!U+;KX8?>?#_m zf_AT?xAuu9WIQsF88-lU0|a*^Z|||M90S!sdlR&eC=jB#DpE4gT9m38w$jzZYZPG# zE*fxVWS9%+Siyx+6lF>of#j4K2`A4`UehlPh@%DmPs*!;n}{2Lw2A+KJ3LIm2Q^95IY@&aS3;_5aFSaB+O5Dh4AqV=i#uI%v6#*V7k7ZNjoMx$o>Dk P9)G>5YPZ?aAIR=6^9=1i literal 0 HcmV?d00001 diff --git a/web/shared/icons/file-check.svg b/web/shared/icons/file-check.svg new file mode 100644 index 0000000000000000000000000000000000000000..bc5518e4419fe6a63ab14d648edfd2de24e4216b GIT binary patch literal 663 zcmZuvO>f&U488YP5Zc+as1HgS;sD#Jhwhp~Zb6zw0i2{*jkrI*q?{dE1du42ACFH@ zUcKLr@Nph5?}Mq+^!Bsw=Xu82OVRy$}GIbLBl! zVu_&-5pBYdkV+gqdLKZo-$`NAeeaZfkg{8rSbBg=4k${adk#CDSlZmOba#zIvt{EH zVQ)K(9vw;0`XZ#Gc!B)(Trk@tBm#w((zrWx$!&sC((%h>ggkT6&q|nF-kv)zCwGFM zgv8h4?*3VBWX0ug=_ZTBOU;im+FdqL$yC9&mL4duPz#%O*X^0)8V*==%X@TuUz|y0 zFJV-k%%HZ-4B~{lT#^U-5=9{px*;j2|BpdH+TSS#X7;*8Cn?P`OI}ta&|#e0p-5ZP Lub)=>zpXz3m|&7X literal 0 HcmV?d00001 diff --git a/web/src/compose_send_menu_popover.js b/web/src/compose_send_menu_popover.js index 03621c3a76..d94466f5e6 100644 --- a/web/src/compose_send_menu_popover.js +++ b/web/src/compose_send_menu_popover.js @@ -7,7 +7,6 @@ import render_send_later_modal_options from "../templates/send_later_modal_optio import * as blueslip from "./blueslip"; import * as channel from "./channel"; -import * as common from "./common"; import * as compose from "./compose"; import * as compose_state from "./compose_state"; import * as compose_validate from "./compose_validate"; @@ -144,6 +143,7 @@ export function toggle() { export function initialize() { tippy.delegate("body", { ...popover_menus.default_popover_props, + theme: "popover-menu", target: "#send_later i", onUntrigger() { // This is only called when the popover is closed by clicking on `target`. @@ -174,7 +174,6 @@ export function initialize() { // Make sure the compose drafts count, which is also displayed in this popover, has a current value. drafts.update_compose_draft_count(); const $popper = $(instance.popper); - common.adjust_mac_kbd_tags(".enter_sends_choices kbd"); $popper.one("click", ".send_later_selected_send_later_time", () => { const send_at_timestamp = scheduled_messages.get_selected_send_later_timestamp(); do_schedule_message(send_at_timestamp); diff --git a/web/styles/compose.css b/web/styles/compose.css index 45467ae7ae..5738fc8a00 100644 --- a/web/styles/compose.css +++ b/web/styles/compose.css @@ -1001,41 +1001,80 @@ textarea.new_message_textarea { } .enter_sends_choices { + display: flex; + flex-direction: column; + color: var(--color-text-popover-menu); + .enter_sends_choice { display: flex; gap: 8px; - padding-top: 4px; + padding: 4px 10px; + align-items: flex-start; - & input[type="radio"] { - position: relative; - top: 5px; + &:hover { + background: var(--color-background-hover-popover-menu); + outline: none; + } + + &:active { + background: var(--color-background-active-popover-menu); + } + + & .enter_sends_choice_radio { width: auto; cursor: pointer; margin: 4px 0 0; + accent-color: hsl(217deg 100% 60%); &:focus { outline: 1px dotted hsl(0deg 0% 20%); outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } - } - &:first-child { - padding: 0 0 4px; - border-bottom: 1px solid hsl(0deg 0% 0% / 20%); + &:checked + + .enter_sends_choice_text_container + .popover-menu-hotkey-hint { + color: hsl(217deg 100% 60%); + border: 1px solid hsl(217deg 100% 60% / 50%); + } } } + .enter_sends_choice_text_container { + display: flex; + flex-direction: column; + flex-shrink: 0; + gap: 3px; + white-space: nowrap; + } + .enter_sends_choice_text { display: flex; - flex-direction: column; + align-items: center; + gap: 3px; } - .enter_sends_minor, - .enter_sends_minor kbd { - opacity: 0.9; - font-size: 11px; - color: hsl(0deg 0% 50%); + .popover-menu-hotkey-hints { + margin: 0; + padding: 0; + + .popover-menu-hotkey-hint { + padding: 2px 5px; + } + } + + .enter_sends_major { + font-size: 15px; + } + + .enter_sends_minor { + font-size: 12px; + + .popover-menu-hotkey-hint { + font-size: 12px; + padding: 1px 4px; + } } } @@ -1046,6 +1085,13 @@ textarea.new_message_textarea { @media (width < $sm_min) { display: block; } + + .unread_count { + margin: 1px 0 0 6px; + border: 0.5px solid var(--color-border-unread-counter); + background-color: unset; + color: inherit; + } } #compose-recipient { diff --git a/web/templates/popovers/send_later_popover.hbs b/web/templates/popovers/send_later_popover.hbs index 161bd020f6..bbb9c0957a 100644 --- a/web/templates/popovers/send_later_popover.hbs +++ b/web/templates/popovers/send_later_popover.hbs @@ -1,62 +1,80 @@ - +