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

tooltips: Add tippy tooltips in manage stream settings. 

Added tippy tooltips for create_stream_plus_button and
preview-stream-button in manage stream settings by adding
class `.tippy-zulip-delayed-tooltip` which add tooltips
with LONG_HOVER_DELAY. Added data-tippy-placement="bottom"
to match with 'Archive stream' tooltip.

Created a new tooltip for sub_unsub_button in tippyjs with
class .toggle-subscription-tooltip that has
EXTRA_LONG_HOVER_DELAY, placement equals to bottom
and appended to body.

Fixes part of #24311.
This commit is contained in:
Hardik Dharmani 2023-04-09 02:27:06 +05:30 committed by Tim Abbott
parent 394fcbfd51
commit 15a15240da
3 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/src/tippyjs.js
View File

@ -137,6 +137,13 @@ export function initialize() {
},
});
delegate("body", {
target: ".toggle-subscription-tooltip",
delay: EXTRA_LONG_HOVER_DELAY,
appendTo: () => document.body,
placement: "bottom",
});
delegate("body", {
target: ".tippy-left-sidebar-tooltip",
placement: "right",

12
web/templates/stream_settings/stream_settings.hbs
View File

@ -3,7 +3,7 @@
{{#with sub}}
<div class="button-group">
<div class="sub_unsub_button_wrapper inline-block">
<button class="button small rounded subscribe-button sub_unsub_button {{#if should_display_subscription_button}}tippy-zulip-tooltip{{/if}} {{#unless subscribed }}unsubscribed{{/unless}}" type="button" name="button" {{#if should_display_subscription_button}}data-tippy-content="{{t 'Toggle subscription'}} (S)" {{else}}disabled="disabled"{{/if}}>
<button class="button small rounded subscribe-button sub_unsub_button {{#if should_display_subscription_button}}toggle-subscription-tooltip{{/if}} {{#unless subscribed }}unsubscribed{{/unless}}" type="button" name="button" {{#if should_display_subscription_button}} data-tooltip-template-id="toggle-subscription-tooltip-template" {{else}}disabled="disabled"{{/if}}>
{{#if subscribed }}
{{t "Unsubscribe" }}
{{else}}
@ -11,11 +11,19 @@
{{/if}}
</button>
</div>
<a href="{{preview_url}}" class="button small rounded tippy-zulip-tooltip" id="preview-stream-button" role="button" data-tippy-content="{{t 'View stream'}} (V)" {{#unless should_display_preview_button }}style="display: none"{{/unless}}><i class="fa fa-eye"></i></a>
<template id="toggle-subscription-tooltip-template">
{{t 'Toggle subscription' }}
{{tooltip_hotkey_hints "Shift" "S"}}
</template>
<a href="{{preview_url}}" class="button small rounded tippy-zulip-delayed-tooltip" id="preview-stream-button" role="button" data-tooltip-template-id="view-stream-tooltip-template" data-tippy-placement="bottom" {{#unless should_display_preview_button }}style="display: none"{{/unless}}><i class="fa fa-eye"></i></a>
{{#if is_realm_admin}}
<button class="button small rounded btn-danger deactivate tippy-zulip-tooltip" type="button" name="delete_button" data-tippy-content="{{t 'Archive stream'}}"> <i class="fa fa-trash-o" aria-hidden="true"></i></button>
{{/if}}
</div>
<template id="view-stream-tooltip-template">
{{t 'View stream' }}
{{tooltip_hotkey_hints "Shift" "V"}}
</template>
{{/with}}
</div>
<div class="subscription_settings" data-stream-id="{{sub.stream_id}}">

6
web/templates/stream_settings/stream_settings_overlay.hbs
View File

@ -12,9 +12,13 @@
<div class="search-container">
<div id="add_new_subscription">
{{#if can_create_streams}}
<button class="create_stream_button create_stream_plus_button tippy-zulip-tooltip" data-tippy-content="{{t 'Create new stream' }} (n)" data-tippy-placement="bottom">
<button class="create_stream_button create_stream_plus_button tippy-zulip-delayed-tooltip" data-tooltip-template-id="create-new-stream-tooltip-template" data-tippy-placement="bottom">
<span>+</span>
</button>
<template id="create-new-stream-tooltip-template">
{{t 'Create new stream' }}
{{tooltip_hotkey_hints "N"}}
</template>
{{/if}}
<div class="float-clear"></div>
</div>