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

UI demo with styling #105

Merged
MartinFouilleul merged 2 commits from ilidemi/orca:ui-demo into main 2023-09-16 15:06:23 +00:00
Conversation 2 Commits 2 Files Changed 10 +720 -290
7 changed files with 720 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 33078fd9dc - Show all commits

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.

955
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

46
src/ui/ui.c
View File

@ -1619,7 +1619,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
@ -1706,7 +1706,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
@ -1751,7 +1751,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
@ -2260,7 +2260,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
@ -2552,7 +2552,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
@ -2562,9 +2562,18 @@ oc_ui_select_popup_info oc_ui_select_popup(const char* name, oc_ui_select_popup_
oc_ui_box_push(button); oc_ui_box_push(button);
{ {
oc_ui_container("selected_option", 0) oc_ui_container("selected_option", 0)
{
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_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 },
.size.height = { OC_UI_SIZE_PIXELS, button->rect.h }, .size.height = { OC_UI_SIZE_PIXELS, button->rect.h },
@ -2609,7 +2618,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
@ -2744,9 +2753,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);
@ -2825,6 +2836,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]);
} }
@ -3626,7 +3638,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
@ -4110,6 +4122,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 },
@ -4123,7 +4136,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 = {
@ -4296,6 +4313,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
@ -4308,6 +4326,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;
@ -772,9 +777,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);