paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-22 15:31:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

settings: Use checkbox setting to toggle between 14/122 and 16/140.

Browse Source 
The "Dense mode" checkbox is renamed to "Compact mode" and is used
to toggle between changing the font-size and line-height settings
between 14/122 and 16/140 configurations.
This commit is contained in:
Sahil Batra
2024-07-03 08:24:04 +05:30
committed by Tim Abbott
parent ad9837911e
commit b6905777d0
5 changed files with 40 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/information_density.ts
View File

@@ -41,8 +41,12 @@ const MAXIMUM_BLOCK_HEIGHT_IN_EMS = BODY_FONT_CONTENT_BOX / BODY_FONT_EM_SIZE;
// but in the awkward stage where legacy values are in play for
// certain things (e.g., calculating line-height-based offsets for
// emoji alignment), it's necessary to have access to these values.
const LEGACY_LINE_HEIGHT_UNITLESS = 1.214;
const LEGACY_FONT_SIZE_PX = 14;
export const LEGACY_LINE_HEIGHT_UNITLESS = 1.214;
export const LEGACY_FONT_SIZE_PX = 14;
export const LEGACY_LINE_HEIGHT_PERCENT = 122;
export const NON_COMPACT_MODE_FONT_SIZE_PX = 16;
export const NON_COMPACT_MODE_LINE_HEIGHT_PERCENT = 140;
function set_vertical_alignment_values(line_height_unitless: number): void {
// We work in ems to keep this agnostic to the font size.

15
web/src/settings_components.ts
View File

@@ -9,6 +9,12 @@ import * as blueslip from "./blueslip";
import * as compose_banner from "./compose_banner";
import type {DropdownWidget} from "./dropdown_widget";
import {$t} from "./i18n";
import {
LEGACY_FONT_SIZE_PX,
LEGACY_LINE_HEIGHT_PERCENT,
NON_COMPACT_MODE_FONT_SIZE_PX,
NON_COMPACT_MODE_LINE_HEIGHT_PERCENT,
} from "./information_density";
import {realm_user_settings_defaults} from "./realm_user_settings_defaults";
import * as scroll_util from "./scroll_util";
import * as settings_config from "./settings_config";
@@ -1080,6 +1086,15 @@ export function populate_data_for_default_realm_settings_request(
if (input_value !== undefined && input_value !== null) {
const property_name: string = extract_property_name($input_elem, true);
data[property_name] = input_value;
if (property_name === "dense_mode") {
data.web_font_size_px = input_value
? LEGACY_FONT_SIZE_PX
: NON_COMPACT_MODE_FONT_SIZE_PX;
data.web_line_height_percent = input_value
? LEGACY_LINE_HEIGHT_PERCENT
: NON_COMPACT_MODE_LINE_HEIGHT_PERCENT;
}
}
}
}

2
web/src/settings_config.ts
View File

@@ -552,7 +552,7 @@ export const user_role_map = new Map(user_role_array.map((role) => [role.code, r
export const preferences_settings_labels = {
default_language_settings_label: $t({defaultMessage: "Language"}),
dense_mode: $t({defaultMessage: "Dense mode"}),
dense_mode: $t({defaultMessage: "Compact mode"}),
display_emoji_reaction_users: new Handlebars.SafeString(
$t_html({
defaultMessage:

19
web/src/settings_preferences.ts
View File

@@ -9,6 +9,12 @@ import * as dialog_widget from "./dialog_widget";
import * as emojisets from "./emojisets";
import * as hash_parser from "./hash_parser";
import {$t_html, get_language_list_columns, get_language_name} from "./i18n";
import {
LEGACY_FONT_SIZE_PX,
LEGACY_LINE_HEIGHT_PERCENT,
NON_COMPACT_MODE_FONT_SIZE_PX,
NON_COMPACT_MODE_LINE_HEIGHT_PERCENT,
} from "./information_density";
import * as loading from "./loading";
import * as overlays from "./overlays";
import {page_params} from "./page_params";
@@ -236,7 +242,18 @@ export function set_up(settings_panel: SettingsPanel): void {
const setting = $input_elem.attr("name");
assert(setting !== undefined);
const data: Record<string, string | boolean | number> = {};
data[setting] = settings_components.get_input_element_value(this)!;
const setting_value = settings_components.get_input_element_value(this)!;
data[setting] = setting_value;
if (setting === "dense_mode") {
data.web_font_size_px = setting_value
? LEGACY_FONT_SIZE_PX
: NON_COMPACT_MODE_FONT_SIZE_PX;
data.web_line_height_percent = setting_value
? LEGACY_LINE_HEIGHT_PERCENT
: NON_COMPACT_MODE_LINE_HEIGHT_PERCENT;
}
const $status_element = $input_elem
.closest(".subsection-parent")
.find(".alert-notification");

1
web/templates/settings/display_settings_general.hbs
View File

@@ -32,7 +32,6 @@
setting_name="dense_mode"
is_checked=settings_object.dense_mode
label=settings_label.dense_mode
render_only=settings_render_only.dense_mode
prefix=prefix}}
{{#if information_density_settings.render_group}}