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

feat: Modo minimal para tabs (estilo Laravel)

Browse source 
- Añadir config.minimal: bool para activar estilo sin fondos
- Añadir config.indicator_height para altura personalizable del underline
- En modo minimal: no dibujar fondos de tabs
- Texto inactivo usa text_secondary, activo usa primary
- Hover en minimal ilumina el texto
- Mantener retrocompatibilidad (minimal=false por defecto)

🤖 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 00:13:51 +01:00
parent 8b15d3f80f
commit ae600f4341
1 changed files with 31 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/widgets/tabs.zig
View file

@ -99,6 +99,10 @@ pub const TabsConfig = struct {
show_close: bool = false, show_close: bool = false,
/// Close button size /// Close button size
close_size: u32 = 14, close_size: u32 = 14,
/// Minimal style (no backgrounds, only text + underline indicator)
minimal: bool = false,
/// Underline indicator height (for minimal mode)
indicator_height: u32 = 2,
}; };
/// Tabs colors /// Tabs colors
@ -257,28 +261,31 @@ pub fn tabsRect(
state.hovered = @intCast(i); state.hovered = @intCast(i);
} }
// Determine tab background // Minimal mode: no backgrounds, just text + underline
const tab_bg = if (tab.disabled) if (!config.minimal) {
colors.tab_bg.darken(10) // Determine tab background
else if (is_selected) const tab_bg = if (tab.disabled)
colors.tab_active_bg colors.tab_bg.darken(10)
else if (is_hovered) else if (is_selected)
colors.tab_hover_bg colors.tab_active_bg
else else if (is_hovered)
colors.tab_bg; colors.tab_hover_bg
else
colors.tab_bg;
// Draw tab background (rounded corners for selected tab in fancy mode) // Draw tab background (rounded corners for selected tab in fancy mode)
const tab_radius: u8 = if (is_selected) 4 else 0; const tab_radius: u8 = if (is_selected) 4 else 0;
if (Style.isFancy() and tab_radius > 0) { if (Style.isFancy() and tab_radius > 0) {
// Only round top corners for top position, bottom for bottom // Only round top corners for top position, bottom for bottom
ctx.pushCommand(Command.roundedRect(tab_rect.x, tab_rect.y, tab_rect.w, tab_rect.h, tab_bg, tab_radius)); ctx.pushCommand(Command.roundedRect(tab_rect.x, tab_rect.y, tab_rect.w, tab_rect.h, tab_bg, tab_radius));
} else { } else {
ctx.pushCommand(Command.rect(tab_rect.x, tab_rect.y, tab_rect.w, tab_rect.h, tab_bg)); ctx.pushCommand(Command.rect(tab_rect.x, tab_rect.y, tab_rect.w, tab_rect.h, tab_bg));
}
} }
// Draw active indicator // Draw active indicator (underline)
if (is_selected) { if (is_selected) {
const indicator_h: u32 = 2; const indicator_h = config.indicator_height;
const indicator_y = if (config.position == .top) const indicator_y = if (config.position == .top)
bar_rect.y + @as(i32, @intCast(config.tab_height - indicator_h)) bar_rect.y + @as(i32, @intCast(config.tab_height - indicator_h))
else else
@ -286,13 +293,16 @@ pub fn tabsRect(
ctx.pushCommand(Command.rect(tab_rect.x, indicator_y, tab_rect.w, indicator_h, colors.indicator)); ctx.pushCommand(Command.rect(tab_rect.x, indicator_y, tab_rect.w, indicator_h, colors.indicator));
} }
// Draw tab text // Draw tab text (minimal mode: primary for active, text_secondary for inactive)
const theme = Style.currentTheme().*;
const text_color = if (tab.disabled) const text_color = if (tab.disabled)
colors.tab_disabled_text colors.tab_disabled_text
else if (is_selected) else if (is_selected)
colors.tab_active_text if (config.minimal) theme.primary else colors.tab_active_text
else if (is_hovered and config.minimal)
colors.tab_active_text // Brighten on hover in minimal mode
else else
colors.tab_text; if (config.minimal) theme.text_secondary else colors.tab_text;
const text_y = bar_rect.y + @as(i32, @intCast((config.tab_height - 8) / 2)); const text_y = bar_rect.y + @as(i32, @intCast((config.tab_height - 8) / 2));
ctx.pushCommand(Command.text(tab_x + @as(i32, @intCast(config.padding_h)), text_y, tab.label, text_color)); ctx.pushCommand(Command.text(tab_x + @as(i32, @intCast(config.padding_h)), text_y, tab.label, text_color));