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,
/// Close button size
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
@ -257,28 +261,31 @@ pub fn tabsRect(
state.hovered = @intCast(i);
}
// Determine tab background
const tab_bg = if (tab.disabled)
colors.tab_bg.darken(10)
else if (is_selected)
colors.tab_active_bg
else if (is_hovered)
colors.tab_hover_bg
else
colors.tab_bg;
// Minimal mode: no backgrounds, just text + underline
if (!config.minimal) {
// Determine tab background
const tab_bg = if (tab.disabled)
colors.tab_bg.darken(10)
else if (is_selected)
colors.tab_active_bg
else if (is_hovered)
colors.tab_hover_bg
else
colors.tab_bg;
// Draw tab background (rounded corners for selected tab in fancy mode)
const tab_radius: u8 = if (is_selected) 4 else 0;
if (Style.isFancy() and tab_radius > 0) {
// 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));
} else {
ctx.pushCommand(Command.rect(tab_rect.x, tab_rect.y, tab_rect.w, tab_rect.h, tab_bg));
// Draw tab background (rounded corners for selected tab in fancy mode)
const tab_radius: u8 = if (is_selected) 4 else 0;
if (Style.isFancy() and tab_radius > 0) {
// 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));
} else {
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) {
const indicator_h: u32 = 2;
const indicator_h = config.indicator_height;
const indicator_y = if (config.position == .top)
bar_rect.y + @as(i32, @intCast(config.tab_height - indicator_h))
else
@ -286,13 +293,16 @@ pub fn tabsRect(
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)
colors.tab_disabled_text
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
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));
ctx.pushCommand(Command.text(tab_x + @as(i32, @intCast(config.padding_h)), text_y, tab.label, text_color));