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
target: ".mobile_button_container",
placement: "top",
theme: "popover-menu",
onShow(instance) {
popover_menus.popover_instances.compose_mobile_button = 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
Drafts and the send-adjacent vdots */
.send-control-button {

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

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