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);
char* strcpy(char* __restrict s1, const char* __restrict s2);
#define snprintf stbsp_snprintf
#define vsnprintf stbsp_vsnprintf

77
src/ui/ui.c
View File

@ -1620,7 +1620,7 @@ oc_ui_sig oc_ui_button_str8(oc_str8 label)
.layout.margin.y = 6,
.color = theme->primary,
.bgColor = theme->fill0,
.roundness = 3 };
.roundness = theme->roundnessSmall };
oc_ui_style_mask defaultMask = OC_UI_STYLE_SIZE_WIDTH
| 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 },
.bgColor = theme->primary,
.color = theme->white,
.roundness = 3 };
.roundness = theme->roundnessSmall };
oc_ui_style_mask defaultMask = OC_UI_STYLE_SIZE_WIDTH
| OC_UI_STYLE_SIZE_HEIGHT
@ -1740,7 +1740,7 @@ oc_ui_sig oc_ui_checkbox(const char* name, bool* checked)
.bgColor = { 0 },
.borderColor = theme->text3,
.borderSize = 1,
.roundness = 3 };
.roundness = theme->roundnessSmall };
oc_ui_style_mask defaultMask = OC_UI_STYLE_SIZE_WIDTH
| OC_UI_STYLE_SIZE_HEIGHT
@ -2241,7 +2241,7 @@ void oc_ui_tooltip(const char* label)
.floatTarget = { 24, 0 },
.bgColor = theme->palette->grey7,
.color = theme->bg0,
.roundness = 6 };
.roundness = theme->roundnessMedium };
oc_ui_style_mask contentsMask = OC_UI_STYLE_SIZE
| OC_UI_STYLE_LAYOUT_MARGINS
| 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.y = 6,
.bgColor = theme->fill0,
.roundness = 3 },
.roundness = theme->roundnessSmall },
OC_UI_STYLE_SIZE
| OC_UI_STYLE_LAYOUT_MARGIN_X
| 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_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 },
@ -2589,7 +2598,7 @@ oc_ui_select_popup_info oc_ui_select_popup(const char* name, oc_ui_select_popup_
.bgColor = theme->bg3,
.borderColor = theme->elevatedBorder,
.borderSize = 1,
.roundness = 6 },
.roundness = theme->roundnessMedium },
OC_UI_STYLE_SIZE
| OC_UI_STYLE_FLOAT
| OC_UI_STYLE_LAYOUT
@ -2717,14 +2726,16 @@ 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++)
{
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_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_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_set_draw_proc(radio, oc_ui_radio_indicator_draw, 0);
oc_ui_sig sig = oc_ui_box_sig(row);
if(sig.clicked)
{
@ -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_tag_next("label");
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,
.operation = OC_UI_EDIT_CUT,
.move = OC_UI_EDIT_MOVE_NONE },
{
.key = OC_KEY_DELETE,
.mods = OC_KEYMOD_SHIFT,
.operation = OC_UI_EDIT_CUT,
.move = OC_UI_EDIT_MOVE_NONE },
{ .key = OC_KEY_DELETE,
.mods = OC_KEYMOD_SHIFT,
.operation = OC_UI_EDIT_CUT,
.move = OC_UI_EDIT_MOVE_NONE },
//NOTE(martin): copy
{
.key = OC_KEY_C,
.mods = OC_KEYMOD_CTRL,
.operation = OC_UI_EDIT_COPY,
.move = OC_UI_EDIT_MOVE_NONE },
{
.key = OC_KEY_INSERT,
.mods = OC_KEYMOD_CTRL,
.operation = OC_UI_EDIT_COPY,
.move = OC_UI_EDIT_MOVE_NONE },
{ .key = OC_KEY_INSERT,
.mods = OC_KEYMOD_CTRL,
.operation = OC_UI_EDIT_COPY,
.move = OC_UI_EDIT_MOVE_NONE },
//NOTE(martin): paste
{
.key = OC_KEY_V,
.mods = OC_KEYMOD_CTRL,
.operation = OC_UI_EDIT_PASTE,
.move = OC_UI_EDIT_MOVE_NONE },
{
.key = OC_KEY_INSERT,
.mods = OC_KEYMOD_SHIFT,
.operation = OC_UI_EDIT_PASTE,
.move = OC_UI_EDIT_MOVE_NONE }
{ .key = OC_KEY_INSERT,
.mods = OC_KEYMOD_SHIFT,
.operation = OC_UI_EDIT_PASTE,
.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);
@ -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,
.layout.margin.y = 6,
.bgColor = theme->fill0,
.roundness = 3 };
.roundness = theme->roundnessSmall };
oc_ui_style_mask frameMask = OC_UI_STYLE_LAYOUT_MARGIN_X
| OC_UI_STYLE_LAYOUT_MARGIN_Y
| OC_UI_STYLE_BG_COLOR
@ -4085,6 +4094,7 @@ oc_ui_theme OC_UI_DARK_THEME = {
.primary = { 0.33, 0.66, 1, 1 }, // blue5
.primaryHover = { 0.5, 0.757, 1, 1 }, // blue6
.primaryActive = { 0.66, 0.84, 1, 1 }, // blue7
.border = { 1, 1, 1, 0.08 },
.fill0 = { 1, 1, 1, 0.12 },
.fill1 = { 1, 1, 1, 0.16 },
.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
.text3 = { 0.976, 0.976, 0.976, 0.35 }, // grey9
.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 = {
@ -4271,6 +4285,7 @@ oc_ui_theme OC_UI_LIGHT_THEME = {
.primary = { 0.000, 0.392, 0.980, 1 }, // blue5
.primaryHover = { 0.000, 0.384, 0.839, 1 }, // blue6
.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
.fill1 = { 0.180, 0.196, 0.220, 0.09 }, // 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
.text2 = { 0.110, 0.122, 0.137, 0.62 }, // grey9
.text3 = { 0.110, 0.122, 0.137, 0.35 }, // grey9
.sliderThumbBorder = { 0, 0, 0, 0.075 },
.elevatedBorder = { 0, 0, 0, 0.075 }
.sliderThumbBorder = { 0, 0, 0, 0.125 },
.elevatedBorder = { 0, 0, 0, 0.075 },
.roundnessSmall = 3,
.roundnessMedium = 6,
.roundnessLarge = 9
};

10
src/ui/ui.h
View File

@ -349,6 +349,7 @@ typedef struct oc_ui_theme
oc_color primary;
oc_color primaryHover;
oc_color primaryActive;
oc_color border;
oc_color fill0;
oc_color fill1;
oc_color fill2;
@ -364,6 +365,10 @@ typedef struct oc_ui_theme
oc_color sliderThumbBorder;
oc_color elevatedBorder;
f32 roundnessSmall;
f32 roundnessMedium;
f32 roundnessLarge;
oc_ui_palette* palette;
} oc_ui_theme;
@ -623,7 +628,7 @@ typedef struct oc_ui_context
oc_ui_edit_move editSelectionMode;
i32 editWordSelectionInitialCursor;
i32 editWordSelectionInitialMark;
bool clipboardRegistered;
oc_ui_theme* 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
{
bool changed;
int selectedIndex;
int selectedIndex; // -1 if nothing is selected
int optionCount;
oc_str8* options;
oc_str8 placeholder;
} 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);