From 027cddb116fd035ec6e9aa4a3fc7b7d21e9d850e Mon Sep 17 00:00:00 2001 From: pinehappi <167032887+pinehappi@users.noreply.github.com> Date: Wed, 20 Nov 2024 11:56:27 +0000 Subject: [PATCH 1/4] Highlight connection TextBoxes purple on focus --- src/App/Components/Box.luau | 1 + src/App/Components/Input.luau | 8 ++++++++ src/App/Pages/NotConnected.luau | 20 ++++++++++++++++++++ src/App/Widgets/Settings.luau | 13 +++++++++++++ 4 files changed, 42 insertions(+) diff --git a/src/App/Components/Box.luau b/src/App/Components/Box.luau index 2729c71..31e207b 100644 --- a/src/App/Components/Box.luau +++ b/src/App/Components/Box.luau @@ -37,6 +37,7 @@ return function(props: Props): Frame [Children] = { Border { + Color = props.BorderColor, Transparency = props.BorderTransparency, }, }, diff --git a/src/App/Components/Input.luau b/src/App/Components/Input.luau index 2ea30fa..d9868af 100644 --- a/src/App/Components/Input.luau +++ b/src/App/Components/Input.luau @@ -19,6 +19,7 @@ local Children = Fusion.Children local peek = Fusion.peek local COMPONENT_ONLY_PROPS = { + "Started", "Changed", "Finished", "Font", @@ -28,6 +29,7 @@ local COMPONENT_ONLY_PROPS = { } type Props = { + Started: (() -> ())?, Changed: ((text: string) -> ())?, Finished: ((text: string) -> ())?, AutomaticSize: Enum.AutomaticSize?, @@ -61,6 +63,12 @@ return function(props: Props): TextBox end end, + [OnEvent "Focused"] = function() + if props.Started then + props.Started() + end + end, + [OnEvent "FocusLost"] = function() if props.Finished then props.Finished(peek(text)) diff --git a/src/App/Pages/NotConnected.luau b/src/App/Pages/NotConnected.luau index 0817801..9cc1d28 100644 --- a/src/App/Pages/NotConnected.luau +++ b/src/App/Pages/NotConnected.luau @@ -35,11 +35,21 @@ return function(props: Props): { Instance } local hostInput = Value(props.Host ~= Config:getDefault("Host") and props.Host or "") local portInput = Value(props.Port ~= Config:getDefault("Port") and props.Port or "") + local hostFocused = Value(false) + local portFocused = Value(false) + return { List {}, Box { Size = UDim2.new(1, 0, 0, Theme.CompSizeY.Large), AutomaticSize = Enum.AutomaticSize.None, + BorderColor = Computed(function(use) + if use(hostFocused) or use(portFocused) then + return use(Theme.Colors.Brand) + else + return use(Theme.Colors.Border) + end + end), [Children] = { List { @@ -53,11 +63,16 @@ return function(props: Props): { Instance } PlaceholderText = "localhost", Text = hostInput, + Started = function() + hostFocused:set(true) + end, + Changed = function(text) hostInput:set(filterHost(text)) end, Finished = function(host) + hostFocused:set(false) props.App:setHost(host ~= "" and host or Config:getDefault("Host")) end, @@ -84,11 +99,16 @@ return function(props: Props): { Instance } PlaceholderText = "8000", Text = portInput, + Started = function(text) + portFocused:set(true) + end, + Changed = function(text) portInput:set(filterPort(text)) end, Finished = function(port) + portFocused:set(false) props.App:setPort(port ~= "" and tonumber(port) or Config:getDefault("Port")) end, }, diff --git a/src/App/Widgets/Settings.luau b/src/App/Widgets/Settings.luau index 446ea3b..b489662 100644 --- a/src/App/Widgets/Settings.luau +++ b/src/App/Widgets/Settings.luau @@ -188,22 +188,35 @@ local function Entry(props: EntryProps): Frame props.Binding:set("") end + local focused = Value(false) + valueComponent = Box { Size = props.Data.CustomWidth and math.floor(props.Data.CustomWidth) == props.Data.CustomWidth and UDim2.fromOffset(props.Data.CustomWidth, Theme.CompSizeY.Medium) or UDim2.new(props.Data.CustomWidth or 0.2, 0, 0, Theme.CompSizeY.Medium), + BorderColor = Computed(function(use) + if use(focused) then + return use(Theme.Colors.Brand) + else + return use(Theme.Colors.Border) + end + end), [Children] = { Input { Size = UDim2.fromScale(1, 1), Text = props.Binding, PlaceholderText = Config:getDefault(setting), + Started = function() + focused:set(true) + end, Changed = function(text) userInput = true props.Binding:set(props.Data.Filter(text)) end, Finished = function(text) + focused:set(false) text = text ~= "" and text or Config:getDefault(setting) props.Binding:set(text) From fdc4f6c05f9bd6df6a0fcb9144cf5bfdeb6e3f0b Mon Sep 17 00:00:00 2001 From: pinehappi <167032887+pinehappi@users.noreply.github.com> Date: Wed, 20 Nov 2024 11:59:51 +0000 Subject: [PATCH 2/4] Fix regression: cursor not being invisible when selecting empty host TextBox --- src/App/Pages/NotConnected.luau | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/App/Pages/NotConnected.luau b/src/App/Pages/NotConnected.luau index 9cc1d28..2ba175f 100644 --- a/src/App/Pages/NotConnected.luau +++ b/src/App/Pages/NotConnected.luau @@ -77,6 +77,11 @@ return function(props: Props): { Instance } end, [Children] = { + -- The cursor will not be visible when it is all the way at the left because of ClipsDescendants, + -- so this padding makes sure there's always 1 pixel of space from the left. + Padding { + Left = 1, + }, New "UIFlexItem" { FlexMode = Enum.UIFlexMode.Fill, }, From fcb9a258913bde4b24ce98585dc5876a59134873 Mon Sep 17 00:00:00 2001 From: pinehappi <167032887+pinehappi@users.noreply.github.com> Date: Wed, 20 Nov 2024 12:12:26 +0000 Subject: [PATCH 3/4] Animate border highlight --- src/App/Pages/NotConnected.luau | 19 ++++++++++++------- src/App/Theme.luau | 1 + src/App/Widgets/Settings.luau | 19 ++++++++++++------- 3 files changed, 25 insertions(+), 14 deletions(-) diff --git a/src/App/Pages/NotConnected.luau b/src/App/Pages/NotConnected.luau index 2ba175f..85030b2 100644 --- a/src/App/Pages/NotConnected.luau +++ b/src/App/Pages/NotConnected.luau @@ -24,6 +24,7 @@ local New = Fusion.New local Value = Fusion.Value local Computed = Fusion.Computed local Children = Fusion.Children +local Spring = Fusion.Spring type Props = { App: { [string]: any }, @@ -43,13 +44,17 @@ return function(props: Props): { Instance } Box { Size = UDim2.new(1, 0, 0, Theme.CompSizeY.Large), AutomaticSize = Enum.AutomaticSize.None, - BorderColor = Computed(function(use) - if use(hostFocused) or use(portFocused) then - return use(Theme.Colors.Brand) - else - return use(Theme.Colors.Border) - end - end), + BorderColor = Spring( + Computed(function(use) + if use(hostFocused) or use(portFocused) then + return use(Theme.Colors.Brand) + else + return use(Theme.Colors.Border) + end + end), + Theme.SpringFastSpeed, + Theme.SpringDamping + ), [Children] = { List { diff --git a/src/App/Theme.luau b/src/App/Theme.luau index 710cf7e..f81370e 100644 --- a/src/App/Theme.luau +++ b/src/App/Theme.luau @@ -90,6 +90,7 @@ local Theme = { }, SpringSpeed = 30, + SpringFastSpeed = 60, SpringDamping = 1.5, IsDark = Value(true), diff --git a/src/App/Widgets/Settings.luau b/src/App/Widgets/Settings.luau index b489662..f8f5ce8 100644 --- a/src/App/Widgets/Settings.luau +++ b/src/App/Widgets/Settings.luau @@ -39,6 +39,7 @@ local Children = Fusion.Children local OnChange = Fusion.OnChange local ForValues = Fusion.ForValues local ForPairs = Fusion.ForPairs +local Spring = Fusion.Spring local peek = Fusion.peek local SETTINGS_DATA: { { Title: string, Settings: { SettingData } } } = { @@ -195,13 +196,17 @@ local function Entry(props: EntryProps): Frame and math.floor(props.Data.CustomWidth) == props.Data.CustomWidth and UDim2.fromOffset(props.Data.CustomWidth, Theme.CompSizeY.Medium) or UDim2.new(props.Data.CustomWidth or 0.2, 0, 0, Theme.CompSizeY.Medium), - BorderColor = Computed(function(use) - if use(focused) then - return use(Theme.Colors.Brand) - else - return use(Theme.Colors.Border) - end - end), + BorderColor = Spring( + Computed(function(use) + if use(focused) then + return use(Theme.Colors.Brand) + else + return use(Theme.Colors.Border) + end + end), + Theme.SpringFastSpeed, + Theme.SpringDamping + ), [Children] = { Input { Size = UDim2.fromScale(1, 1), From 28bbd8ad010a9701b4030b90dc296c970a3e63ea Mon Sep 17 00:00:00 2001 From: pinehappi <167032887+pinehappi@users.noreply.github.com> Date: Wed, 20 Nov 2024 12:14:32 +0000 Subject: [PATCH 4/4] Remove unused parameter --- src/App/Pages/NotConnected.luau | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App/Pages/NotConnected.luau b/src/App/Pages/NotConnected.luau index 85030b2..58a8875 100644 --- a/src/App/Pages/NotConnected.luau +++ b/src/App/Pages/NotConnected.luau @@ -109,7 +109,7 @@ return function(props: Props): { Instance } PlaceholderText = "8000", Text = portInput, - Started = function(text) + Started = function() portFocused:set(true) end,