MightyPork/tangara-fw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP Lua Theming- style classes

Browse Source
This commit is contained in:
ailurux
2024-03-10 13:20:17 +11:00
parent 20c2816a7b
commit 1133d46215
10 changed files with 264 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lua/browser.lua
+3 -1
View File
@@ -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,
lua/main.lua
+2 -91
View File
@@ -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")
lua/theme_dark.lua
+127
View File
@@ -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
lua/theme_light.lua
+106
View File
@@ -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
lua/widgets.lua
+2 -4
View File
@@ -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