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

139 lines
9.1 KiB
Handlebars
Raw Normal View History

popovers: Rename "navbar-dropdown-menu" theme to "popover-menu" theme. Also renames the navbar dropdown related CSS terms, to their equivalent popover related terms to accompany the name change of the theme.
2024-04-04 22:33:25 +02:00
<div class="popover-menu" id="personal-menu-dropdown" data-simplebar>
personal_menu: Use a more specific name for `.inner` class.
2023-10-13 00:46:49 +02:00
<nav class="personal-menu-nav">
personal_menu: Add tippy personal_menu dropdown. Add a personal menu dropdown that opens on clicking user avatar icon in navbar added in previous commit. The args passed to render_personal_menu() in onShow() are returned by get_personal_menu_content_context() in popover_menus_data.js so that they can be unit tested. Additionally, added CSS to get a custom arrow for dropdown menu. Added a `?` hotkey in keyboard shortcuts option in personal_menu dropdown in a style similar to our tooltip's hotkey by adding ? in a span with class .tooltip-hotkey-hint and adding some CSS. Fixes part of #22802.
2023-07-17 18:01:16 +02:00
<header class="personal-menu-header">
<div class="avatar">
<img class="avatar-image{{#if user_is_guest}} guest-avatar{{/if}}" src="{{user_avatar}}"/>
{{#if is_active }}
<span class="status-circle {{user_circle_class}} user_circle hidden-for-spectators" data-tippy-placement="bottom" data-tippy-content="{{user_last_seen_time_status}}"></span>
{{/if}}
</div>
<div class="text-area">
<p class="full-name">{{user_full_name}}</p>
<p class="user-type">{{user_type}}</p>
</div>
</header>
personal_menu: Rename popover-menu to dropdown-menu-list-section. There were no CSS changes related to `popver-menu` class.
2023-10-13 00:58:56 +02:00
<section class="dropdown-menu-list-section personal-menu-actions" data-user-id="{{user_id}}">
personal_menu_popover: Flatten nested lists for better accessibility. This refactors popover list structure to use a flattened `ul > li` structure along with aria-related additions, enabling screen reader accessibility and announcing menu length and position (`# of n`). Added ARIA roles: - `role="menu"` to the parent `<ul>` element, indicating it is a widget offering a list of choices. - `role="menuitem"`, `role="menuitemcheckbox"`, or`role="menuitemradio"` to child elements based on their function. - `role="group"` to the theme switcher, identifying it as a container for related menu items. - `role="none"` to `<li>` elements, removing the implied `listitem` role that conflicts with the parent menu structure.
2024-05-24 08:30:28 +02:00
<ul role="menu" class="popover-menu-list">
personal_menu: Handle undefined user_time. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-12-12 20:10:07 +01:00
{{#if user_time}}
personal_menu_popover: Flatten nested lists for better accessibility. This refactors popover list structure to use a flattened `ul > li` structure along with aria-related additions, enabling screen reader accessibility and announcing menu length and position (`# of n`). Added ARIA roles: - `role="menu"` to the parent `<ul>` element, indicating it is a widget offering a list of choices. - `role="menuitem"`, `role="menuitemcheckbox"`, or`role="menuitemradio"` to child elements based on their function. - `role="group"` to the theme switcher, identifying it as a container for related menu items. - `role="none"` to `<li>` elements, removing the implied `listitem` role that conflicts with the parent menu structure.
2024-05-24 08:30:28 +02:00
<li role="none" class="text-item hidden-for-spectators popover-menu-list-item">
<i class="popover-menu-icon zulip-icon zulip-icon-clock"></i>
{{#tr}}{user_time} local time{{/tr}}
personal_menu: Add tippy personal_menu dropdown. Add a personal menu dropdown that opens on clicking user avatar icon in navbar added in previous commit. The args passed to render_personal_menu() in onShow() are returned by get_personal_menu_content_context() in popover_menus_data.js so that they can be unit tested. Additionally, added CSS to get a custom arrow for dropdown menu. Added a `?` hotkey in keyboard shortcuts option in personal_menu dropdown in a style similar to our tooltip's hotkey by adding ? in a span with class .tooltip-hotkey-hint and adding some CSS. Fixes part of #22802.
2023-07-17 18:01:16 +02:00
</li>
personal_menu_popover: Flatten nested lists for better accessibility. This refactors popover list structure to use a flattened `ul > li` structure along with aria-related additions, enabling screen reader accessibility and announcing menu length and position (`# of n`). Added ARIA roles: - `role="menu"` to the parent `<ul>` element, indicating it is a widget offering a list of choices. - `role="menuitem"`, `role="menuitemcheckbox"`, or`role="menuitemradio"` to child elements based on their function. - `role="group"` to the theme switcher, identifying it as a container for related menu items. - `role="none"` to `<li>` elements, removing the implied `listitem` role that conflicts with the parent menu structure.
2024-05-24 08:30:28 +02:00
<li role="separator" class="popover-menu-separator"></li>
personal_menu: Handle undefined user_time. Signed-off-by: Anders Kaseorg <anders@zulip.com>
2023-12-12 20:10:07 +01:00
{{/if}}
personal_menu_popover: Flatten nested lists for better accessibility. This refactors popover list structure to use a flattened `ul > li` structure along with aria-related additions, enabling screen reader accessibility and announcing menu length and position (`# of n`). Added ARIA roles: - `role="menu"` to the parent `<ul>` element, indicating it is a widget offering a list of choices. - `role="menuitem"`, `role="menuitemcheckbox"`, or`role="menuitemradio"` to child elements based on their function. - `role="group"` to the theme switcher, identifying it as a container for related menu items. - `role="none"` to `<li>` elements, removing the implied `listitem` role that conflicts with the parent menu structure.
2024-05-24 08:30:28 +02:00
{{#if status_content_available}}
<li role="none" class="text-item popover-menu-list-item">
<span class="personal-menu-status-wrapper">
{{#if status_emoji_info}}
{{#if status_emoji_info.emoji_alt_code}}
<span class="emoji_alt_code">&nbsp;:{{status_emoji_info.emoji_name}}:</span>
{{else if status_emoji_info.url}}
<img src="{{status_emoji_info.url}}" class="emoji status_emoji" />
{{else}}
<span class="emoji status_emoji emoji-{{status_emoji_info.emoji_code}}"></span>
{{/if}}
personal_menu: Add tippy personal_menu dropdown. Add a personal menu dropdown that opens on clicking user avatar icon in navbar added in previous commit. The args passed to render_personal_menu() in onShow() are returned by get_personal_menu_content_context() in popover_menus_data.js so that they can be unit tested. Additionally, added CSS to get a custom arrow for dropdown menu. Added a `?` hotkey in keyboard shortcuts option in personal_menu dropdown in a style similar to our tooltip's hotkey by adding ? in a span with class .tooltip-hotkey-hint and adding some CSS. Fixes part of #22802.
2023-07-17 18:01:16 +02:00
{{/if}}
personal_menu_popover: Flatten nested lists for better accessibility. This refactors popover list structure to use a flattened `ul > li` structure along with aria-related additions, enabling screen reader accessibility and announcing menu length and position (`# of n`). Added ARIA roles: - `role="menu"` to the parent `<ul>` element, indicating it is a widget offering a list of choices. - `role="menuitem"`, `role="menuitemcheckbox"`, or`role="menuitemradio"` to child elements based on their function. - `role="group"` to the theme switcher, identifying it as a container for related menu items. - `role="none"` to `<li>` elements, removing the implied `listitem` role that conflicts with the parent menu structure.
2024-05-24 08:30:28 +02:00
<span class="status_text personal-menu-status-text">
{{#if show_placeholder_for_status_text}}
<i class="personal-menu-no-status-text">{{t "No status text"}}</i>
{{else}}
{{status_text}}
{{/if}}
</span>
</span>
<a role="menuitem" tabindex="0" class="personal-menu-clear-status popover-menu-link" aria-label="{{t 'Clear status'}}" data-tippy-content="{{t 'Clear your status' }}">
<i class="personal-menu-clear-status-icon popover-menu-icon zulip-icon zulip-icon-x-circle"></i>
</a>
</li>
{{!-- Group 1 --}}
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" tabindex="0" class="update_status_text popover-menu-link">
<i class="popover-menu-icon zulip-icon zulip-icon-smile-smaller"></i>
<span class="popover-menu-label">{{t 'Edit status' }}</span>
</a>
</li>
{{else}}
<li role="none" class="link-item hidden-for-spectators popover-menu-list-item">
<a role="menuitem" tabindex="0" class="update_status_text popover-menu-link">
<i class="popover-menu-icon zulip-icon zulip-icon-smile-smaller"></i>
<span class="popover-menu-label">{{t 'Set status' }}</span>
</a>
</li>
{{/if}}
{{#if invisible_mode}}
<li role="none" class="link-item hidden-for-spectators popover-menu-list-item">
<a role="menuitem" tabindex="0" class="invisible_mode_turn_off popover-menu-link">
<i class="popover-menu-icon zulip-icon zulip-icon-play-circle"></i>
<span class="popover-menu-label">{{t 'Turn off invisible mode' }}</span>
</a>
</li>
{{else}}
<li role="none" class="link-item hidden-for-spectators popover-menu-list-item">
<a role="menuitem" tabindex="0" class="invisible_mode_turn_on popover-menu-link">
<i class="popover-menu-icon zulip-icon zulip-icon-stop-circle"></i>
<span class="popover-menu-label">{{t 'Go invisible' }}</span>
</a>
</li>
{{/if}}
{{!-- Group 2 --}}
<li role="separator" class="popover-menu-separator"></li>
<li role="none" class="popover-menu-list-item">
<div role="group" id="theme-switcher" class="tab-picker" aria-label="{{t 'App theme' }}">
<input type="radio" id="select-automatic-theme" class="tab-option" name="theme-select" data-theme-code="{{color_scheme_values.automatic.code}}" {{#if (eq user_color_scheme color_scheme_values.automatic.code)}}checked{{/if}} />
<label role="menuitemradio" class="tab-option-content tippy-zulip-delayed-tooltip" for="select-automatic-theme" aria-label="{{t 'Select automatic theme' }}" data-tooltip-template-id="automatic-theme-template" tabindex="0">
<i class="zulip-icon zulip-icon-monitor" aria-hidden="true"></i>
</label>
<input type="radio" id="select-light-theme" class="tab-option" name="theme-select" data-theme-code="{{color_scheme_values.day.code}}" {{#if (eq user_color_scheme color_scheme_values.day.code)}}checked{{/if}} />
<label role="menuitemradio" class="tab-option-content tippy-zulip-delayed-tooltip" for="select-light-theme" aria-label="{{t 'Select light theme' }}" data-tippy-content="{{t 'Light theme' }}" tabindex="0">
<i class="zulip-icon zulip-icon-sun" aria-hidden="true"></i>
</label>
<input type="radio" id="select-dark-theme" class="tab-option" name="theme-select" data-theme-code="{{color_scheme_values.night.code}}" {{#if (eq user_color_scheme color_scheme_values.night.code)}}checked{{/if}} />
<label role="menuitemradio" class="tab-option-content tippy-zulip-delayed-tooltip" for="select-dark-theme" aria-label="{{t 'Select dark theme' }}" data-tippy-content="{{t 'Dark theme' }}" tabindex="0">
<i class="zulip-icon zulip-icon-moon" aria-hidden="true"></i>
</label>
<span class="slider"></span>
</div>
</li>
{{!-- Group 3 --}}
<li role="separator" class="popover-menu-separator"></li>
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" href="#user/{{user_id}}" tabindex="0" class="view_full_user_profile popover-menu-link">
<i class="popover-menu-icon zulip-icon zulip-icon-account"></i>
<span class="popover-menu-label">{{t 'View your profile' }}</span>
</a>
personal_menu: Add tippy personal_menu dropdown. Add a personal menu dropdown that opens on clicking user avatar icon in navbar added in previous commit. The args passed to render_personal_menu() in onShow() are returned by get_personal_menu_content_context() in popover_menus_data.js so that they can be unit tested. Additionally, added CSS to get a custom arrow for dropdown menu. Added a `?` hotkey in keyboard shortcuts option in personal_menu dropdown in a style similar to our tooltip's hotkey by adding ? in a span with class .tooltip-hotkey-hint and adding some CSS. Fixes part of #22802.
2023-07-17 18:01:16 +02:00
</li>
personal_menu_popover: Flatten nested lists for better accessibility. This refactors popover list structure to use a flattened `ul > li` structure along with aria-related additions, enabling screen reader accessibility and announcing menu length and position (`# of n`). Added ARIA roles: - `role="menu"` to the parent `<ul>` element, indicating it is a widget offering a list of choices. - `role="menuitem"`, `role="menuitemcheckbox"`, or`role="menuitemradio"` to child elements based on their function. - `role="group"` to the theme switcher, identifying it as a container for related menu items. - `role="none"` to `<li>` elements, removing the implied `listitem` role that conflicts with the parent menu structure.
2024-05-24 08:30:28 +02:00
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" tabindex="0" class="narrow-self-direct-message popover-menu-link">
<i class="popover-menu-icon zulip-icon zulip-icon-users"></i>
<span class="popover-menu-label">{{t 'View messages with yourself' }}</span>
</a>
personal_menu: Add theme switcher to personal menu popover. This commit introduces a theme switcher feature within the personal menu popover. The implementation begins with the development of a tab picker, which has the following features: * Utilization of radio buttons to emulate the tab picker. Radio input buttons provides the native way in HTML to select one value out of a set. * Support for both horizontal (default) and vertical orientations. Vertical orientation can be achieved by appending the `.tab-picker-vertical` class. * Respects the `prefers-reduced-motion` option set by the user. Disables the sliding tab animation to improve accessibility. Additionally, the theme switcher component incorporates error handling mechanisms. In the event of a server/network error, the tab slider reverts to the previous theme option after a delay of 500ms. This behavior visually communicates the occurrence of an error to the user, improving the UX. Fixes: #22803.
2024-03-08 22:54:17 +01:00
</li>
personal_menu_popover: Flatten nested lists for better accessibility. This refactors popover list structure to use a flattened `ul > li` structure along with aria-related additions, enabling screen reader accessibility and announcing menu length and position (`# of n`). Added ARIA roles: - `role="menu"` to the parent `<ul>` element, indicating it is a widget offering a list of choices. - `role="menuitem"`, `role="menuitemcheckbox"`, or`role="menuitemradio"` to child elements based on their function. - `role="group"` to the theme switcher, identifying it as a container for related menu items. - `role="none"` to `<li>` elements, removing the implied `listitem` role that conflicts with the parent menu structure.
2024-05-24 08:30:28 +02:00
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" tabindex="0" class="narrow-messages-sent popover-menu-link">
<i class="popover-menu-icon zulip-icon zulip-icon-message-square"></i>
<span class="popover-menu-label">{{t 'View messages sent' }}</span>
</a>
personal_menu: Add tippy personal_menu dropdown. Add a personal menu dropdown that opens on clicking user avatar icon in navbar added in previous commit. The args passed to render_personal_menu() in onShow() are returned by get_personal_menu_content_context() in popover_menus_data.js so that they can be unit tested. Additionally, added CSS to get a custom arrow for dropdown menu. Added a `?` hotkey in keyboard shortcuts option in personal_menu dropdown in a style similar to our tooltip's hotkey by adding ? in a span with class .tooltip-hotkey-hint and adding some CSS. Fixes part of #22802.
2023-07-17 18:01:16 +02:00
</li>
personal_menu_popover: Flatten nested lists for better accessibility. This refactors popover list structure to use a flattened `ul > li` structure along with aria-related additions, enabling screen reader accessibility and announcing menu length and position (`# of n`). Added ARIA roles: - `role="menu"` to the parent `<ul>` element, indicating it is a widget offering a list of choices. - `role="menuitem"`, `role="menuitemcheckbox"`, or`role="menuitemradio"` to child elements based on their function. - `role="group"` to the theme switcher, identifying it as a container for related menu items. - `role="none"` to `<li>` elements, removing the implied `listitem` role that conflicts with the parent menu structure.
2024-05-24 08:30:28 +02:00
{{!-- Group 4 --}}
<li role="separator" class="popover-menu-separator"></li>
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" href="#settings/profile" class="open-profile-settings popover-menu-link">
<i class="popover-menu-icon zulip-icon zulip-icon-tool"></i>
<span class="popover-menu-label">{{t 'Settings' }}</span>
</a>
personal_menu: Add tippy personal_menu dropdown. Add a personal menu dropdown that opens on clicking user avatar icon in navbar added in previous commit. The args passed to render_personal_menu() in onShow() are returned by get_personal_menu_content_context() in popover_menus_data.js so that they can be unit tested. Additionally, added CSS to get a custom arrow for dropdown menu. Added a `?` hotkey in keyboard shortcuts option in personal_menu dropdown in a style similar to our tooltip's hotkey by adding ? in a span with class .tooltip-hotkey-hint and adding some CSS. Fixes part of #22802.
2023-07-17 18:01:16 +02:00
</li>
personal_menu_popover: Flatten nested lists for better accessibility. This refactors popover list structure to use a flattened `ul > li` structure along with aria-related additions, enabling screen reader accessibility and announcing menu length and position (`# of n`). Added ARIA roles: - `role="menu"` to the parent `<ul>` element, indicating it is a widget offering a list of choices. - `role="menuitem"`, `role="menuitemcheckbox"`, or`role="menuitemradio"` to child elements based on their function. - `role="group"` to the theme switcher, identifying it as a container for related menu items. - `role="none"` to `<li>` elements, removing the implied `listitem` role that conflicts with the parent menu structure.
2024-05-24 08:30:28 +02:00
{{!-- Group 5 --}}
<li role="separator" class="popover-menu-separator"></li>
<li role="none" class="link-item popover-menu-list-item">
<a role="menuitem" class="logout_button hidden-for-spectators popover-menu-link" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-log-out" aria-hidden="true"></i>
<span class="popover-menu-label">{{t 'Log out' }}</span>
</a>
personal_menu: Add tippy personal_menu dropdown. Add a personal menu dropdown that opens on clicking user avatar icon in navbar added in previous commit. The args passed to render_personal_menu() in onShow() are returned by get_personal_menu_content_context() in popover_menus_data.js so that they can be unit tested. Additionally, added CSS to get a custom arrow for dropdown menu. Added a `?` hotkey in keyboard shortcuts option in personal_menu dropdown in a style similar to our tooltip's hotkey by adding ? in a span with class .tooltip-hotkey-hint and adding some CSS. Fixes part of #22802.
2023-07-17 18:01:16 +02:00
</li>
</ul>
</section>
</nav>
</div>