Onglets et séparateurs

extends Node


func _ready() -> void:
	var background: ColorRect = ColorRect.new()
	background.color = Color('#12141a')
	add_child(background)
	background.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)

	var split: HSplitContainer = HSplitContainer.new()
	split.split_offset = 260
	add_child(split)
	split.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)

	split.add_child(_side_panel())
	split.add_child(_tabs())

	print('drag the divider, the two sides share the width')


func _side_panel() -> Control:
	var panel: PanelContainer = PanelContainer.new()
	panel.add_theme_stylebox_override('panel', _style(Color('#1c1b1b')))

	var column: VBoxContainer = VBoxContainer.new()
	column.add_theme_constant_override('separation', 10)
	panel.add_child(column)

	var title: Label = Label.new()
	title.text = 'HSplitContainer'
	title.add_theme_color_override('font_color', Color('#8eef97'))
	column.add_child(title)

	for name in ['inspector', 'scene tree', 'file system', 'output']:
		var button: Button = Button.new()
		button.text = name
		button.alignment = HORIZONTAL_ALIGNMENT_LEFT
		column.add_child(button)

	return panel


func _tabs() -> Control:
	var tabs: TabContainer = TabContainer.new()

	for entry in [{name = 'Scene', color = '#8da5f3'}, {name = 'Script', color = '#8eef97'}, {name = 'Shader', color = '#fc7f7f'}]:
		var page: PanelContainer = PanelContainer.new()
		page.name = entry.name
		page.add_theme_stylebox_override('panel', _style(Color('#12141a')))

		var center: CenterContainer = CenterContainer.new()
		page.add_child(center)

		var label: Label = Label.new()
		label.text = '%s tab' % entry.name
		label.add_theme_font_size_override('font_size', 32)
		label.add_theme_color_override('font_color', Color(entry.color))
		center.add_child(label)

		tabs.add_child(page)

	return tabs


func _style(color: Color) -> StyleBoxFlat:
	var style: StyleBoxFlat = StyleBoxFlat.new()
	style.bg_color = color
	style.set_content_margin_all(18)

	return style