SectrPrototype/code/ui_screen.odin

package sectr

UI_ScreenState :: struct
{
	using base : UI_State,
	menu_bar : struct
	{
		pos, size    : Vec2,
		container    : UI_HBox,
		settings_btn : struct
		{
			using widget : UI_Widget,
		}
	},
	settings_menu : struct
	{
		pos, size, min_size : Vec2,
		container           : UI_VBox,
		is_open             : b32,
		is_maximized        : b32,
	},
}

ui_screen_tick :: proc() {
	profile("Screenspace Imgui")

	using state := get_state()
	ui_graph_build( & screen_ui )
	ui := ui_context

	ui_screen_menu_bar()
	ui_screen_settings_menu()
}

ui_screen_menu_bar :: proc()
{
	profile("App Menu Bar")
	fmt :: str_fmt_alloc

	using state := get_state()
	using screen_ui
	{
		using menu_bar
		ui_layout( UI_Layout {
			flags        = {.Fixed_Position_X, .Fixed_Position_Y, .Fixed_Width, .Fixed_Height, .Origin_At_Anchor_Center},
			// anchor       = range2({0.5, 0.5}, {0.5, 0.5} ),
			alignment    = { 0.5, 0.5 },
			border_width = 1.0,
			font_size    = 12,
			// pos = {},
			pos          = menu_bar.pos,
			size         = range2( menu_bar.size, {}),
		})
		ui_style( UI_Style {
			bg_color     = { 0, 0, 0, 30 },
			border_color = { 0, 0, 0, 200 },
			font         = default_font,
			text_color   = Color_White,
		})
		// ui_hbox( & container, .Left_To_Right, "App Menu Bar", { .Mouse_Clickable} )
		container = ui_hbox( .Left_To_Right, "Menu Bar" )
		// ui_parent(container)

		ui_layout( UI_Layout {
			flags        = {},
			anchor       = {},
			text_alignment = {0.5, 0.5},
			border_width = 1.0,
			font_size    = 12,
		})
		style_theme := to_ui_style_combo({
			bg_color   = Color_Frame_Disabled,
			font       = default_font,
			text_color = Color_White,
		})
		style_theme.hot.bg_color    = Color_Blue
		style_theme.active.bg_color = Color_Frame_Select
		ui_style(style_theme)

		move_box := ui_button("Move Box");
		{
			using move_box
			if active {
				menu_bar.pos += input.mouse.delta
			}
			layout.anchor.ratio.x = 0.2
		}

		spacer := ui_spacer("Menu Bar: Move Spacer")
		spacer.layout.flags |= {.Fixed_Width}
		spacer.layout.size.min.x = 50

		settings_btn.widget = ui_button("Settings Btn")
		settings_btn.text = str_intern("Settings")
		settings_btn.layout.flags = {
			// .Scale_Width_By_Height_Ratio,
			.Fixed_Width
		}
		settings_btn.layout.size.min.x = 100
		if settings_btn.pressed {
			settings_menu.is_open = true
		}

		spacer = ui_spacer("Menu Bar: End Spacer")
		spacer.layout.anchor.ratio.x = 1.0

		// ui_hbox_end( container)
	}
}

ui_screen_settings_menu :: proc()
{
	profile("Settings Menu")
	using state := get_state()
	using state.screen_ui
	if ! settings_menu.is_open do return

	using settings_menu
	if size.x < min_size.x do size.x = min_size.x
	if size.y < min_size.y do size.y = min_size.y

	container = ui_vbox_begin( .Top_To_Bottom, "Settings Menu", {.Mouse_Clickable})
	{
		{
			using container
			// flags = {}
			layout.flags     = { .Fixed_Width, .Fixed_Height, .Origin_At_Anchor_Center }
			layout.pos       = pos
			layout.alignment = { 0.5, 0.5 }
			// layout.alignment = {}
			layout.size      = range2( size, {})
			style.bg_color   = Color_BG_Panel_Translucent
		}
		ui_parent(container)

		ui_layout( UI_Layout {
			font_size = 16,
			alignment = {0, 1}
		})
		ui_style( UI_Style {
			bg_color   = Color_Transparent,
			font       = default_font,
			text_color = Color_White,
		})
		ui_style_ref().hot.bg_color = Color_Blue
		frame_bar := ui_hbox_begin(.Left_To_Right, "Settings Menu: Frame Bar", { .Mouse_Clickable, .Focusable, .Click_To_Focus })
		{
			frame_bar.style.bg_color    = Color_BG_Panel
			frame_bar.layout.flags      = {.Fixed_Height}
			frame_bar.layout.size.min.y = 50
			ui_parent(frame_bar)

			title := ui_text("Settings Menu: Title", str_intern("Settings Menu"), {.Disabled})
			{
				using title
				layout.margins        = { 0, 0, 15, 0}
				layout.text_alignment = {0 , 0.5}
				layout.anchor.ratio.x = 1.0
			}

			ui_style(ui_style_peek())
			style := ui_style_ref()
			style.default.bg_color = Color_Black
			style.hot.bg_color = Color_Frame_Hover
			maximize_btn := ui_button("Settings Menu: Maximize Btn")
			{
				using maximize_btn
				layout.flags          = {.Fixed_Width}
				layout.size.min       = {50, 0}
				layout.text_alignment = {0.5, 0.5}
				layout.anchor.ratio.x = 1.0
				if maximize_btn.pressed {
					settings_menu.is_maximized = ~settings_menu.is_maximized
				}
				if settings_menu.is_maximized do text = str_intern("min")
				else do text = str_intern("max")
			}

			style.default.bg_color = Color_GreyRed
			style.hot.    bg_color = Color_Red
			close_btn := ui_button("Settings Menu: Close Btn")
			{
				using close_btn
				text = str_intern("close")
				layout.flags          = {.Fixed_Width}
				layout.size.min       = {50, 0}
				layout.text_alignment = {0.5, 0.5}
				layout.anchor.ratio.x = 1.0
				if close_btn.pressed {
					settings_menu.is_open = false
				}
			}

			ui_hbox_end(frame_bar)
		}
		if frame_bar.active {
			pos += input.mouse.delta
		}

		spacer := ui_spacer("Settings Menu: Spacer")
		spacer.layout.anchor.ratio.y = 1.0

		ui_vbox_end(container, compute_layout = false )
	}
	if settings_menu.is_maximized {
		using settings_menu.container
		layout.flags = {.Origin_At_Anchor_Center }
		layout.pos   = {}
	}

	ui_resizable_handles( & container, & pos, & size)
}