From a046f0306a43751d9793196cf6ee504ae38be1a7 Mon Sep 17 00:00:00 2001 From: Keegan George Date: Mon, 29 Aug 2022 12:59:35 -0700 Subject: [PATCH] UX: Improve `max-height` value on toolbar popup menu (#18030) * UX: Improve `max-height` value on toolbar popup menu * UX: Popup menu based on new editor height property * DEV: Update heights on resize * DEV: Remove `--d-editor-height` property * UX: Calculate max height based on composer type * DEV: Remove event listener `willDestroyElement()` hook * FIX: Remove unnecessary check and calculation * DEV: Remove explicitly calling `updateHeightOnViewportResize()` * UX: Update max-height * UX: Different max-height values for reply/create * DEV: Add comments for clarity * DEV: Remove `updateHeightOnViewportResize()` event listener --- .../select-kit/toolbar-popup-menu-options.scss | 2 +- .../stylesheets/mobile/select-kit/_index.scss | 1 + .../select-kit/toolbar-popup-menu-options.scss | 16 ++++++++++++++++ 3 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 app/assets/stylesheets/mobile/select-kit/toolbar-popup-menu-options.scss diff --git a/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss b/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss index 387f45e8ada..dda8903999c 100644 --- a/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss +++ b/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss @@ -2,7 +2,7 @@ &.dropdown-select-box { &.toolbar-popup-menu-options { .select-kit-collection { - max-height: 50vh; + max-height: 35vh; } .select-kit-body { diff --git a/app/assets/stylesheets/mobile/select-kit/_index.scss b/app/assets/stylesheets/mobile/select-kit/_index.scss index 2327d21b0fc..6c9ea8193c3 100644 --- a/app/assets/stylesheets/mobile/select-kit/_index.scss +++ b/app/assets/stylesheets/mobile/select-kit/_index.scss @@ -2,3 +2,4 @@ @import "dropdown-select-box"; @import "select-kit"; @import "tag-drop"; +@import "toolbar-popup-menu-options"; diff --git a/app/assets/stylesheets/mobile/select-kit/toolbar-popup-menu-options.scss b/app/assets/stylesheets/mobile/select-kit/toolbar-popup-menu-options.scss new file mode 100644 index 00000000000..abdc66b85bc --- /dev/null +++ b/app/assets/stylesheets/mobile/select-kit/toolbar-popup-menu-options.scss @@ -0,0 +1,16 @@ +// ensure popupmenu options has scroll behavior on limited screen space +#reply-control { + &.composer-action-createTopic { + .toolbar-popup-menu-options .select-kit-collection { + // fits popup menu inside textarea in create topic composer + max-height: 155px; + } + } + + &.composer-action-reply { + .toolbar-popup-menu-options .select-kit-collection { + // fits popup menu to textarea in reply composer + max-height: 230px; + } + } +}