markmental/freepassport-c
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Guide UI refinements, more borders

Browse source
This commit is contained in:
markmental 2026-03-28 14:09:04 -04:00
commit 0608d50684
3 changed files with 55 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/theme.h
View file

@ -43,6 +43,8 @@ typedef struct GuideTheme {
SDL_Color block_active_bottom; SDL_Color block_active_bottom;
SDL_Color block_text; SDL_Color block_text;
SDL_Color block_active_text; SDL_Color block_active_text;
SDL_Color block_border;
SDL_Color block_active_border;
SDL_Color selection_edge; SDL_Color selection_edge;
SDL_Color grid_line; SDL_Color grid_line;
SDL_Color row_line_hi; SDL_Color row_line_hi;
@ -154,7 +156,9 @@ static const GuideTheme GUIDE_THEMES[GUIDE_THEME_COUNT] = {
.block_active_mid = {0x2e,0x4a,0x6f,0xff}, .block_active_mid = {0x2e,0x4a,0x6f,0xff},
.block_active_bottom = {0x1f,0x33,0x4f,0xff}, .block_active_bottom = {0x1f,0x33,0x4f,0xff},
.block_text = {0xff,0xff,0xff,0xff}, .block_text = {0xff,0xff,0xff,0xff},
.block_active_text = {0xff,0xff,0xff,0xff}, .block_active_text = {0xf5,0xf5,0xf0,0xff},
.block_border = {0xcc,0xd8,0xe8,0xff},
.block_active_border = {0xe8,0xf0,0xf8,0xff},
.selection_edge = {0x4a,0x90,0xe2,0xff}, .selection_edge = {0x4a,0x90,0xe2,0xff},
.grid_line = {0x5a,0x6a,0x7a,0xaa}, .grid_line = {0x5a,0x6a,0x7a,0xaa},
.row_line_hi = {0x7a,0x8a,0x9a,0xff}, .row_line_hi = {0x7a,0x8a,0x9a,0xff},
@ -203,7 +207,9 @@ static const GuideTheme GUIDE_THEMES[GUIDE_THEME_COUNT] = {
.block_active_mid = {0x53,0x34,0x83,0xff}, .block_active_mid = {0x53,0x34,0x83,0xff},
.block_active_bottom = {0x36,0x1f,0x5f,0xff}, .block_active_bottom = {0x36,0x1f,0x5f,0xff},
.block_text = {0xea,0xea,0xea,0xff}, .block_text = {0xea,0xea,0xea,0xff},
.block_active_text = {0xea,0xea,0xea,0xff}, .block_active_text = {0xf5,0xf5,0xf0,0xff},
.block_border = {0x4a,0x4a,0x5a,0xff},
.block_active_border = {0x8a,0x7a,0xa6,0xff},
.selection_edge = {0xe9,0x45,0x60,0xff}, .selection_edge = {0xe9,0x45,0x60,0xff},
.grid_line = {0x64,0x68,0x7a,0xaa}, .grid_line = {0x64,0x68,0x7a,0xaa},
.row_line_hi = {0x3b,0x3d,0x55,0xff}, .row_line_hi = {0x3b,0x3d,0x55,0xff},
@ -252,7 +258,9 @@ static const GuideTheme GUIDE_THEMES[GUIDE_THEME_COUNT] = {
.block_active_mid = {0xff,0x6b,0x00,0xff}, .block_active_mid = {0xff,0x6b,0x00,0xff},
.block_active_bottom = {0xdc,0x26,0x26,0xff}, .block_active_bottom = {0xdc,0x26,0x26,0xff},
.block_text = {0xff,0xff,0xff,0xff}, .block_text = {0xff,0xff,0xff,0xff},
.block_active_text = {0xff,0xff,0xff,0xff}, .block_active_text = {0xf5,0xf5,0xf0,0xff},
.block_border = {0x6a,0x9a,0xf8,0xff},
.block_active_border = {0xff,0xba,0x80,0xff},
.selection_edge = {0xff,0xff,0xff,0xff}, .selection_edge = {0xff,0xff,0xff,0xff},
.grid_line = {0x85,0xa0,0xff,0xaa}, .grid_line = {0x85,0xa0,0xff,0xaa},
.row_line_hi = {0x6a,0x8d,0xff,0xff}, .row_line_hi = {0x6a,0x8d,0xff,0xff},
@ -301,7 +309,9 @@ static const GuideTheme GUIDE_THEMES[GUIDE_THEME_COUNT] = {
.block_active_mid = {0xff,0x10,0xf0,0xff}, .block_active_mid = {0xff,0x10,0xf0,0xff},
.block_active_bottom = {0xb0,0x00,0xa5,0xff}, .block_active_bottom = {0xb0,0x00,0xa5,0xff},
.block_text = {0xe0,0xf7,0xfa,0xff}, .block_text = {0xe0,0xf7,0xfa,0xff},
.block_active_text = {0x1a,0x10,0x3c,0xff}, .block_active_text = {0xf5,0xf5,0xf0,0xff},
.block_border = {0xaa,0x4b,0xd6,0xff},
.block_active_border = {0xff,0x7a,0xf4,0xff},
.selection_edge = {0x00,0xff,0xf9,0xff}, .selection_edge = {0x00,0xff,0xf9,0xff},
.grid_line = {0x00,0xff,0xf9,0xaa}, .grid_line = {0x00,0xff,0xf9,0xaa},
.row_line_hi = {0x8f,0x59,0xb6,0xff}, .row_line_hi = {0x8f,0x59,0xb6,0xff},
@ -350,7 +360,9 @@ static const GuideTheme GUIDE_THEMES[GUIDE_THEME_COUNT] = {
.block_active_mid = {0x33,0xff,0x00,0xff}, .block_active_mid = {0x33,0xff,0x00,0xff},
.block_active_bottom = {0x15,0x6e,0x15,0xff}, .block_active_bottom = {0x15,0x6e,0x15,0xff},
.block_text = {0x33,0xff,0x00,0xff}, .block_text = {0x33,0xff,0x00,0xff},
.block_active_text = {0x0c,0x0c,0x0c,0xff}, .block_active_text = {0xf5,0xf5,0xf0,0xff},
.block_border = {0x4a,0x8a,0x4a,0xff},
.block_active_border = {0x6a,0xff,0x4a,0xff},
.selection_edge = {0x33,0xff,0x00,0xff}, .selection_edge = {0x33,0xff,0x00,0xff},
.grid_line = {0x33,0xff,0x00,0xaa}, .grid_line = {0x33,0xff,0x00,0xaa},
.row_line_hi = {0x27,0x55,0x27,0xff}, .row_line_hi = {0x27,0x55,0x27,0xff},
@ -399,7 +411,9 @@ static const GuideTheme GUIDE_THEMES[GUIDE_THEME_COUNT] = {
.block_active_mid = {0xff,0xe6,0x6d,0xff}, .block_active_mid = {0xff,0xe6,0x6d,0xff},
.block_active_bottom = {0xd8,0xb8,0x25,0xff}, .block_active_bottom = {0xd8,0xb8,0x25,0xff},
.block_text = {0xff,0xff,0xff,0xff}, .block_text = {0xff,0xff,0xff,0xff},
.block_active_text = {0x20,0x10,0x10,0xff}, .block_active_text = {0xf5,0xf5,0xf0,0xff},
.block_border = {0x9b,0xe8,0xe0,0xff},
.block_active_border = {0xff,0xfa,0xa6,0xff},
.selection_edge = {0xff,0xff,0x00,0xff}, .selection_edge = {0xff,0xff,0x00,0xff},
.grid_line = {0xff,0xed,0xa1,0xaa}, .grid_line = {0xff,0xed,0xa1,0xaa},
.row_line_hi = {0xff,0xdb,0xaf,0xff}, .row_line_hi = {0xff,0xdb,0xaf,0xff},
@ -448,7 +462,9 @@ static const GuideTheme GUIDE_THEMES[GUIDE_THEME_COUNT] = {
.block_active_mid = {0xf4,0xe4,0xc1,0xff}, .block_active_mid = {0xf4,0xe4,0xc1,0xff},
.block_active_bottom = {0xb8,0xa2,0x74,0xff}, .block_active_bottom = {0xb8,0xa2,0x74,0xff},
.block_text = {0xff,0xf8,0xdc,0xff}, .block_text = {0xff,0xf8,0xdc,0xff},
.block_active_text = {0x1a,0x05,0x08,0xff}, .block_active_text = {0xf5,0xf5,0xf0,0xff},
.block_border = {0x8a,0x3a,0x3a,0xff},
.block_active_border = {0xfa,0xe8,0xc8,0xff},
.selection_edge = {0xff,0xd7,0x00,0xff}, .selection_edge = {0xff,0xd7,0x00,0xff},
.grid_line = {0xaa,0x72,0x72,0xaa}, .grid_line = {0xaa,0x72,0x72,0xaa},
.row_line_hi = {0x7d,0x3b,0x3b,0xff}, .row_line_hi = {0x7d,0x3b,0x3b,0xff},
@ -497,7 +513,9 @@ static const GuideTheme GUIDE_THEMES[GUIDE_THEME_COUNT] = {
.block_active_mid = {0x7d,0xd3,0xfc,0xff}, .block_active_mid = {0x7d,0xd3,0xfc,0xff},
.block_active_bottom = {0x4a,0xae,0xe0,0xff}, .block_active_bottom = {0x4a,0xae,0xe0,0xff},
.block_text = {0x0c,0x4a,0x6e,0xff}, .block_text = {0x0c,0x4a,0x6e,0xff},
.block_active_text = {0x0c,0x4a,0x6e,0xff}, .block_active_text = {0xf5,0xf5,0xf0,0xff},
.block_border = {0xfc,0xff,0xff,0xff},
.block_active_border = {0xab,0xe4,0xfb,0xff},
.selection_edge = {0xff,0xff,0xff,0xff}, .selection_edge = {0xff,0xff,0xff,0xff},
.grid_line = {0x7d,0xd3,0xfc,0xaa}, .grid_line = {0x7d,0xd3,0xfc,0xaa},
.row_line_hi = {0xf0,0xf9,0xff,0xff}, .row_line_hi = {0xf0,0xf9,0xff,0xff},
@ -546,7 +564,9 @@ static const GuideTheme GUIDE_THEMES[GUIDE_THEME_COUNT] = {
.block_active_mid = {0xde,0xb8,0x87,0xff}, .block_active_mid = {0xde,0xb8,0x87,0xff},
.block_active_bottom = {0xa4,0x74,0x46,0xff}, .block_active_bottom = {0xa4,0x74,0x46,0xff},
.block_text = {0xff,0xf8,0xdc,0xff}, .block_text = {0xff,0xf8,0xdc,0xff},
.block_active_text = {0xff,0xf8,0xdc,0xff}, .block_active_text = {0xf5,0xf5,0xf0,0xff},
.block_border = {0xa0,0x72,0x46,0xff},
.block_active_border = {0xf0,0xd8,0xa8,0xff},
.selection_edge = {0xda,0x8e,0x00,0xff}, .selection_edge = {0xda,0x8e,0x00,0xff},
.grid_line = {0xc2,0x98,0x6b,0xaa}, .grid_line = {0xc2,0x98,0x6b,0xaa},
.row_line_hi = {0xc6,0xa1,0x5d,0xff}, .row_line_hi = {0xc6,0xa1,0x5d,0xff},
@ -595,7 +615,9 @@ static const GuideTheme GUIDE_THEMES[GUIDE_THEME_COUNT] = {
.block_active_mid = {0x00,0xf6,0xed,0xff}, .block_active_mid = {0x00,0xf6,0xed,0xff},
.block_active_bottom = {0x09,0x7b,0x95,0xff}, .block_active_bottom = {0x09,0x7b,0x95,0xff},
.block_text = {0xff,0xff,0xff,0xff}, .block_text = {0xff,0xff,0xff,0xff},
.block_active_text = {0xff,0xff,0xff,0xff}, .block_active_text = {0xf5,0xf5,0xf0,0xff},
.block_border = {0x7b,0x40,0xde,0xff},
.block_active_border = {0x4a,0xff,0xf0,0xff},
.selection_edge = {0xff,0xf0,0x1f,0xff}, .selection_edge = {0xff,0xf0,0x1f,0xff},
.grid_line = {0x00,0xf6,0xed,0xaa}, .grid_line = {0x00,0xf6,0xed,0xaa},
.row_line_hi = {0x67,0x2c,0xb2,0xff}, .row_line_hi = {0x67,0x2c,0xb2,0xff},

41
src/ui.c
View file

@ -244,22 +244,28 @@ static void draw_program_block(SDL_Renderer *renderer,
SDL_Color gloss, SDL_Color gloss,
SDL_Color border, SDL_Color border,
int is_selected, int is_selected,
SDL_Color selection_edge) { SDL_Color selection_edge,
SDL_Color block_border) {
SDL_Rect inner; SDL_Rect inner;
SDL_Rect outer_border;
if (!rect || rect->w <= 2 || rect->h <= 2) { if (!rect || rect->w <= 4 || rect->h <= 4) {
return; return;
} }
draw_beveled_bar(renderer, rect, top, mid, bottom, gloss, border); draw_beveled_bar(renderer, rect, top, mid, bottom, gloss, border);
stroke_rect(renderer, rect, border);
inner = (SDL_Rect){rect->x + 1, rect->y + 1, rect->w - 2, rect->h - 2}; outer_border = (SDL_Rect){rect->x + 1, rect->y + 1, rect->w - 2, rect->h - 2};
if (outer_border.w > 0 && outer_border.h > 0) {
stroke_rect(renderer, &outer_border, block_border);
}
inner = (SDL_Rect){rect->x + 2, rect->y + 2, rect->w - 4, rect->h - 4};
if (inner.w > 1 && inner.h > 1) { if (inner.w > 1 && inner.h > 1) {
stroke_rect_alpha(renderer, &inner, color_with_alpha(COLOR_TEXT_LIGHT, is_selected ? 64 : 42)); stroke_rect_alpha(renderer, &inner, color_with_alpha(COLOR_TEXT_LIGHT, is_selected ? 80 : 50));
fill_rect_alpha(renderer, fill_rect_alpha(renderer,
&(SDL_Rect){inner.x + 1, inner.y + 1, SDL_max(inner.w - 2, 0), 2}, &(SDL_Rect){inner.x + 1, inner.y + 1, SDL_max(inner.w - 2, 0), 2},
color_with_alpha(COLOR_TEXT_LIGHT, is_selected ? 34 : 20)); color_with_alpha(COLOR_TEXT_LIGHT, is_selected ? 45 : 25));
} }
if (is_selected) { if (is_selected) {
@ -496,12 +502,12 @@ static void draw_status_bar(SDL_Renderer *renderer,
} }
static void draw_info_panel(SDL_Renderer *renderer, static void draw_info_panel(SDL_Renderer *renderer,
const UiFonts *fonts, const UiFonts *fonts,
const GuideTheme *theme, const GuideTheme *theme,
const Channel *selected_channel, const Channel *selected_channel,
const SDL_Rect *rect, const SDL_Rect *rect,
time_t app_start_time, time_t app_start_time,
time_t guide_focus_time) { time_t guide_focus_time) {
SDL_Rect accent; SDL_Rect accent;
SDL_Rect clip_rect; SDL_Rect clip_rect;
char time_range[64]; char time_range[64];
@ -519,12 +525,10 @@ static void draw_info_panel(SDL_Renderer *renderer,
panel_text = ensure_contrast(theme->panel_text, theme->panel_fill); panel_text = ensure_contrast(theme->panel_text, theme->panel_fill);
draw_panel_shadow(renderer, rect); fill_rect(renderer, rect, theme->panel_fill);
draw_rounded_top_panel(renderer, rect, theme->panel_fill, theme->panel_border, theme->rounded_radius > 0 ? theme->rounded_radius : 8);
accent = (SDL_Rect){rect->x + 1, rect->y + 1, rect->w - 2, 38};
fill_rect(renderer, &accent, theme->panel_fill);
draw_panel_bevel(renderer, rect, theme->gloss);
stroke_rect(renderer, rect, theme->panel_border); stroke_rect(renderer, rect, theme->panel_border);
accent = (SDL_Rect){rect->x + 1, rect->y + 1, rect->w - 2, 36};
fill_rect(renderer, &accent, blend_color(theme->panel_fill, theme->ribbon_mid, 40));
program = channel_resolve_program_at_elapsed(selected_channel, program = channel_resolve_program_at_elapsed(selected_channel,
channel_schedule_elapsed_seconds(app_start_time, guide_focus_time), channel_schedule_elapsed_seconds(app_start_time, guide_focus_time),
@ -1027,7 +1031,8 @@ void ui_render_guide(SDL_Renderer *renderer,
theme->gloss, theme->gloss,
theme->panel_border, theme->panel_border,
is_selected, is_selected,
theme->selection_edge); theme->selection_edge,
is_selected ? theme->block_active_border : theme->block_border);
if (title_rect.w > 24) { if (title_rect.w > 24) {
fit_text_with_ellipsis(is_selected ? fonts->medium : fonts->small, fit_text_with_ellipsis(is_selected ? fonts->medium : fonts->small,

BIN
src/ui.o
View file

Binary file not shown.