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

css: Rename .icon to .sidebar-item-icon for the name to be unique. 

See
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1901490
for more details.
This commit is contained in:
Shubham Padia 2024-09-03 17:47:47 +00:00 committed by Tim Abbott
parent 2f120d2572
commit 1ec4539550
2 changed files with 24 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/styles/settings.css
View File

@ -1368,7 +1368,7 @@ $option_title_width: 180px;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
} }
.icon { .sidebar-item-icon {
font-size: 1.4em; font-size: 1.4em;
text-align: center; text-align: center;
color: hsl(0deg 0% 53%); color: hsl(0deg 0% 53%);

46
web/templates/settings_overlay.hbs
View File

@ -13,106 +13,106 @@
<div class="sidebar-list dark-grey small-text"> <div class="sidebar-list dark-grey small-text">
<ul class="normal-settings-list"> <ul class="normal-settings-list">
<li class="sidebar-item" tabindex="0" data-section="profile"> <li class="sidebar-item" tabindex="0" data-section="profile">
<i class="icon fa fa-user" aria-hidden="true"></i> <i class="sidebar-item-icon fa fa-user" aria-hidden="true"></i>
<div class="text">{{t "Profile" }}</div> <div class="text">{{t "Profile" }}</div>
</li> </li>
<li class="sidebar-item" tabindex="0" data-section="account-and-privacy"> <li class="sidebar-item" tabindex="0" data-section="account-and-privacy">
<i class="icon fa fa-lock" aria-hidden="true"></i> <i class="sidebar-item-icon fa fa-lock" aria-hidden="true"></i>
<div class="text">{{t "Account & privacy" }}</div> <div class="text">{{t "Account & privacy" }}</div>
</li> </li>
<li class="sidebar-item" tabindex="0" data-section="preferences"> <li class="sidebar-item" tabindex="0" data-section="preferences">
<i class="icon fa fa-sliders" aria-hidden="true"></i> <i class="sidebar-item-icon fa fa-sliders" aria-hidden="true"></i>
<div class="text">{{t "Preferences" }}</div> <div class="text">{{t "Preferences" }}</div>
</li> </li>
<li class="sidebar-item" tabindex="0" data-section="notifications"> <li class="sidebar-item" tabindex="0" data-section="notifications">
<i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i> <i class="sidebar-item-icon fa fa-exclamation-triangle" aria-hidden="true"></i>
<div class="text">{{t "Notifications" }}</div> <div class="text">{{t "Notifications" }}</div>
</li> </li>
{{#unless is_guest}} {{#unless is_guest}}
<li class="sidebar-item" tabindex="0" data-section="your-bots"> <li class="sidebar-item" tabindex="0" data-section="your-bots">
<i class="icon zulip-icon zulip-icon-smart-toy" aria-hidden="true"></i> <i class="sidebar-item-icon zulip-icon zulip-icon-smart-toy" aria-hidden="true"></i>
<div class="text">{{t "Bots" }}</div> <div class="text">{{t "Bots" }}</div>
</li> </li>
{{/unless}} {{/unless}}
<li class="sidebar-item" tabindex="0" data-section="alert-words"> <li class="sidebar-item" tabindex="0" data-section="alert-words">
<i class="icon fa fa-book" aria-hidden="true"></i> <i class="sidebar-item-icon fa fa-book" aria-hidden="true"></i>
<div class="text">{{t "Alert words" }}</div> <div class="text">{{t "Alert words" }}</div>
</li> </li>
{{#if show_uploaded_files_section}} {{#if show_uploaded_files_section}}
<li class="sidebar-item" tabindex="0" data-section="uploaded-files"> <li class="sidebar-item" tabindex="0" data-section="uploaded-files">
<i class="icon fa fa-paperclip" aria-hidden="true"></i> <i class="sidebar-item-icon fa fa-paperclip" aria-hidden="true"></i>
<div class="text">{{t "Uploaded files" }}</div> <div class="text">{{t "Uploaded files" }}</div>
</li> </li>
{{/if}} {{/if}}
<li class="sidebar-item" tabindex="0" data-section="topics"> <li class="sidebar-item" tabindex="0" data-section="topics">
<i class="icon zulip-icon zulip-icon-topic" aria-hidden="true"></i> <i class="sidebar-item-icon zulip-icon zulip-icon-topic" aria-hidden="true"></i>
<div class="text">{{t "Topics" }}</div> <div class="text">{{t "Topics" }}</div>
</li> </li>
<li class="sidebar-item" tabindex="0" data-section="muted-users"> <li class="sidebar-item" tabindex="0" data-section="muted-users">
<i class="icon fa fa-eye-slash" aria-hidden="true"></i> <i class="sidebar-item-icon fa fa-eye-slash" aria-hidden="true"></i>
<div class="text">{{t "Muted users" }}</div> <div class="text">{{t "Muted users" }}</div>
</li> </li>
</ul> </ul>
<ul class="org-settings-list"> <ul class="org-settings-list">
<li class="sidebar-item" tabindex="0" data-section="organization-profile"> <li class="sidebar-item" tabindex="0" data-section="organization-profile">
<i class="icon fa fa-id-card" aria-hidden="true"></i> <i class="sidebar-item-icon fa fa-id-card" aria-hidden="true"></i>
<div class="text">{{t "Organization profile" }}</div> <div class="text">{{t "Organization profile" }}</div>
<i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i> <i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
</li> </li>
<li class="sidebar-item" class="collapse-org-settings {{#unless is_admin}}hide-org-settings{{/unless}}" tabindex="0" data-section="organization-settings"> <li class="sidebar-item" class="collapse-org-settings {{#unless is_admin}}hide-org-settings{{/unless}}" tabindex="0" data-section="organization-settings">
<i class="icon fa fa-sliders" aria-hidden="true"></i> <i class="sidebar-item-icon fa fa-sliders" aria-hidden="true"></i>
<div class="text">{{t "Organization settings" }}</div> <div class="text">{{t "Organization settings" }}</div>
<i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings' }}"></i> <i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings' }}"></i>
</li> </li>
<li class="sidebar-item" class="collapse-org-settings {{#unless is_admin}}hide-org-settings{{/unless}}" tabindex="0" data-section="organization-permissions"> <li class="sidebar-item" class="collapse-org-settings {{#unless is_admin}}hide-org-settings{{/unless}}" tabindex="0" data-section="organization-permissions">
<i class="icon fa fa-lock" aria-hidden="true"></i> <i class="sidebar-item-icon fa fa-lock" aria-hidden="true"></i>
<div class="text">{{t "Organization permissions" }}</div> <div class="text">{{t "Organization permissions" }}</div>
<i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i> <i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
</li> </li>
<li class="sidebar-item" tabindex="0" data-section="emoji-settings"> <li class="sidebar-item" tabindex="0" data-section="emoji-settings">
<i class="icon fa fa-smile-o" aria-hidden="true"></i> <i class="sidebar-item-icon fa fa-smile-o" aria-hidden="true"></i>
<div class="text">{{t "Custom emoji" }}</div> <div class="text">{{t "Custom emoji" }}</div>
<i class="locked fa fa-lock tippy-zulip-tooltip" {{#unless show_emoji_settings_lock}}style="display: none;"{{/unless}} data-tippy-content="{{t 'You do not have permission to add custom emoji.'}}"></i> <i class="locked fa fa-lock tippy-zulip-tooltip" {{#unless show_emoji_settings_lock}}style="display: none;"{{/unless}} data-tippy-content="{{t 'You do not have permission to add custom emoji.'}}"></i>
</li> </li>
<li class="sidebar-item" tabindex="0" data-section="linkifier-settings"> <li class="sidebar-item" tabindex="0" data-section="linkifier-settings">
<i class="icon fa fa-font" aria-hidden="true"></i> <i class="sidebar-item-icon fa fa-font" aria-hidden="true"></i>
<div class="text">{{t "Linkifiers" }}</div> <div class="text">{{t "Linkifiers" }}</div>
<i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i> <i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
</li> </li>
<li class="sidebar-item" tabindex="0" data-section="playground-settings"> <li class="sidebar-item" tabindex="0" data-section="playground-settings">
<i class="icon fa fa-external-link" aria-hidden="true"></i> <i class="sidebar-item-icon fa fa-external-link" aria-hidden="true"></i>
<div class="text">{{t "Code playgrounds" }}</div> <div class="text">{{t "Code playgrounds" }}</div>
<i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i> <i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
</li> </li>
{{#unless is_guest}} {{#unless is_guest}}
<li class="sidebar-item" tabindex="0" data-section="users"> <li class="sidebar-item" tabindex="0" data-section="users">
<i class="icon fa fa-user" aria-hidden="true"></i> <i class="sidebar-item-icon fa fa-user" aria-hidden="true"></i>
<div class="text">{{t "Users" }}</div> <div class="text">{{t "Users" }}</div>
<i class="locked fa fa-lock tippy-zulip-tooltip" {{#if can_edit_user_panel }}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i> <i class="locked fa fa-lock tippy-zulip-tooltip" {{#if can_edit_user_panel }}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
</li> </li>
{{/unless}} {{/unless}}
{{#unless is_guest}} {{#unless is_guest}}
<li class="sidebar-item" tabindex="0" data-section="bot-list-admin"> <li class="sidebar-item" tabindex="0" data-section="bot-list-admin">
<i class="icon zulip-icon zulip-icon-smart-toy" aria-hidden="true"></i> <i class="sidebar-item-icon zulip-icon zulip-icon-smart-toy" aria-hidden="true"></i>
<div class="text">{{t "Bots" }}</div> <div class="text">{{t "Bots" }}</div>
<i class="locked fa fa-lock tippy-zulip-tooltip" {{#if can_create_new_bots}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i> <i class="locked fa fa-lock tippy-zulip-tooltip" {{#if can_create_new_bots}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
</li> </li>
{{/unless}} {{/unless}}
{{#if is_admin}} {{#if is_admin}}
<li class="sidebar-item" tabindex="0" data-section="profile-field-settings"> <li class="sidebar-item" tabindex="0" data-section="profile-field-settings">
<i class="icon fa fa-id-card" aria-hidden="true"></i> <i class="sidebar-item-icon fa fa-id-card" aria-hidden="true"></i>
<div class="text">{{t "Custom profile fields" }}</div> <div class="text">{{t "Custom profile fields" }}</div>
</li> </li>
{{/if}} {{/if}}
<li class="sidebar-item collapse-org-settings {{#unless is_admin}}hide-org-settings{{/unless}}" tabindex="0" data-section="organization-level-user-defaults"> <li class="sidebar-item collapse-org-settings {{#unless is_admin}}hide-org-settings{{/unless}}" tabindex="0" data-section="organization-level-user-defaults">
<i class="icon fa fa-cog" aria-hidden="true"></i> <i class="sidebar-item-icon fa fa-cog" aria-hidden="true"></i>
<div class="text">{{t "Default user settings" }}</div> <div class="text">{{t "Default user settings" }}</div>
<i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i> <i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_admin}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
</li> </li>
{{#unless is_guest}} {{#unless is_guest}}
<li class="sidebar-item collapse-org-settings {{#unless is_admin}}hide-org-settings{{/unless}}" tabindex="0" data-section="default-channels-list"> <li class="sidebar-item collapse-org-settings {{#unless is_admin}}hide-org-settings{{/unless}}" tabindex="0" data-section="default-channels-list">
<i class="icon fa fa-exchange" aria-hidden="true"></i> <i class="sidebar-item-icon fa fa-exchange" aria-hidden="true"></i>
<div class="text">{{t "Default channels" }}</div> <div class="text">{{t "Default channels" }}</div>
{{#unless is_admin}} {{#unless is_admin}}
<i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i> <i class="locked fa fa-lock tippy-zulip-tooltip" data-tippy-content="{{t 'Only organization administrators can edit these settings.' }}"></i>
@ -120,19 +120,19 @@
</li> </li>
{{/unless}} {{/unless}}
<li class="sidebar-item collapse-org-settings {{#unless is_admin}}hide-org-settings{{/unless}}" tabindex="0" data-section="auth-methods"> <li class="sidebar-item collapse-org-settings {{#unless is_admin}}hide-org-settings{{/unless}}" tabindex="0" data-section="auth-methods">
<i class="icon fa fa-key" aria-hidden="true"></i> <i class="sidebar-item-icon fa fa-key" aria-hidden="true"></i>
<div class="text">{{t "Authentication methods" }}</div> <div class="text">{{t "Authentication methods" }}</div>
<i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_owner}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization owners can edit these settings.' }}"></i> <i class="locked fa fa-lock tippy-zulip-tooltip" {{#if is_owner}}style="display: none;"{{/if}} data-tippy-content="{{t 'Only organization owners can edit these settings.' }}"></i>
</li> </li>
{{#if is_admin}} {{#if is_admin}}
<li class="sidebar-item" tabindex="0" data-section="data-exports-admin"> <li class="sidebar-item" tabindex="0" data-section="data-exports-admin">
<i class="icon fa fa-database" aria-hidden="true"></i> <i class="sidebar-item-icon fa fa-database" aria-hidden="true"></i>
<div class="text">{{t "Data exports" }}</div> <div class="text">{{t "Data exports" }}</div>
</li> </li>
{{/if}} {{/if}}
{{#unless is_admin}} {{#unless is_admin}}
<li class="sidebar-item collapse-settings-button"> <li class="sidebar-item collapse-settings-button">
<i id='toggle_collapse_chevron' class='icon fa fa-angle-double-down'></i> <i id='toggle_collapse_chevron' class='sidebar-item-icon fa fa-angle-double-down'></i>
<div class="text" id='toggle_collapse'>{{t "Show more" }}</div> <div class="text" id='toggle_collapse'>{{t "Show more" }}</div>
</li> </li>
{{/unless}} {{/unless}}