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

compose_control_menu: Allow to enter press to open the menu. 

Make `compose_control_menu_wrapper` clickable and allow tab focus
on it. Disable tab focus on `compose_control_menu` icon. Fix outline
for `compose_control_menu_wrapper`.

Extend out custom outline property to all `[role="button"]` elements.
This commit is contained in:
Aman Agrawal 2022-03-08 06:22:44 +00:00 committed by Tim Abbott
parent a4d42392a6
commit bae5f016bf
4 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
static/styles/compose.css
View File

@ -561,8 +561,17 @@ input.recipient_box {
} }
.compose_control_menu_wrapper { .compose_control_menu_wrapper {
opacity: 0.7;
padding: 0; padding: 0;
margin: 0; margin: 0;
&:hover {
opacity: 1;
}
.compose_control_menu {
opacity: 1;
}
} }
.hide-sm, .hide-sm,

3
static/styles/dark_theme.css
View File

@ -1154,7 +1154,8 @@ body.dark-theme {
.new-style label.checkbox input[type="checkbox"]:focus ~ span, .new-style label.checkbox input[type="checkbox"]:focus ~ span,
i.fa:focus, i.fa:focus,
i.zulip-icon:focus, i.zulip-icon:focus,
.auto-select:focus { .auto-select:focus,
[role="button"]:focus {
outline-color: hsl(0, 0%, 67%); outline-color: hsl(0, 0%, 67%);
} }

3
static/styles/zulip.css
View File

@ -461,7 +461,8 @@ button:focus,
.new-style label.checkbox input[type="checkbox"]:focus ~ span, .new-style label.checkbox input[type="checkbox"]:focus ~ span,
i.fa:focus, i.fa:focus,
i.zulip-icon:focus, i.zulip-icon:focus,
.auto-select:focus { .auto-select:focus,
[role="button"]:focus {
outline: 2px solid hsl(215, 47%, 50%); outline: 2px solid hsl(215, 47%, 50%);
/* TODO: change solid to auto once the Chromium bug #1105822 is fixed */ /* TODO: change solid to auto once the Chromium bug #1105822 is fixed */
} }

4
static/templates/compose_control_buttons.hbs
View File

@ -16,7 +16,7 @@
<a role="button" class="compose_control_button compose_draft_button hide-sm" tabindex=0 href="#drafts" data-tippy-content="{{t 'Drafts' }}"> <a role="button" class="compose_control_button compose_draft_button hide-sm" tabindex=0 href="#drafts" data-tippy-content="{{t 'Drafts' }}">
{{t 'Drafts' }} {{t 'Drafts' }}
</a> </a>
<div class="compose_control_menu_wrapper"> <div class="compose_control_menu_wrapper" role="button" tabindex=0>
<a class="compose_control_button zulip-icon zulip-icon-ellipsis-v-solid hide {{#if message_id}}show-lg{{else}}show-sm{{/if}} compose_control_menu" tabindex=0 data-tippy-content="Compose actions"></a> <a class="compose_control_button zulip-icon zulip-icon-ellipsis-v-solid hide {{#if message_id}}show-lg{{else}}show-sm{{/if}} compose_control_menu" tabindex="-1" data-tippy-content="Compose actions"></a>
</div> </div>
</div> </div>