parent_color attrib to fix app icons

This commit is contained in:
galister 2026-07-13 04:50:22 +09:00
parent f3438b1867
commit 962ed32452
10 changed files with 100 additions and 60 deletions

View File

@ -8,7 +8,7 @@
flex_direction="column" overflow="visible" align_items="center" justify_content="center" gap="4"
>
<div>
<sprite src="${src}" src_ext="${src_ext}" width="64" height="64" color="#FFFFFF" />
<sprite src="${src}" src_ext="${src_ext}" width="64" height="64" color="#FFFFFF" parent_color="ignore" />
</div>
<div align_items="center" justify_content="center">
<label width="116" weight="bold" text="${name}" size="12" wrap="1" align="center" padding_left="16" padding_right="16" />

View File

@ -88,6 +88,7 @@ pub fn create_icon(layout: &mut Layout, id_parent: WidgetID, size: Vec2, path: A
let widget_sprite = WidgetSprite::create(WidgetSpriteParams {
color: Some(WguiColorName::OnBackground.into()),
glyph_data: Some(CustomGlyphData::from_assets(&layout.state.globals, path)?),
..Default::default()
});
let size = taffy::Size {

View File

@ -113,7 +113,7 @@
<!-- An app with a single icon. -->
<template name="App">
<Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _context_name="${name}" _press_left="::ContextMenuOpen menu_app" _press_right="::OverlayToggle ${name}">
<sprite width="38" height="38" color="on_background" src_ext="${icon}" />
<sprite width="38" height="38" src_ext="${icon}" />
</Button>
</template>
@ -128,9 +128,9 @@
<!-- A screen with a shortened connector name, e.g. "H1" for HDMI-A-1 or "D2" for DP-2 -->
<template name="Screen">
<Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _context_name="${name}" _press_left="::ContextMenuOpen menu_screen" _press_right="::OverlayToggle ${name}">
<sprite width="38" height="38" color="on_background_variant" src_builtin="edit/screen.svg" />
<sprite width="38" height="38" src_builtin="edit/screen.svg" />
<div position="absolute" margin_top="-7" margin_left="-1">
<label text="${display}" size="~text_size" color="primary" weight="bold" use_bg_color="1" />
<label text="${display}" size="~text_size" weight="bold" parent_color="background" />
</div>
</Button>
</template>
@ -146,7 +146,7 @@
<template name="Panel">
<Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _context_name="${name}" _press_left="::ContextMenuOpen menu_panel" _press_right="::OverlayToggle ${name}">
<sprite width="38" height="38" color="on_background_variant" src="${icon}" />
<sprite width="38" height="38" src="${icon}" />
</Button>
</template>
@ -161,9 +161,9 @@
<template name="Mirror">
<Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _context_name="${name}" _press_left="::ContextMenuOpen menu_mirror" _press_right="::OverlayToggle ${name}">
<sprite width="38" height="38" color="on_background_variant" src_builtin="edit/mirror.svg" />
<sprite width="38" height="38" src_builtin="edit/mirror.svg" />
<div position="absolute" margin_top="5" margin_left="13">
<label text="${display}" size="20" color="primary" weight="bold" use_bg_color="1" />
<label text="${display}" size="20" weight="bold" parent_color="background" />
</div>
</Button>
</template>
@ -190,9 +190,9 @@
<template name="Set">
<Button macro="button_style" id="set_${idx}" _press="::SetSwitch ${idx}" tooltip="WATCH.SWITCH_TO_SET" tooltip_side="bottom">
<sprite width="38" height="38" color="on_background_variant" src_builtin="watch/set2.svg" />
<sprite width="38" height="38" src_builtin="watch/set2.svg" />
<div position="absolute" margin_top="10" margin_left="-7">
<label text="${display}" size="20" color="primary" weight="bold" use_bg_color="1" />
<label text="${display}" size="20" weight="bold" parent_color="background" />
</div>
</Button>
</template>
@ -210,7 +210,7 @@
<rectangle macro="bg_rect" padding="10" align_items="center" justify_content="space_between">
<div gap="10">
<Button macro="button_style" id="btn_dashboard" _press="::DashToggle">
<sprite width="38" height="38" color="on_background_variant" src="watch/wayvr_dashboard_mono.svg" />
<sprite width="38" height="38" src="watch/wayvr_dashboard_mono.svg" />
</Button>
<VerticalSeparator />
<div id="panels_root" gap="6">
@ -221,7 +221,7 @@
</div>
<div id="tray_root" flex_direction="row" gap="10">
<Button macro="button_style" _press="::ContextMenuOpen menu_burger">
<sprite width="38" height="38" color="on_background_variant" src_builtin="keyboard/burger.svg" />
<sprite width="38" height="38" src_builtin="keyboard/burger.svg" />
</Button>
<VerticalSeparator />

View File

@ -36,36 +36,36 @@
<template name="Screen">
<Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
<sprite width="38" height="38" color="on_background" src_builtin="edit/screen.svg" />
<sprite width="38" height="38" src_builtin="edit/screen.svg" />
<div position="absolute" margin_top="-7" margin_left="-1">
<label text="${display}" size="18" color="primary" weight="bold" use_bg_color="1" />
<label text="${display}" size="18" weight="bold" parent_color="background" />
</div>
</Button>
</template>
<template name="Panel">
<Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
<sprite width="38" height="38" color="on_background" src_builtin="edit/panel.svg" />
<sprite width="38" height="38" src_builtin="edit/panel.svg" />
</Button>
</template>
<template name="Mirror">
<Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
<sprite width="38" height="38" color="on_background" src_builtin="edit/mirror.svg" />
<sprite width="38" height="38" src_builtin="edit/mirror.svg" />
<div position="absolute" margin_top="5" margin_left="13">
<label text="${display}" size="20" color="primary" weight="bold" use_bg_color="1" />
<label text="${display}" size="20" weight="bold" parent_color="background" />
</div>
</Button>
</template>
<template name="App">
<Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
<sprite width="38" height="38" color="on_background" src_ext="${icon}" />
<sprite width="38" height="38" src_ext="${icon}" />
</Button>
</template>
<template name="Set">
<Button macro="button_style" id="set_${idx}" _press="::SetToggle ${idx}" tooltip="WATCH.SWITCH_TO_SET" tooltip_side="top">
<sprite width="38" height="38" color="on_background" src_builtin="watch/set2.svg" />
<sprite width="38" height="38" src_builtin="watch/set2.svg" />
<div position="absolute" margin_top="9">
<label text="${display}" size="24" color="primary" weight="bold" use_bg_color="1" />
<label text="${display}" size="24" weight="bold" parent_color="background" />
</div>
</Button>
</template>
@ -124,18 +124,18 @@
<div flex_direction="column" gap="8">
<div gap="8">
<Button id="btn_keyboard" macro="button_style" _press="::OverlayToggle kbd" tooltip="EDIT_MODE.KEYBOARD" tooltip_side="left">
<sprite src_builtin="watch/keyboard.svg" color="on_background" width="40" height="40" />
<sprite src_builtin="watch/keyboard.svg" width="40" height="40" />
</Button>
<Button id="btn_edit_mode" macro="button_style" _press="::EditToggle" tooltip="WATCH.EDIT_MODE" tooltip_side="left">
<sprite color="on_background" width="40" height="40" src="watch/edit.svg" />
<sprite width="40" height="40" src="watch/edit.svg" />
</Button>
</div>
<div gap="8">
<Button macro="button_style" _press="::PlayspaceRecenter" tooltip="WATCH.RECENTER" tooltip_side="left">
<sprite width="40" height="40" color="on_background" src="watch/recenter.svg" />
<sprite width="40" height="40" src="watch/recenter.svg" />
</Button>
<Button macro="button_style" _press="::PlayspaceFixFloor" tooltip="WATCH.FIX_FLOOR" tooltip_side="left">
<sprite width="40" height="40" color="on_background" src="watch/fix-floor.svg" />
<sprite width="40" height="40" src="watch/fix-floor.svg" />
</Button>
</div>
</div>
@ -145,7 +145,7 @@
<div flex_direction="row" gap="8">
<div gap="4">
<Button id="btn_dashboard" macro="button_style" _press="::DashToggle" tooltip="WATCH.DASHBOARD" tooltip_side="top">
<sprite color="on_background" width="40" height="40" src="watch/wayvr_dashboard_mono.svg" />
<sprite width="40" height="40" src="watch/wayvr_dashboard_mono.svg" />
</Button>
</div>
<VerticalSeparator />

View File

@ -34,6 +34,15 @@ pub struct WguiNamedColor {
alpha: f32,
}
#[derive(Default, Clone, Copy, Debug, EnumString)]
#[strum(ascii_case_insensitive, serialize_all = "snake_case")]
pub enum ParentColor {
#[default]
Foreground,
Background,
Ignore,
}
#[derive(Clone, Copy, Debug)]
pub enum WguiColor {
Raw(drawing::Color),

View File

@ -1,7 +1,7 @@
use crate::{
animation::{Animation, AnimationEasing},
assets::AssetPath,
color::{WguiColor, WguiColorName},
color::{ParentColor, WguiColor, WguiColorName},
components::{
self, Component, ComponentBase, ComponentTrait, RefreshData,
tooltip::{ComponentTooltip, TooltipTrait},
@ -149,29 +149,24 @@ impl ComponentTrait for ComponentButton {
log::error!("Button with more than one sprite!");
}
// apply initial color from button
if let Some(fg_color) = state.colors.color.fg_color() {
if let Some(apply_color) = color_to_apply(widget.parent_color(), state.colors.color) {
let common = &mut CallbackDataCommon {
state: &data.layout.state,
alterables: &mut data.layout.alterables,
};
widget.set_color(common, fg_color);
widget.set_color(common, apply_color);
}
state.id_sprite = child;
} else if let Some(mut widget) = data.layout.state.widgets.get_as::<WidgetLabel>(child) {
if !state.id_label.is_null() && state.id_label != child {
log::error!("Button with more than one label!");
}
if let Some(fg_color) = state.colors.color.fg_color() {
if let Some(apply_color) = color_to_apply(widget.parent_color(), state.colors.color) {
let common = &mut CallbackDataCommon {
state: &data.layout.state,
alterables: &mut data.layout.alterables,
};
let label_color = if widget.uses_bg_color() {
state.colors.color
} else {
fg_color
};
widget.set_color(common, label_color, true);
widget.set_color(common, apply_color, true);
}
state.id_label = child;
}
@ -221,14 +216,15 @@ impl ComponentButton {
let mut state = self.state.borrow_mut();
state.colors.color = color;
if let Some(fg_color) = color.fg_color() {
if let Some(mut label) = common.state.widgets.get_as::<WidgetLabel>(state.id_label) {
let label_color = if label.uses_bg_color() { color } else { fg_color };
label.set_color(common, label_color, true);
}
if let Some(mut sprite) = common.state.widgets.get_as::<WidgetSprite>(state.id_sprite) {
sprite.set_color(common, fg_color);
}
if let Some(mut label) = common.state.widgets.get_as::<WidgetLabel>(state.id_label)
&& let Some(apply_color) = color_to_apply(label.parent_color(), color)
{
label.set_color(common, apply_color, true);
}
if let Some(mut sprite) = common.state.widgets.get_as::<WidgetSprite>(state.id_sprite)
&& let Some(apply_color) = color_to_apply(sprite.parent_color(), color)
{
sprite.set_color(common, apply_color);
}
}
@ -297,12 +293,16 @@ impl ComponentButton {
&& let Some(fg_color1) = alt_color.fg_color()
{
let fg_color = fg_color0.lerp(&common.globals().palette, &fg_color1, mult);
if let Some(mut label) = common.state.widgets.get_as::<WidgetLabel>(state.id_label) {
let label_color = if label.uses_bg_color() { bg_color } else { fg_color };
label.set_color(common, label_color, true);
if let Some(mut label) = common.state.widgets.get_as::<WidgetLabel>(state.id_label)
&& let Some(apply) = color_to_apply2(label.parent_color(), bg_color, fg_color)
{
label.set_color(common, apply, true);
}
if let Some(mut sprite) = common.state.widgets.get_as::<WidgetSprite>(state.id_sprite) {
sprite.set_color(common, fg_color);
if let Some(mut sprite) = common.state.widgets.get_as::<WidgetSprite>(state.id_sprite)
&& let Some(apply) = color_to_apply2(sprite.parent_color(), bg_color, fg_color)
{
sprite.set_color(common, apply);
}
}
}
@ -334,19 +334,22 @@ fn anim_hover(
} else {
(colors.border_color, colors.color)
};
let bg_color = init_color.lerp(&common.globals().palette, &colors.hover_color, mult);
if let Some(fg_color0) = init_color.fg_color()
&& let Some(fg_color1) = colors.hover_color.fg_color()
{
let fg_color = fg_color0.lerp(&common.globals().palette, &fg_color1, mult);
if let Some(mut label) = common.state.widgets.get_as::<WidgetLabel>(label) {
let label_color = if label.uses_bg_color() { bg_color } else { fg_color };
label.set_color(common, label_color, true);
if let Some(mut label) = common.state.widgets.get_as::<WidgetLabel>(label)
&& let Some(apply) = color_to_apply2(label.parent_color(), bg_color, fg_color)
{
label.set_color(common, apply, true);
}
if let Some(mut sprite) = common.state.widgets.get_as::<WidgetSprite>(sprite) {
sprite.set_color(common, fg_color);
if let Some(mut sprite) = common.state.widgets.get_as::<WidgetSprite>(sprite)
&& let Some(apply) = color_to_apply2(sprite.parent_color(), bg_color, fg_color)
{
sprite.set_color(common, apply);
}
}
@ -606,6 +609,7 @@ pub fn construct(ess: &mut ConstructEssentials, params: Params) -> anyhow::Resul
let sprite = WidgetSprite::create(WidgetSpriteParams {
glyph_data: Some(CustomGlyphData::from_assets(&ess.layout.state.globals, sprite_path)?),
color: Some(params.sprite_color.unwrap_or(WguiColorName::OnBackground.into())),
..Default::default()
});
let (sprite_pair, _) = ess.layout.add_child(
@ -698,3 +702,19 @@ pub fn construct(ess: &mut ConstructEssentials, params: Params) -> anyhow::Resul
ess.layout.register_component_refresh(&Component(button.clone()));
Ok((root, button))
}
fn color_to_apply(parent_color: ParentColor, bg_color: WguiColor) -> Option<WguiColor> {
match parent_color {
ParentColor::Foreground => bg_color.fg_color(),
ParentColor::Background => Some(bg_color),
ParentColor::Ignore => None,
}
}
fn color_to_apply2(parent_color: ParentColor, bg_color: WguiColor, fg_color: WguiColor) -> Option<WguiColor> {
match parent_color {
ParentColor::Foreground => Some(fg_color),
ParentColor::Background => Some(bg_color),
ParentColor::Ignore => None,
}
}

View File

@ -1,4 +1,5 @@
use crate::{
color::ParentColor,
i18n::Translation,
layout::WidgetID,
parser::{
@ -39,8 +40,8 @@ pub fn parse_widget_label<'a>(
"translation" if !value.is_empty() => {
params.content = Translation::from_translation_key(value);
}
"use_bg_color" if !value.is_empty() => {
params.use_bg_color = true;
"parent_color" => {
params.parent_color = ParentColor::try_from(value).unwrap_or_default();
}
_ => {}
}

View File

@ -1,4 +1,5 @@
use crate::{
color::ParentColor,
layout::WidgetID,
parser::{
AttribPair, ParserContext, ParserFile, get_asset_path_from_kv, parse_children, parse_widget_universal,
@ -39,6 +40,9 @@ pub fn parse_widget_sprite<'a>(
"color" => {
parse_color_opt(ctx, tag_name, key, value, &mut params.color);
}
"parent_color" => {
params.parent_color = ParentColor::try_from(value).unwrap_or_default();
}
_ => {}
}
}

View File

@ -5,7 +5,7 @@ use slotmap::Key;
use taffy::AvailableSpace;
use crate::{
color::{WguiColor, WguiColorName},
color::{ParentColor, WguiColor, WguiColorName},
drawing::{self, PrimitiveExtent},
event::CallbackDataCommon,
globals::Globals,
@ -22,7 +22,7 @@ use super::{WidgetObj, WidgetState};
pub struct WidgetLabelParams {
pub content: Translation,
pub style: TextStyle,
pub use_bg_color: bool,
pub parent_color: ParentColor,
}
pub struct WidgetLabel {
@ -127,8 +127,8 @@ impl WidgetLabel {
}
}
pub fn uses_bg_color(&self) -> bool {
self.params.use_bg_color
pub fn parent_color(&self) -> ParentColor {
self.params.parent_color
}
}

View File

@ -4,7 +4,7 @@ use cosmic_text::{Attrs, Buffer, Color, Shaping, Weight};
use slotmap::Key;
use crate::{
color::WguiColor,
color::{ParentColor, WguiColor},
drawing::{self, PrimitiveExtent},
event::{CallbackDataCommon, EventAlterables},
globals::Globals,
@ -22,6 +22,7 @@ use super::{WidgetObj, WidgetState};
pub struct WidgetSpriteParams {
pub glyph_data: Option<CustomGlyphData>,
pub color: Option<WguiColor>,
pub parent_color: ParentColor,
}
#[derive(Debug, Default)]
@ -62,6 +63,10 @@ impl WidgetSprite {
pub fn get_content(&self) -> Option<CustomGlyphData> {
self.params.glyph_data.clone()
}
pub fn parent_color(&self) -> ParentColor {
self.params.parent_color
}
}
impl WidgetObj for WidgetSprite {