From a09dab5eafc273bf76dc707b501f217687c9062c Mon Sep 17 00:00:00 2001 From: evykassirer Date: Wed, 19 Mar 2025 21:40:36 -0700 Subject: [PATCH] settings: Calculate height of create modal through javascript. We need this height to be flexible based on if the subheader has overflowed into two rows or not, and our method of doing this (with existing examples in the buddy list and stream list) is to calculate what the height should be when a window is loaded or resized. --- web/src/resize.ts | 15 +++++++++++++++ web/src/stream_create.ts | 2 ++ web/src/stream_settings_ui.ts | 1 + web/src/user_group_create.ts | 2 ++ web/src/user_group_edit.ts | 2 ++ web/styles/app_variables.css | 2 -- web/styles/subscriptions.css | 16 ---------------- .../stream_settings/stream_creation_form.hbs | 2 +- .../user_group_creation_form.hbs | 2 +- 9 files changed, 24 insertions(+), 20 deletions(-) diff --git a/web/src/resize.ts b/web/src/resize.ts index acafe31809..02145c804d 100644 --- a/web/src/resize.ts +++ b/web/src/resize.ts @@ -218,9 +218,24 @@ function resize_navbar_alerts(): void { } } +export function resize_settings_creation_overlay(): void { + if ($(".two-pane-settings-creation-simplebar-container").length === 0) { + return; + } + + $(".two-pane-settings-creation-simplebar-container").css( + "height", + height_of($(".two-pane-settings-container")) - + height_of($(".two-pane-settings-header")) - + height_of($(".two-pane-settings-overlay .display-type")) - + height_of($(".settings-sticky-footer")), + ); +} + export function resize_page_components(): void { resize_navbar_alerts(); resize_sidebars(); resize_bottom_whitespace(); resize_stream_subscribers_list(); + resize_settings_creation_overlay(); } diff --git a/web/src/stream_create.ts b/web/src/stream_create.ts index 0f85266d69..73381630a0 100644 --- a/web/src/stream_create.ts +++ b/web/src/stream_create.ts @@ -12,6 +12,7 @@ import {$t, $t_html} from "./i18n.ts"; import * as keydown_util from "./keydown_util.ts"; import * as loading from "./loading.ts"; import * as onboarding_steps from "./onboarding_steps.ts"; +import * as resize from "./resize.ts"; import * as settings_components from "./settings_components.ts"; import * as settings_data from "./settings_data.ts"; import {current_user, realm} from "./state_data.ts"; @@ -458,6 +459,7 @@ export function show_new_stream_modal(): void { $("#stream-creation").removeClass("hide"); $(".right .settings").hide(); stream_ui_updates.hide_or_disable_stream_privacy_options_if_required($("#stream-creation")); + resize.resize_settings_creation_overlay(); stream_create_subscribers.build_widgets(); diff --git a/web/src/stream_settings_ui.ts b/web/src/stream_settings_ui.ts index 4108d7242b..14af7e3707 100644 --- a/web/src/stream_settings_ui.ts +++ b/web/src/stream_settings_ui.ts @@ -953,6 +953,7 @@ export function change_state( if (section === "new") { do_open_create_stream(); show_right_section(); + resize.resize_settings_creation_overlay(); return; } diff --git a/web/src/user_group_create.ts b/web/src/user_group_create.ts index cad035f6c8..e5c2cd3dc5 100644 --- a/web/src/user_group_create.ts +++ b/web/src/user_group_create.ts @@ -9,6 +9,7 @@ import * as group_permission_settings from "./group_permission_settings.ts"; import {$t, $t_html} from "./i18n.ts"; import * as keydown_util from "./keydown_util.ts"; import * as loading from "./loading.ts"; +import * as resize from "./resize.ts"; import * as settings_components from "./settings_components.ts"; import * as settings_data from "./settings_data.ts"; import {realm} from "./state_data.ts"; @@ -183,6 +184,7 @@ function clear_error_display(): void { export function show_new_user_group_modal(): void { $("#user-group-creation").removeClass("hide"); $(".right .settings").hide(); + resize.resize_settings_creation_overlay(); user_group_create_members.build_widgets(); diff --git a/web/src/user_group_edit.ts b/web/src/user_group_edit.ts index 6cbd48c9ce..94f51e6b18 100644 --- a/web/src/user_group_edit.ts +++ b/web/src/user_group_edit.ts @@ -40,6 +40,7 @@ import * as ListWidget from "./list_widget.ts"; import * as loading from "./loading.ts"; import * as overlays from "./overlays.ts"; import * as people from "./people.ts"; +import * as resize from "./resize.ts"; import * as scroll_util from "./scroll_util.ts"; import type {UserGroupUpdateEvent} from "./server_event_types.ts"; import * as settings_components from "./settings_components.ts"; @@ -1465,6 +1466,7 @@ export function change_state( if (section === "new") { do_open_create_user_group(); redraw_user_group_list(); + resize.resize_settings_creation_overlay(); return; } diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css index b6a7271e74..ba4c9a4bf8 100644 --- a/web/styles/app_variables.css +++ b/web/styles/app_variables.css @@ -582,8 +582,6 @@ in subscriptions and user group settings overlays */ --settings-overlay-subheader-height: 3.1429em; /* 44px at 14px/em */ --settings-overlay-header-button-height: 2em; - /* .settings-sticky-footer */ - --subscriptions-overlay-sticky-footer-height: 60px; /* Informational overlay */ --informational-overlay-max-width: 43.75em; --modal-input-width: 23.2142em; diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css index 7819418df7..0fc80f5e08 100644 --- a/web/styles/subscriptions.css +++ b/web/styles/subscriptions.css @@ -924,22 +924,6 @@ h4.user_group_setting_subsection_title { outline: none; -webkit-overflow-scrolling: touch; - .stream-creation-simplebar-container, - .user-group-creation-simplebar-container { - height: calc( - var(--overlay-container-height) - - var(--settings-overlay-header-height) - - var(--settings-overlay-subheader-height) - - var(--subscriptions-overlay-sticky-footer-height) - ); - max-height: calc( - var(--overlay-container-max-height) - - var(--settings-overlay-header-height) - - var(--settings-overlay-subheader-height) - - var(--subscriptions-overlay-sticky-footer-height) - ); - } - .user-group-creation-body, .stream-creation-body { padding: 15px 15px 0; diff --git a/web/templates/stream_settings/stream_creation_form.hbs b/web/templates/stream_settings/stream_creation_form.hbs index d934570dc0..9b52b4df03 100644 --- a/web/templates/stream_settings/stream_creation_form.hbs +++ b/web/templates/stream_settings/stream_creation_form.hbs @@ -1,7 +1,7 @@