move default theme into styles, for easier lua overrides

lua/browser.lua

@@ -1,11 +1,10 @@
 local lvgl = require("lvgl")
 local widgets = require("widgets")
-local legacy_ui = require("legacy_ui")
-local database = require("database")
 local backstack = require("backstack")
 local font = require("font")
 local queue = require("queue")
 local playing = require("playing")
+local theme = require("theme")
 
 local browser = {}
 
@@ -88,6 +87,7 @@ function browser.create(opts)
 
   local back = screen.list:add_btn(nil, "< Back")
   back:onClicked(backstack.pop)
+  back:add_style(theme.list_item)
 
   screen.focused_item = 0
   screen.last_item = 0
@@ -118,6 +118,7 @@ function browser.create(opts)
         screen.add_item(opts.iterator())
       end
     end)
+    btn:add_style(theme.list_item)
   end
 
   for _ = 1, 8 do

lua/main.lua

@@ -16,6 +16,8 @@ GLOBAL_BINDINGS = {
         },
         bg_opa = lvgl.OPA(100),
         bg_color = "#fafafa",
+        radius = 8,
+        pad_all = 2,
       })
       container:Label {
         text = string.format("Volume %i%%", pct),

lua/main_menu.lua

@@ -5,6 +5,7 @@ local database = require("database")
 local backstack = require("backstack")
 local browser = require("browser")
 local playing = require("playing")
+local theme = require("theme")
 
 return function()
   local menu = {}
@@ -29,9 +30,11 @@ return function()
     flex_grow = 1,
   })
 
-  menu.list:add_btn(nil, "Now Playing"):onClicked(function()
+  local now_playing = menu.list:add_btn(nil, "Now Playing")
+  now_playing:onClicked(function()
     backstack.push(playing)
   end)
+  now_playing:add_style(theme.list_item)
 
   local indexes = database.indexes()
   for _, idx in ipairs(indexes) do
@@ -44,11 +47,14 @@ return function()
         }
       end)
     end)
+    btn:add_style(theme.list_item)
   end
 
-  menu.list:add_btn(nil, "Settings"):onClicked(function()
+  local settings = menu.list:add_btn(nil, "Settings")
+  settings:onClicked(function()
     legacy_ui.open_settings();
   end)
+  settings:add_style(theme.list_item)
 
   return menu
 end

lua/theme.lua

@@ -0,0 +1,10 @@
+local lvgl = require("lvgl")
+
+local theme = {
+  list_item = lvgl.Style {
+    pad_left = 4,
+    pad_right = 4,
+  },
+}
+
+return theme

src/ui/include/themes.hpp

@@ -25,8 +25,23 @@ class Theme {
 
  private:
   Theme();
+
+  lv_style_t base_style_;
+  lv_style_t base_focused_style_;
+
   lv_style_t button_style_;
-  lv_style_t button_style_focused_;
+  lv_style_t bar_style_;
+  lv_style_t dropdown_style_;
+
+  lv_style_t slider_indicator_style_;
+  lv_style_t slider_knob_style_;
+  lv_style_t slider_knob_focused_style_;
+
+  lv_style_t switch_style_;
+  lv_style_t switch_indicator_style_;
+  lv_style_t switch_indicator_checked_style_;
+  lv_style_t switch_knob_style_;
+
   lv_theme_t theme_;
 };
 }  // namespace themes

src/ui/themes.cpp

@@ -1,9 +1,12 @@
 #include "themes.hpp"
 #include "core/lv_obj.h"
+#include "core/lv_obj_style.h"
 #include "core/lv_obj_tree.h"
+#include "draw/lv_draw_rect.h"
 #include "esp_log.h"
 #include "misc/lv_color.h"
 #include "misc/lv_style.h"
+#include "widgets/lv_bar.h"
 #include "widgets/lv_slider.h"
 
 LV_FONT_DECLARE(font_fusion_12);
@@ -16,7 +19,16 @@ static void theme_apply_cb(lv_theme_t* th, lv_obj_t* obj) {
 }
 
 Theme::Theme() {
-  /*Initialize the styles*/
+  lv_style_init(&base_style_);
+  lv_style_set_bg_opa(&base_style_, LV_OPA_TRANSP);
+  lv_style_set_text_font(&base_style_, &font_fusion_12);
+  lv_style_set_text_color(&base_style_, lv_color_black());
+
+  lv_style_init(&base_focused_style_);
+  lv_style_set_bg_opa(&base_focused_style_, LV_OPA_COVER);
+  lv_style_set_bg_color(&base_focused_style_,
+                        lv_palette_lighten(LV_PALETTE_BLUE, 5));
+
   lv_style_init(&button_style_);
   lv_style_set_pad_left(&button_style_, 2);
   lv_style_set_pad_right(&button_style_, 2);
@@ -25,10 +37,57 @@ Theme::Theme() {
   lv_style_set_bg_color(&button_style_, lv_color_white());
   lv_style_set_radius(&button_style_, 5);
 
-  lv_style_init(&button_style_focused_);
+  lv_style_init(&bar_style_);
-  lv_style_set_bg_color(&button_style_focused_,
+  lv_style_set_bg_opa(&bar_style_, LV_OPA_COVER);
-                        lv_palette_lighten(LV_PALETTE_BLUE, 5));
+  lv_style_set_radius(&bar_style_, LV_RADIUS_CIRCLE);
-  lv_style_set_bg_opa(&button_style_focused_, LV_OPA_COVER);
+
+  lv_style_init(&slider_indicator_style_);
+  lv_style_set_radius(&slider_indicator_style_, LV_RADIUS_CIRCLE);
+  lv_style_set_bg_color(&slider_indicator_style_,
+                        lv_palette_main(LV_PALETTE_BLUE));
+
+  lv_style_init(&slider_knob_style_);
+  lv_style_set_radius(&slider_knob_style_, LV_RADIUS_CIRCLE);
+  lv_style_set_pad_all(&slider_knob_style_, 2);
+  lv_style_set_bg_color(&slider_knob_style_, lv_color_white());
+  lv_style_set_shadow_width(&slider_knob_style_, 5);
+  lv_style_set_shadow_opa(&slider_knob_style_, LV_OPA_COVER);
+
+  lv_style_init(&slider_knob_focused_style_);
+  lv_style_set_bg_color(&slider_knob_focused_style_,
+                        lv_palette_lighten(LV_PALETTE_BLUE, 4));
+
+  lv_style_init(&switch_style_);
+  lv_style_set_width(&switch_style_, 28);
+  lv_style_set_height(&switch_style_, 18);
+  lv_style_set_radius(&switch_style_, LV_RADIUS_CIRCLE);
+
+  lv_style_init(&switch_knob_style_);
+  lv_style_set_pad_all(&switch_knob_style_, -2);
+  lv_style_set_radius(&switch_knob_style_, LV_RADIUS_CIRCLE);
+  lv_style_set_bg_opa(&switch_knob_style_, LV_OPA_COVER);
+  lv_style_set_bg_color(&switch_knob_style_, lv_color_white());
+
+  lv_style_init(&slider_knob_focused_style_);
+  lv_style_set_bg_color(&slider_knob_focused_style_,
+                        lv_palette_lighten(LV_PALETTE_BLUE, 4));
+
+  lv_style_init(&switch_indicator_style_);
+  lv_style_set_radius(&switch_indicator_style_, LV_RADIUS_CIRCLE);
+  lv_style_set_bg_opa(&switch_indicator_style_, LV_OPA_COVER);
+  lv_style_set_bg_color(&switch_indicator_style_,
+                        lv_palette_main(LV_PALETTE_GREY));
+
+  lv_style_init(&switch_indicator_checked_style_);
+  lv_style_set_bg_color(&switch_indicator_checked_style_,
+                        lv_palette_main(LV_PALETTE_BLUE));
+
+  lv_style_init(&dropdown_style_);
+  lv_style_set_radius(&dropdown_style_, 2);
+  lv_style_set_pad_all(&dropdown_style_, 2);
+  lv_style_set_border_width(&dropdown_style_, 1);
+  lv_style_set_border_color(&dropdown_style_, lv_palette_main(LV_PALETTE_BLUE));
+  lv_style_set_border_side(&dropdown_style_, LV_BORDER_SIDE_FULL);
 
   lv_theme_t* parent_theme = lv_disp_get_theme(NULL);
   theme_ = *parent_theme;
@@ -44,67 +103,27 @@ void Theme::Apply(void) {
 }
 
 void Theme::Callback(lv_obj_t* obj) {
-  lv_obj_set_style_text_font(obj, &font_fusion_12, 0);
+  lv_obj_add_style(obj, &base_style_, LV_PART_MAIN);
-  lv_obj_set_style_text_color(obj, lv_color_black(), 0);
+  lv_obj_add_style(obj, &base_focused_style_, LV_PART_SELECTED);
-  lv_obj_set_style_bg_opa(obj, LV_OPA_TRANSP, LV_PART_MAIN);
+  lv_obj_add_style(obj, &base_focused_style_, LV_STATE_FOCUSED);
-  lv_obj_set_style_bg_color(obj, lv_palette_lighten(LV_PALETTE_BLUE, 5),
+
-                            LV_PART_SELECTED | LV_STATE_CHECKED);
+  if (lv_obj_check_type(obj, &lv_btn_class)) {
-
-  if (lv_obj_check_type(obj, &lv_btn_class) ||
-      lv_obj_check_type(obj, &lv_list_btn_class)) {
     lv_obj_add_style(obj, &button_style_, LV_PART_MAIN);
-    lv_obj_add_style(obj, &button_style_focused_,
+  } else if (lv_obj_check_type(obj, &lv_bar_class)) {
-                     LV_PART_MAIN | LV_STATE_FOCUSED);
+    lv_obj_add_style(obj, &bar_style_, LV_PART_MAIN);
-    if (lv_obj_check_type(obj, &lv_list_btn_class)) {
-      lv_obj_set_style_radius(obj, 0, LV_PART_MAIN);
-      lv_obj_set_style_pad_left(obj, 1, LV_PART_MAIN);
-      lv_obj_set_style_pad_right(obj, 1, LV_PART_MAIN);
-    }
   } else if (lv_obj_check_type(obj, &lv_slider_class)) {
-    lv_obj_set_style_bg_opa(obj, LV_OPA_COVER, LV_PART_MAIN);
+    lv_obj_add_style(obj, &bar_style_, LV_PART_MAIN);
-    lv_obj_set_style_radius(obj, LV_RADIUS_CIRCLE, LV_PART_MAIN);
+    lv_obj_add_style(obj, &slider_indicator_style_, LV_PART_INDICATOR);
-
+    lv_obj_add_style(obj, &slider_knob_style_, LV_PART_KNOB);
-    lv_obj_set_style_radius(obj, LV_RADIUS_CIRCLE, LV_PART_INDICATOR);
+    lv_obj_add_style(obj, &slider_knob_focused_style_, LV_STATE_FOCUSED);
-    lv_obj_set_style_bg_color(obj, lv_palette_main(LV_PALETTE_BLUE),
-                              LV_PART_INDICATOR);
-
-    lv_obj_set_style_radius(obj, LV_RADIUS_CIRCLE, LV_PART_KNOB);
-    lv_obj_set_style_pad_all(obj, 2, LV_PART_KNOB);
-    lv_obj_set_style_bg_color(obj, lv_color_white(), LV_PART_KNOB);
-    lv_obj_set_style_bg_color(obj, lv_palette_lighten(LV_PALETTE_BLUE, 4),
-                              LV_PART_KNOB | LV_STATE_FOCUSED);
-    lv_obj_set_style_shadow_width(obj, 5, LV_PART_KNOB);
-    lv_obj_set_style_shadow_opa(obj, LV_OPA_COVER, LV_PART_KNOB);
   } else if (lv_obj_check_type(obj, &lv_switch_class)) {
-    lv_obj_set_size(obj, 28, 18);
+    lv_obj_add_style(obj, &switch_style_, LV_PART_MAIN);
-    lv_obj_set_style_pad_all(obj, -2, LV_PART_KNOB);
+    lv_obj_add_style(obj, &switch_indicator_style_, LV_PART_INDICATOR);
-
+    lv_obj_add_style(obj, &switch_indicator_checked_style_,
-    lv_obj_set_style_radius(obj, LV_RADIUS_CIRCLE, LV_PART_MAIN);
-
-    lv_obj_set_style_radius(obj, LV_RADIUS_CIRCLE, LV_PART_INDICATOR);
-    lv_obj_set_style_bg_opa(obj, LV_OPA_COVER, LV_PART_INDICATOR);
-    lv_obj_set_style_bg_color(obj, lv_palette_main(LV_PALETTE_GREY),
-                              LV_PART_INDICATOR);
-    lv_obj_set_style_bg_color(obj, lv_palette_main(LV_PALETTE_BLUE),
                      LV_PART_INDICATOR | LV_STATE_CHECKED);
-
+    lv_obj_add_style(obj, &switch_knob_style_, LV_PART_KNOB);
-    lv_obj_set_style_radius(obj, LV_RADIUS_CIRCLE, LV_PART_KNOB);
-    lv_obj_set_style_bg_opa(obj, LV_OPA_COVER, LV_PART_KNOB);
-    lv_obj_set_style_bg_color(obj, lv_color_white(), LV_PART_KNOB);
-    lv_obj_set_style_bg_color(obj, lv_palette_lighten(LV_PALETTE_BLUE, 4),
-                              LV_PART_KNOB | LV_STATE_FOCUSED);
   } else if (lv_obj_check_type(obj, &lv_dropdown_class)) {
-    lv_obj_set_style_radius(obj, 2, LV_PART_MAIN);
+    lv_obj_add_style(obj, &dropdown_style_, LV_PART_MAIN);
-    lv_obj_set_style_pad_all(obj, 2, LV_PART_MAIN);
-
-    lv_obj_set_style_border_width(obj, 1, LV_PART_MAIN);
-    lv_obj_set_style_border_color(obj, lv_palette_main(LV_PALETTE_BLUE),
-                                  LV_PART_MAIN);
-    lv_obj_set_style_border_side(obj, LV_BORDER_SIDE_FULL, LV_PART_MAIN);
-
-    lv_obj_set_style_bg_opa(obj, LV_OPA_COVER, LV_PART_MAIN);
-    lv_obj_set_style_bg_color(obj, lv_palette_lighten(LV_PALETTE_BLUE, 5),
-                              LV_PART_MAIN | LV_STATE_FOCUSED);
   }
 }