fix(lv_msgbox): Automatically adjust msgbox's content height. (#6176)

Co-authored-by: Gabor Kiss-Vamosi <kisvegabor@gmail.com>

examples/widgets/lv_example_widgets.h

@@ -104,6 +104,7 @@ void lv_example_menu_4(void);
 void lv_example_menu_5(void);
 
 void lv_example_msgbox_1(void);
+void lv_example_msgbox_2(void);
 
 void lv_example_obj_1(void);
 void lv_example_obj_2(void);

examples/widgets/msgbox/lv_example_msgbox_2.c

@@ -0,0 +1,63 @@
+#include "../../lv_examples.h"
+#if LV_USE_MSGBOX && LV_BUILD_EXAMPLES
+
+static void minimize_button_event_cb(lv_event_t * e)
+{
+    lv_obj_t * mbox = (lv_obj_t *) lv_event_get_user_data(e);
+    lv_obj_add_flag(mbox, LV_OBJ_FLAG_HIDDEN);
+}
+
+void lv_example_msgbox_2(void)
+{
+    lv_obj_t * setting = lv_msgbox_create(lv_screen_active());
+    lv_obj_set_style_clip_corner(setting, true, 0);
+
+    /* setting fixed size */
+    lv_obj_set_size(setting, 300, 200);
+
+    /* setting's titlebar/header */
+    lv_msgbox_add_title(setting, "Setting");
+    lv_obj_t * minimize_button = lv_msgbox_add_header_button(setting, LV_SYMBOL_MINUS);
+    lv_obj_add_event_cb(minimize_button, minimize_button_event_cb, LV_EVENT_CLICKED, setting);
+    lv_msgbox_add_close_button(setting);
+
+    /* setting's content*/
+    lv_obj_t * content = lv_msgbox_get_content(setting);
+    lv_obj_set_flex_flow(content, LV_FLEX_FLOW_COLUMN);
+    lv_obj_set_flex_align(content, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
+    lv_obj_set_style_pad_right(content, -1, LV_PART_SCROLLBAR);
+
+    lv_obj_t * cont_brightness = lv_obj_create(content);
+    lv_obj_set_size(cont_brightness, lv_pct(100), LV_SIZE_CONTENT);
+    lv_obj_set_flex_flow(cont_brightness, LV_FLEX_FLOW_COLUMN);
+    lv_obj_set_flex_align(cont_brightness, LV_FLEX_ALIGN_CENTER,  LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER);
+
+    lv_obj_t * lb_brightness = lv_label_create(cont_brightness);
+    lv_label_set_text(lb_brightness, "Brightness : ");
+    lv_obj_t * slider_brightness = lv_slider_create(cont_brightness);
+    lv_obj_set_width(slider_brightness, lv_pct(100));
+    lv_slider_set_value(slider_brightness, 50, LV_ANIM_OFF);
+
+    lv_obj_t * cont_speed = lv_obj_create(content);
+    lv_obj_set_size(cont_speed, lv_pct(100), LV_SIZE_CONTENT);
+    lv_obj_set_flex_flow(cont_speed, LV_FLEX_FLOW_COLUMN);
+    lv_obj_set_flex_align(cont_speed, LV_FLEX_ALIGN_CENTER,  LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER);
+
+    lv_obj_t * lb_speed = lv_label_create(cont_speed);
+    lv_label_set_text(lb_speed, "Speed : ");
+    lv_obj_t * slider_speed = lv_slider_create(cont_speed);
+    lv_obj_set_width(slider_speed, lv_pct(100));
+    lv_slider_set_value(slider_speed, 80, LV_ANIM_OFF);
+
+    /* footer */
+    lv_obj_t * apply_button = lv_msgbox_add_footer_button(setting, "Apply");
+    lv_obj_set_flex_grow(apply_button, 1);
+
+    lv_obj_t * cancel_button = lv_msgbox_add_footer_button(setting, "Cancel");
+    lv_obj_set_flex_grow(cancel_button, 1);
+
+    lv_obj_t * footer = lv_msgbox_get_footer(setting);
+    lv_obj_set_style_bg_color(footer, lv_palette_main(LV_PALETTE_INDIGO), 0);
+    lv_obj_set_style_bg_opa(footer, LV_OPA_100, 0);
+}
+#endif

src/themes/default/lv_theme_default.c

@@ -1124,6 +1124,7 @@ static void theme_apply(lv_theme_t * th, lv_obj_t * obj)
     else if(lv_obj_check_type(obj, &lv_msgbox_class)) {
         lv_obj_add_style(obj, &theme->styles.card, 0);
         lv_obj_add_style(obj, &theme->styles.pad_zero, 0);
+        lv_obj_add_style(obj, &theme->styles.clip_corner, 0);
         return;
     }
     else if(lv_obj_check_type(obj, &lv_msgbox_backdrop_class)) {
@@ -1139,6 +1140,12 @@ static void theme_apply(lv_theme_t * th, lv_obj_t * obj)
         lv_obj_add_style(obj, &theme->styles.pad_tiny, 0);
         return;
     }
+    else if(lv_obj_check_type(obj, &lv_msgbox_content_class)) {
+        lv_obj_add_style(obj, &theme->styles.scrollbar, LV_PART_SCROLLBAR);
+        lv_obj_add_style(obj, &theme->styles.scrollbar_scrolled, LV_PART_SCROLLBAR | LV_STATE_SCROLLED);
+        lv_obj_add_style(obj, &theme->styles.pad_tiny, 0);
+        return;
+    }
     else if(lv_obj_check_type(obj, &lv_msgbox_header_button_class) ||
             lv_obj_check_type(obj, &lv_msgbox_footer_button_class)) {
         lv_obj_add_style(obj, &theme->styles.btn, 0);
@@ -1152,11 +1159,6 @@ static void theme_apply(lv_theme_t * th, lv_obj_t * obj)
         return;
     }
 
-    if(lv_obj_check_type(parent, &lv_msgbox_class)) {
-        lv_obj_add_style(obj, &theme->styles.pad_tiny, 0);
-        return;
-    }
-
 #endif
 
 #if LV_USE_SPINBOX

src/widgets/msgbox/lv_msgbox.c

@@ -31,6 +31,7 @@
  *  STATIC PROTOTYPES
  **********************/
 static void msgbox_close_click_event_cb(lv_event_t * e);
+static void msgbox_size_changed_event_cb(lv_event_t * e);
 
 /**********************
  *  STATIC VARIABLES
@@ -128,6 +129,7 @@ lv_obj_t * lv_msgbox_create(lv_obj_t * parent)
     if(mbox->content == NULL) return NULL;
     lv_obj_class_init_obj(mbox->content);
     lv_obj_set_flex_flow(mbox->content, LV_FLEX_FLOW_COLUMN);
+    lv_obj_add_event_cb(obj, msgbox_size_changed_event_cb, LV_EVENT_SIZE_CHANGED, 0);
 
     lv_obj_center(obj);
     return obj;
@@ -145,6 +147,7 @@ lv_obj_t * lv_msgbox_add_title(lv_obj_t * obj, const char * title)
         lv_obj_set_size(mbox->header, lv_pct(100), lv_display_get_dpi(lv_obj_get_display(obj)) / 3);
         lv_obj_set_flex_flow(mbox->header, LV_FLEX_FLOW_ROW);
         lv_obj_set_flex_align(mbox->header, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
+        lv_obj_remove_flag(mbox->header, LV_OBJ_FLAG_SCROLLABLE);
         lv_obj_move_to_index(mbox->header, 0);
     }
 
@@ -169,6 +172,7 @@ lv_obj_t * lv_msgbox_add_header_button(lv_obj_t * obj, const void * icon)
     LV_ASSERT_MALLOC(obj);
     if(btn == NULL) return NULL;
     lv_obj_class_init_obj(btn);
+    lv_obj_remove_flag(btn, LV_OBJ_FLAG_SCROLLABLE);
 
     if(icon) {
         lv_obj_t * img = lv_image_create(btn);
@@ -201,12 +205,14 @@ lv_obj_t * lv_msgbox_add_footer_button(lv_obj_t * obj, const char * text)
 
         lv_obj_set_flex_flow(mbox->footer, LV_FLEX_FLOW_ROW);
         lv_obj_set_flex_align(mbox->footer, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
+        lv_obj_remove_flag(mbox->footer, LV_OBJ_FLAG_SCROLLABLE);
     }
 
     lv_obj_t * btn = lv_obj_class_create_obj(&lv_msgbox_footer_button_class, mbox->footer);
     LV_ASSERT_MALLOC(obj);
     if(btn == NULL) return NULL;
     lv_obj_class_init_obj(btn);
+    lv_obj_remove_flag(btn, LV_OBJ_FLAG_SCROLLABLE);
 
     if(text) {
         lv_obj_t * label = lv_label_create(btn);
@@ -275,4 +281,12 @@ static void msgbox_close_click_event_cb(lv_event_t * e)
     lv_msgbox_close(mbox);
 }
 
+static void msgbox_size_changed_event_cb(lv_event_t * e)
+{
+    lv_obj_t * mbox = lv_event_get_target(e);
+    lv_obj_t * content = lv_msgbox_get_content(mbox);
+    bool is_msgbox_height_size_content = (lv_obj_get_style_height(mbox, 0) == LV_SIZE_CONTENT);
+    lv_obj_set_flex_grow(content, !is_msgbox_height_size_content);
+}
+
 #endif /*LV_USE_MSGBOX*/

tests/src/test_cases/widgets/test_msgbox.c

@@ -30,6 +30,7 @@ void setUp(void)
 void tearDown(void)
 {
     lv_obj_clean(active_screen);
+    lv_obj_clean(lv_layer_top()); /*Modal message boxes are created on the top layer*/
 }
 
 void test_msgbox_creation_successful_with_close_button(void)
@@ -144,4 +145,50 @@ void test_msgbox_close_async_modal(void)
     TEST_ASSERT_NOT_NULL(msgbox);
 }
 
+void test_msgbox_content_auto_height(void)
+{
+    /* If parent is NULL the message box will be modal*/
+    msgbox = lv_msgbox_create(NULL);
+    lv_msgbox_add_title(msgbox, "The title");
+    lv_msgbox_add_text(msgbox, "The text");
+    lv_msgbox_add_footer_button(msgbox, "Apply");
+    lv_msgbox_add_footer_button(msgbox, "Close");
+    lv_msgbox_add_header_button(msgbox, LV_SYMBOL_AUDIO);
+    lv_msgbox_add_close_button(msgbox);
+
+    /* Test1 : msgbox's height is LV_SIZE_CONTENT by default */
+    bool is_height_size_content = (lv_obj_get_style_height(msgbox, 0) == LV_SIZE_CONTENT);
+    TEST_ASSERT_EQUAL(is_height_size_content, 1);
+
+    lv_obj_update_layout(msgbox);
+    lv_obj_t * header = lv_msgbox_get_header(msgbox);
+    lv_obj_t * footer = lv_msgbox_get_footer(msgbox);
+    lv_obj_t * content = lv_msgbox_get_content(msgbox);
+
+    int32_t h_header = (header == NULL) ? 0 : lv_obj_get_height(header);
+    int32_t h_footer = (footer == NULL) ? 0 : lv_obj_get_height(footer);
+    int32_t h_content = lv_obj_get_height(content);
+
+    int32_t h_obj_content = lv_obj_get_content_height(msgbox);
+    int32_t h_msgbox_element_sum  = h_header + h_footer + h_content;
+    /* Default Size : The height of the msgbox's obj-content should be equal to the total height of the msgbox's element. */
+    TEST_ASSERT_EQUAL(h_obj_content, h_msgbox_element_sum);
+
+    /* Test2 : Now change size of msgbox manually*/
+    lv_obj_set_size(msgbox, lv_pct(80), lv_pct(80));
+
+    is_height_size_content = (lv_obj_get_style_height(msgbox, 0) == LV_SIZE_CONTENT);
+    TEST_ASSERT_EQUAL(is_height_size_content, 0);
+
+    lv_obj_update_layout(msgbox);
+    h_header = (header == NULL) ? 0 : lv_obj_get_height(header);
+    h_footer = (footer == NULL) ? 0 : lv_obj_get_height(footer);
+    h_content = lv_obj_get_height(content);
+
+    h_obj_content = lv_obj_get_content_height(msgbox);
+    h_msgbox_element_sum  = h_header + h_footer + h_content;
+    /* Manual Size : The height of the msgbox's obj-content should also be equal to the total height of the msgbox's element. */
+    TEST_ASSERT_EQUAL(h_obj_content, h_msgbox_element_sum);
+}
+
 #endif