feat(scroll) add scrollbar styling example + allow for the scrollbar using shadow

examples/scroll/index.rst

@@ -17,6 +17,12 @@ Floating button
 .. lv_example:: scroll/lv_example_scroll_3
   :language: c
 
+Styling the scrollbars
+""""""""""""""""""""""""
+.. lv_example:: scroll/lv_example_scroll_4
+  :language: c
+  
+  
 MicroPython
 ^^^^^^^^^^^
 

examples/scroll/lv_example_scroll.h

@@ -28,6 +28,8 @@ extern "C" {
 void lv_example_scroll_1(void);
 void lv_example_scroll_2(void);
 void lv_example_scroll_3(void);
+void lv_example_scroll_4(void);
+
 
 /**********************
  *      MACROS

examples/scroll/lv_example_scroll_4.c

@@ -0,0 +1,87 @@
+#include "../lv_examples.h"
+#if LV_BUILD_EXAMPLES && LV_USE_LIST
+
+static uint32_t btn_cnt = 1;
+
+static void float_btn_event_cb(lv_event_t * e)
+{
+    lv_event_code_t code = lv_event_get_code(e);
+    lv_obj_t * float_btn = lv_event_get_target(e);
+
+    if(code == LV_EVENT_CLICKED) {
+        lv_obj_t * list = lv_event_get_user_data(e);
+        char buf[32];
+        lv_snprintf(buf, sizeof(buf), "Track %d", btn_cnt);
+        lv_obj_t * list_btn = lv_list_add_btn(list, LV_SYMBOL_AUDIO, buf);
+        btn_cnt++;
+
+        lv_obj_move_foreground(float_btn);
+
+        lv_obj_scroll_to_view(list_btn, LV_ANIM_ON);
+    }
+}
+
+/**
+ * Styling the scrollbars
+ */
+void lv_example_scroll_4(void)
+{
+    lv_obj_t * obj = lv_obj_create(lv_scr_act());
+    lv_obj_set_size(obj, 200, 100);
+    lv_obj_center(obj);
+
+    lv_obj_t * label = lv_label_create(obj);
+    lv_label_set_text(label,
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n"
+            "Etiam dictum, tortor vestibulum lacinia laoreet, mi neque consectetur neque, vel mattis odio dolor egestas ligula. \n"
+            "Sed vestibulum sapien nulla, id convallis ex porttitor nec. \n"
+            "Duis et massa eu libero accumsan faucibus a in arcu. \n"
+            "Ut pulvinar odio lorem, vel tempus turpis condimentum quis. Nam consectetur condimentum sem in auctor. \n"
+            "Sed nisl augue, venenatis in blandit et, gravida ac tortor. \n"
+            "Etiam dapibus elementum suscipit. \n"
+            "Proin mollis sollicitudin convallis. \n"
+            "Integer dapibus tempus arcu nec viverra. \n"
+            "Donec molestie nulla enim, eu interdum velit placerat quis. \n"
+            "Donec id efficitur risus, at molestie turpis. \n"
+            "Suspendisse vestibulum consectetur nunc ut commodo. \n"
+            "Fusce molestie rhoncus nisi sit amet tincidunt. \n"
+            "Suspendisse a nunc ut magna ornare volutpat.");
+
+
+    /*Remove the style of scrollbar to have clean start*/
+    lv_obj_remove_style(obj, NULL, LV_PART_SCROLLBAR | LV_STATE_ANY);
+
+    /*Create a transition the animate the some properties on state change*/
+    static const lv_style_prop_t props[] = {LV_STYLE_BG_OPA, LV_STYLE_WIDTH, 0};
+    static lv_style_transition_dsc_t trans;
+    lv_style_transition_dsc_init(&trans, props, lv_anim_path_linear, 200, 0, NULL);
+
+    /*Create a style for the scrollbars*/
+    static lv_style_t style;
+    lv_style_init(&style);
+    lv_style_set_width(&style, 4);      /*Width of the scrollbar*/
+    lv_style_set_pad_right(&style, 5);  /*Space from the parallel side*/
+    lv_style_set_pad_top(&style, 5);    /*Space from the perpendicular side*/
+
+    lv_style_set_radius(&style, 2);
+    lv_style_set_bg_opa(&style, LV_OPA_70);
+    lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_BLUE));
+    lv_style_set_border_color(&style, lv_palette_darken(LV_PALETTE_BLUE, 3));
+    lv_style_set_border_width(&style, 2);
+    lv_style_set_shadow_width(&style, 8);
+    lv_style_set_shadow_spread(&style, 2);
+    lv_style_set_shadow_color(&style, lv_palette_darken(LV_PALETTE_BLUE, 1));
+
+    lv_style_set_transition(&style, &trans);
+
+    /*Make the scrollbars wider and use 100% opacity when scrolled*/
+    static lv_style_t style_scrolled;
+    lv_style_init(&style_scrolled);
+    lv_style_set_width(&style_scrolled, 8);
+    lv_style_set_bg_opa(&style_scrolled, LV_OPA_COVER);
+
+    lv_obj_add_style(obj, &style, LV_PART_SCROLLBAR);
+    lv_obj_add_style(obj, &style_scrolled, LV_PART_SCROLLBAR | LV_STATE_SCROLLED);
+}
+
+#endif

src/core/lv_obj.c

@@ -555,13 +555,25 @@ static lv_res_t scrollbar_init_draw_dsc(lv_obj_t * obj, lv_draw_rect_dsc_t * dsc
     }
 
 #if LV_DRAW_COMPLEX
+    dsc->shadow_opa = lv_obj_get_style_shadow_opa(obj, LV_PART_SCROLLBAR);
+    if(dsc->shadow_opa > LV_OPA_MIN) {
+        dsc->shadow_width = lv_obj_get_style_shadow_width(obj, LV_PART_SCROLLBAR);
+        if(dsc->shadow_width > 0) {
+            dsc->shadow_spread = lv_obj_get_style_shadow_spread(obj, LV_PART_SCROLLBAR);
+            dsc->shadow_color = lv_obj_get_style_shadow_color(obj, LV_PART_SCROLLBAR);
+        } else {
+            dsc->shadow_opa = LV_OPA_TRANSP;
+        }
+    }
+
     lv_opa_t opa = lv_obj_get_style_opa(obj, LV_PART_SCROLLBAR);
     if(opa < LV_OPA_MAX) {
         dsc->bg_opa = (dsc->bg_opa * opa) >> 8;
         dsc->border_opa = (dsc->bg_opa * opa) >> 8;
+        dsc->shadow_opa = (dsc->bg_opa * opa) >> 8;
     }
 
-    if(dsc->bg_opa != LV_OPA_TRANSP || dsc->border_opa != LV_OPA_TRANSP) {
+    if(dsc->bg_opa != LV_OPA_TRANSP || dsc->border_opa != LV_OPA_TRANSP || dsc->shadow_opa != LV_OPA_TRANSP ) {
         dsc->radius = lv_obj_get_style_radius(obj, LV_PART_SCROLLBAR);
         return LV_RES_OK;
     } else {

src/core/lv_obj_style.c

@@ -228,7 +228,7 @@ lv_style_value_t lv_obj_get_style_prop(const lv_obj_t * obj, lv_part_t part, lv_
     }
 
     if(!found) {
-        if(prop == LV_STYLE_WIDTH || prop == LV_STYLE_HEIGHT) {
+        if(part == LV_PART_MAIN && (prop == LV_STYLE_WIDTH || prop == LV_STYLE_HEIGHT)) {
             const lv_obj_class_t * cls = obj->class_p;
             while(cls) {
                 if(prop == LV_STYLE_WIDTH) {
@@ -385,6 +385,7 @@ _lv_style_state_cmp_t _lv_obj_style_state_compare(lv_obj_t * obj, lv_state_t sta
 
             if(res_tmp == _LV_STYLE_STATE_CMP_DIFF_LAYOUT) {
                 if(part_act == LV_PART_MAIN) return _LV_STYLE_STATE_CMP_DIFF_LAYOUT;
+                else if(part_act == LV_PART_SCROLLBAR) return _LV_STYLE_STATE_CMP_DIFF_REDRAW_MAIN;
                 else {
                     res = _LV_STYLE_STATE_CMP_DIFF_DRAW_PAD;
                     continue;