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

32 lines
2.6 KiB
Handlebars
Raw Normal View History

visibility_policy_popover: Use the new "popover-menu" popover theme. As part of the popover menu redesign, this updates the topic visibility popover to use the new "popover-menu" popover theme and improves accessibility by using appropriate ARIA attributes. This also moves the `:focus-visible` CSS rule to apply to any tab picker in a popover, removing the need to explicitly add it to each tab picker. Fixes part of #28699.
2024-06-05 18:08:51 +02:00
<div class="popover-menu visibility-policy-popover" data-simplebar>
<ul role="menu" class="popover-menu-list">
<li role="none" class="popover-menu-list-item">
<div role="group" class="recipient-bar-topic-visibility-switcher tab-picker tab-picker-vertical" aria-label="{{t 'Topic visibility' }}">
<input type="radio" id="select-muted-policy" class="tab-option" name="visibility-policy-select" data-visibility-policy="{{all_visibility_policies.MUTED}}" {{#if (eq visibility_policy all_visibility_policies.MUTED)}}checked{{/if}} />
<label role="menuitemradio" class="tab-option-content" for="select-muted-policy" tabindex="0">
<i class="zulip-icon zulip-icon-mute-new" aria-hidden="true"></i>
visibility_policy_popover: Fix popover shrinking bug on Safari. A bug was observed on Safari where the visibility policy switcher popover was shrinking beyond the width of the policy switcher, hiding a portion of the switcher component. This was due to the presence of the `width: min-content` on the popover for supporting dynamic popover menu sizing based on the content of the menu items, in tandem with some issue in Safari since it worked fine on other browsers. This commit adds the `.popover-menu-label` class to the visibility policy switcher's label to enforce `max-content` width on the label element, which in turn fixes the popover shrinking issue on Safari.
2024-06-19 15:26:04 +02:00
<span class="popover-menu-label">{{t "Mute"}}</span>
visibility_policy_popover: Use the new "popover-menu" popover theme. As part of the popover menu redesign, this updates the topic visibility popover to use the new "popover-menu" popover theme and improves accessibility by using appropriate ARIA attributes. This also moves the `:focus-visible` CSS rule to apply to any tab picker in a popover, removing the need to explicitly add it to each tab picker. Fixes part of #28699.
2024-06-05 18:08:51 +02:00
</label>
<input type="radio" id="select-inherit-policy" class="tab-option" name="visibility-policy-select" data-visibility-policy="{{all_visibility_policies.INHERIT}}" {{#if (eq visibility_policy all_visibility_policies.INHERIT)}}checked{{/if}} />
<label role="menuitemradio" class="tab-option-content" for="select-inherit-policy" tabindex="0">
<i class="zulip-icon zulip-icon-inherit" aria-hidden="true"></i>
visibility_policy_popover: Fix popover shrinking bug on Safari. A bug was observed on Safari where the visibility policy switcher popover was shrinking beyond the width of the policy switcher, hiding a portion of the switcher component. This was due to the presence of the `width: min-content` on the popover for supporting dynamic popover menu sizing based on the content of the menu items, in tandem with some issue in Safari since it worked fine on other browsers. This commit adds the `.popover-menu-label` class to the visibility policy switcher's label to enforce `max-content` width on the label element, which in turn fixes the popover shrinking issue on Safari.
2024-06-19 15:26:04 +02:00
<span class="popover-menu-label">{{t "Default"}}</span>
visibility_policy_popover: Use the new "popover-menu" popover theme. As part of the popover menu redesign, this updates the topic visibility popover to use the new "popover-menu" popover theme and improves accessibility by using appropriate ARIA attributes. This also moves the `:focus-visible` CSS rule to apply to any tab picker in a popover, removing the need to explicitly add it to each tab picker. Fixes part of #28699.
2024-06-05 18:08:51 +02:00
</label>
{{#if (or stream_muted topic_unmuted)}}
<input type="radio" id="select-unmuted-policy" class="tab-option" name="visibility-policy-select" data-visibility-policy="{{all_visibility_policies.UNMUTED}}" {{#if (eq visibility_policy all_visibility_policies.UNMUTED)}}checked{{/if}} />
<label role="menuitemradio" class="tab-option-content" for="select-unmuted-policy" tabindex="0">
<i class="zulip-icon zulip-icon-unmute-new" aria-hidden="true"></i>
visibility_policy_popover: Fix popover shrinking bug on Safari. A bug was observed on Safari where the visibility policy switcher popover was shrinking beyond the width of the policy switcher, hiding a portion of the switcher component. This was due to the presence of the `width: min-content` on the popover for supporting dynamic popover menu sizing based on the content of the menu items, in tandem with some issue in Safari since it worked fine on other browsers. This commit adds the `.popover-menu-label` class to the visibility policy switcher's label to enforce `max-content` width on the label element, which in turn fixes the popover shrinking issue on Safari.
2024-06-19 15:26:04 +02:00
<span class="popover-menu-label">{{t "Unmute"}}</span>
visibility_policy_popover: Use the new "popover-menu" popover theme. As part of the popover menu redesign, this updates the topic visibility popover to use the new "popover-menu" popover theme and improves accessibility by using appropriate ARIA attributes. This also moves the `:focus-visible` CSS rule to apply to any tab picker in a popover, removing the need to explicitly add it to each tab picker. Fixes part of #28699.
2024-06-05 18:08:51 +02:00
</label>
{{/if}}
<input type="radio" id="select-followed-policy" class="tab-option" name="visibility-policy-select" data-visibility-policy="{{all_visibility_policies.FOLLOWED}}" {{#if (eq visibility_policy all_visibility_policies.FOLLOWED)}}checked{{/if}} />
<label role="menuitemradio" class="tab-option-content" for="select-followed-policy" tabindex="0">
<i class="zulip-icon zulip-icon-follow" aria-hidden="true"></i>
visibility_policy_popover: Fix popover shrinking bug on Safari. A bug was observed on Safari where the visibility policy switcher popover was shrinking beyond the width of the policy switcher, hiding a portion of the switcher component. This was due to the presence of the `width: min-content` on the popover for supporting dynamic popover menu sizing based on the content of the menu items, in tandem with some issue in Safari since it worked fine on other browsers. This commit adds the `.popover-menu-label` class to the visibility policy switcher's label to enforce `max-content` width on the label element, which in turn fixes the popover shrinking issue on Safari.
2024-06-19 15:26:04 +02:00
<span class="popover-menu-label">{{t "Follow"}}</span>
visibility_policy_popover: Use the new "popover-menu" popover theme. As part of the popover menu redesign, this updates the topic visibility popover to use the new "popover-menu" popover theme and improves accessibility by using appropriate ARIA attributes. This also moves the `:focus-visible` CSS rule to apply to any tab picker in a popover, removing the need to explicitly add it to each tab picker. Fixes part of #28699.
2024-06-05 18:08:51 +02:00
</label>
<span class="slider"></span>
</div>
</li>
</ul>
</div>