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

Make UI look nicer 

Design system by semi.design: https://semi.design/en-US/start/overview

SVG icon workflow:
- Find the SVG with devtools
- Copy curve path to https://yqnn.github.io/svg-path-editor/
- Scale X and Y by 1/size (usually 1/24)
- In `ui.c`, do offset and scale with a matrix transform, then the draw commands can use the exact numbers from the normalized SVG
This commit is contained in:
Ilia Demianenko 2023-09-06 22:20:59 -07:00
parent 0db1589dc6
commit aff03630da
3 changed files with 734 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -75,19 +75,9 @@ void widget_end_view(void)
ORCA_EXPORT void oc_on_frame_refresh(void)
{
oc_ui_style defaultStyle = { .bgColor = { 0 },
.color = { 1, 1, 1, 1 },
.font = font,
.fontSize = 16,
.borderColor = { 0.278, 0.333, 0.412, 1 },
.borderSize = 2 };
oc_ui_style defaultStyle = { .font = font };
oc_ui_style_mask defaultMask = OC_UI_STYLE_BG_COLOR
| OC_UI_STYLE_COLOR
| OC_UI_STYLE_BORDER_COLOR
| OC_UI_STYLE_BORDER_SIZE
| OC_UI_STYLE_FONT
| OC_UI_STYLE_FONT_SIZE;
oc_ui_style_mask defaultMask = OC_UI_STYLE_FONT;
oc_ui_frame(frameSize, &defaultStyle, defaultMask)
{
@ -98,21 +88,20 @@ ORCA_EXPORT void oc_on_frame_refresh(void)
.layout.axis = OC_UI_AXIS_Y,
.layout.align.x = OC_UI_ALIGN_CENTER,
.layout.align.y = OC_UI_ALIGN_START,
.layout.spacing = 10,
.layout.margin.x = 10,
.layout.margin.y = 10,
.bgColor = { 0.11, 0.11, 0.11, 1 } },
.layout.spacing = 10},
OC_UI_STYLE_SIZE
| OC_UI_STYLE_LAYOUT
| OC_UI_STYLE_BG_COLOR);
| OC_UI_STYLE_LAYOUT);
oc_ui_container("background", OC_UI_FLAG_DRAW_BACKGROUND)
{
oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PARENT, 1 },
.size.height = { OC_UI_SIZE_CHILDREN },
.layout.align.x = OC_UI_ALIGN_CENTER },
.layout.align.x = OC_UI_ALIGN_CENTER,
.layout.margin.x = 10,
.layout.margin.y = 10 },
OC_UI_STYLE_SIZE
| OC_UI_STYLE_LAYOUT_ALIGN_X);
| OC_UI_STYLE_LAYOUT_ALIGN_X
| OC_UI_STYLE_LAYOUT_MARGINS);
oc_ui_container("title", 0)
{
oc_ui_style_next(&(oc_ui_style){ .fontSize = 26 }, OC_UI_STYLE_FONT_SIZE);
@ -120,19 +109,7 @@ ORCA_EXPORT void oc_on_frame_refresh(void)
if(oc_ui_box_sig(oc_ui_box_top()).hovering)
{
oc_ui_tooltip("tooltip")
{
oc_ui_style_next(&(oc_ui_style){ .bgColor = { 1, 0.99, 0.82, 1 } },
OC_UI_STYLE_BG_COLOR);
oc_ui_container("background", OC_UI_FLAG_DRAW_BACKGROUND)
{
oc_ui_style_next(&(oc_ui_style){ .color = { 0, 0, 0, 1 } },
OC_UI_STYLE_COLOR);
oc_ui_label("That is a tooltip!");
}
}
oc_ui_tooltip("That is a tooltip!");
}
}
@ -167,8 +144,10 @@ ORCA_EXPORT void oc_on_frame_refresh(void)
}
oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PARENT, 1 },
.size.height = { OC_UI_SIZE_PARENT, 1, 1 } },
OC_UI_STYLE_SIZE);
.size.height = { OC_UI_SIZE_PARENT, 1, 1 },
.layout.margin.x = 10,
.layout.margin.y = 10 },
OC_UI_STYLE_SIZE | OC_UI_STYLE_LAYOUT_MARGINS);
oc_ui_style_next(&(oc_ui_style){ .layout.axis = OC_UI_AXIS_X }, OC_UI_STYLE_LAYOUT_AXIS);
oc_ui_container("contents", 0)
@ -218,13 +197,6 @@ ORCA_EXPORT void oc_on_frame_refresh(void)
.size.height = { OC_UI_SIZE_PARENT, 1 } },
OC_UI_STYLE_SIZE);
oc_ui_pattern pattern = { 0 };
oc_ui_pattern_push(oc_scratch(), &pattern, (oc_ui_selector){ .kind = OC_UI_SEL_TAG, .tag = oc_ui_tag_make("checkbox") });
oc_ui_style_match_after(pattern,
&(oc_ui_style){ .bgColor = { 0, 1, 0, 1 },
.color = { 1, 1, 1, 1 } },
OC_UI_STYLE_COLOR | OC_UI_STYLE_BG_COLOR);
widget_view("checkboxes")
{
static bool check1 = true;
@ -253,45 +225,39 @@ ORCA_EXPORT void oc_on_frame_refresh(void)
| OC_UI_STYLE_LAYOUT_SPACING);
oc_ui_container("contents", 0)
{
oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PIXELS, 20 },
.size.height = { OC_UI_SIZE_PIXELS, 200 } },
OC_UI_STYLE_SIZE);
oc_ui_style_next(&(oc_ui_style){ .size.height = { OC_UI_SIZE_PIXELS, 200 } },
OC_UI_STYLE_SIZE_HEIGHT);
static f32 slider1 = 0;
oc_ui_slider("slider1", 0.2, &slider1);
oc_ui_slider("slider1", &slider1);
oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PIXELS, 20 },
.size.height = { OC_UI_SIZE_PIXELS, 200 } },
OC_UI_STYLE_SIZE);
oc_ui_style_next(&(oc_ui_style){ .size.height = { OC_UI_SIZE_PIXELS, 200 } },
OC_UI_STYLE_SIZE_HEIGHT);
static f32 slider2 = 0;
oc_ui_slider("slider2", 0.2, &slider2);
oc_ui_slider("slider2", &slider2);
oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PIXELS, 20 },
.size.height = { OC_UI_SIZE_PIXELS, 200 } },
OC_UI_STYLE_SIZE);
oc_ui_style_next(&(oc_ui_style){ .size.height = { OC_UI_SIZE_PIXELS, 200 } },
OC_UI_STYLE_SIZE_HEIGHT);
static f32 slider3 = 0;
oc_ui_slider("slider3", 0.2, &slider3);
oc_ui_slider("slider3", &slider3);
}
}
widget_view("Horizontal Sliders")
{
oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PIXELS, 200 },
.size.height = { OC_UI_SIZE_PIXELS, 20 } },
OC_UI_STYLE_SIZE);
oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PIXELS, 200 } },
OC_UI_STYLE_SIZE_WIDTH);
static f32 slider1 = 0;
oc_ui_slider("slider1", 0.2, &slider1);
oc_ui_slider("slider1", &slider1);
oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PIXELS, 200 },
.size.height = { OC_UI_SIZE_PIXELS, 20 } },
OC_UI_STYLE_SIZE);
oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PIXELS, 200 } },
OC_UI_STYLE_SIZE_WIDTH);
static f32 slider2 = 0;
oc_ui_slider("slider2", 0.2, &slider2);
oc_ui_slider("slider2", &slider2);
oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PIXELS, 200 },
.size.height = { OC_UI_SIZE_PIXELS, 20 } },
OC_UI_STYLE_SIZE);
oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PIXELS, 200 } },
OC_UI_STYLE_SIZE_WIDTH);
static f32 slider3 = 0;
oc_ui_slider("slider3", 0.2, &slider3);
oc_ui_slider("slider3", &slider3);
}
}
}
@ -325,16 +291,12 @@ ORCA_EXPORT void oc_on_frame_refresh(void)
OC_UI_STYLE_SIZE);
widget_view("Test")
{
oc_ui_pattern pattern = { 0 };
oc_ui_pattern_push(oc_scratch(), &pattern, (oc_ui_selector){ .kind = OC_UI_SEL_TEXT, .text = OC_STR8("panel") });
oc_ui_style_match_after(pattern, &(oc_ui_style){ .bgColor = { 0.3, 0.3, 1, 1 } }, OC_UI_STYLE_BG_COLOR);
static int selected = 0;
oc_str8 options[] = { OC_STR8("option 1"),
OC_STR8("option 2"),
OC_STR8("long option 3"),
OC_STR8("option 4"),
OC_STR8("option 5") };
oc_str8 options[] = { OC_STR8("Option 1"),
OC_STR8("Option 2"),
OC_STR8("Long option 3"),
OC_STR8("Option 4"),
OC_STR8("Option 5") };
oc_ui_select_popup_info info = { .selectedIndex = selected,
.optionCount = 5,
.options = options };

824
src/ui/ui.c
View File

File diff suppressed because it is too large Load Diff

47
src/ui/ui.h
View File

@ -176,6 +176,26 @@ extern "C"
oc_ui_style_mask animationMask;
} oc_ui_style;
typedef struct oc_ui_theme
{
oc_color white;
oc_color primary;
oc_color primaryHover;
oc_color primaryActive;
oc_color fill0;
oc_color fill1;
oc_color fill2;
oc_color bg0;
oc_color bg1;
oc_color bg2;
oc_color bg3;
oc_color bg4;
oc_color text0;
oc_color text1;
oc_color text2;
oc_color text3;
} oc_ui_theme;
typedef struct oc_ui_tag
{
u64 hash;
@ -527,15 +547,14 @@ extern "C"
ORCA_API oc_ui_sig oc_ui_button(const char* label);
ORCA_API oc_ui_sig oc_ui_checkbox(const char* name, bool* checked);
ORCA_API oc_ui_box* oc_ui_slider(const char* label, f32 thumbRatio, f32* scrollValue);
ORCA_API oc_ui_box* oc_ui_slider(const char* label, f32* value);
ORCA_API oc_ui_box* oc_ui_scrollbar(const char* label, f32 thumbRatio, f32* scrollValue);
ORCA_API void oc_ui_panel_begin(const char* name, oc_ui_flags flags);
ORCA_API void oc_ui_panel_end(void);
#define oc_ui_panel(s, f) oc_defer_loop(oc_ui_panel_begin(s, f), oc_ui_panel_end())
ORCA_API oc_ui_sig oc_ui_tooltip_begin(const char* name);
ORCA_API void oc_ui_tooltip_end(void);
#define oc_ui_tooltip(name) oc_defer_loop(oc_ui_tooltip_begin(name), oc_ui_tooltip_end())
ORCA_API void oc_ui_tooltip(const char* label);
ORCA_API void oc_ui_menu_bar_begin(const char* label);
ORCA_API void oc_ui_menu_bar_end(void);
@ -547,16 +566,6 @@ extern "C"
ORCA_API oc_ui_sig oc_ui_menu_button(const char* name);
typedef struct oc_ui_text_box_result
{
bool changed;
bool accepted;
oc_str8 text;
} oc_ui_text_box_result;
ORCA_API oc_ui_text_box_result oc_ui_text_box(const char* name, oc_arena* arena, oc_str8 text);
typedef struct oc_ui_select_popup_info
{
bool changed;
@ -567,6 +576,16 @@ extern "C"
ORCA_API oc_ui_select_popup_info oc_ui_select_popup(const char* name, oc_ui_select_popup_info* info);
typedef struct oc_ui_text_box_result
{
bool changed;
bool accepted;
oc_str8 text;
} oc_ui_text_box_result;
ORCA_API oc_ui_text_box_result oc_ui_text_box(const char* name, oc_arena* arena, oc_str8 text);
#ifdef __cplusplus
} // extern "C"
#endif