paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 13:33:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

css: Use classnames for settings page .sidebar li items.

Browse Source 
Having the `*` selector there affects the performance. See
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1845719
for more details.
We've used `sidebar` instead of `sidebar-wrapper` for the rules in
dark-theme also, since that is the rule being followed for light theme.
We've introduced a new class called `sidebar-item`.
This commit is contained in:
Shubham Padia
2024-08-30 07:12:42 +00:00
committed by Tim Abbott
parent c1755e3d94
commit 3afc34050b
3 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/styles/dark_theme.css
View File

@@ -697,8 +697,8 @@
.member-list-box,
.member-list-box .member_list_container .member-list td,
#subscription_overlay .settings-radio-input-parent,
#settings_page .sidebar-wrapper,
#settings_page .sidebar-wrapper *,
#settings_page .sidebar,
#settings_page .sidebar .sidebar-item,
#recent_view_table table td {
border-color: hsl(0deg 0% 0% / 20%);
}

2
web/styles/settings.css
View File

@@ -1425,7 +1425,7 @@ $option_title_width: 180px;
padding: 0;
}
& li {
.sidebar-item {
display: grid;
/* 3.5714em is 50px at 14px/1em -- the legacy height of these rows. */
grid-template:

46
web/templates/settings_overlay.hbs
View File

@@ -12,106 +12,106 @@
<div class="sidebar left" data-simplebar data-simplebar-tab-index="-1">
<div class="sidebar-list dark-grey small-text">
<ul class="normal-settings-list">
<li tabindex="0" data-section="profile">
<li class="sidebar-item" tabindex="0" data-section="profile">
<i class="icon fa fa-user" aria-hidden="true"></i>
<div class="text">{{t "Profile" }}</div>
</li>
<li 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>
<div class="text">{{t "Account & privacy" }}</div>
</li>
<li tabindex="0" data-section="preferences">
<li class="sidebar-item" tabindex="0" data-section="preferences">
<i class="icon fa fa-sliders" aria-hidden="true"></i>
<div class="text">{{t "Preferences" }}</div>
</li>
<li 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>
<div class="text">{{t "Notifications" }}</div>
</li>
{{#unless is_guest}}
<li 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>
<div class="text">{{t "Bots" }}</div>
</li>
{{/unless}}
<li 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>
<div class="text">{{t "Alert words" }}</div>
</li>
{{#if show_uploaded_files_section}}
<li 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>
<div class="text">{{t "Uploaded files" }}</div>
</li>
{{/if}}
<li 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>
<div class="text">{{t "Topics" }}</div>
</li>
<li 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>
<div class="text">{{t "Muted users" }}</div>
</li>
</ul>
<ul class="org-settings-list">
<li 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>
<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>
</li>
<li 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>
<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>
</li>
<li 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>
<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>
</li>
<li 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>
<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>
</li>
<li 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>
<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>
</li>
<li 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>
<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>
</li>
{{#unless is_guest}}
<li tabindex="0" data-section="users">
<li class="sidebar-item" tabindex="0" data-section="users">
<i class="icon fa fa-user" aria-hidden="true"></i>
<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>
</li>
{{/unless}}
{{#unless is_guest}}
<li 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>
<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>
</li>
{{/unless}}
{{#if is_admin}}
<li 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>
<div class="text">{{t "Custom profile fields" }}</div>
</li>
{{/if}}
<li class="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>
<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>
</li>
{{#unless is_guest}}
<li class="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>
<div class="text">{{t "Default channels" }}</div>
{{#unless is_admin}}
@@ -119,19 +119,19 @@
{{/unless}}
</li>
{{/unless}}
<li class="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>
<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>
</li>
{{#if is_admin}}
<li 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>
<div class="text">{{t "Data exports" }}</div>
</li>
{{/if}}
{{#unless is_admin}}
<div class="collapse-settings-btn">
<div class="sidebar-item collapse-settings-btn">
<i id='toggle_collapse_chevron' class='fa fa-angle-double-down'></i>
<p id='toggle_collapse'>{{t "Show more" }}</p>
</div>