jecs/modules/Jabby/ui/components/display/widget/topbar.luau
2026-02-18 01:39:54 +01:00

150 lines
No EOL
3.4 KiB
Text

local vide = require(script.Parent.Parent.Parent.Parent.Parent.vide)
local theme = require(script.Parent.Parent.Parent.Parent.util.theme)
local list = require(script.Parent.Parent.Parent.util.list)
local padding = require(script.Parent.Parent.Parent.util.padding)
local rounded_frame = require(script.Parent.Parent.Parent.util.rounded_frame)
local typography = require(script.Parent.Parent.typography)
local create = vide.create
local source = vide.source
local changed = vide.changed
local spring = vide.spring
local show = vide.show
type Source<T> = vide.Source<T>
type props = {
title: (string | () -> string)?,
subtitle: (string | () -> string)?,
bind_to_close: (() -> ())?,
radius: () -> UDim,
dragging: Source<boolean>,
offset: (new: Vector2) -> (),
[any]: any,
}
return function(props: props)
local bind_to_close = props.bind_to_close
local dragging = props.dragging
local offset = props.offset
local closeable = not not bind_to_close
local absolute_position = source(Vector2.zero)
local gui_state = source(Enum.GuiState.Idle)
return rounded_frame {
name = "Topbar",
size = UDim2.new(1, 0, 0, 48),
color = theme.bg[3],
topleft = props.radius,
topright = props.radius,
create "ImageButton" {
Size = UDim2.fromScale(1, 1),
AutoLocalize = false,
BackgroundTransparency = 1,
ZIndex = 1000,
changed("AbsolutePosition", absolute_position),
MouseButton1Down = function(x, y)
offset(absolute_position() - Vector2.new(x, y))
dragging(true)
end,
create "UIListLayout" {
FillDirection = Enum.FillDirection.Horizontal,
VerticalAlignment = Enum.VerticalAlignment.Center,
HorizontalFlex = Enum.UIFlexAlignment.Fill,
},
padding {
x = UDim.new(0, 16)
},
list {
spacing = UDim.new(),
typography {
size = UDim2.fromScale(1, 0),
text = props.title,
xalignment = Enum.TextXAlignment.Left,
truncate = Enum.TextTruncate.SplitWord,
textsize = 20,
header = true,
},
show(function()
return props.subtitle ~= nil
end, function()
return typography {
size = UDim2.fromScale(1, 0),
text = props.subtitle,
bold = true,
xalignment = Enum.TextXAlignment.Left,
truncate = Enum.TextTruncate.SplitWord,
textsize = 16,
}
end)
},
show(source(closeable), function()
return create "ImageButton" {
Size = UDim2.fromOffset(32, 32),
BackgroundColor3 = spring(function()
return if gui_state() == Enum.GuiState.Hover then
theme.bg[5]()
elseif gui_state() == Enum.GuiState.Press then
theme.bg[0]()
else
theme.bg[3]()
end, 0.1),
changed("GuiState", gui_state),
Activated = props.bind_to_close,
create "UICorner" {
CornerRadius = UDim.new(1, 0)
},
create "ImageLabel" {
Size = UDim2.fromOffset(24, 24),
Position = UDim2.fromScale(0.5, 0.5),
AnchorPoint = Vector2.new(0.5, 0.5),
AutoLocalize = false,
BackgroundTransparency = 1,
ImageColor3 = theme.fg_on_bg_high[3],
Image = "rbxassetid://10747384394",
},
create "UIFlexItem" {
FlexMode = Enum.UIFlexMode.Custom,
ShrinkRatio = 0
}
}
end)
}
}
end