reugenio/zcatgui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(button): Micro-interacciones al pulsar botón

Browse source 
Acabado Espectacular mejora #5:
- Bisel invertido cuando pressed (oscuro arriba = "hundido")
- Texto desplazado +1px abajo/derecha cuando pressed
- Aplicado a buttonRect y buttonStatefulRect
- Botones se sienten "físicos" al pulsarlos

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
R.Eugenio 2025-12-30 15:38:02 +01:00
parent f0f9120da0
commit b5073dcbe3
1 changed files with 36 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/widgets/button.zig
View file

@ -105,22 +105,30 @@ pub fn buttonRect(ctx: *Context, bounds: Layout.Rect, text: []const u8, config:
ctx.pushCommand(Command.rectOutline(bounds.x, bounds.y, bounds.w, bounds.h, theme.border));
}
// Bisel 3D sutil: línea clara arriba, línea oscura abajo (inside)
// Bisel 3D sutil: invierte cuando está pulsado (micro-interacción)
if (bounds.h >= 4 and bounds.w >= 4 and !config.disabled) {
// Línea superior interna (highlight)
const bevel_light = bg_color.lighten(15);
ctx.pushCommand(Command.rect(bounds.x + 1, bounds.y + 1, bounds.w - 2, 1, bevel_light));
// Línea inferior interna (shadow)
const bevel_dark = bg_color.darken(15);
ctx.pushCommand(Command.rect(bounds.x + 1, bounds.y + @as(i32, @intCast(bounds.h)) - 2, bounds.w - 2, 1, bevel_dark));
if (pressed) {
// Pressed: bisel invertido (oscuro arriba, claro abajo) = "hundido"
const bevel_dark = bg_color.darken(15);
ctx.pushCommand(Command.rect(bounds.x + 1, bounds.y + 1, bounds.w - 2, 1, bevel_dark));
const bevel_light = bg_color.lighten(15);
ctx.pushCommand(Command.rect(bounds.x + 1, bounds.y + @as(i32, @intCast(bounds.h)) - 2, bounds.w - 2, 1, bevel_light));
} else {
// Normal: bisel claro arriba, oscuro abajo = "elevado"
const bevel_light = bg_color.lighten(15);
ctx.pushCommand(Command.rect(bounds.x + 1, bounds.y + 1, bounds.w - 2, 1, bevel_light));
const bevel_dark = bg_color.darken(15);
ctx.pushCommand(Command.rect(bounds.x + 1, bounds.y + @as(i32, @intCast(bounds.h)) - 2, bounds.w - 2, 1, bevel_dark));
}
}
// Draw text centered
// Draw text centered (con offset +1px cuando está pulsado = "se hunde")
const char_width: u32 = 8;
const char_height: u32 = 8;
const text_width = @as(u32, @intCast(text.len)) * char_width;
const text_x = bounds.x + @as(i32, @intCast((bounds.w -| text_width) / 2));
const text_y = bounds.y + @as(i32, @intCast((bounds.h -| char_height) / 2));
const press_offset: i32 = if (pressed) 1 else 0;
const text_x = bounds.x + @as(i32, @intCast((bounds.w -| text_width) / 2)) + press_offset;
const text_y = bounds.y + @as(i32, @intCast((bounds.h -| char_height) / 2)) + press_offset;
ctx.pushCommand(Command.text(text_x, text_y, text, fg_color));
@ -203,22 +211,30 @@ pub fn buttonStatefulRect(
ctx.pushCommand(Command.rectOutline(bounds.x, bounds.y, bounds.w, bounds.h, theme.border));
}
// Bisel 3D sutil: línea clara arriba, línea oscura abajo (inside)
// Bisel 3D sutil: invierte cuando está pulsado (micro-interacción)
if (bounds.h >= 4 and bounds.w >= 4 and !config.disabled) {
// Línea superior interna (highlight)
const bevel_light = bg_color.lighten(15);
ctx.pushCommand(Command.rect(bounds.x + 1, bounds.y + 1, bounds.w - 2, 1, bevel_light));
// Línea inferior interna (shadow)
const bevel_dark = bg_color.darken(15);
ctx.pushCommand(Command.rect(bounds.x + 1, bounds.y + @as(i32, @intCast(bounds.h)) - 2, bounds.w - 2, 1, bevel_dark));
if (pressed) {
// Pressed: bisel invertido (oscuro arriba, claro abajo) = "hundido"
const bevel_dark = bg_color.darken(15);
ctx.pushCommand(Command.rect(bounds.x + 1, bounds.y + 1, bounds.w - 2, 1, bevel_dark));
const bevel_light = bg_color.lighten(15);
ctx.pushCommand(Command.rect(bounds.x + 1, bounds.y + @as(i32, @intCast(bounds.h)) - 2, bounds.w - 2, 1, bevel_light));
} else {
// Normal: bisel claro arriba, oscuro abajo = "elevado"
const bevel_light = bg_color.lighten(15);
ctx.pushCommand(Command.rect(bounds.x + 1, bounds.y + 1, bounds.w - 2, 1, bevel_light));
const bevel_dark = bg_color.darken(15);
ctx.pushCommand(Command.rect(bounds.x + 1, bounds.y + @as(i32, @intCast(bounds.h)) - 2, bounds.w - 2, 1, bevel_dark));
}
}
// Draw text centered
// Draw text centered (con offset +1px cuando está pulsado = "se hunde")
const char_width: u32 = 8;
const char_height: u32 = 8;
const text_width = @as(u32, @intCast(text.len)) * char_width;
const text_x = bounds.x + @as(i32, @intCast((bounds.w -| text_width) / 2));
const text_y = bounds.y + @as(i32, @intCast((bounds.h -| char_height) / 2));
const press_offset: i32 = if (pressed) 1 else 0;
const text_x = bounds.x + @as(i32, @intCast((bounds.w -| text_width) / 2)) + press_offset;
const text_y = bounds.y + @as(i32, @intCast((bounds.h -| char_height) / 2)) + press_offset;
ctx.pushCommand(Command.text(text_x, text_y, text, fg_color));