Custom themes and top bar styling

src/ui/include/themes.hpp

@@ -4,14 +4,24 @@
 
 namespace ui {
 namespace themes {
+
+  enum class Style {
+    kMenuItem,
+    kTopBar
+  };
 class Theme {
  public:
-  Theme();
+
   void Apply(void);
   void Callback(lv_obj_t* obj);
+  void ApplyStyle(lv_obj_t* obj, Style style);
+
+  static auto instance() -> Theme*;
 
  private:
+  Theme();
   lv_style_t button_style_;
+  lv_style_t button_style_focused_;
   lv_theme_t theme_;
 };
 }  // namespace themes

src/ui/lvgl_task.cpp

@@ -70,8 +70,7 @@ void LvglMain(std::weak_ptr<drivers::RelativeWheel> weak_touch_wheel,
 
   lv_theme_t* base_theme = lv_theme_basic_init(NULL);
   lv_disp_set_theme(NULL, base_theme);
-  static themes::Theme sTheme{};
+  themes::Theme::instance()->Apply();
-  sTheme.Apply();
 
   TouchWheelEncoder encoder(weak_touch_wheel);
 

src/ui/themes.cpp

@@ -1,6 +1,7 @@
 #include "themes.hpp"
 #include "core/lv_obj.h"
 #include "misc/lv_color.h"
+#include "esp_log.h"
 
 LV_FONT_DECLARE(font_fusion);
 
@@ -14,10 +15,11 @@ static void theme_apply_cb(lv_theme_t* th, lv_obj_t* obj) {
 Theme::Theme() {
   /*Initialize the styles*/
   lv_style_init(&button_style_);
-  lv_style_set_bg_color(&button_style_, lv_palette_main(LV_PALETTE_GREEN));
+  lv_style_set_pad_all(&button_style_, 2);
-  lv_style_set_border_color(&button_style_,
+  lv_style_set_bg_color(&button_style_, lv_color_white());
-                            lv_palette_darken(LV_PALETTE_GREEN, 3));
+
-  lv_style_set_border_width(&button_style_, 1);
+  lv_style_init(&button_style_focused_);
+  lv_style_set_bg_color(&button_style_focused_, lv_palette_lighten(LV_PALETTE_BLUE_GREY, 2));
 
   lv_theme_t* parent_theme = lv_disp_get_theme(NULL);
   theme_ = *parent_theme;
@@ -33,13 +35,32 @@ void Theme::Apply(void) {
 }
 
 void Theme::Callback(lv_obj_t* obj) {
+  ESP_LOGI("Theme", "Callback called on object %p", obj);
   lv_obj_set_style_text_font(obj, &font_fusion, 0);
   lv_obj_set_style_text_color(obj, lv_color_black(), 0);
 
   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_STATE_FOCUSED);
+    lv_obj_add_style(obj, &button_style_, LV_PART_MAIN);
+    lv_obj_add_style(obj, &button_style_focused_, LV_PART_MAIN | LV_STATE_FOCUSED);
   }
 }
+
+void Theme::ApplyStyle(lv_obj_t* obj, Style style) {
+  ESP_LOGI("Theme", "Apply style called on object %p", obj);
+  if (style == Style::kTopBar) {
+    lv_obj_set_style_border_color(obj, lv_palette_darken(LV_PALETTE_BLUE_GREY, 2), LV_PART_MAIN);
+    lv_obj_set_style_border_width(obj, 1, LV_PART_MAIN);
+    lv_obj_set_style_border_side(obj, LV_BORDER_SIDE_BOTTOM|LV_BORDER_SIDE_TOP, LV_PART_MAIN);
+    lv_obj_set_style_pad_top(obj, 2, LV_PART_MAIN);
+    lv_obj_set_style_pad_bottom(obj, 2, LV_PART_MAIN);
+  }
+}
+
+auto Theme::instance() -> Theme* {
+  static Theme sTheme{};
+  return &sTheme;
+}
+
 }  // namespace themes
 }  // namespace ui

src/ui/widget_top_bar.cpp

@@ -15,6 +15,7 @@
 #include "ui_fsm.hpp"
 #include "widgets/lv_img.h"
 #include "widgets/lv_label.h"
+#include "themes.hpp"
 
 namespace ui {
 namespace widgets {
@@ -25,11 +26,13 @@ static void back_click_cb(lv_event_t* ev) {
 
 TopBar::TopBar(lv_obj_t* parent, const Configuration& config) {
   container_ = lv_obj_create(parent);
-  lv_obj_set_size(container_, lv_pct(100), 14);
+  lv_obj_set_size(container_, lv_pct(100), 18);
   lv_obj_set_flex_flow(container_, LV_FLEX_FLOW_ROW);
-  lv_obj_set_flex_align(container_, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START,
+  lv_obj_set_flex_align(container_, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER,
                         LV_FLEX_ALIGN_END);
   
+  themes::Theme::instance()->ApplyStyle(container_, themes::Style::kTopBar);
+
   if (config.show_back_button) {
     back_button_ = lv_btn_create(container_);
     lv_obj_set_size(back_button_, LV_SIZE_CONTENT, LV_SIZE_CONTENT);