Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

compose: Redesign mobile message buttons popover. 

As part of the popover menu redesign, this redesigns the mobile message
buttons popover using the new "popover-menu" tippy theme and improves
accessibility by using appropriate ARIA attributes.

Fixes part of #28699.
This commit is contained in:
Sayam Samal 2024-06-27 00:22:48 +05:30 committed by Tim Abbott
parent 49adbcc375
commit a62337d08f
3 changed files with 25 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/compose_popovers.js
View File

@ -25,6 +25,7 @@ export function initialize() {
// actions // actions
target: ".mobile_button_container", target: ".mobile_button_container",
placement: "top", placement: "top",
theme: "popover-menu",
onShow(instance) { onShow(instance) {
popover_menus.popover_instances.compose_mobile_button = instance; popover_menus.popover_instances.compose_mobile_button = instance;
popover_menus.on_show_prep(instance); popover_menus.on_show_prep(instance);

5
web/styles/compose.css
View File

@ -1308,11 +1308,6 @@ textarea.new_message_textarea {
} }
} }
.compose_mobile_stream_button i,
.compose_mobile_direct_message_button i {
margin-right: 4px;
}
/* Class for send-area buttons, such as /* Class for send-area buttons, such as
Drafts and the send-adjacent vdots */ Drafts and the send-adjacent vdots */
.send-control-button { .send-control-button {

46
web/templates/popovers/mobile_message_buttons_popover.hbs
View File

@ -1,22 +1,24 @@
<ul class="nav nav-list"> <div class="popover-menu" data-simplebar data-simplebar-tab-index="-1">
<li> <ul role="menu" class="popover-menu-list">
<a class="compose_mobile_stream_button"> <li role="none" class="link-item popover-menu-list-item">
<i class="fa fa-bullhorn" aria-hidden="true"></i> <a role="menuitem" class="compose_mobile_stream_button popover-menu-link" tabindex="0">
{{#if is_in_private_narrow }} <i class="popover-menu-icon zulip-icon zulip-icon-square-plus" aria-hidden="true"></i>
{{t "New channel message" }} {{#if is_in_private_narrow }}
{{else}} <span class="popover-menu-label">{{t "New channel message" }}</span>
{{t "New topic" }} {{else}}
{{/if}} <span class="popover-menu-label">{{t "New topic" }}</span>
</a> {{/if}}
</li> </a>
<li> </li>
<a class="compose_mobile_direct_message_button"> <li role="none" class="link-item popover-menu-list-item">
<i class="fa fa-envelope" aria-hidden="true"></i> <a role="menuitem" class="compose_mobile_direct_message_button popover-menu-link" tabindex="0">
{{#if is_in_private_narrow }} <i class="popover-menu-icon zulip-icon zulip-icon-mail" aria-hidden="true"></i>
{{t "New direct message" }} {{#if is_in_private_narrow }}
{{else}} <span class="popover-menu-label">{{t "New direct message" }}</span>
{{t "New direct message" }} {{else}}
{{/if}} <span class="popover-menu-label">{{t "New direct message" }}</span>
</a> {{/if}}
</li> </a>
</ul> </li>
</ul>
</div>