settings: Convert settings_overlay.html to handlebars template.

Fixes #18796.
This commit is contained in:
sahil839
2021-06-11 15:52:04 +05:30
committed by Tim Abbott
parent 7c25bd1aa8
commit 2f44a08b37
6 changed files with 212 additions and 202 deletions

View File

@@ -3,6 +3,7 @@ import Handlebars from "handlebars/runtime";
import $ from "jquery";
import timezones from "../generated/timezones.json";
import render_settings_overlay from "../templates/settings_overlay.hbs";
import render_settings_tab from "../templates/settings_tab.hbs";
import * as admin from "./admin";
@@ -169,3 +170,15 @@ export function set_settings_header(key) {
);
}
}
export function initialize() {
const rendered_settings_overlay = render_settings_overlay({
is_owner: page_params.is_owner,
is_admin: page_params.is_admin,
is_guest: page_params.is_guest,
show_uploaded_files_section: page_params.max_file_upload_size_mib > 0,
show_emoji_settings_lock:
!page_params.is_admin && page_params.realm_add_emoji_by_admins_only,
});
$("#settings_overlay_container").append(rendered_settings_overlay);
}

View File

@@ -65,6 +65,7 @@ import * as search from "./search";
import * as search_pill_widget from "./search_pill_widget";
import * as sent_messages from "./sent_messages";
import * as server_events from "./server_events";
import * as settings from "./settings";
import * as settings_data from "./settings_data";
import * as settings_display from "./settings_display";
import * as settings_panel_menu from "./settings_panel_menu";
@@ -503,6 +504,7 @@ export function initialize_everything() {
// modules were migrated from Django templates to handlebars).
initialize_left_sidebar();
initialize_right_sidebar();
settings.initialize();
compose.initialize();
initialize_navbar();
realm_logo.rerender();

View File

@@ -0,0 +1,197 @@
<div id="settings_page" class="new-style overlay-content modal-bg">
<div class="settings-header mobile">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
<h1>{{t "Settings" }}<span class="section"></span></h1>
<div class="exit">
<span class="exit-sign">&times;</span>
</div>
<div class="clear-float"></div>
</div>
<div class="sidebar left" data-simplebar>
<div class="sidebar-list dark-grey small-text">
<div class="center tab-container"></div>
<ul class="normal-settings-list">
<li 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">
<i class="icon fa fa-user" aria-hidden="true"></i>
<div class="text">{{t "Account & privacy" }}</div>
</li>
<li tabindex="0" data-section="display-settings">
<i class="icon fa fa-clock-o" aria-hidden="true"></i>
<div class="text">{{t "Display settings" }}</div>
</li>
<li 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">
<i class="icon fa fa-github" aria-hidden="true"></i>
<div class="text">{{t "Bots" }}</div>
</li>
{{/unless}}
<li 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">
<i class="icon fa fa-paperclip" aria-hidden="true"></i>
<div class="text">{{t "Uploaded files" }}</div>
</li>
{{/if}}
<li tabindex="0" data-section="muted-topics">
<i class="icon fa fa-bell-slash" aria-hidden="true"></i>
<div class="text">{{t "Muted topics" }}</div>
</li>
<li 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">
<i class="icon fa fa-address-card" aria-hidden="true"></i>
<div class="text">{{t "Organization profile" }}</div>
{{#unless is_admin}}
<i class="locked fa fa-lock" title="{{t 'Only organization administrators can edit these settings.' }}"></i>
{{/unless}}
</li>
<li class="collapse-org-settings {{#unless is_admin}}hide-org-settings{{/unless}}" tabindex="0" data-section="organization-settings">
<i class="icon fa fa-flask" aria-hidden="true"></i>
<div class="text">{{t "Organization settings" }}</div>
{{#unless is_admin}}
<i class="locked fa fa-lock" title="{{t 'Only organization administrators can edit these settings' }}"></i>
{{/unless}}
</li>
<li 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>
{{#unless is_admin}}
<i class="locked fa fa-lock" title="{{t 'Only organization administrators can edit these settings.' }}"></i>
{{/unless}}
</li>
<li tabindex="0" data-section="emoji-settings">
<i class="icon fa fa-smile-o" aria-hidden="true"></i>
<div class="text">{{t "Custom emoji" }}</div>
{{#if is_guest}}
<i class="locked fa fa-lock" title="{{t 'Guest users cannot edit custom emoji.' }}"></i>
{{else}}
{{#if show_emoji_settings_lock}}
<i class="locked fa fa-lock" title="{{t 'Only organization administrators can edit these settings.'}}"></i>
{{/if}}
{{/if}}
</li>
{{#unless is_guest}}
<li tabindex="0" data-section="user-groups-admin">
<i class="icon fa fa-group" aria-hidden="true"></i>
<div class="text">{{t "User groups" }}</div>
</li>
{{/unless}}
<li class="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>
{{#unless is_owner}}
<i class="locked fa fa-lock" title="{{t 'Only organization owners can edit these settings.' }}"></i>
{{/unless}}
</li>
{{#unless is_guest}}
<li tabindex="0" data-section="user-list-admin">
<i class="icon fa fa-user" aria-hidden="true"></i>
<div class="text">{{t "Users" }}</div>
{{#unless is_admin}}
<i class="locked fa fa-lock" title="{{t 'Only organization administrators can edit these settings.' }}"></i>
{{/unless}}
</li>
{{/unless}}
{{#unless is_guest}}
<li tabindex="0" data-section="deactivated-users-admin">
<i class="icon fa fa-trash-o" aria-hidden="true"></i>
<div class="text">{{t "Deactivated users" }}</div>
{{#unless is_admin}}
<i class="locked fa fa-lock" title="{{t 'Only organization administrators can edit these settings.' }}"></i>
{{/unless}}
</li>
{{/unless}}
{{#unless is_guest}}
<li tabindex="0" data-section="bot-list-admin">
<i class="icon fa fa-github" aria-hidden="true"></i>
<div class="text">{{t "Bots" }}</div>
{{#unless is_admin}}
<i class="locked fa fa-lock" title="{{t 'Only organization administrators can edit these settings.' }}"></i>
{{/unless}}
</li>
{{/unless}}
{{#unless is_guest}}
<li class="collapse-org-settings {{#unless is_admin}}hide-org-settings{{/unless}}" tabindex="0" data-section="default-streams-list">
<i class="icon fa fa-exchange" aria-hidden="true"></i>
<div class="text">{{t "Default streams" }}</div>
{{#unless is_admin}}
<i class="locked fa fa-lock" title="{{t 'Only organization administrators can edit these settings.' }}"></i>
{{/unless}}
</li>
{{/unless}}
<li tabindex="0" data-section="linkifier-settings">
<i class="icon fa fa-font" aria-hidden="true"></i>
<div class="text">{{t "Linkifiers" }}</div>
{{#unless is_admin}}
<i class="locked fa fa-lock" title="{{t 'Only organization administrators can edit these settings.' }}"></i>
{{/unless}}
</li>
<li tabindex="0" data-section="playground-settings">
<i class="icon fa fa-external-link" aria-hidden="true"></i>
<div class="text">{{t "Code playgrounds" }}</div>
{{#unless is_admin}}
<i class="locked fa fa-lock" title="{{t 'Only organization administrators can edit these settings.' }}"></i>
{{/unless}}
</li>
{{#if is_admin}}
<li tabindex="0" data-section="profile-field-settings">
<i class="icon fa fa-user" aria-hidden="true"></i>
<div class="text">{{t "Custom profile fields" }}</div>
</li>
{{/if}}
{{#unless is_guest}}
<li tabindex="0" data-section="invites-list-admin">
<i class="icon fa fa-user-plus" aria-hidden="true"></i>
<div class="text">{{t "Invitations" }}</div>
</li>
{{/unless}}
{{#if is_admin}}
<li 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">
<i id='toggle_collapse_chevron' class='fa fa-angle-double-down'></i>
<p id='toggle_collapse'>{{t "Show more" }}</p>
</div>
{{/unless}}
</ul>
</div>
</div>
<div class="content-wrapper right">
<div class="settings-header">
<h1>{{t "Settings" }}<span class="section"></span></h1>
<div class="exit">
<span class="exit-sign">&times;</span>
</div>
</div>
<div id="settings_content" data-simplebar data-simplebar-auto-hide="false">
<div class="organization-box organization">
</div>
<div class="settings-box">
</div>
</div>
<div id="edit_bot_modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog"
aria-labelledby="edit_bot_modal_label" aria-hidden="true">
</div>
</div>
</div>

View File

@@ -78,7 +78,6 @@
</div>
<div id="drafts_table"></div>
<div id="settings_overlay_container" class="overlay" data-overlay="settings" aria-hidden="true">
{% include "zerver/app/settings_overlay.html" %}
</div>
<div id="navbar_alerts_wrapper"></div>

View File

@@ -1,197 +0,0 @@
<div id="settings_page" class="new-style overlay-content modal-bg">
<div class="settings-header mobile">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
<h1>{{ _('Settings') }}<span class="section"></span></h1>
<div class="exit">
<span class="exit-sign">&times;</span>
</div>
<div class="clear-float"></div>
</div>
<div class="sidebar left" data-simplebar>
<div class="sidebar-list dark-grey small-text">
<div class="center tab-container"></div>
<ul class="normal-settings-list">
<li tabindex="0" data-section="profile">
<i class="icon fa fa-user" aria-hidden="true"></i>
<div class="text">{{ _('Profile') }}</div>
</li>
<li tabindex="0" data-section="account-and-privacy">
<i class="icon fa fa-lock" aria-hidden="true"></i>
<div class="text">{{ _('Account & privacy') }}</div>
</li>
<li tabindex="0" data-section="display-settings">
<i class="icon fa fa-clock-o" aria-hidden="true"></i>
<div class="text">{{ _('Display settings') }}</div>
</li>
<li tabindex="0" data-section="notifications">
<i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i>
<div class="text">{{ _('Notifications') }}</div>
</li>
{% if not is_guest %}
<li tabindex="0" data-section="your-bots">
<i class="icon fa fa-github" aria-hidden="true"></i>
<div class="text">{{ _('Bots') }}</div>
</li>
{% endif %}
<li tabindex="0" data-section="alert-words">
<i class="icon fa fa-book" aria-hidden="true"></i>
<div class="text">{{ _('Alert words') }}</div>
</li>
{% if max_file_upload_size_mib > 0 %}
<li tabindex="0" data-section="uploaded-files">
<i class="icon fa fa-paperclip" aria-hidden="true"></i>
<div class="text">{{ _('Uploaded files') }}</div>
</li>
{% endif %}
<li tabindex="0" data-section="muted-topics">
<i class="icon fa fa-bell-slash" aria-hidden="true"></i>
<div class="text">{{ _('Muted topics') }}</div>
</li>
<li tabindex="0" data-section="muted-users">
<i class="icon fa fa-eye-slash" aria-hidden="true"></i>
<div class="text">{{ _('Muted users') }}</div>
</li>
</ul>
<ul class="org-settings-list">
<li tabindex="0" data-section="organization-profile">
<i class="icon fa fa-address-card" aria-hidden="true"></i>
<div class="text">{{ _('Organization profile') }}</div>
{% if not is_admin %}
<i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
{% endif %}
</li>
<li class="collapse-org-settings {% if not is_admin %}hide-org-settings{% endif %}" tabindex="0" data-section="organization-settings">
<i class="icon fa fa-flask" aria-hidden="true"></i>
<div class="text">{{ _('Organization settings') }}</div>
{% if not is_admin %}
<i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
{% endif %}
</li>
<li class="collapse-org-settings {% if not is_admin %}hide-org-settings{% endif %}" tabindex="0" data-section="organization-permissions">
<i class="icon fa fa-lock" aria-hidden="true"></i>
<div class="text">{{ _('Organization permissions') }}</div>
{% if not is_admin %}
<i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
{% endif %}
</li>
<li tabindex="0" data-section="emoji-settings">
<i class="icon fa fa-smile-o" aria-hidden="true"></i>
<div class="text">{{ _('Custom emoji') }}</div>
{% if is_guest %}
<i class="locked fa fa-lock" title="{{ _('Guest users cannot edit custom emoji.') }}"></i>
{% else %}
{% if not is_admin and user_profile and user_profile.realm.add_emoji_by_admins_only %}
<i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
{% endif %}
{% endif %}
</li>
{% if not is_guest %}
<li tabindex="0" data-section="user-groups-admin">
<i class="icon fa fa-group" aria-hidden="true"></i>
<div class="text">{{ _('User groups') }}</div>
</li>
{% endif %}
<li class="collapse-org-settings {% if not is_admin %}hide-org-settings{% endif %}" tabindex="0" data-section="auth-methods">
<i class="icon fa fa-key" aria-hidden="true"></i>
<div class="text">{{ _('Authentication methods') }}</div>
{% if not is_owner %}
<i class="locked fa fa-lock" title="{{ _('Only organization owners can edit these settings.') }}"></i>
{% endif %}
</li>
{% if not is_guest %}
<li tabindex="0" data-section="user-list-admin">
<i class="icon fa fa-user" aria-hidden="true"></i>
<div class="text">{{ _('Users') }}</div>
{% if not is_admin %}
<i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
{% endif %}
</li>
{% endif %}
{% if not is_guest %}
<li tabindex="0" data-section="deactivated-users-admin">
<i class="icon fa fa-trash-o" aria-hidden="true"></i>
<div class="text">{{ _('Deactivated users') }}</div>
{% if not is_admin %}
<i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
{% endif %}
</li>
{% endif %}
{% if not is_guest %}
<li tabindex="0" data-section="bot-list-admin">
<i class="icon fa fa-github" aria-hidden="true"></i>
<div class="text">{{ _('Bots') }}</div>
{% if not is_admin %}
<i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
{% endif %}
</li>
{% endif %}
{% if not is_guest %}
<li class="collapse-org-settings {% if not is_admin %}hide-org-settings{% endif %}" tabindex="0" data-section="default-streams-list">
<i class="icon fa fa-exchange" aria-hidden="true"></i>
<div class="text">{{ _('Default streams') }}</div>
{% if not is_admin %}
<i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
{% endif %}
</li>
{% endif %}
<li tabindex="0" data-section="linkifier-settings">
<i class="icon fa fa-font" aria-hidden="true"></i>
<div class="text">{{ _('Linkifiers') }}</div>
{% if not is_admin %}
<i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
{% endif %}
</li>
<li tabindex="0" data-section="playground-settings">
<i class="icon fa fa-external-link" aria-hidden="true"></i>
<div class="text">{{ _('Code playgrounds') }}</div>
{% if not is_admin %}
<i class="locked fa fa-lock" title="{{ _('Only organization administrators can edit these settings.') }}"></i>
{% endif %}
</li>
{% if is_admin %}
<li tabindex="0" data-section="profile-field-settings">
<i class="icon fa fa-user" aria-hidden="true"></i>
<div class="text">{{ _('Custom profile fields') }}</div>
</li>
{% endif %}
{% if not guest %}
<li tabindex="0" data-section="invites-list-admin">
<i class="icon fa fa-user-plus" aria-hidden="true"></i>
<div class="text">{{ _('Invitations') }}</div>
</li>
{% endif %}
{% if is_admin %}
<li tabindex="0" data-section="data-exports-admin">
<i class="icon fa fa-database" aria-hidden="true"></i>
<div class="text">{{ _('Data exports') }}</div>
</li>
{% endif %}
{% if not is_admin %}
<div class="collapse-settings-btn">
<i id='toggle_collapse_chevron' class='fa fa-angle-double-down'></i>
<p id='toggle_collapse'>{{ _('Show more') }}</p>
</div>
{% endif %}
</ul>
</div>
</div>
<div class="content-wrapper right">
<div class="settings-header">
<h1><span class="header-prefix"></span><span class="section"></span></h1>
<div class="exit">
<span class="exit-sign">&times;</span>
</div>
</div>
<div id="settings_content" data-simplebar data-simplebar-auto-hide="false">
<div class="organization-box organization">
</div>
<div class="settings-box">
</div>
</div>
<div id="edit_bot_modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog"
aria-labelledby="edit_bot_modal_label" aria-hidden="true">
</div>
</div>
</div>

View File

@@ -205,11 +205,7 @@ def home_real(request: HttpRequest) -> HttpResponse:
"user_profile": user_profile,
"page_params": page_params,
"csp_nonce": csp_nonce,
"is_owner": user_permission_info.is_realm_owner,
"is_admin": user_permission_info.is_realm_admin,
"is_guest": user_permission_info.is_guest,
"color_scheme": user_permission_info.color_scheme,
"max_file_upload_size_mib": settings.MAX_FILE_UPLOAD_SIZE,
},
)
patch_cache_control(response, no_cache=True, no_store=True, must_revalidate=True)