daniel/theme-tweaks (#102)

- Multiple improvements + fixes
- Add charge outline icon for improving readability with monochromatic themes
- Add a chevron icon and update existing dropdown menus
- Rename `set_style` to `set_subject` for disambiguation with lvgl's Style type

Reviewed-on: https://codeberg.org/cool-tech-zone/tangara-fw/pulls/102
Reviewed-by: cooljqln <cooljqln@noreply.codeberg.org>
Co-authored-by: ailurux <ailuruxx@gmail.com>
Co-committed-by: ailurux <ailuruxx@gmail.com>

lua/images.lua

@@ -15,6 +15,7 @@ local img = {
   queue = lvgl.ImgData("//lua/img/queue.png"),
   files = lvgl.ImgData("//lua/img/files.png"),
   settings = lvgl.ImgData("//lua/img/settings.png"),
+  chevron = lvgl.ImgData("//lua/img/chevron.png"),
 }
 
 return img

lua/settings.lua

@@ -12,6 +12,7 @@ local database = require("database")
 local usb = require("usb")
 local font = require("font")
 local main_menu = require("main_menu")
+local img = require("images")
 
 local SettingsScreen = widgets.MenuScreen:new {
   show_back = true,
@@ -213,6 +214,7 @@ local HeadphonesSettings = SettingsScreen:new {
     local volume_chooser = self.content:Dropdown {
       options = "Line Level (-10 dB)\nCD Level (+6 dB)\nMaximum (+10dB)",
       selected = 1,
+      symbol = img.chevron,
     }
     local limits = { -10, 6, 10 }
     volume_chooser:onevent(lvgl.EVENT.VALUE_CHANGED, function()
@@ -319,7 +321,9 @@ local ThemeSettings = SettingsScreen:new {
     local theme_dir_iter = filesystem.iterator("/.themes/")
     for dir in theme_dir_iter do
       local theme_name = tostring(dir):match("(.+).lua$")
-      themeOptions[theme_name] = "/sd/.themes/" .. theme_name .. ".lua"
+      if (theme_name) then
+        themeOptions[theme_name] = "/sd/.themes/" .. theme_name .. ".lua"
+      end
     end
 
     local saved_theme = theme.theme_filename();
@@ -346,6 +350,7 @@ local ThemeSettings = SettingsScreen:new {
 
     local theme_chooser = self.content:Dropdown {
       options = options,
+      symbol = img.chevron,
     }
     theme_chooser:set({selected = selected_idx})
 
@@ -388,6 +393,7 @@ local InputSettings = SettingsScreen:new {
 
     local controls_chooser = self.content:Dropdown {
       options = options,
+      symbol = img.chevron,
     }
 
     self.bindings = self.bindings + {

lua/theme_dark.lua

@@ -38,6 +38,7 @@ local theme_dark = {
   },
   button = {
     {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
       pad_left = 2,
       pad_right = 2,
       pad_top = 1,
@@ -217,6 +218,12 @@ local theme_dark = {
       radius = 4
     }},
   },
+  bluetooth_icon = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      image_recolor_opa = 255,
+      image_recolor = text_color,
+    }},
+  },
   battery = {
     {lvgl.PART.MAIN, lvgl.Style {
       image_recolor_opa = 0,
@@ -240,6 +247,18 @@ local theme_dark = {
       image_recolor = "#fdd833",
     }},
   },
+  battery_charge_outline = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      image_recolor_opa = 255,
+      image_recolor = background_color,
+    }},
+  },
+  regulatory_icons = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      image_recolor_opa = 255,
+      image_recolor = text_color,
+    }},
+  },
 }
 
 return theme_dark

lua/theme_hicon.lua

@@ -40,6 +40,7 @@ local theme_hicon = {
   },
   button = {
     {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
       pad_left = 2,
       pad_right = 2,
       pad_top = 1,
@@ -188,6 +189,14 @@ local theme_hicon = {
       bg_color = text_color,
       text_color = background_color,
     }},
+    {lvgl.PART.INDICATOR, lvgl.Style {
+      image_recolor_opa = 255,
+      image_recolor = text_color,
+    }},
+    {lvgl.PART.INDICATOR | lvgl.STATE.FOCUSED, lvgl.Style {
+      image_recolor_opa = 255,
+      image_recolor = background_color,
+    }},
   },
   dropdownlist = {
     {lvgl.PART.MAIN, lvgl.Style{
@@ -244,6 +253,12 @@ local theme_hicon = {
       radius = 4
     }},
   },
+  bluetooth_icon = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      image_recolor_opa = 255,
+      image_recolor = text_color,
+    }},
+  },
   battery = {
     {lvgl.PART.MAIN, lvgl.Style {
       image_recolor_opa = 255,
@@ -268,6 +283,18 @@ local theme_hicon = {
       image_recolor = text_color,
     }},
   },
+  battery_charge_outline = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      image_recolor_opa = 255,
+      image_recolor = background_color,
+    }},
+  },
+  regulatory_icons = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      image_recolor_opa = 255,
+      image_recolor = text_color,
+    }},
+  },
 }
 
 return theme_hicon

lua/theme_light.lua

@@ -20,7 +20,7 @@ local theme_light = {
     {lvgl.PART.MAIN, lvgl.Style {
       bg_opa = lvgl.OPA(100),
       bg_color = background_color, -- Root background color
-      text_color = text_color
+      text_color = text_color,
     }},
   },
   header = {
@@ -37,6 +37,7 @@ local theme_light = {
   },
   button = {
     {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
       pad_left = 1,
       pad_right = 1,
       margin_all = 1,
@@ -185,6 +186,10 @@ local theme_light = {
     {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
       border_color = highlight_color,
     }},
+    {lvgl.PART.INDICATOR, lvgl.Style {
+      image_recolor_opa = 255,
+      image_recolor = text_color,
+    }},
   },
   dropdownlist = {
     {lvgl.PART.MAIN, lvgl.Style{
@@ -256,6 +261,12 @@ local theme_light = {
       radius = 4
     }},
   },
+  bluetooth_icon = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      image_recolor_opa = 255,
+      image_recolor = text_color,
+    }},
+  },
   battery = {
     {lvgl.PART.MAIN, lvgl.Style {
       image_recolor_opa = 180,
@@ -280,6 +291,12 @@ local theme_light = {
       image_recolor = "#fdd833",
     }},
   },
+  battery_charge_outline = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      image_recolor_opa = 255,
+      image_recolor = background_color,
+    }},
+  },
   regulatory_icons = {
     {lvgl.PART.MAIN, lvgl.Style {
       image_recolor_opa = 255,

lua/widgets.lua

@@ -13,6 +13,7 @@ local images = require("images")
 local img = {
   db = lvgl.ImgData("//lua/img/db.png"),
   chg = lvgl.ImgData("//lua/img/bat/chg.png"),
+  chg_outline = lvgl.ImgData("//lua/img/bat/chg_outline.png"),
   bat_100 = lvgl.ImgData("//lua/img/bat/100.png"),
   bat_80 = lvgl.ImgData("//lua/img/bat/80.png"),
   bat_60 = lvgl.ImgData("//lua/img/bat/60.png"),
@@ -149,6 +150,8 @@ function widgets.StatusBar(parent, opts)
   local bt_icon = root:Image {}
   local battery_icon = root:Image {}
   local charge_icon = battery_icon:Image { src = img.chg }
+  local charge_icon_outline = battery_icon:Image { src = img.chg_outline }
+  charge_icon_outline:center();
   charge_icon:center()
 
   local is_charging = nil
@@ -180,9 +183,12 @@ function widgets.StatusBar(parent, opts)
     if is_charging then
       theme.set_subject(battery_icon, "battery_charging")
       theme.set_subject(charge_icon, "battery_charge_icon")
+      theme.set_subject(charge_icon_outline, "battery_charge_outline")
       charge_icon:clear_flag(lvgl.FLAG.HIDDEN)
+      charge_icon_outline:clear_flag(lvgl.FLAG.HIDDEN)
     else
       charge_icon:add_flag(lvgl.FLAG.HIDDEN)
+      charge_icon_outline:add_flag(lvgl.FLAG.HIDDEN)
     end
     battery_icon:set_src(src)
   end