diff --git a/lua/browser.lua b/lua/browser.lua index b9a17af5..49088389 100644 --- a/lua/browser.lua +++ b/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 diff --git a/lua/main.lua b/lua/main.lua index cd4bea3c..5cbbf0a6 100644 --- a/lua/main.lua +++ b/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), diff --git a/lua/main_menu.lua b/lua/main_menu.lua index 32386266..9ba67426 100644 --- a/lua/main_menu.lua +++ b/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 = {} @@ -21,7 +22,7 @@ return function() }) menu.root:center() - menu.status_bar = widgets.StatusBar(menu.root, {transparent_bg = true}) + menu.status_bar = widgets.StatusBar(menu.root, { transparent_bg = true }) menu.list = lvgl.List(menu.root, { w = lvgl.PCT(100), @@ -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 diff --git a/lua/theme.lua b/lua/theme.lua new file mode 100644 index 00000000..ff3aeb7b --- /dev/null +++ b/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 diff --git a/src/ui/include/themes.hpp b/src/ui/include/themes.hpp index d7a5261a..576ea42e 100644 --- a/src/ui/include/themes.hpp +++ b/src/ui/include/themes.hpp @@ -25,9 +25,24 @@ 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 -} // namespace ui \ No newline at end of file +} // namespace ui diff --git a/src/ui/themes.cpp b/src/ui/themes.cpp index 35b146c4..bad73ee6 100644 --- a/src/ui/themes.cpp +++ b/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_set_bg_color(&button_style_focused_, - lv_palette_lighten(LV_PALETTE_BLUE, 5)); - lv_style_set_bg_opa(&button_style_focused_, LV_OPA_COVER); + lv_style_init(&bar_style_); + lv_style_set_bg_opa(&bar_style_, LV_OPA_COVER); + lv_style_set_radius(&bar_style_, LV_RADIUS_CIRCLE); + + 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_set_style_text_color(obj, lv_color_black(), 0); - lv_obj_set_style_bg_opa(obj, LV_OPA_TRANSP, LV_PART_MAIN); - 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) || - lv_obj_check_type(obj, &lv_list_btn_class)) { + lv_obj_add_style(obj, &base_style_, LV_PART_MAIN); + lv_obj_add_style(obj, &base_focused_style_, LV_PART_SELECTED); + lv_obj_add_style(obj, &base_focused_style_, LV_STATE_FOCUSED); + + if (lv_obj_check_type(obj, &lv_btn_class)) { lv_obj_add_style(obj, &button_style_, LV_PART_MAIN); - lv_obj_add_style(obj, &button_style_focused_, - LV_PART_MAIN | LV_STATE_FOCUSED); - 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_bar_class)) { + lv_obj_add_style(obj, &bar_style_, 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_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_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); + lv_obj_add_style(obj, &bar_style_, 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_add_style(obj, &slider_knob_focused_style_, LV_STATE_FOCUSED); } else if (lv_obj_check_type(obj, &lv_switch_class)) { - lv_obj_set_size(obj, 28, 18); - lv_obj_set_style_pad_all(obj, -2, LV_PART_KNOB); - - 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_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); + lv_obj_add_style(obj, &switch_style_, LV_PART_MAIN); + lv_obj_add_style(obj, &switch_indicator_style_, LV_PART_INDICATOR); + lv_obj_add_style(obj, &switch_indicator_checked_style_, + LV_PART_INDICATOR | LV_STATE_CHECKED); + lv_obj_add_style(obj, &switch_knob_style_, LV_PART_KNOB); } else if (lv_obj_check_type(obj, &lv_dropdown_class)) { - lv_obj_set_style_radius(obj, 2, 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); + lv_obj_add_style(obj, &dropdown_style_, LV_PART_MAIN); } }