skopcaak/Graduately
1
0
Fork 0
mirror of https://github.com/pepaskopec-blip/Graduately.git synced 2026-10-27 15:14:35 +00:00
Code Issues Projects Releases Packages Wiki Activity

Rework the interface into a consistent visual system.

Browse source 
Replace the accumulated per-widget decoration with short, documented
scales for type, weight, radius and motion. Fills are flat and elevation
is neutral, so accent colour marks state instead of decorating: the
gradients on buttons, pills, nodes and progress bars are gone, along with
the coloured glow shadows and the triple ring on the current unit.

Drop draw_node_halo() and the gradient aura on the learning path, which
painted the same bloom in the cairo layer.

Give the welcome page the app icon, a single-colour heading and an
unboxed paragraph. Restore keyboard focus rings, which were suppressed
everywhere, and clamp exercise bodies to a readable measure on wide
windows.

Fix two layout bugs found on the way: the statistics metric cards were
unequal because hexpand only shares leftover space, and a fraction of
zero still painted a stub of accent colour because GTK gives the progress
node a minimum width.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
pepaskopec-blip 2026-09-17 14:17:34 +02:00
commit ae56a1c1da
11 changed files with 705 additions and 802 deletions
Download patch file Download diff file Expand all files Collapse all files

8
cetba.c
View file

@ -1308,9 +1308,7 @@ static void draw_book_rail(GtkDrawingArea *area, cairo_t *cr,
int width, int height, gpointer data) {
const double t_end = (double)(BOOK_NODES - 1);
const Rgb rail = color_from_hex(app_theme.rail);
const Rgb mauve = color_from_hex(app_theme.accent);
const Rgb muted = color_from_hex(app_theme.subtext);
double hx, hy;
(void)area;
(void)width;
@ -1323,13 +1321,9 @@ static void draw_book_rail(GtkDrawingArea *area, cairo_t *cr,
cairo_set_line_cap(cr, CAIRO_LINE_CAP_ROUND);
cairo_set_line_join(cr, CAIRO_LINE_JOIN_ROUND);
book_point(0.0, &hx, &hy);
draw_node_halo(cr, hx, hy, NODE_SIZE * 1.05,
mauve.r, mauve.g, mauve.b, 0.18);
cairo_new_path(cr);
book_path(cr, 0.0, t_end);
cairo_set_line_width(cr, 16);
cairo_set_line_width(cr, 12);
cairo_set_source_rgb(cr, rail.r, rail.g, rail.b);
cairo_stroke(cr);

24
exercise_common.c
View file

@ -4,6 +4,27 @@
/* Exercise page shell */
/* ------------------------------------------------------------------ */
/* Exercise text would otherwise run the full width of a maximised window,
* which is tiring to read. Keep the body at a comfortable measure and centre
* it once there is room to spare; below that it still fills the page. */
#define EX_BODY_MAX_WIDTH 880
static void ex_body_clamp(GtkAdjustment *adj, GParamSpec *ps, gpointer data) {
GtkWidget *body = data;
double avail = gtk_adjustment_get_page_size(adj);
(void)ps;
if (avail < 1.0)
return;
if (avail < (double)EX_BODY_MAX_WIDTH) {
gtk_widget_set_halign(body, GTK_ALIGN_FILL);
gtk_widget_set_size_request(body, -1, -1);
} else {
gtk_widget_set_halign(body, GTK_ALIGN_CENTER);
gtk_widget_set_size_request(body, EX_BODY_MAX_WIDTH, -1);
}
}
GtkWidget *ex_page_shell(const char *back_target, const char *title,
const char *subtitle, const char *btn_label,
GtkWidget **body_out, GtkWidget **feedback_out,
@ -33,6 +54,9 @@ GtkWidget *ex_page_shell(const char *back_target, const char *title,
body = gtk_box_new(GTK_ORIENTATION_VERTICAL, 14);
gtk_widget_set_vexpand(body, TRUE);
gtk_scrolled_window_set_child(GTK_SCROLLED_WINDOW(scroll), body);
g_signal_connect(gtk_scrolled_window_get_hadjustment(
GTK_SCROLLED_WINDOW(scroll)),
"notify::page-size", G_CALLBACK(ex_body_clamp), body);
*body_out = body;
bottom = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 12);

8
hw.c
View file

@ -181,10 +181,8 @@ void hw_adjust_notify(GtkAdjustment *adj, GParamSpec *ps,
void hw_render_rail_to(cairo_t *cr) {
const double t_end = (double)(HW_UNITS - 1);
const Rgb mauve = color_from_hex(app_theme.accent);
const Rgb rail = color_from_hex(app_theme.rail);
const Rgb muted = color_from_hex(app_theme.subtext);
double hx, hy;
cairo_set_operator(cr, CAIRO_OPERATOR_CLEAR);
cairo_paint(cr);
@ -192,13 +190,9 @@ void hw_render_rail_to(cairo_t *cr) {
cairo_set_line_cap(cr, CAIRO_LINE_CAP_ROUND);
cairo_set_line_join(cr, CAIRO_LINE_JOIN_ROUND);
hw_point(0.0, &hx, &hy);
draw_node_halo(cr, hx, hy, NODE_SIZE * 1.05,
mauve.r, mauve.g, mauve.b, 0.18);
cairo_new_path(cr);
hw_path(cr, 0.0, t_end);
cairo_set_line_width(cr, 16);
cairo_set_line_width(cr, 12);
cairo_set_source_rgb(cr, rail.r, rail.g, rail.b);
cairo_stroke(cr);

15
i18n.c
View file

@ -1454,20 +1454,11 @@ void i18n_bind(GtkWidget *widget, const char *key, int kind) {
}
void refresh_welcome_heading(void) {
char *markup;
if (!welcome_heading)
return;
if (app_lang == LANG_EN)
markup = g_strdup_printf(
"Welcome to <span color=\"#%06x\">maturita.C</span>!",
app_theme.accent);
else
markup = g_strdup_printf(
"Vítejte ve <span color=\"#%06x\">maturita.C</span>!",
app_theme.accent);
gtk_label_set_markup(GTK_LABEL(welcome_heading), markup);
g_free(markup);
gtk_label_set_text(GTK_LABEL(welcome_heading),
app_lang == LANG_EN ? "Welcome to maturita.C"
: "Vítejte v maturita.C");
}
void refresh_stats_ui(void);

3
maturita.h
View file

@ -883,9 +883,6 @@ gboolean on_window_key_pressed(GtkEventControllerKey *controller,
GdkModifierType state,
gpointer user_data);
GtkWidget *build_welcome_page(void);
void draw_node_halo(cairo_t *cr, double cx, double cy,
double radius, double r, double g, double b,
double alpha);
void draw_finish_cell(GtkDrawingArea *area, cairo_t *cr,
int width, int height, gpointer data);
void road_point(double t, double *ox, double *oy);

28
navigation.c
View file

@ -95,34 +95,42 @@ gboolean on_window_key_pressed(GtkEventControllerKey *controller,
GtkWidget *build_welcome_page(void) {
GtkWidget *box;
GtkWidget *icon;
GtkWidget *heading;
GtkWidget *card;
GtkWidget *body;
GtkWidget *button;
box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 18);
box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 0);
gtk_widget_set_halign(box, GTK_ALIGN_CENTER);
gtk_widget_set_valign(box, GTK_ALIGN_CENTER);
gtk_widget_set_margin_top(box, 40);
gtk_widget_set_margin_bottom(box, 40);
icon = gtk_image_new_from_icon_name(ICON_NAME);
gtk_image_set_pixel_size(GTK_IMAGE(icon), 88);
gtk_widget_set_halign(icon, GTK_ALIGN_CENTER);
gtk_widget_set_margin_bottom(icon, 22);
gtk_box_append(GTK_BOX(box), icon);
heading = gtk_label_new(NULL);
welcome_heading = heading;
gtk_widget_set_halign(heading, GTK_ALIGN_CENTER);
gtk_widget_add_css_class(heading, "heading");
gtk_box_append(GTK_BOX(box), heading);
card = gtk_label_new(NULL);
i18n_bind(card, "welcome_body", 0);
gtk_label_set_justify(GTK_LABEL(card), GTK_JUSTIFY_CENTER);
gtk_label_set_wrap(GTK_LABEL(card), TRUE);
gtk_label_set_max_width_chars(GTK_LABEL(card), 48);
gtk_widget_add_css_class(card, "card");
gtk_box_append(GTK_BOX(box), card);
body = gtk_label_new(NULL);
i18n_bind(body, "welcome_body", 0);
gtk_label_set_justify(GTK_LABEL(body), GTK_JUSTIFY_CENTER);
gtk_label_set_wrap(GTK_LABEL(body), TRUE);
gtk_label_set_max_width_chars(GTK_LABEL(body), 46);
gtk_widget_set_margin_top(body, 10);
gtk_widget_add_css_class(body, "welcome-body");
gtk_box_append(GTK_BOX(box), body);
button = gtk_button_new();
i18n_bind(button, "continue", 1);
gtk_widget_set_halign(button, GTK_ALIGN_CENTER);
gtk_widget_set_margin_top(button, 6);
gtk_widget_set_margin_top(button, 28);
gtk_widget_add_css_class(button, "btn-primary");
gtk_box_append(GTK_BOX(box), button);

8
net.c
View file

@ -394,10 +394,8 @@ void net_adjust_notify(GtkAdjustment *adj, GParamSpec *ps,
void net_render_rail_to(cairo_t *cr) {
const double t_end = (double)(NET_UNITS - 1);
const Rgb mauve = color_from_hex(app_theme.accent);
const Rgb rail = color_from_hex(app_theme.rail);
const Rgb muted = color_from_hex(app_theme.subtext);
double hx, hy;
cairo_set_operator(cr, CAIRO_OPERATOR_CLEAR);
cairo_paint(cr);
@ -405,13 +403,9 @@ void net_render_rail_to(cairo_t *cr) {
cairo_set_line_cap(cr, CAIRO_LINE_CAP_ROUND);
cairo_set_line_join(cr, CAIRO_LINE_JOIN_ROUND);
net_point(0.0, &hx, &hy);
draw_node_halo(cr, hx, hy, NODE_SIZE * 1.05,
mauve.r, mauve.g, mauve.b, 0.18);
cairo_new_path(cr);
net_path(cr, 0.0, t_end);
cairo_set_line_width(cr, 16);
cairo_set_line_width(cr, 12);
cairo_set_source_rgb(cr, rail.r, rail.g, rail.b);
cairo_stroke(cr);

50
roadmap.c
View file

@ -4,19 +4,6 @@
/* Roadmap page */
/* ------------------------------------------------------------------ */
void draw_node_halo(cairo_t *cr, double cx, double cy,
double radius, double r, double g, double b,
double alpha) {
cairo_pattern_t *grad;
grad = cairo_pattern_create_radial(cx, cy, 6.0, cx, cy, radius);
cairo_pattern_add_color_stop_rgba(grad, 0.0, r, g, b, alpha);
cairo_pattern_add_color_stop_rgba(grad, 0.55, r, g, b, alpha * 0.30);
cairo_pattern_add_color_stop_rgba(grad, 1.0, r, g, b, 0.0);
cairo_set_source(cr, grad);
cairo_paint(cr);
cairo_pattern_destroy(grad);
}
/* Draw the checkered "finish line" node: checkerboard behind the unit
* number and the same lock glyph the locked units use. */
void draw_finish_cell(GtkDrawingArea *area, cairo_t *cr,
@ -236,13 +223,9 @@ void draw_rail(GtkDrawingArea *area, cairo_t *cr,
int width, int height, gpointer user_data) {
const double t_lit = (double)(NUM_UNLOCKED - 1);
const double t_end = (double)(NUM_UNITS - 1);
const double x0 = ROAD_MX;
const double x1 = (double)road_cw - ROAD_MX;
const Rgb mauve = color_from_hex(app_theme.accent);
const Rgb blue = color_from_hex(app_theme.accent3);
const Rgb accent = color_from_hex(app_theme.accent);
const Rgb rail = color_from_hex(app_theme.rail);
const Rgb muted = color_from_hex(app_theme.subtext);
double hx, hy;
(void)area;
(void)width;
@ -255,41 +238,18 @@ void draw_rail(GtkDrawingArea *area, cairo_t *cr,
cairo_set_line_cap(cr, CAIRO_LINE_CAP_ROUND);
cairo_set_line_join(cr, CAIRO_LINE_JOIN_ROUND);
road_point((double)(NUM_UNLOCKED - 1), &hx, &hy);
draw_node_halo(cr, hx, hy, NODE_SIZE * 1.05,
mauve.r, mauve.g, mauve.b, 0.18);
cairo_new_path(cr);
road_path(cr, 0.0, t_end);
cairo_set_line_width(cr, 16);
cairo_set_line_width(cr, 12);
cairo_set_source_rgb(cr, rail.r, rail.g, rail.b);
cairo_stroke(cr);
if (t_lit > 0.0) {
cairo_pattern_t *grad;
cairo_new_path(cr);
road_path(cr, 0.0, t_lit);
grad = cairo_pattern_create_linear(x0, 0.0, x1, 0.0);
cairo_pattern_add_color_stop_rgba(grad, 0.0,
mauve.r, mauve.g, mauve.b, 0.16);
cairo_pattern_add_color_stop_rgba(grad, 1.0,
blue.r, blue.g, blue.b, 0.16);
cairo_set_source(cr, grad);
cairo_set_line_width(cr, 34);
cairo_stroke_preserve(cr);
cairo_pattern_destroy(grad);
grad = cairo_pattern_create_linear(x0, 0.0, x1, 0.0);
cairo_pattern_add_color_stop_rgba(grad, 0.0,
mauve.r, mauve.g, mauve.b, 1.0);
cairo_pattern_add_color_stop_rgba(grad, 1.0,
blue.r, blue.g, blue.b, 1.0);
cairo_set_source(cr, grad);
cairo_set_line_width(cr, 16);
cairo_stroke_preserve(cr);
cairo_pattern_destroy(grad);
cairo_set_source_rgb(cr, accent.r, accent.g, accent.b);
cairo_set_line_width(cr, 12);
cairo_stroke(cr);
}
{

34
stats.c
View file

@ -45,6 +45,17 @@ void progress_for_units(int first, int n, ProgressSum *out) {
}
}
/* GTK gives the progress node a minimum width, so a fraction of zero would
* still paint a short stub of accent colour. Mark those bars so the
* stylesheet can hide the fill entirely. */
static void stats_set_fraction(GtkWidget *bar, double fraction) {
gtk_progress_bar_set_fraction(GTK_PROGRESS_BAR(bar), fraction);
if (fraction > 0.0)
gtk_widget_remove_css_class(bar, "empty");
else
gtk_widget_add_css_class(bar, "empty");
}
void refresh_stats_ui(void) {
ProgressSum all = {0};
int pct;
@ -77,9 +88,10 @@ void refresh_stats_ui(void) {
gtk_label_set_text(GTK_LABEL(stats_ui.units_value), tmp);
g_free(tmp);
gtk_progress_bar_set_fraction(
GTK_PROGRESS_BAR(stats_ui.overall_bar),
all.total_ex > 0 ? (double)all.done_ex / (double)all.total_ex : 0.0);
stats_set_fraction(stats_ui.overall_bar,
all.total_ex > 0
? (double)all.done_ex / (double)all.total_ex
: 0.0);
for (int s = 0; s < NUM_SUBJECTS; s++) {
GtkWidget *count = stats_ui.subj[s].count;
@ -100,13 +112,13 @@ void refresh_stats_ui(void) {
tmp = g_strdup_printf(tr("stats_ex_fmt"), sp.done_ex, sp.total_ex);
gtk_label_set_text(GTK_LABEL(count), tmp);
g_free(tmp);
gtk_progress_bar_set_fraction(
GTK_PROGRESS_BAR(bar),
sp.total_ex > 0 ? (double)sp.done_ex / (double)sp.total_ex
stats_set_fraction(bar,
sp.total_ex > 0
? (double)sp.done_ex / (double)sp.total_ex
: 0.0);
} else {
gtk_label_set_text(GTK_LABEL(count), tr("stats_locked"));
gtk_progress_bar_set_fraction(GTK_PROGRESS_BAR(bar), 0.0);
stats_set_fraction(bar, 0.0);
}
}
@ -130,7 +142,7 @@ void refresh_stats_ui(void) {
if (!unlocked) {
gtk_widget_add_css_class(row, "locked");
gtk_label_set_text(GTK_LABEL(count), tr("stats_locked"));
gtk_progress_bar_set_fraction(GTK_PROGRESS_BAR(bar), 0.0);
stats_set_fraction(bar, 0.0);
if (badge)
gtk_widget_set_visible(badge, FALSE);
continue;
@ -139,8 +151,7 @@ void refresh_stats_ui(void) {
tmp = g_strdup_printf(tr("stats_ex_fmt"), d, u->n_ex);
gtk_label_set_text(GTK_LABEL(count), tmp);
g_free(tmp);
gtk_progress_bar_set_fraction(
GTK_PROGRESS_BAR(bar),
stats_set_fraction(bar,
u->n_ex > 0 ? (double)d / (double)u->n_ex : 0.0);
if (complete) {
@ -328,6 +339,9 @@ GtkWidget *build_stats_page(void) {
summary = gtk_box_new(GTK_ORIENTATION_HORIZONTAL, 10);
gtk_widget_add_css_class(summary, "stats-summary");
gtk_widget_set_halign(summary, GTK_ALIGN_FILL);
/* Equal columns; hexpand alone only shares the leftover space, which
* leaves the cards at different widths. */
gtk_box_set_homogeneous(GTK_BOX(summary), TRUE);
gtk_box_append(GTK_BOX(page), summary);
gtk_box_append(GTK_BOX(summary),

1439
style.css
View file

File diff suppressed because it is too large Load diff

8
subjects.c
View file

@ -125,8 +125,6 @@ void draw_sub_rail(GtkDrawingArea *area, cairo_t *cr,
int width, int height, gpointer user_data) {
const double t_end = (double)(NUM_SUBJECTS - 1);
const Rgb rail = color_from_hex(app_theme.rail);
const Rgb mauve = color_from_hex(app_theme.accent);
double hx, hy;
(void)area;
(void)width;
@ -139,13 +137,9 @@ void draw_sub_rail(GtkDrawingArea *area, cairo_t *cr,
cairo_set_line_cap(cr, CAIRO_LINE_CAP_ROUND);
cairo_set_line_join(cr, CAIRO_LINE_JOIN_ROUND);
sub_point(0.0, &hx, &hy);
draw_node_halo(cr, hx, hy, SUB_BUBBLE * 1.05,
mauve.r, mauve.g, mauve.b, 0.18);
cairo_new_path(cr);
sub_path(cr, 0.0, t_end);
cairo_set_line_width(cr, 14);
cairo_set_line_width(cr, 12);
cairo_set_source_rgb(cr, rail.r, rail.g, rail.b);
cairo_stroke(cr);
}