Some UI/themes tweaks

lua/images.lua

@@ -1,6 +1,7 @@
 local lvgl = require("lvgl")
 
 local img = {
+  back = lvgl.ImgData("//lua/img/back.png"),
   play = lvgl.ImgData("//lua/img/play.png"),
   play_small = lvgl.ImgData("//lua/img/playcirc.png"),
   pause = lvgl.ImgData("//lua/img/pause.png"),

lua/settings.lua

@@ -227,7 +227,6 @@ local HeadphonesSettings = SettingsScreen:new {
 
     local balance = self.content:Slider {
       w = lvgl.PCT(100),
-      h = 5,
       range = { min = -100, max = 100 },
       value = 0,
     }
@@ -287,7 +286,6 @@ local DisplaySettings = SettingsScreen:new {
 
     local brightness = self.content:Slider {
       w = lvgl.PCT(100),
-      h = 5,
       range = { min = 0, max = 100 },
       value = display.brightness:get(),
     }
@@ -411,7 +409,6 @@ local InputSettings = SettingsScreen:new {
     local slider_scale = 4; -- Power steering
     local sensitivity = self.content:Slider {
       w = lvgl.PCT(90),
-      h = 5,
       range = { min = 0, max = 255 / slider_scale },
       value = controls.scroll_sensitivity:get() / slider_scale,
     }

lua/theme_dark.lua

@@ -79,8 +79,6 @@ local theme_dark = {
       radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
       pad_all = 2,
       bg_color = background_muted,
-      shadow_width = 5,
-      shadow_opa = lvgl.OPA(100)
     }},
     {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
       bg_color = background_muted,
@@ -92,6 +90,31 @@ local theme_dark = {
       bg_color = highlight_color,
     }},
   },
+  scrubber = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      bg_color = background_muted,
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+    }},
+    {lvgl.PART.INDICATOR, lvgl.Style {
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      bg_color = highlight_color,
+    }},
+    {lvgl.PART.KNOB, lvgl.Style {
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      bg_color = background_muted,
+    }},
+    {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
+      bg_color = background_muted,
+    }},
+    {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style {
+      bg_color = highlight_color,
+      pad_all = 1,
+    }},
+    {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style {
+      bg_color = highlight_color,
+    }},
+  },
   switch = {
     {lvgl.PART.MAIN, lvgl.Style {
       bg_opa = lvgl.OPA(100),
@@ -107,8 +130,8 @@ local theme_dark = {
       bg_color = background_color,
     }},
     {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style {
-      bg_color = highlight_color,
       bg_opa = lvgl.OPA(100),
+      bg_color = highlight_color,
     }},
     {lvgl.PART.KNOB, lvgl.Style {
       radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff

lua/theme_light.lua

@@ -7,6 +7,7 @@ local text_color = "#2c2c2c"
 local highlight_color = "#ff82bc"
 local icon_enabled_color = "#ff82bc"
 local icon_disabled_color = "#999999"
+local border_color = "#888888"
 
 local theme_light = {
   base = {
@@ -43,7 +44,9 @@ local theme_light = {
       bg_color = background_color,
       image_recolor_opa = 180,
       image_recolor = highlight_color,
-      radius = 5,
+      radius = 4,
+      border_color = border_color,
+      border_width = 1,
     }},
     {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
       bg_opa = lvgl.OPA(100),
@@ -70,17 +73,21 @@ local theme_light = {
       bg_opa = lvgl.OPA(100),
       bg_color = background_muted,
       radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      border_color = border_color,
+      border_width = 1,
+      height = 8,
     }},
     {lvgl.PART.INDICATOR, lvgl.Style {
       radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
       bg_color = highlight_color,
+      border_color = border_color,
+      border_width = 1,
     }},
     {lvgl.PART.KNOB, lvgl.Style {
       radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
       bg_color = background_muted,
-      shadow_width = 5,
+      border_color = border_color,
-      shadow_opa = lvgl.OPA(100),
+      border_width = 1,
-      pad_all = 2,
     }},
     {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
       bg_color = background_muted,
@@ -123,9 +130,6 @@ local theme_light = {
       width = 18,
       height = 10,
       radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
-      bg_color = background_muted,
-      border_color = text_color,
-      border_width = 1,
     }},
     {lvgl.PART.INDICATOR, lvgl.Style {
       radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
@@ -138,9 +142,6 @@ local theme_light = {
     {lvgl.PART.KNOB, lvgl.Style {
       radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
       bg_opa = lvgl.OPA(100),
-      bg_color = background_color,
-      border_color = text_color,
-      border_width = 1,
     }},
     {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style {
       bg_color = highlight_color,
@@ -151,7 +152,7 @@ local theme_light = {
       radius = 2, 
       pad_all = 2,
       border_width = 1,
-      border_color = background_muted,
+      border_color = border_color,
       border_side = 15, -- LV_BORDER_SIDE_FULL
       bg_color = background_color,
     }},
@@ -164,7 +165,7 @@ local theme_light = {
       radius = 2, 
       pad_all = 2,
       border_width = 1,
-      border_color = highlight_color,
+      border_color = border_color,
       bg_opa = lvgl.OPA(100),
       bg_color = background_color
     }},
@@ -178,6 +179,17 @@ local theme_light = {
       image_recolor = highlight_color,
     }},
   },
+  back_button = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      image_recolor_opa = 180,
+      image_recolor = icon_enabled_color,
+      pad_all = 0,
+    }},
+    {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
+      image_recolor_opa = 0,
+      image_recolor = "#ffffff",
+    }},
+  },
   settings_title = {
    {lvgl.PART.MAIN, lvgl.Style {
       pad_top = 2,
@@ -211,7 +223,7 @@ local theme_light = {
       bg_opa = lvgl.OPA(100),
       radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
       border_width = 1,
-      border_color = highlight_color,
+      border_color = border_color,
       border_side = 15, -- LV_BORDER_SIDE_FULL
     }},
   },

lua/widgets.lua

@@ -8,6 +8,7 @@ local styles = require("styles")
 local database = require("database")
 local theme = require("theme")
 local screen = require("screen")
+local images = require("images")
 
 local img = {
   db = lvgl.ImgData("//lua/img/db.png"),
@@ -112,10 +113,11 @@ function widgets.StatusBar(parent, opts)
   if opts.back_cb then
     local back = root:Button {
       w = lvgl.SIZE_CONTENT,
-      h = 12,
+      h = lvgl.SIZE_CONTENT,
     }
-    local label = back:Label({ text = "<", align = lvgl.ALIGN.CENTER })
+    back:Image{src=images.back}
-    widgets.Description(label, "Back")
+    theme.set_style(back, "back_button")
+    widgets.Description(back, "Back")
     back:onClicked(opts.back_cb)
     back:onevent(lvgl.EVENT.FOCUSED, function()
       local first_view = parent.content
@@ -136,6 +138,7 @@ function widgets.StatusBar(parent, opts)
     text = "",
     align = lvgl.ALIGN.CENTER,
     flex_grow = 1,
+    pad_left = 2,
   }
   if opts.title then
     title:set { text = opts.title }