From a78614a5806c9800956f10f993e1c70b74fbf323 Mon Sep 17 00:00:00 2001 From: ailurux Date: Thu, 7 Mar 2024 12:12:32 +1100 Subject: WIP: Getting styles from lua --- lua/browser.lua | 6 +++--- lua/licenses.lua | 4 ++-- lua/main.lua | 26 ++++++++++++++++++++++++++ lua/main_menu.lua | 8 ++++---- lua/settings.lua | 22 +++++++++++----------- lua/styles.lua | 23 +++++++++++++++++++++++ lua/theme.lua | 23 ----------------------- lua/widgets.lua | 4 ++-- 8 files changed, 71 insertions(+), 45 deletions(-) create mode 100644 lua/styles.lua delete mode 100644 lua/theme.lua (limited to 'lua') diff --git a/lua/browser.lua b/lua/browser.lua index a7f0c336..e174a05d 100644 --- a/lua/browser.lua +++ b/lua/browser.lua @@ -4,7 +4,7 @@ local backstack = require("backstack") local font = require("font") local queue = require("queue") local playing = require("playing") -local theme = require("theme") +local styles = require("styles") local playback = require("playback") local browser = {} @@ -90,7 +90,7 @@ function browser.create(opts) local back = screen.list:add_btn(nil, "< Back") back:onClicked(backstack.pop) - back:add_style(theme.list_item) + back:add_style(styles.list_item) screen.focused_item = 0 screen.last_item = 0 @@ -122,7 +122,7 @@ function browser.create(opts) screen.add_item(opts.iterator()) end end) - btn:add_style(theme.list_item) + btn:add_style(styles.list_item) end for _ = 1, 8 do diff --git a/lua/licenses.lua b/lua/licenses.lua index 83437454..b5d1ae88 100644 --- a/lua/licenses.lua +++ b/lua/licenses.lua @@ -1,7 +1,7 @@ local backstack = require("backstack") local widgets = require("widgets") local font = require("font") -local theme = require("theme") +local styles = require("styles") local function show_license(text) backstack.push(function() @@ -100,7 +100,7 @@ return function() w = lvgl.PCT(100), h = lvgl.SIZE_CONTENT, } - row:add_style(theme.list_item) + row:add_style(styles.list_item) row:Label { text = name, flex_grow = 1 } local button = row:Button {} button:Label { text = license, text_font = font.fusion_10 } diff --git a/lua/main.lua b/lua/main.lua index 5cbbf0a6..5cfba47b 100644 --- a/lua/main.lua +++ b/lua/main.lua @@ -1,5 +1,6 @@ local font = require("font") local vol = require("volume") +local theme = require("theme") -- Set up property bindings that are used across every screen. GLOBAL_BINDINGS = { @@ -34,6 +35,31 @@ GLOBAL_BINDINGS = { end), } +local lvgl = require("lvgl") +local my_theme = { + base = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(0), + text_font = font.fusion_12, + text_color = "#ff0000", -- Red to check it applies + }}, + {lvgl.STATE.FOCUSED, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = "#0000ff", -- ew + text_color = "#ff0000", -- Red to check it applies + }}, + }, + button = { + {lvgl.STATE.FOCUSED, lvgl.Style { + bg_color = "#00ff00", + }}, + {lvgl.PART.MAIN, lvgl.Style { + bg_color = "#00ff00", + }}, + }, +} +theme.set(my_theme) + local backstack = require("backstack") local main_menu = require("main_menu") diff --git a/lua/main_menu.lua b/lua/main_menu.lua index 1311f8ea..1a9d9975 100644 --- a/lua/main_menu.lua +++ b/lua/main_menu.lua @@ -4,7 +4,7 @@ local database = require("database") local backstack = require("backstack") local browser = require("browser") local playing = require("playing") -local theme = require("theme") +local styles = require("styles") return function() local menu = widgets.MenuScreen({}) @@ -19,7 +19,7 @@ return function() now_playing:onClicked(function() backstack.push(playing) end) - now_playing:add_style(theme.list_item) + now_playing:add_style(styles.list_item) local indexes = database.indexes() for _, idx in ipairs(indexes) do @@ -32,14 +32,14 @@ return function() } end) end) - btn:add_style(theme.list_item) + btn:add_style(styles.list_item) end local settings = menu.list:add_btn(nil, "Settings") settings:onClicked(function() backstack.push(require("settings").root) end) - settings:add_style(theme.list_item) + settings:add_style(styles.list_item) return menu end diff --git a/lua/settings.lua b/lua/settings.lua index 952292e4..cb726a2a 100644 --- a/lua/settings.lua +++ b/lua/settings.lua @@ -1,7 +1,7 @@ local lvgl = require("lvgl") local backstack = require("backstack") local widgets = require("widgets") -local theme = require("theme") +local styles = require("styles") local volume = require("volume") local display = require("display") local controls = require("controls") @@ -55,7 +55,7 @@ function settings.bluetooth() menu.content:Label { text = "Paired Device", pad_bottom = 1, - }:add_style(theme.settings_title) + }:add_style(styles.settings_title) local paired_container = menu.content:Object { flex = { @@ -81,7 +81,7 @@ function settings.bluetooth() menu.content:Label { text = "Nearby Devices", pad_bottom = 1, - }:add_style(theme.settings_title) + }:add_style(styles.settings_title) local devices = menu.content:List { w = lvgl.PCT(100), @@ -121,7 +121,7 @@ function settings.headphones() menu.content:Label { text = "Maximum volume limit", - }:add_style(theme.settings_title) + }:add_style(styles.settings_title) local volume_chooser = menu.content:Dropdown { options = "Line Level (-10 dB)\nCD Level (+6 dB)\nMaximum (+10dB)", @@ -136,7 +136,7 @@ function settings.headphones() menu.content:Label { text = "Left/Right balance", - }:add_style(theme.settings_title) + }:add_style(styles.settings_title) local balance = menu.content:Slider { w = lvgl.PCT(100), @@ -194,7 +194,7 @@ function settings.display() } brightness_title:Label { text = "Brightness", flex_grow = 1 } local brightness_pct = brightness_title:Label {} - brightness_pct:add_style(theme.settings_title) + brightness_pct:add_style(styles.settings_title) local brightness = menu.content:Slider { w = lvgl.PCT(100), @@ -220,7 +220,7 @@ function settings.input() menu.content:Label { text = "Control scheme", - }:add_style(theme.settings_title) + }:add_style(styles.settings_title) local schemes = controls.schemes() local option_to_scheme = {} @@ -258,7 +258,7 @@ function settings.input() menu.content:Label { text = "Scroll Sensitivity", - }:add_style(theme.settings_title) + }:add_style(styles.settings_title) local slider_scale = 4; -- Power steering local sensitivity = menu.content:Slider { @@ -292,7 +292,7 @@ function settings.database() pad_top = 4, pad_column = 4, } - actions_container:add_style(theme.list_item) + actions_container:add_style(styles.list_item) local update = actions_container:Button {} update:Label { text = "Update" } @@ -321,7 +321,7 @@ function settings.root() } local function section(name) - menu.list:add_text(name):add_style(theme.list_heading) + menu.list:add_text(name):add_style(styles.list_heading) end local function submenu(name, fn) @@ -329,7 +329,7 @@ function settings.root() item:onClicked(function() backstack.push(fn) end) - item:add_style(theme.list_item) + item:add_style(styles.list_item) end section("Audio") diff --git a/lua/styles.lua b/lua/styles.lua new file mode 100644 index 00000000..76ecad2a --- /dev/null +++ b/lua/styles.lua @@ -0,0 +1,23 @@ +local lvgl = require("lvgl") +local font = require("font") + +local styles = { + list_item = lvgl.Style { + pad_left = 4, + pad_right = 4, + }, + list_heading = lvgl.Style { + pad_top = 4, + pad_left = 4, + pad_right = 4, + text_font = font.fusion_10, + text_align = lvgl.ALIGN.CENTER, + }, + settings_title = lvgl.Style { + pad_top = 2, + pad_bottom = 4, + text_font = font.fusion_10, + } +} + +return styles diff --git a/lua/theme.lua b/lua/theme.lua deleted file mode 100644 index 9c808946..00000000 --- a/lua/theme.lua +++ /dev/null @@ -1,23 +0,0 @@ -local lvgl = require("lvgl") -local font = require("font") - -local theme = { - list_item = lvgl.Style { - pad_left = 4, - pad_right = 4, - }, - list_heading = lvgl.Style { - pad_top = 4, - pad_left = 4, - pad_right = 4, - text_font = font.fusion_10, - text_align = lvgl.ALIGN.CENTER, - }, - settings_title = lvgl.Style { - pad_top = 2, - pad_bottom = 4, - text_font = font.fusion_10, - } -} - -return theme diff --git a/lua/widgets.lua b/lua/widgets.lua index 8905fa43..8253041b 100644 --- a/lua/widgets.lua +++ b/lua/widgets.lua @@ -3,7 +3,7 @@ local power = require("power") local bluetooth = require("bluetooth") local font = require("font") local backstack = require("backstack") -local theme = require("theme") +local styles = require("styles") local database = require("database") local widgets = {} @@ -41,7 +41,7 @@ function widgets.Row(parent, left, right) w = lvgl.PCT(100), h = lvgl.SIZE_CONTENT, } - container:add_style(theme.list_item) + container:add_style(styles.list_item) container:Label { text = left, flex_grow = 1 } container:Label { text = right } end -- cgit v1.2.3 From dc74bc1de9dd56c4146232622140b56e90dcc43d Mon Sep 17 00:00:00 2001 From: ailurux Date: Thu, 7 Mar 2024 15:46:42 +1100 Subject: Add other styles to lua theme --- lua/main.lua | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 72 insertions(+), 5 deletions(-) (limited to 'lua') diff --git a/lua/main.lua b/lua/main.lua index 5cfba47b..6cdef17d 100644 --- a/lua/main.lua +++ b/lua/main.lua @@ -41,22 +41,89 @@ local my_theme = { {lvgl.PART.MAIN, lvgl.Style { bg_opa = lvgl.OPA(0), text_font = font.fusion_12, - text_color = "#ff0000", -- Red to check it applies + text_color = "#000000", }}, {lvgl.STATE.FOCUSED, lvgl.Style { bg_opa = lvgl.OPA(100), - bg_color = "#0000ff", -- ew - text_color = "#ff0000", -- Red to check it applies + bg_color = "#E3F2FD", }}, }, button = { + {lvgl.PART.MAIN, lvgl.Style { + pad_left = 2, + pad_right = 2, + pad_top = 1, + pad_bottom = 1, + bg_color = "#ffffff", + radius = 5, + }}, + }, + bar = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + }}, + }, + slider = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + }}, + {lvgl.PART.INDICATOR, lvgl.Style { + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + bg_color = "#2196F3", + }}, + {lvgl.PART.KNOB, lvgl.Style { + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + pad_all = 2, + bg_color = "#ffffff", + shadow_width = 5, + shadow_opa = lvgl.OPA(100) + }}, {lvgl.STATE.FOCUSED, lvgl.Style { - bg_color = "#00ff00", + bg_color = "#BBDEFB", }}, + }, + switch = { {lvgl.PART.MAIN, lvgl.Style { - bg_color = "#00ff00", + bg_opa = lvgl.OPA(100), + width = 28, + height = 18, + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + }}, + {lvgl.PART.INDICATOR, lvgl.Style { + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + bg_color = "#9E9E9E", + }}, + {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style { + bg_color = "#2196F3", + }}, + {lvgl.PART.KNOB, lvgl.Style { + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + pad_all = 2, + bg_opa = lvgl.OPA(100), + bg_color = "#ffffff", }}, }, + dropdown = { + {lvgl.PART.MAIN, lvgl.Style{ + radius = 2, + pad_all = 2, + border_width = 1, + border_color = "#2196F3", + border_side = 15, -- LV_BORDER_SIDE_FULL + }} + }, + dropdownlist = { + {lvgl.PART.MAIN, lvgl.Style{ + radius = 2, + pad_all = 2, + border_width = 1, + border_color = "#607D8B", + bg_opa = lvgl.OPA(100), + bg_color = "#ffffff" + }} + } } theme.set(my_theme) -- cgit v1.2.3 From 1133d4621508b7ec6bac4ab8731f3493066ceeee Mon Sep 17 00:00:00 2001 From: ailurux Date: Sun, 10 Mar 2024 13:20:17 +1100 Subject: WIP Lua Theming- style classes --- lua/browser.lua | 4 +- lua/main.lua | 93 +------------------------------------- lua/theme_dark.lua | 127 ++++++++++++++++++++++++++++++++++++++++++++++++++++ lua/theme_light.lua | 106 +++++++++++++++++++++++++++++++++++++++++++ lua/widgets.lua | 6 +-- 5 files changed, 240 insertions(+), 96 deletions(-) create mode 100644 lua/theme_dark.lua create mode 100644 lua/theme_light.lua (limited to 'lua') diff --git a/lua/browser.lua b/lua/browser.lua index e174a05d..055c8641 100644 --- a/lua/browser.lua +++ b/lua/browser.lua @@ -6,6 +6,7 @@ local queue = require("queue") local playing = require("playing") local styles = require("styles") local playback = require("playback") +local theme = require("theme") local browser = {} @@ -43,9 +44,10 @@ function browser.create(opts) pad_right = 4, pad_bottom = 2, bg_opa = lvgl.OPA(100), - bg_color = "#fafafa", scrollbar_mode = lvgl.SCROLLBAR_MODE.OFF, } + theme.set_style(header, "header") + header:Label { text = opts.breadcrumb, diff --git a/lua/main.lua b/lua/main.lua index 6cdef17d..f2533387 100644 --- a/lua/main.lua +++ b/lua/main.lua @@ -35,97 +35,8 @@ GLOBAL_BINDINGS = { end), } -local lvgl = require("lvgl") -local my_theme = { - base = { - {lvgl.PART.MAIN, lvgl.Style { - bg_opa = lvgl.OPA(0), - text_font = font.fusion_12, - text_color = "#000000", - }}, - {lvgl.STATE.FOCUSED, lvgl.Style { - bg_opa = lvgl.OPA(100), - bg_color = "#E3F2FD", - }}, - }, - button = { - {lvgl.PART.MAIN, lvgl.Style { - pad_left = 2, - pad_right = 2, - pad_top = 1, - pad_bottom = 1, - bg_color = "#ffffff", - radius = 5, - }}, - }, - bar = { - {lvgl.PART.MAIN, lvgl.Style { - bg_opa = lvgl.OPA(100), - radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff - }}, - }, - slider = { - {lvgl.PART.MAIN, lvgl.Style { - bg_opa = lvgl.OPA(100), - radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff - }}, - {lvgl.PART.INDICATOR, lvgl.Style { - radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff - bg_color = "#2196F3", - }}, - {lvgl.PART.KNOB, lvgl.Style { - radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff - pad_all = 2, - bg_color = "#ffffff", - shadow_width = 5, - shadow_opa = lvgl.OPA(100) - }}, - {lvgl.STATE.FOCUSED, lvgl.Style { - bg_color = "#BBDEFB", - }}, - }, - switch = { - {lvgl.PART.MAIN, lvgl.Style { - bg_opa = lvgl.OPA(100), - width = 28, - height = 18, - radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff - }}, - {lvgl.PART.INDICATOR, lvgl.Style { - radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff - bg_color = "#9E9E9E", - }}, - {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style { - bg_color = "#2196F3", - }}, - {lvgl.PART.KNOB, lvgl.Style { - radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff - pad_all = 2, - bg_opa = lvgl.OPA(100), - bg_color = "#ffffff", - }}, - }, - dropdown = { - {lvgl.PART.MAIN, lvgl.Style{ - radius = 2, - pad_all = 2, - border_width = 1, - border_color = "#2196F3", - border_side = 15, -- LV_BORDER_SIDE_FULL - }} - }, - dropdownlist = { - {lvgl.PART.MAIN, lvgl.Style{ - radius = 2, - pad_all = 2, - border_width = 1, - border_color = "#607D8B", - bg_opa = lvgl.OPA(100), - bg_color = "#ffffff" - }} - } -} -theme.set(my_theme) +local theme_light = require("theme_dark") +theme.set(theme_light) local backstack = require("backstack") local main_menu = require("main_menu") diff --git a/lua/theme_dark.lua b/lua/theme_dark.lua new file mode 100644 index 00000000..5c91ea1e --- /dev/null +++ b/lua/theme_dark.lua @@ -0,0 +1,127 @@ +local lvgl = require("lvgl") +local font = require("font") + +local background_color = "#242933" +local background_muted = "#353c4b" +local text_color = "#fefefe" +local highlight_color = "#ff0077" + +local theme_dark = { + base = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(0), + text_font = font.fusion_12, + text_color = text_color, + }}, + }, + root = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = background_color, -- Root background color + }}, + }, + header = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = background_muted, + }}, + }, + button = { + {lvgl.PART.MAIN, lvgl.Style { + pad_left = 2, + pad_right = 2, + pad_top = 1, + pad_bottom = 1, + bg_color = background_color, + radius = 5, + }}, + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = highlight_color, + }}, + }, + listbutton = { + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = highlight_color, + }}, + }, + bar = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + }}, + }, + slider = { + {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 + pad_all = 2, + bg_color = background_color, + shadow_width = 5, + shadow_opa = lvgl.OPA(100) + }}, + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + bg_color = background_muted, + }}, + {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style { + bg_color = highlight_color, + }}, + }, + switch = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + width = 28, + height = 12, + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + }}, + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + bg_color = background_muted, + }}, + {lvgl.PART.INDICATOR, lvgl.Style { + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + bg_color = background_muted, + }}, + {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style { + bg_color = highlight_color, + }}, + {lvgl.PART.KNOB, lvgl.Style { + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + pad_all = 2, + bg_opa = lvgl.OPA(100), + bg_color = text_color, + }}, + }, + dropdown = { + {lvgl.PART.MAIN, lvgl.Style{ + radius = 2, + pad_all = 2, + border_width = 1, + border_color = text_color, + border_side = 15, -- LV_BORDER_SIDE_FULL + }}, + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + border_color = highlight_color, + }}, + }, + dropdownlist = { + {lvgl.PART.MAIN, lvgl.Style{ + radius = 2, + pad_all = 2, + border_width = 1, + border_color = text_color, + bg_opa = lvgl.OPA(100), + bg_color = background_color + }}, + } +} + +return theme_dark diff --git a/lua/theme_light.lua b/lua/theme_light.lua new file mode 100644 index 00000000..637861d9 --- /dev/null +++ b/lua/theme_light.lua @@ -0,0 +1,106 @@ +local lvgl = require("lvgl") +local font = require("font") + +local background_color = "#FFFFFF" +local background_muted = "#FFFFFF" +local text_color = "#000000" +local highlight_color = "#E3F2FD" + +local theme_light = { + base = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(0), + bg_color = background_color, -- Root background color + text_font = font.fusion_12, + text_color = text_color, + }}, + {lvgl.STATE.FOCUSED, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = highlight_color, + }}, + }, + root = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = background_color, -- Root background color + }}, + }, + button = { + {lvgl.PART.MAIN, lvgl.Style { + pad_left = 2, + pad_right = 2, + pad_top = 1, + pad_bottom = 1, + bg_color = background_color, + radius = 5, + }}, + }, + bar = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + }}, + }, + slider = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + 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 + pad_all = 2, + bg_color = background_color, + shadow_width = 5, + shadow_opa = lvgl.OPA(100) + }}, + {lvgl.STATE.FOCUSED, lvgl.Style { + bg_color = highlight_color, + }}, + }, + switch = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + width = 28, + height = 18, + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + }}, + {lvgl.PART.INDICATOR, lvgl.Style { + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + bg_color = background_muted, + }}, + {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style { + bg_color = highlight_color, + }}, + {lvgl.PART.KNOB, lvgl.Style { + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + pad_all = 2, + bg_opa = lvgl.OPA(100), + bg_color = background_color, + }}, + }, + dropdown = { + {lvgl.PART.MAIN, lvgl.Style{ + radius = 2, + pad_all = 2, + border_width = 1, + border_color = "#2196F3", + border_side = 15, -- LV_BORDER_SIDE_FULL + }} + }, + dropdownlist = { + {lvgl.PART.MAIN, lvgl.Style{ + radius = 2, + pad_all = 2, + border_width = 1, + border_color = "#607D8B", + bg_opa = lvgl.OPA(100), + bg_color = background_color + }} + } +} + +return theme_light diff --git a/lua/widgets.lua b/lua/widgets.lua index 8253041b..15212ded 100644 --- a/lua/widgets.lua +++ b/lua/widgets.lua @@ -5,6 +5,7 @@ local font = require("font") local backstack = require("backstack") local styles = require("styles") local database = require("database") +local theme = require("theme") local widgets = {} @@ -66,10 +67,7 @@ function widgets.StatusBar(parent, opts) } if not opts.transparent_bg then - status_bar.root:set { - bg_opa = lvgl.OPA(100), - bg_color = "#fafafa", - } + theme.set_style(status_bar.root, "header"); end if opts.back_cb then -- cgit v1.2.3 From f1599c237c36f08e96dd5d1ab98bc04e35e1ade1 Mon Sep 17 00:00:00 2001 From: ailurux Date: Mon, 18 Mar 2024 13:11:13 +1100 Subject: Better styling for settings pages + dropdown menus --- lua/main.lua | 2 +- lua/settings.lua | 38 ++++++++++++++++------------ lua/styles.lua | 5 ---- lua/theme_dark.lua | 19 +++++++++++--- lua/theme_light.lua | 72 +++++++++++++++++++++++++++++++++++++++-------------- 5 files changed, 92 insertions(+), 44 deletions(-) (limited to 'lua') diff --git a/lua/main.lua b/lua/main.lua index f2533387..f7dfb2c9 100644 --- a/lua/main.lua +++ b/lua/main.lua @@ -35,7 +35,7 @@ GLOBAL_BINDINGS = { end), } -local theme_light = require("theme_dark") +local theme_light = require("theme_light") theme.set(theme_light) local backstack = require("backstack") diff --git a/lua/settings.lua b/lua/settings.lua index cb726a2a..aac5ce9b 100644 --- a/lua/settings.lua +++ b/lua/settings.lua @@ -6,6 +6,7 @@ local volume = require("volume") local display = require("display") local controls = require("controls") local bluetooth = require("bluetooth") +local theme = require("theme") local database = require("database") local settings = {} @@ -23,7 +24,7 @@ local function SettingsScreen(title) align_items = "flex-start", align_content = "flex-start", }, - w = lvgl.PCT(100), + w = lvgl.PCT(90), flex_grow = 1, pad_left = 4, pad_right = 4, @@ -52,10 +53,10 @@ function settings.bluetooth() bluetooth.enabled:set(enabled) end) - menu.content:Label { + theme.set_style(menu.content:Label { text = "Paired Device", pad_bottom = 1, - }:add_style(styles.settings_title) + }, "settings_title") local paired_container = menu.content:Object { flex = { @@ -78,10 +79,10 @@ function settings.bluetooth() bluetooth.paired_device:set() end) - menu.content:Label { + theme.set_style(menu.content:Label { text = "Nearby Devices", pad_bottom = 1, - }:add_style(styles.settings_title) + }, "settings_title") local devices = menu.content:List { w = lvgl.PCT(100), @@ -119,9 +120,9 @@ end function settings.headphones() local menu = SettingsScreen("Headphones") - menu.content:Label { - text = "Maximum volume limit", - }:add_style(styles.settings_title) + theme.set_style(menu.content:Label { + text = "Maxiumum volume limit", + }, "settings_title") local volume_chooser = menu.content:Dropdown { options = "Line Level (-10 dB)\nCD Level (+6 dB)\nMaximum (+10dB)", @@ -134,9 +135,9 @@ function settings.headphones() volume.limit_db:set(limits[selection]) end) - menu.content:Label { + theme.set_style(menu.content:Label { text = "Left/Right balance", - }:add_style(styles.settings_title) + }, "settings_title") local balance = menu.content:Slider { w = lvgl.PCT(100), @@ -191,10 +192,11 @@ function settings.display() }, w = lvgl.PCT(100), h = lvgl.SIZE_CONTENT, + } brightness_title:Label { text = "Brightness", flex_grow = 1 } local brightness_pct = brightness_title:Label {} - brightness_pct:add_style(styles.settings_title) + theme.set_style(brightness_pct, "settings_title") local brightness = menu.content:Slider { w = lvgl.PCT(100), @@ -218,9 +220,9 @@ end function settings.input() local menu = SettingsScreen("Input Method") - menu.content:Label { + theme.set_style(menu.content:Label { text = "Control scheme", - }:add_style(styles.settings_title) + }, "settings_title") local schemes = controls.schemes() local option_to_scheme = {} @@ -256,9 +258,9 @@ function settings.input() controls.scheme:set(scheme) end) - menu.content:Label { + theme.set_style(menu.content:Label { text = "Scroll Sensitivity", - }:add_style(styles.settings_title) + }, "settings_title") local slider_scale = 4; -- Power steering local sensitivity = menu.content:Slider { @@ -321,7 +323,11 @@ function settings.root() } local function section(name) - menu.list:add_text(name):add_style(styles.list_heading) + local elem = menu.list:Label { + text = name, + pad_left = 4, + } + theme.set_style(elem, "settings_title") end local function submenu(name, fn) diff --git a/lua/styles.lua b/lua/styles.lua index 76ecad2a..fd45263e 100644 --- a/lua/styles.lua +++ b/lua/styles.lua @@ -13,11 +13,6 @@ local styles = { text_font = font.fusion_10, text_align = lvgl.ALIGN.CENTER, }, - settings_title = lvgl.Style { - pad_top = 2, - pad_bottom = 4, - text_font = font.fusion_10, - } } return styles diff --git a/lua/theme_dark.lua b/lua/theme_dark.lua index 5c91ea1e..e5082ff1 100644 --- a/lua/theme_dark.lua +++ b/lua/theme_dark.lua @@ -1,9 +1,9 @@ local lvgl = require("lvgl") local font = require("font") -local background_color = "#242933" +local background_color = "#1c1c1c" local background_muted = "#353c4b" -local text_color = "#fefefe" +local text_color = "#eeeeee" local highlight_color = "#ff0077" local theme_dark = { @@ -11,13 +11,13 @@ local theme_dark = { {lvgl.PART.MAIN, lvgl.Style { bg_opa = lvgl.OPA(0), text_font = font.fusion_12, - text_color = text_color, }}, }, root = { {lvgl.PART.MAIN, lvgl.Style { bg_opa = lvgl.OPA(100), bg_color = background_color, -- Root background color + text_color = text_color }}, }, header = { @@ -121,7 +121,18 @@ local theme_dark = { bg_opa = lvgl.OPA(100), bg_color = background_color }}, - } + {lvgl.PART.SELECTED | lvgl.STATE.CHECKED, lvgl.Style { + bg_color = highlight_color, + }}, + }, + settings_title = { + {lvgl.PART.MAIN, lvgl.Style { + pad_top = 2, + pad_bottom = 4, + text_font = font.fusion_10, + text_color = highlight_color, + }}, + }, } return theme_dark diff --git a/lua/theme_light.lua b/lua/theme_light.lua index 637861d9..82abd368 100644 --- a/lua/theme_light.lua +++ b/lua/theme_light.lua @@ -1,28 +1,29 @@ local lvgl = require("lvgl") local font = require("font") -local background_color = "#FFFFFF" -local background_muted = "#FFFFFF" +local background_color = "#ffffff" +local background_muted = "#fafafa" local text_color = "#000000" -local highlight_color = "#E3F2FD" +local highlight_color = "#CE93D8" local theme_light = { base = { {lvgl.PART.MAIN, lvgl.Style { bg_opa = lvgl.OPA(0), - bg_color = background_color, -- Root background color text_font = font.fusion_12, - text_color = text_color, - }}, - {lvgl.STATE.FOCUSED, lvgl.Style { - bg_opa = lvgl.OPA(100), - bg_color = highlight_color, }}, }, root = { {lvgl.PART.MAIN, lvgl.Style { bg_opa = lvgl.OPA(100), bg_color = background_color, -- Root background color + text_color = text_color + }}, + }, + header = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = background_muted, }}, }, button = { @@ -34,6 +35,16 @@ local theme_light = { bg_color = background_color, radius = 5, }}, + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = highlight_color, + }}, + }, + listbutton = { + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = highlight_color, + }}, }, bar = { {lvgl.PART.MAIN, lvgl.Style { @@ -44,6 +55,7 @@ local theme_light = { slider = { {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 { @@ -57,7 +69,13 @@ local theme_light = { shadow_width = 5, shadow_opa = lvgl.OPA(100) }}, - {lvgl.STATE.FOCUSED, lvgl.Style { + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + bg_color = background_muted, + }}, + {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style { + bg_color = highlight_color, + }}, + {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style { bg_color = highlight_color, }}, }, @@ -65,21 +83,24 @@ local theme_light = { {lvgl.PART.MAIN, lvgl.Style { bg_opa = lvgl.OPA(100), width = 28, - height = 18, + height = 8, radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff }}, {lvgl.PART.INDICATOR, lvgl.Style { radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff bg_color = background_muted, }}, - {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style { + {lvgl.PART.MAIN | lvgl.STATE.CHECKED, lvgl.Style { bg_color = highlight_color, }}, {lvgl.PART.KNOB, lvgl.Style { radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff pad_all = 2, bg_opa = lvgl.OPA(100), - bg_color = background_color, + bg_color = background_muted, + }}, + {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style { + bg_color = highlight_color, }}, }, dropdown = { @@ -87,20 +108,35 @@ local theme_light = { radius = 2, pad_all = 2, border_width = 1, - border_color = "#2196F3", + border_color = background_muted, border_side = 15, -- LV_BORDER_SIDE_FULL - }} + bg_color = background_color, + }}, + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + border_color = highlight_color, + }}, }, dropdownlist = { {lvgl.PART.MAIN, lvgl.Style{ radius = 2, pad_all = 2, border_width = 1, - border_color = "#607D8B", + border_color = highlight_color, bg_opa = lvgl.OPA(100), bg_color = background_color - }} - } + }}, + {lvgl.PART.SELECTED | lvgl.STATE.CHECKED, lvgl.Style { + bg_color = highlight_color, + }}, + }, + settings_title = { + {lvgl.PART.MAIN, lvgl.Style { + pad_top = 2, + pad_bottom = 4, + text_font = font.fusion_10, + text_color = highlight_color, + }}, + }, } return theme_light -- cgit v1.2.3 From 170c23b832eed6dad2b118e50164464cc93e5c4c Mon Sep 17 00:00:00 2001 From: ailurux Date: Wed, 20 Mar 2024 11:47:58 +1100 Subject: Fairyfloss dark theme palette test --- lua/main.lua | 4 ++-- lua/theme_dark.lua | 26 ++++++++++++++++---------- 2 files changed, 18 insertions(+), 12 deletions(-) (limited to 'lua') diff --git a/lua/main.lua b/lua/main.lua index f7dfb2c9..291f524e 100644 --- a/lua/main.lua +++ b/lua/main.lua @@ -35,8 +35,8 @@ GLOBAL_BINDINGS = { end), } -local theme_light = require("theme_light") -theme.set(theme_light) +local theme_dark = require("theme_dark") +theme.set(theme_dark) local backstack = require("backstack") local main_menu = require("main_menu") diff --git a/lua/theme_dark.lua b/lua/theme_dark.lua index e5082ff1..21cfe76c 100644 --- a/lua/theme_dark.lua +++ b/lua/theme_dark.lua @@ -1,10 +1,10 @@ local lvgl = require("lvgl") local font = require("font") -local background_color = "#1c1c1c" -local background_muted = "#353c4b" +local background_color = "#5a5474" +local background_muted = "#464258" local text_color = "#eeeeee" -local highlight_color = "#ff0077" +local highlight_color = "#9773d3" local theme_dark = { base = { @@ -65,7 +65,7 @@ local theme_dark = { {lvgl.PART.KNOB, lvgl.Style { radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff pad_all = 2, - bg_color = background_color, + bg_color = background_muted, shadow_width = 5, shadow_opa = lvgl.OPA(100) }}, @@ -75,16 +75,18 @@ local theme_dark = { {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style { bg_color = highlight_color, }}, + {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style { + bg_color = highlight_color, + }}, }, switch = { {lvgl.PART.MAIN, lvgl.Style { bg_opa = lvgl.OPA(100), width = 28, - height = 12, + height = 8, radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff - }}, - {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { bg_color = background_muted, + border_color = highlight_color, }}, {lvgl.PART.INDICATOR, lvgl.Style { radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff @@ -97,7 +99,10 @@ local theme_dark = { radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff pad_all = 2, bg_opa = lvgl.OPA(100), - bg_color = text_color, + bg_color = background_muted, + }}, + {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style { + bg_color = highlight_color, }}, }, dropdown = { @@ -105,8 +110,9 @@ local theme_dark = { radius = 2, pad_all = 2, border_width = 1, - border_color = text_color, + border_color = background_muted, border_side = 15, -- LV_BORDER_SIDE_FULL + bg_color = background_color, }}, {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { border_color = highlight_color, @@ -117,7 +123,7 @@ local theme_dark = { radius = 2, pad_all = 2, border_width = 1, - border_color = text_color, + border_color = highlight_color, bg_opa = lvgl.OPA(100), bg_color = background_color }}, -- cgit v1.2.3 From 4293c488364171b4abf5d1dccac1a1fb55a42a31 Mon Sep 17 00:00:00 2001 From: ailurux Date: Wed, 20 Mar 2024 14:08:11 +1100 Subject: Fix bad merge --- lua/main.lua | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'lua') diff --git a/lua/main.lua b/lua/main.lua index d84e2417..1a605dab 100644 --- a/lua/main.lua +++ b/lua/main.lua @@ -1,9 +1,14 @@ local font = require("font") local vol = require("volume") local theme = require("theme") +local controls = require("controls") +local time = require("time") + +local lock_time = time.ticks() -- Set up property bindings that are used across every screen. GLOBAL_BINDINGS = { + -- Show an alert with the current volume whenever the volume changes vol.current_pct:bind(function(pct) require("alerts").show(function() local container = lvgl.Object(nil, { -- cgit v1.2.3 From f29d31d01c26ee0cb175e44ac4096e5904c282cd Mon Sep 17 00:00:00 2001 From: ailurux Date: Wed, 20 Mar 2024 15:30:32 +1100 Subject: Image recolouring for database indicator --- lua/img/db.png | Bin 4557 -> 5361 bytes lua/theme_dark.lua | 10 ++++++++++ lua/widgets.lua | 2 ++ 3 files changed, 12 insertions(+) (limited to 'lua') diff --git a/lua/img/db.png b/lua/img/db.png index 3952ded2..6245fab2 100644 Binary files a/lua/img/db.png and b/lua/img/db.png differ diff --git a/lua/theme_dark.lua b/lua/theme_dark.lua index 21cfe76c..8c1da65c 100644 --- a/lua/theme_dark.lua +++ b/lua/theme_dark.lua @@ -17,6 +17,8 @@ local theme_dark = { {lvgl.PART.MAIN, lvgl.Style { bg_opa = lvgl.OPA(100), bg_color = background_color, -- Root background color + bg_grad_dir = 1, + bg_grad_color = "#1d0e38", text_color = text_color }}, }, @@ -33,11 +35,13 @@ local theme_dark = { pad_top = 1, pad_bottom = 1, bg_color = background_color, + img_opa = 180, radius = 5, }}, {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { bg_opa = lvgl.OPA(100), bg_color = highlight_color, + img_opa = 255, }}, }, listbutton = { @@ -131,6 +135,12 @@ local theme_dark = { bg_color = highlight_color, }}, }, + database_indicator = { + {lvgl.PART.MAIN, lvgl.Style { + img_recolor_opa = 180, + img_recolor = highlight_color, + }}, + }, settings_title = { {lvgl.PART.MAIN, lvgl.Style { pad_top = 2, diff --git a/lua/widgets.lua b/lua/widgets.lua index 15212ded..b9588edb 100644 --- a/lua/widgets.lua +++ b/lua/widgets.lua @@ -94,6 +94,8 @@ function widgets.StatusBar(parent, opts) status_bar.db_updating = status_bar.root:Image { src = "//lua/img/db.png" } + theme.set_style(status_bar.db_updating, "database_indicator") + status_bar.bluetooth = status_bar.root:Image {} status_bar.battery = status_bar.root:Image {} status_bar.chg = status_bar.battery:Image { -- cgit v1.2.3 From 489fbceb2b5a623ea502ab647f023d2e2e566121 Mon Sep 17 00:00:00 2001 From: ailurux Date: Wed, 27 Mar 2024 16:07:22 +1100 Subject: Update icons and volume dialogue to use themes --- lua/img/enqueue.png | Bin 590 -> 4782 bytes lua/img/next.png | Bin 621 -> 4811 bytes lua/img/next_disabled.png | Bin 1539 -> 0 bytes lua/img/pause.png | Bin 581 -> 4771 bytes lua/img/play.png | Bin 617 -> 4813 bytes lua/img/play_small.png | Bin 593 -> 4780 bytes lua/img/prev.png | Bin 626 -> 4810 bytes lua/img/prev_disabled.png | Bin 1533 -> 0 bytes lua/img/repeat.png | Bin 4786 -> 5023 bytes lua/img/repeat_disabled.png | Bin 7287 -> 0 bytes lua/img/shuffle.png | Bin 4809 -> 5055 bytes lua/img/shuffle_disabled.png | Bin 8706 -> 0 bytes lua/main.lua | 9 ++++----- lua/playing.lua | 43 +++++++++++++++++++++---------------------- lua/theme_dark.lua | 26 ++++++++++++++++++++++++-- lua/theme_light.lua | 38 +++++++++++++++++++++++++++++++++++--- 16 files changed, 84 insertions(+), 32 deletions(-) delete mode 100644 lua/img/next_disabled.png delete mode 100644 lua/img/prev_disabled.png delete mode 100644 lua/img/repeat_disabled.png delete mode 100644 lua/img/shuffle_disabled.png (limited to 'lua') diff --git a/lua/img/enqueue.png b/lua/img/enqueue.png index 9f720969..b5136a77 100644 Binary files a/lua/img/enqueue.png and b/lua/img/enqueue.png differ diff --git a/lua/img/next.png b/lua/img/next.png index 1b22a509..1f6f044b 100644 Binary files a/lua/img/next.png and b/lua/img/next.png differ diff --git a/lua/img/next_disabled.png b/lua/img/next_disabled.png deleted file mode 100644 index c8ff06b2..00000000 Binary files a/lua/img/next_disabled.png and /dev/null differ diff --git a/lua/img/pause.png b/lua/img/pause.png index 29fa4b90..e7011821 100644 Binary files a/lua/img/pause.png and b/lua/img/pause.png differ diff --git a/lua/img/play.png b/lua/img/play.png index cc10cab5..a3b8a5af 100644 Binary files a/lua/img/play.png and b/lua/img/play.png differ diff --git a/lua/img/play_small.png b/lua/img/play_small.png index 3fc7032e..ac29aa98 100644 Binary files a/lua/img/play_small.png and b/lua/img/play_small.png differ diff --git a/lua/img/prev.png b/lua/img/prev.png index f17e6162..b445c75a 100644 Binary files a/lua/img/prev.png and b/lua/img/prev.png differ diff --git a/lua/img/prev_disabled.png b/lua/img/prev_disabled.png deleted file mode 100644 index accebe23..00000000 Binary files a/lua/img/prev_disabled.png and /dev/null differ diff --git a/lua/img/repeat.png b/lua/img/repeat.png index 9a4da7fd..40a7564e 100644 Binary files a/lua/img/repeat.png and b/lua/img/repeat.png differ diff --git a/lua/img/repeat_disabled.png b/lua/img/repeat_disabled.png deleted file mode 100644 index 20b6ab59..00000000 Binary files a/lua/img/repeat_disabled.png and /dev/null differ diff --git a/lua/img/shuffle.png b/lua/img/shuffle.png index b54e359d..4a65635b 100644 Binary files a/lua/img/shuffle.png and b/lua/img/shuffle.png differ diff --git a/lua/img/shuffle_disabled.png b/lua/img/shuffle_disabled.png deleted file mode 100644 index 912d0e95..00000000 Binary files a/lua/img/shuffle_disabled.png and /dev/null differ diff --git a/lua/main.lua b/lua/main.lua index 1a605dab..dc73c964 100644 --- a/lua/main.lua +++ b/lua/main.lua @@ -6,6 +6,9 @@ local time = require("time") local lock_time = time.ticks() +local theme_dark = require("theme_dark") +theme.set(theme_dark) + -- Set up property bindings that are used across every screen. GLOBAL_BINDINGS = { -- Show an alert with the current volume whenever the volume changes @@ -20,11 +23,10 @@ GLOBAL_BINDINGS = { align_items = "center", align_content = "center", }, - bg_opa = lvgl.OPA(100), - bg_color = "#fafafa", radius = 8, pad_all = 2, }) + theme.set_style(container, "pop_up") container:Label { text = string.format("Volume %i%%", pct), text_font = font.fusion_10 @@ -52,9 +54,6 @@ GLOBAL_BINDINGS = { end), } -local theme_dark = require("theme_dark") -theme.set(theme_dark) - local backstack = require("backstack") local main_menu = require("main_menu") diff --git a/lua/playing.lua b/lua/playing.lua index 947bdec9..a1ba2cc1 100644 --- a/lua/playing.lua +++ b/lua/playing.lua @@ -5,22 +5,22 @@ local font = require("font") local playback = require("playback") local queue = require("queue") local screen = require("screen") +local theme = require("theme") local img = { play = "//lua/img/play.png", pause = "//lua/img/pause.png", next = "//lua/img/next.png", - next_disabled = "//lua/img/next_disabled.png", prev = "//lua/img/prev.png", - prev_disabled = "//lua/img/prev_disabled.png", shuffle = "//lua/img/shuffle.png", - shuffle_disabled = "//lua/img/shuffle_disabled.png", - repeat_enabled = "//lua/img/repeat.png", - repeat_disabled = "//lua/img/repeat_disabled.png", + repeat_src = "//lua/img/repeat.png", -- repeat is a reserved word } local is_now_playing_shown = false +local icon_enabled_class = "icon_enabled" +local icon_disabled_class = "icon_disabled" + return screen:new { createUi = function(self) self.root = lvgl.Object(nil, { @@ -146,11 +146,14 @@ return screen:new { repeat_btn:onClicked(function() queue.repeat_track:set(not queue.repeat_track:get()) end) - local repeat_img = repeat_btn:Image { src = img.repeat_enabled } + local repeat_img = repeat_btn:Image { src = img.repeat_src } + theme.set_style(repeat_img, icon_enabled_class) + local prev_btn = controls:Button {} prev_btn:onClicked(queue.previous) - local prev_img = prev_btn:Image { src = img.prev_disabled } + local prev_img = prev_btn:Image { src = img.prev } + theme.set_style(prev_img, icon_disabled_class) local play_pause_btn = controls:Button {} play_pause_btn:onClicked(function() @@ -158,16 +161,19 @@ return screen:new { end) play_pause_btn:focus() local play_pause_img = play_pause_btn:Image { src = img.pause } + theme.set_style(play_pause_img, icon_enabled_class) local next_btn = controls:Button {} next_btn:onClicked(queue.next) - local next_img = next_btn:Image { src = img.next_disabled } + local next_img = next_btn:Image { src = img.next } + theme.set_style(next_img, icon_disabled_class) local shuffle_btn = controls:Button {} shuffle_btn:onClicked(function() queue.random:set(not queue.random:get()) end) local shuffle_img = shuffle_btn:Image { src = img.shuffle } + theme.set_style(shuffle_img, icon_enabled_class) controls:Object({ flex_grow = 1, h = 1 }) -- spacer @@ -208,26 +214,19 @@ return screen:new { if not pos then return end playlist_pos:set { text = tostring(pos) } - next_img:set_src( - pos < queue.size:get() and img.next or img.next_disabled + theme.set_style( + next_img, pos < queue.size:get() and icon_enabled_class or icon_disabled_class ) - prev_img:set_src( - pos > 1 and img.prev or img.prev_disabled + + theme.set_style( + prev_img, pos > 1 and icon_enabled_class or icon_disabled_class ) end), queue.random:bind(function(shuffling) - if shuffling then - shuffle_img:set_src(img.shuffle) - else - shuffle_img:set_src(img.shuffle_disabled) - end + theme.set_style(shuffle_img, shuffling and icon_enabled_class or icon_disabled_class) end), queue.repeat_track:bind(function(en) - if en then - repeat_img:set_src(img.repeat_enabled) - else - repeat_img:set_src(img.repeat_disabled) - end + theme.set_style(repeat_img, en and icon_enabled_class or icon_disabled_class) end), queue.size:bind(function(num) if not num then return end diff --git a/lua/theme_dark.lua b/lua/theme_dark.lua index 8c1da65c..be5feeaa 100644 --- a/lua/theme_dark.lua +++ b/lua/theme_dark.lua @@ -5,6 +5,8 @@ local background_color = "#5a5474" local background_muted = "#464258" local text_color = "#eeeeee" local highlight_color = "#9773d3" +local icon_enabled_color = "#eeeeee" +local icon_disabled_color = "#6d6d69" local theme_dark = { base = { @@ -28,6 +30,12 @@ local theme_dark = { bg_color = background_muted, }}, }, + pop_up = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = background_muted, + }}, + }, button = { {lvgl.PART.MAIN, lvgl.Style { pad_left = 2, @@ -35,13 +43,14 @@ local theme_dark = { pad_top = 1, pad_bottom = 1, bg_color = background_color, - img_opa = 180, + img_recolor_opa = 180, + img_recolor = highlight_color, radius = 5, }}, {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { bg_opa = lvgl.OPA(100), bg_color = highlight_color, - img_opa = 255, + img_recolor_opa = 0, }}, }, listbutton = { @@ -149,6 +158,19 @@ local theme_dark = { text_color = highlight_color, }}, }, + icon_disabled = { + {lvgl.PART.MAIN, lvgl.Style { + img_recolor_opa = 180, + img_recolor = icon_disabled_color, + }}, + }, + icon_enabled = { + {lvgl.PART.MAIN, lvgl.Style { + img_recolor_opa = 180, + img_recolor = icon_enabled_color, + }}, + }, + } return theme_dark diff --git a/lua/theme_light.lua b/lua/theme_light.lua index 82abd368..e0a4468f 100644 --- a/lua/theme_light.lua +++ b/lua/theme_light.lua @@ -4,7 +4,9 @@ local font = require("font") local background_color = "#ffffff" local background_muted = "#fafafa" local text_color = "#000000" -local highlight_color = "#CE93D8" +local highlight_color = "#ce93d8" +local icon_enabled_color = "#2c2c2c" +local icon_disabled_color = "#999999" local theme_light = { base = { @@ -26,6 +28,12 @@ local theme_light = { bg_color = background_muted, }}, }, + pop_up = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = background_muted, + }}, + }, button = { {lvgl.PART.MAIN, lvgl.Style { pad_left = 2, @@ -33,11 +41,14 @@ local theme_light = { pad_top = 1, pad_bottom = 1, bg_color = background_color, + img_recolor_opa = 180, + img_recolor = highlight_color, radius = 5, }}, {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { bg_opa = lvgl.OPA(100), bg_color = highlight_color, + img_recolor_opa = 0, }}, }, listbutton = { @@ -65,7 +76,7 @@ local theme_light = { {lvgl.PART.KNOB, lvgl.Style { radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff pad_all = 2, - bg_color = background_color, + bg_color = background_muted, shadow_width = 5, shadow_opa = lvgl.OPA(100) }}, @@ -85,12 +96,14 @@ local theme_light = { width = 28, height = 8, radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + bg_color = background_muted, + border_color = highlight_color, }}, {lvgl.PART.INDICATOR, lvgl.Style { radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff bg_color = background_muted, }}, - {lvgl.PART.MAIN | lvgl.STATE.CHECKED, lvgl.Style { + {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style { bg_color = highlight_color, }}, {lvgl.PART.KNOB, lvgl.Style { @@ -129,6 +142,12 @@ local theme_light = { bg_color = highlight_color, }}, }, + database_indicator = { + {lvgl.PART.MAIN, lvgl.Style { + img_recolor_opa = 180, + img_recolor = highlight_color, + }}, + }, settings_title = { {lvgl.PART.MAIN, lvgl.Style { pad_top = 2, @@ -137,6 +156,19 @@ local theme_light = { text_color = highlight_color, }}, }, + icon_disabled = { + {lvgl.PART.MAIN, lvgl.Style { + img_recolor_opa = 180, + img_recolor = icon_disabled_color, + }}, + }, + icon_enabled = { + {lvgl.PART.MAIN, lvgl.Style { + img_recolor_opa = 180, + img_recolor = icon_enabled_color, + }}, + }, + } return theme_light -- cgit v1.2.3 From bf58cb7acf402420158f3ac2530f62ddc3057914 Mon Sep 17 00:00:00 2001 From: ailurux Date: Wed, 27 Mar 2024 16:11:36 +1100 Subject: Minor fixes --- lua/browser.lua | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lua') diff --git a/lua/browser.lua b/lua/browser.lua index fa412021..924381ea 100644 --- a/lua/browser.lua +++ b/lua/browser.lua @@ -43,7 +43,7 @@ return screen:new { pad_right = 4, pad_bottom = 2, bg_opa = lvgl.OPA(100), - scrollbar_mode = lvgl.SCROLLBAR_MODE.OFF, + scrollbar_mode = lvgl.SCROLLBAR_MODE.OFF, } theme.set_style(header, "header") -- cgit v1.2.3