Add svg icons for play pause etc

This commit is contained in:
2026-03-05 12:12:26 -05:00
parent 5eaae4deb9
commit cb7ecbd3f7
3 changed files with 30 additions and 10 deletions

View File

@@ -1022,7 +1022,7 @@ static void build_header_bar(AppState *app) {
},
.backgroundColor = g_theme.bg_lighter,
.cornerRadius = CLAY_CORNER_RADIUS(CORNER_RADIUS),
) { CLAY_TEXT(CLAY_STRING("<<"), &g_text_config_dim); }
) { ui_icon(UI_ICON_TRANSPORT_REWIND, uis(16), g_theme.text_dim); }
// Stop
CLAY(CLAY_ID("TbStop"),
@@ -1032,7 +1032,7 @@ static void build_header_bar(AppState *app) {
},
.backgroundColor = g_theme.bg_lighter,
.cornerRadius = CLAY_CORNER_RADIUS(CORNER_RADIUS),
) { CLAY_TEXT(CLAY_STRING("[]"), &g_text_config_dim); }
) { ui_icon(UI_ICON_TRANSPORT_STOP, uis(14), g_theme.text_dim); }
// Play
CLAY(CLAY_ID("TbPlay"),
@@ -1042,7 +1042,7 @@ static void build_header_bar(AppState *app) {
},
.backgroundColor = g_theme.bg_lighter,
.cornerRadius = CLAY_CORNER_RADIUS(CORNER_RADIUS),
) { CLAY_TEXT(CLAY_STRING(">"), &g_text_config_dim); }
) { ui_icon(UI_ICON_TRANSPORT_PLAY, uis(16), g_theme.text_dim); }
// Record
CLAY(CLAY_ID("TbRecord"),
@@ -1052,13 +1052,7 @@ static void build_header_bar(AppState *app) {
},
.backgroundColor = g_theme.bg_lighter,
.cornerRadius = CLAY_CORNER_RADIUS(CORNER_RADIUS),
) {
static Clay_TextElementConfig rec_text = {};
rec_text.textColor = Clay_Color{200, 60, 60, 255};
rec_text.fontSize = FONT_SIZE_NORMAL;
rec_text.wrapMode = CLAY_TEXT_WRAP_NONE;
CLAY_TEXT(CLAY_STRING("O"), &rec_text);
}
) { ui_icon(UI_ICON_TRANSPORT_RECORD, uis(14), Clay_Color{200, 60, 60, 255}); }
}
// Spacer

View File

@@ -104,6 +104,28 @@ static const char *g_icon_svgs[UI_ICON_COUNT] = {
<rect style="fill:url(#linearGradient7734)" transform="scale(1,-1)" rx="1.021" ry="0.264" height="0.932" width="59.883" y="-578.82" x="847.89"/>
<rect style="fill:url(#linearGradient7736)" transform="scale(1,-1)" rx="1.012" ry="0.166" height="0.588" width="59.347" y="-569.52" x="847.89"/>
</svg>)SVG",
// UI_ICON_TRANSPORT_REWIND - skip to start (|<<)
R"(<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<rect x="3" y="5" width="2.5" height="14" rx="0.5" fill="white"/>
<path d="M11 5 L11 19 L4 12 Z" fill="white"/>
<path d="M20 5 L20 19 L13 12 Z" fill="white"/>
</svg>)",
// UI_ICON_TRANSPORT_STOP - filled square
R"(<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<rect x="5" y="5" width="14" height="14" rx="1.5" fill="white"/>
</svg>)",
// UI_ICON_TRANSPORT_PLAY - right-pointing triangle
R"(<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M6 4 L6 20 L20 12 Z" fill="white"/>
</svg>)",
// UI_ICON_TRANSPORT_RECORD - filled circle
R"(<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="8" fill="white"/>
</svg>)",
};
U8 *ui_icons_rasterize_atlas(S32 *out_w, S32 *out_h, S32 icon_size) {

View File

@@ -10,6 +10,10 @@ enum UI_IconID {
UI_ICON_KNOB,
UI_ICON_SLIDER_THUMB,
UI_ICON_FADER,
UI_ICON_TRANSPORT_REWIND,
UI_ICON_TRANSPORT_STOP,
UI_ICON_TRANSPORT_PLAY,
UI_ICON_TRANSPORT_RECORD,
UI_ICON_COUNT
};