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

tooltips: Add hotkey hints support to compose related buttons. 

This commit adds the hotkey hints support to "Cancel compose",
"Cancel compose and save draft", "Scroll to bottom" and "Drafts"
button.
This commit is contained in:
sayamsamal 2022-09-28 22:59:17 +05:30 committed by Tim Abbott
parent 4a7ad5325a
commit 26fc108e16
4 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
static/js/compose.js
View File

@ -443,9 +443,12 @@ export function initialize() {
// Change compose close button tooltip as per condition.
// We save compose text in draft only if its length is > 2.
if (compose_text_length > 2) {
$("#compose_close").attr("data-tooltip-template-id", "compose_close_and_save_tooltip");
$("#compose_close").attr("data-tooltip-template-id", "compose_close_tooltip_template");
} else {
$("#compose_close").attr("data-tooltip-template-id", "compose_close_tooltip");
$("#compose_close").attr(
"data-tooltip-template-id",
"compose_close_and_save_tooltip_template",
);
}
});

3
static/js/ui_init.js
View File

@ -224,9 +224,6 @@ function initialize_compose_box() {
embedded: $("#compose").attr("data-embedded") === "",
file_upload_enabled: page_params.max_file_upload_size_mib > 0,
giphy_enabled: giphy.is_giphy_enabled(),
scroll_to_bottom_key_html: common.has_mac_keyboard()
? "Fn + <span class='tooltip_right_arrow'>→</span>"
: "End",
max_stream_name_length: page_params.max_stream_name_length,
max_topic_length: page_params.max_topic_length,
}),

19
static/templates/compose.hbs
View File

@ -4,12 +4,15 @@
minimal css and no JS. We keep it `position: absolute` to prevent
it changing compose box layout in any way. --}}
<div id="scroll-to-bottom-button-container" aria-hidden="true">
<div id="scroll-to-bottom-button-clickable-area" data-tooltip-template-id="scroll-to-bottom-button-tooltip">
<div id="scroll-to-bottom-button-clickable-area" data-tooltip-template-id="scroll-to-bottom-button-tooltip-template">
<div id="scroll-to-bottom-button">
<i class="fa fa-chevron-down"></i>
</div>
</div>
<template id="scroll-to-bottom-button-tooltip">{{t 'Scroll to bottom' }} <span class="hotkey-hint">({{{scroll_to_bottom_key_html}}})</span></template>
<template id="scroll-to-bottom-button-tooltip-template">
{{t 'Scroll to bottom' }}
{{hotkey_hints "End"}}
</template>
</div>
<div id="compose_controls" class="new-style">
<div id="compose_buttons">
@ -55,9 +58,15 @@
<div id="compose_top_right" class="order-2">
<button type="button" class="expand_composebox_button fa fa-chevron-up" aria-label="{{t 'Expand compose' }}" data-tippy-content="{{t 'Expand compose' }}"></button>
<button type="button" class="collapse_composebox_button fa fa-chevron-down" aria-label="{{t 'Collapse compose' }}" data-tippy-content="{{t 'Collapse compose' }}"></button>
<button type="button" class="close fa fa-times" id='compose_close' data-tooltip-template-id="compose_close_tooltip"></button>
<template id="compose_close_tooltip">{{t 'Cancel compose' }} <span class="hotkey-hint">(Esc)</span></template>
<template id="compose_close_and_save_tooltip">{{t 'Cancel compose and save draft' }} <span class="hotkey-hint">(Esc)</span></template>
<button type="button" class="close fa fa-times" id='compose_close' data-tooltip-template-id="compose_close_tooltip_template"></button>
<template id="compose_close_tooltip_template">
{{t 'Cancel compose' }}
{{hotkey_hints "Esc"}}
</template>
<template id="compose_close_and_save_tooltip_template">
{{t 'Cancel compose and save draft' }}
{{hotkey_hints "Esc"}}
</template>
</div>
<div id="stream-message" class="order-1">
<div class="stream-selection-header-colorblock message_header_stream left_part" tab-index="-1"></div>

7
static/templates/compose_control_buttons.hbs
View File

@ -13,10 +13,13 @@
<div class="{{#if message_id}}hide-lg{{else}}hide-sm{{/if}}">
{{> compose_control_buttons_in_popover}}
</div>
<a role="button" class="compose_control_button compose_draft_button hide-sm" tabindex=0 href="#drafts" data-tooltip-template-id="compose_draft_tooltip">
<a role="button" class="compose_control_button compose_draft_button hide-sm" tabindex=0 href="#drafts" data-tooltip-template-id="compose_draft_tooltip_template">
{{t 'Drafts' }}
</a>
<template id="compose_draft_tooltip">{{t 'Drafts' }} <span class="hotkey-hint">(d)</span></template>
<template id="compose_draft_tooltip_template">
{{t 'Drafts' }}
{{hotkey_hints "D"}}
</template>
<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="-1" data-tippy-content="Compose actions"></a>
</div>