CodeCow/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2026-06-27 21:01:32 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

tooltips: Fix incorrect tooltip on the spinner.

Browse Source 
The "sub_unsub_status" spinner was inside the div with the "check" class
, causing the tooltip to appear over the spinner, which should only be
visible on the check icon.

This commit moves the "sub_unsub_status" spinner div outside, ensuring
the tooltip is now visible only when hovering over the check icon.
This commit is contained in:
Maneesh Shukla 2025-06-19 15:08:03 +05:30 committed by Tim Abbott
parent 52b83f7b58
commit 8ef51e1b6f
3 changed files with 90 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/styles/subscriptions.css
View File

@ -744,7 +744,6 @@ h4.user_group_setting_subsection_title {
.check {
width: 25px;
height: 25px;
position: relative;
margin-right: 12px;
margin-top: 9px;
background-size: 60% auto;

69
web/templates/stream_settings/browse_streams_list_item.hbs
View File

@ -2,47 +2,50 @@
<div class="stream-row" data-stream-id="{{stream_id}}" data-stream-name="{{name}}">
{{#if subscribed}}
<div class="check checked sub_unsub_button tippy-zulip-tooltip" data-tooltip-template-id="unsubscribe-from-{{name}}-stream-tooltip-template">
<div class="check checked sub_unsub_button">
<template id="unsubscribe-from-{{name}}-stream-tooltip-template">
<span>
{{#tr}}
Unsubscribe from <z-stream></z-stream>
{{#*inline "z-stream"}}{{> ../inline_decorated_channel_name stream=this}}{{/inline}}
{{/tr}}
</span>
</template>
<div class="tippy-zulip-tooltip" data-tooltip-template-id="unsubscribe-from-{{name}}-stream-tooltip-template">
<template id="unsubscribe-from-{{name}}-stream-tooltip-template">
<span>
{{#tr}}
Unsubscribe from <z-stream></z-stream>
{{#*inline "z-stream"}}{{> ../inline_decorated_channel_name stream=this}}{{/inline}}
{{/tr}}
</span>
</template>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z"/>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z"/>
</svg>
</div>
<div class='sub_unsub_status'></div>
</div>
{{else}}
<div class="check sub_unsub_button {{#unless should_display_subscription_button}}disabled{{/unless}} tippy-zulip-tooltip"
data-tooltip-template-id="{{#if should_display_subscription_button}}subscribe-to-{{name}}-stream-tooltip-template{{else}}cannot-subscribe-to-{{name}}-stream-tooltip-template{{/if}}">
<div class="check sub_unsub_button {{#unless should_display_subscription_button}}disabled{{/unless}}">
<template id="subscribe-to-{{name}}-stream-tooltip-template">
<span>
{{#tr}}
Subscribe to <z-stream></z-stream>
{{#*inline "z-stream"}}{{> ../inline_decorated_channel_name stream=this}}{{/inline}}
{{/tr}}
</span>
</template>
<div class="tippy-zulip-tooltip" data-tooltip-template-id="{{#if should_display_subscription_button}}subscribe-to-{{name}}-stream-tooltip-template{{else}}cannot-subscribe-to-{{name}}-stream-tooltip-template{{/if}}">
<template id="subscribe-to-{{name}}-stream-tooltip-template">
<span>
{{#tr}}
Subscribe to <z-stream></z-stream>
{{#*inline "z-stream"}}{{> ../inline_decorated_channel_name stream=this}}{{/inline}}
{{/tr}}
</span>
</template>
<template id="cannot-subscribe-to-{{name}}-stream-tooltip-template">
<span>
{{#tr}}
Cannot subscribe to <z-stream></z-stream>
{{#*inline "z-stream"}}{{> ../inline_decorated_channel_name stream=this}}{{/inline}}
{{/tr}}
</span>
</template>
<template id="cannot-subscribe-to-{{name}}-stream-tooltip-template">
<span>
{{#tr}}
Cannot subscribe to <z-stream></z-stream>
{{#*inline "z-stream"}}{{> ../inline_decorated_channel_name stream=this}}{{/inline}}
{{/tr}}
</span>
</template>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M459.319,229.668c0,22.201-17.992,40.193-40.205,40.193H269.85v149.271c0,22.207-17.998,40.199-40.196,40.193 c-11.101,0-21.149-4.492-28.416-11.763c-7.276-7.281-11.774-17.324-11.769-28.419l-0.006-149.288H40.181 c-11.094,0-21.134-4.492-28.416-11.774c-7.264-7.264-11.759-17.312-11.759-28.413C0,207.471,17.992,189.475,40.202,189.475h149.267 V40.202C189.469,17.998,207.471,0,229.671,0c22.192,0.006,40.178,17.986,40.19,40.187v149.288h149.282 C441.339,189.487,459.308,207.471,459.319,229.668z"/>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M459.319,229.668c0,22.201-17.992,40.193-40.205,40.193H269.85v149.271c0,22.207-17.998,40.199-40.196,40.193 c-11.101,0-21.149-4.492-28.416-11.763c-7.276-7.281-11.774-17.324-11.769-28.419l-0.006-149.288H40.181 c-11.094,0-21.134-4.492-28.416-11.774c-7.264-7.264-11.759-17.312-11.759-28.413C0,207.471,17.992,189.475,40.202,189.475h149.267 V40.202C189.469,17.998,207.471,0,229.671,0c22.192,0.006,40.178,17.986,40.19,40.187v149.288h149.282 C441.339,189.487,459.308,207.471,459.319,229.668z"/>
</svg>
</div>
<div class='sub_unsub_status'></div>
</div>
{{/if}}

104
web/templates/user_group_settings/browse_user_groups_list_item.hbs
View File

@ -1,72 +1,76 @@
<div class="group-row {{#if deactivated}}deactivated-group{{/if}}" data-group-id="{{id}}" data-group-name="{{name}}">
{{#if is_member}}
<div class="check checked join_leave_button tippy-zulip-tooltip {{#unless can_leave}}disabled{{/unless}} {{#unless is_direct_member}}not-direct-member{{/unless}}" data-tooltip-template-id="{{#if can_leave}}{{#if is_direct_member}}leave-{{name}}-group-tooltip-template{{else}}cannot-leave-{{name}}-because-of-subgroup-tooltip-template{{/if}}{{else}}cannot-leave-{{name}}-group-tooltip-template{{/if}}">
<template id="leave-{{name}}-group-tooltip-template">
<span>
{{#tr}}
Leave group {name}
{{/tr}}
</span>
</template>
<template id="cannot-leave-{{name}}-because-of-subgroup-tooltip-template">
<span>
{{#tr}}
You are a member of this group because you are a member of a subgroup (<b>{associated_subgroup_names}</b>).
{{/tr}}
</span>
</template>
<template id="cannot-leave-{{name}}-group-tooltip-template">
{{#if deactivated}}
<div class="check checked join_leave_button {{#unless can_leave}}disabled{{/unless}} {{#unless is_direct_member}}not-direct-member{{/unless}}">
<div class="tippy-zulip-tooltip" data-tooltip-template-id="{{#if can_leave}}{{#if is_direct_member}}leave-{{name}}-group-tooltip-template{{else}}cannot-leave-{{name}}-because-of-subgroup-tooltip-template{{/if}}{{else}}cannot-leave-{{name}}-group-tooltip-template{{/if}}">
<template id="leave-{{name}}-group-tooltip-template">
<span>
{{#tr}}
You cannot leave a deactivated user group.
Leave group {name}
{{/tr}}
</span>
{{else}}
</template>
<template id="cannot-leave-{{name}}-because-of-subgroup-tooltip-template">
<span>
{{#tr}}
You do not have permission to leave this group.
You are a member of this group because you are a member of a subgroup (<b>{associated_subgroup_names}</b>).
{{/tr}}
</span>
{{/if}}
</template>
</template>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z"/>
</svg>
<template id="cannot-leave-{{name}}-group-tooltip-template">
{{#if deactivated}}
<span>
{{#tr}}
You cannot leave a deactivated user group.
{{/tr}}
</span>
{{else}}
<span>
{{#tr}}
You do not have permission to leave this group.
{{/tr}}
</span>
{{/if}}
</template>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z"/>
</svg>
</div>
<div class='join_leave_status'></div>
</div>
{{else}}
<div class="check join_leave_button {{#unless can_join}}disabled{{/unless}} tippy-zulip-tooltip" data-tooltip-template-id="{{#if can_join}}join-{{name}}-group-tooltip-template{{else}}cannot-join-{{name}}-group-tooltip-template{{/if}}">
<template id="join-{{name}}-group-tooltip-template">
<span>
{{#tr}}
Join group {name}
{{/tr}}
</span>
</template>
<template id="cannot-join-{{name}}-group-tooltip-template">
{{#if deactivated}}
<div class="check join_leave_button {{#unless can_join}}disabled{{/unless}}">
<div class="tippy-zulip-tooltip" data-tooltip-template-id="{{#if can_join}}join-{{name}}-group-tooltip-template{{else}}cannot-join-{{name}}-group-tooltip-template{{/if}}">
<template id="join-{{name}}-group-tooltip-template">
<span>
{{#tr}}
You cannot join a deactivated user group.
Join group {name}
{{/tr}}
</span>
{{else}}
<span>
{{#tr}}
You do not have permission to join this group.
{{/tr}}
</span>
{{/if}}
</template>
</template>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M459.319,229.668c0,22.201-17.992,40.193-40.205,40.193H269.85v149.271c0,22.207-17.998,40.199-40.196,40.193 c-11.101,0-21.149-4.492-28.416-11.763c-7.276-7.281-11.774-17.324-11.769-28.419l-0.006-149.288H40.181 c-11.094,0-21.134-4.492-28.416-11.774c-7.264-7.264-11.759-17.312-11.759-28.413C0,207.471,17.992,189.475,40.202,189.475h149.267 V40.202C189.469,17.998,207.471,0,229.671,0c22.192,0.006,40.178,17.986,40.19,40.187v149.288h149.282 C441.339,189.487,459.308,207.471,459.319,229.668z"/>
</svg>
<template id="cannot-join-{{name}}-group-tooltip-template">
{{#if deactivated}}
<span>
{{#tr}}
You cannot join a deactivated user group.
{{/tr}}
</span>
{{else}}
<span>
{{#tr}}
You do not have permission to join this group.
{{/tr}}
</span>
{{/if}}
</template>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M459.319,229.668c0,22.201-17.992,40.193-40.205,40.193H269.85v149.271c0,22.207-17.998,40.199-40.196,40.193 c-11.101,0-21.149-4.492-28.416-11.763c-7.276-7.281-11.774-17.324-11.769-28.419l-0.006-149.288H40.181 c-11.094,0-21.134-4.492-28.416-11.774c-7.264-7.264-11.759-17.312-11.759-28.413C0,207.471,17.992,189.475,40.202,189.475h149.267 V40.202C189.469,17.998,207.471,0,229.671,0c22.192,0.006,40.178,17.986,40.19,40.187v149.288h149.282 C441.339,189.487,459.308,207.471,459.319,229.668z"/>
</svg>
</div>
<div class='join_leave_status'></div>
</div>
{{/if}}