hmn
/
orca
5
Fork 2
Code Issues 21 Pull Requests 1 Packages Projects Releases Wiki Activity

UI demo with styling

This commit is contained in:
Ilia Demianenko 2023-09-14 23:26:38 -07:00
parent d44ac5a1fb
commit 9377558993
7 changed files with 734 additions and 307 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
samples/ui/data/OpenSans-Bold.ttf Normal file
View File

Binary file not shown.

BIN
samples/ui/data/OpenSans-Regular.ttf Normal file
View File

Binary file not shown.

BIN
samples/ui/data/OpenSansLatinSubset.ttf
View File

Binary file not shown.

953
samples/ui/src/main.c
View File

File diff suppressed because it is too large Load Diff

1
src/libc-shim/include/string.h
View File

@ -10,4 +10,5 @@ int strcmp(const char* s1, const char* s2);
int strncmp(const char* s1, const char* s2, size_t n); int strncmp(const char* s1, const char* s2, size_t n);
char* strcpy(char* __restrict s1, const char* __restrict s2); char* strcpy(char* __restrict s1, const char* __restrict s2);
#define snprintf stbsp_snprintf
#define vsnprintf stbsp_vsnprintf #define vsnprintf stbsp_vsnprintf

75
src/ui/ui.c
View File

@ -1620,7 +1620,7 @@ oc_ui_sig oc_ui_button_str8(oc_str8 label)
.layout.margin.y = 6, .layout.margin.y = 6,
.color = theme->primary, .color = theme->primary,
.bgColor = theme->fill0, .bgColor = theme->fill0,
.roundness = 3 }; .roundness = theme->roundnessSmall };
oc_ui_style_mask defaultMask = OC_UI_STYLE_SIZE_WIDTH oc_ui_style_mask defaultMask = OC_UI_STYLE_SIZE_WIDTH
| OC_UI_STYLE_SIZE_HEIGHT | OC_UI_STYLE_SIZE_HEIGHT
@ -1701,7 +1701,7 @@ oc_ui_sig oc_ui_checkbox(const char* name, bool* checked)
.size.height = { OC_UI_SIZE_PIXELS, 16 }, .size.height = { OC_UI_SIZE_PIXELS, 16 },
.bgColor = theme->primary, .bgColor = theme->primary,
.color = theme->white, .color = theme->white,
.roundness = 3 }; .roundness = theme->roundnessSmall };
oc_ui_style_mask defaultMask = OC_UI_STYLE_SIZE_WIDTH oc_ui_style_mask defaultMask = OC_UI_STYLE_SIZE_WIDTH
| OC_UI_STYLE_SIZE_HEIGHT | OC_UI_STYLE_SIZE_HEIGHT
@ -1740,7 +1740,7 @@ oc_ui_sig oc_ui_checkbox(const char* name, bool* checked)
.bgColor = { 0 }, .bgColor = { 0 },
.borderColor = theme->text3, .borderColor = theme->text3,
.borderSize = 1, .borderSize = 1,
.roundness = 3 }; .roundness = theme->roundnessSmall };
oc_ui_style_mask defaultMask = OC_UI_STYLE_SIZE_WIDTH oc_ui_style_mask defaultMask = OC_UI_STYLE_SIZE_WIDTH
| OC_UI_STYLE_SIZE_HEIGHT | OC_UI_STYLE_SIZE_HEIGHT
@ -2241,7 +2241,7 @@ void oc_ui_tooltip(const char* label)
.floatTarget = { 24, 0 }, .floatTarget = { 24, 0 },
.bgColor = theme->palette->grey7, .bgColor = theme->palette->grey7,
.color = theme->bg0, .color = theme->bg0,
.roundness = 6 }; .roundness = theme->roundnessMedium };
oc_ui_style_mask contentsMask = OC_UI_STYLE_SIZE oc_ui_style_mask contentsMask = OC_UI_STYLE_SIZE
| OC_UI_STYLE_LAYOUT_MARGINS | OC_UI_STYLE_LAYOUT_MARGINS
| OC_UI_STYLE_FLOAT | OC_UI_STYLE_FLOAT
@ -2532,7 +2532,7 @@ oc_ui_select_popup_info oc_ui_select_popup(const char* name, oc_ui_select_popup_
.layout.margin.x = 12, .layout.margin.x = 12,
.layout.margin.y = 6, .layout.margin.y = 6,
.bgColor = theme->fill0, .bgColor = theme->fill0,
.roundness = 3 }, .roundness = theme->roundnessSmall },
OC_UI_STYLE_SIZE OC_UI_STYLE_SIZE
| OC_UI_STYLE_LAYOUT_MARGIN_X | OC_UI_STYLE_LAYOUT_MARGIN_X
| OC_UI_STYLE_LAYOUT_MARGIN_Y | OC_UI_STYLE_LAYOUT_MARGIN_Y
@ -2543,7 +2543,16 @@ oc_ui_select_popup_info oc_ui_select_popup(const char* name, oc_ui_select_popup_
{ {
oc_ui_container("selected_option", 0) oc_ui_container("selected_option", 0)
{ {
oc_ui_label_str8(info->options[info->selectedIndex]); if(info->selectedIndex == -1)
{
oc_ui_style_next(&(oc_ui_style){ .color = theme->text2 },
OC_UI_STYLE_COLOR);
oc_ui_label_str8(info->placeholder);
}
else
{
oc_ui_label_str8(info->options[info->selectedIndex]);
}
} }
oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PIXELS, button->rect.h }, oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PIXELS, button->rect.h },
@ -2589,7 +2598,7 @@ oc_ui_select_popup_info oc_ui_select_popup(const char* name, oc_ui_select_popup_
.bgColor = theme->bg3, .bgColor = theme->bg3,
.borderColor = theme->elevatedBorder, .borderColor = theme->elevatedBorder,
.borderSize = 1, .borderSize = 1,
.roundness = 6 }, .roundness = theme->roundnessMedium },
OC_UI_STYLE_SIZE OC_UI_STYLE_SIZE
| OC_UI_STYLE_FLOAT | OC_UI_STYLE_FLOAT
| OC_UI_STYLE_LAYOUT | OC_UI_STYLE_LAYOUT
@ -2717,9 +2726,11 @@ oc_ui_radio_group_info oc_ui_radio_group(const char* name, oc_ui_radio_group_inf
for(int i = 0; i < info->optionCount; i++) for(int i = 0; i < info->optionCount; i++)
{ {
oc_ui_style_next(&(oc_ui_style){ .layout.axis = OC_UI_AXIS_X, oc_ui_style_next(&(oc_ui_style){ .layout.axis = OC_UI_AXIS_X,
.layout.spacing = 8 }, .layout.spacing = 8,
.layout.align.y = OC_UI_ALIGN_CENTER },
OC_UI_STYLE_LAYOUT_AXIS OC_UI_STYLE_LAYOUT_AXIS
| OC_UI_STYLE_LAYOUT_SPACING); | OC_UI_STYLE_LAYOUT_SPACING
| OC_UI_STYLE_LAYOUT_ALIGN_Y);
oc_ui_box* row = oc_ui_box_begin_str8(info->options[i], OC_UI_FLAG_CLICKABLE); oc_ui_box* row = oc_ui_box_begin_str8(info->options[i], OC_UI_FLAG_CLICKABLE);
oc_ui_flags flags = OC_UI_FLAG_DRAW_BACKGROUND | OC_UI_FLAG_DRAW_BORDER | OC_UI_FLAG_DRAW_PROC; oc_ui_flags flags = OC_UI_FLAG_DRAW_BACKGROUND | OC_UI_FLAG_DRAW_BORDER | OC_UI_FLAG_DRAW_PROC;
oc_ui_box* radio = oc_ui_box_make("radio", flags); oc_ui_box* radio = oc_ui_box_make("radio", flags);
@ -2798,6 +2809,7 @@ oc_ui_radio_group_info oc_ui_radio_group(const char* name, oc_ui_radio_group_inf
oc_ui_container("label", 0) oc_ui_container("label", 0)
{ {
oc_ui_tag_next("label");
oc_ui_label_str8(info->options[i]); oc_ui_label_str8(info->options[i]);
} }
@ -3231,33 +3243,30 @@ const oc_ui_edit_command OC_UI_EDIT_COMMANDS_WINDOWS[] = {
.mods = OC_KEYMOD_CTRL, .mods = OC_KEYMOD_CTRL,
.operation = OC_UI_EDIT_CUT, .operation = OC_UI_EDIT_CUT,
.move = OC_UI_EDIT_MOVE_NONE }, .move = OC_UI_EDIT_MOVE_NONE },
{ { .key = OC_KEY_DELETE,
.key = OC_KEY_DELETE, .mods = OC_KEYMOD_SHIFT,
.mods = OC_KEYMOD_SHIFT, .operation = OC_UI_EDIT_CUT,
.operation = OC_UI_EDIT_CUT, .move = OC_UI_EDIT_MOVE_NONE },
.move = OC_UI_EDIT_MOVE_NONE },
//NOTE(martin): copy //NOTE(martin): copy
{ {
.key = OC_KEY_C, .key = OC_KEY_C,
.mods = OC_KEYMOD_CTRL, .mods = OC_KEYMOD_CTRL,
.operation = OC_UI_EDIT_COPY, .operation = OC_UI_EDIT_COPY,
.move = OC_UI_EDIT_MOVE_NONE }, .move = OC_UI_EDIT_MOVE_NONE },
{ { .key = OC_KEY_INSERT,
.key = OC_KEY_INSERT, .mods = OC_KEYMOD_CTRL,
.mods = OC_KEYMOD_CTRL, .operation = OC_UI_EDIT_COPY,
.operation = OC_UI_EDIT_COPY, .move = OC_UI_EDIT_MOVE_NONE },
.move = OC_UI_EDIT_MOVE_NONE },
//NOTE(martin): paste //NOTE(martin): paste
{ {
.key = OC_KEY_V, .key = OC_KEY_V,
.mods = OC_KEYMOD_CTRL, .mods = OC_KEYMOD_CTRL,
.operation = OC_UI_EDIT_PASTE, .operation = OC_UI_EDIT_PASTE,
.move = OC_UI_EDIT_MOVE_NONE }, .move = OC_UI_EDIT_MOVE_NONE },
{ { .key = OC_KEY_INSERT,
.key = OC_KEY_INSERT, .mods = OC_KEYMOD_SHIFT,
.mods = OC_KEYMOD_SHIFT, .operation = OC_UI_EDIT_PASTE,
.operation = OC_UI_EDIT_PASTE, .move = OC_UI_EDIT_MOVE_NONE }
.move = OC_UI_EDIT_MOVE_NONE }
}; };
const u32 OC_UI_EDIT_COMMAND_MACOS_COUNT = sizeof(OC_UI_EDIT_COMMANDS_MACOS) / sizeof(oc_ui_edit_command); const u32 OC_UI_EDIT_COMMAND_MACOS_COUNT = sizeof(OC_UI_EDIT_COMMANDS_MACOS) / sizeof(oc_ui_edit_command);
@ -3602,7 +3611,7 @@ oc_ui_text_box_result oc_ui_text_box(const char* name, oc_arena* arena, oc_str8
oc_ui_style frameStyle = { .layout.margin.x = 12, oc_ui_style frameStyle = { .layout.margin.x = 12,
.layout.margin.y = 6, .layout.margin.y = 6,
.bgColor = theme->fill0, .bgColor = theme->fill0,
.roundness = 3 }; .roundness = theme->roundnessSmall };
oc_ui_style_mask frameMask = OC_UI_STYLE_LAYOUT_MARGIN_X oc_ui_style_mask frameMask = OC_UI_STYLE_LAYOUT_MARGIN_X
| OC_UI_STYLE_LAYOUT_MARGIN_Y | OC_UI_STYLE_LAYOUT_MARGIN_Y
| OC_UI_STYLE_BG_COLOR | OC_UI_STYLE_BG_COLOR
@ -4085,6 +4094,7 @@ oc_ui_theme OC_UI_DARK_THEME = {
.primary = { 0.33, 0.66, 1, 1 }, // blue5 .primary = { 0.33, 0.66, 1, 1 }, // blue5
.primaryHover = { 0.5, 0.757, 1, 1 }, // blue6 .primaryHover = { 0.5, 0.757, 1, 1 }, // blue6
.primaryActive = { 0.66, 0.84, 1, 1 }, // blue7 .primaryActive = { 0.66, 0.84, 1, 1 }, // blue7
.border = { 1, 1, 1, 0.08 },
.fill0 = { 1, 1, 1, 0.12 }, .fill0 = { 1, 1, 1, 0.12 },
.fill1 = { 1, 1, 1, 0.16 }, .fill1 = { 1, 1, 1, 0.16 },
.fill2 = { 1, 1, 1, 0.2 }, .fill2 = { 1, 1, 1, 0.2 },
@ -4098,7 +4108,11 @@ oc_ui_theme OC_UI_DARK_THEME = {
.text2 = { 0.976, 0.976, 0.976, 0.6 }, // grey9 .text2 = { 0.976, 0.976, 0.976, 0.6 }, // grey9
.text3 = { 0.976, 0.976, 0.976, 0.35 }, // grey9 .text3 = { 0.976, 0.976, 0.976, 0.35 }, // grey9
.sliderThumbBorder = { 0, 0, 0, 0.075 }, .sliderThumbBorder = { 0, 0, 0, 0.075 },
.elevatedBorder = { 1, 1, 1, 0.1 } .elevatedBorder = { 1, 1, 1, 0.1 },
.roundnessSmall = 3,
.roundnessMedium = 6,
.roundnessLarge = 9
}; };
oc_ui_palette OC_UI_LIGHT_PALETTE = { oc_ui_palette OC_UI_LIGHT_PALETTE = {
@ -4271,6 +4285,7 @@ oc_ui_theme OC_UI_LIGHT_THEME = {
.primary = { 0.000, 0.392, 0.980, 1 }, // blue5 .primary = { 0.000, 0.392, 0.980, 1 }, // blue5
.primaryHover = { 0.000, 0.384, 0.839, 1 }, // blue6 .primaryHover = { 0.000, 0.384, 0.839, 1 }, // blue6
.primaryActive = { 0.000, 0.310, 0.702, 1 }, // blue7 .primaryActive = { 0.000, 0.310, 0.702, 1 }, // blue7
.border = { 0.110, 0.122, 0.137, 0.08 }, // grey9
.fill0 = { 0.180, 0.196, 0.220, 0.05 }, // grey8 .fill0 = { 0.180, 0.196, 0.220, 0.05 }, // grey8
.fill1 = { 0.180, 0.196, 0.220, 0.09 }, // grey8 .fill1 = { 0.180, 0.196, 0.220, 0.09 }, // grey8
.fill2 = { 0.180, 0.196, 0.220, 0.13 }, // grey8 .fill2 = { 0.180, 0.196, 0.220, 0.13 }, // grey8
@ -4283,6 +4298,10 @@ oc_ui_theme OC_UI_LIGHT_THEME = {
.text1 = { 0.110, 0.122, 0.137, 0.8 }, // grey9 .text1 = { 0.110, 0.122, 0.137, 0.8 }, // grey9
.text2 = { 0.110, 0.122, 0.137, 0.62 }, // grey9 .text2 = { 0.110, 0.122, 0.137, 0.62 }, // grey9
.text3 = { 0.110, 0.122, 0.137, 0.35 }, // grey9 .text3 = { 0.110, 0.122, 0.137, 0.35 }, // grey9
.sliderThumbBorder = { 0, 0, 0, 0.075 }, .sliderThumbBorder = { 0, 0, 0, 0.125 },
.elevatedBorder = { 0, 0, 0, 0.075 } .elevatedBorder = { 0, 0, 0, 0.075 },
.roundnessSmall = 3,
.roundnessMedium = 6,
.roundnessLarge = 9
}; };

8
src/ui/ui.h
View File

@ -349,6 +349,7 @@ typedef struct oc_ui_theme
oc_color primary; oc_color primary;
oc_color primaryHover; oc_color primaryHover;
oc_color primaryActive; oc_color primaryActive;
oc_color border;
oc_color fill0; oc_color fill0;
oc_color fill1; oc_color fill1;
oc_color fill2; oc_color fill2;
@ -364,6 +365,10 @@ typedef struct oc_ui_theme
oc_color sliderThumbBorder; oc_color sliderThumbBorder;
oc_color elevatedBorder; oc_color elevatedBorder;
f32 roundnessSmall;
f32 roundnessMedium;
f32 roundnessLarge;
oc_ui_palette* palette; oc_ui_palette* palette;
} oc_ui_theme; } oc_ui_theme;
@ -771,9 +776,10 @@ ORCA_API oc_ui_text_box_result oc_ui_text_box(const char* name, oc_arena* arena,
typedef struct oc_ui_select_popup_info typedef struct oc_ui_select_popup_info
{ {
bool changed; bool changed;
int selectedIndex; int selectedIndex; // -1 if nothing is selected
int optionCount; int optionCount;
oc_str8* options; oc_str8* options;
oc_str8 placeholder;
} oc_ui_select_popup_info; } oc_ui_select_popup_info;
ORCA_API oc_ui_select_popup_info oc_ui_select_popup(const char* name, oc_ui_select_popup_info* info); ORCA_API oc_ui_select_popup_info oc_ui_select_popup(const char* name, oc_ui_select_popup_info* info);