forked from rojo-rbx/rojo
cae4c46669
* Add Flipper * Remove old UI * Add boilerplate UI * Change plugin version * Merge upstream * Bunch of new UI changes Too lazy to list them all in individual commits * Touch ripple for buttons and a few other things * Make the close button on the PluginGui work * Set button state to guiEnabled * Implement Connecting, NotConnected; add Header; don't update plugin button on render * Replace mapLerpColor with mapLerp * Update blendAlpha to be 0 without any values * Add ActionFillTransparency to Theme.Button * Suffix all Theme entries * Update Flipper * Add disconnect button * Remove cancel button * Add settings page * Add scrollbar and dark theme support to settings * Include settings in startSession * Set context default value to nil I always thought this was the name, lol... * Add Error page * Fix preloadAssets * Fix preloadAssets import * Update checkbox colors a little * Add setting descriptions * Fix scrolling frame in settings panel * Remove .vscode * Rename Throbber to Spinner * Update merge * Move Spinner images to assets * Change casing of directories * Remove old directories * Add comments to getDerivedStateFromProps * Account for offset in host TextBox size * Turn width variables into constants * Attempt to fix the comments * Add a missing comma in Settings * Remove a double space * Remove Dummy object * Move most of the Studio logic out of render * Don't truncate port input * Replace merge with Dictionary.merge * Replace "Got it!" with "Okay" * Add projectName to setStatus call * Add Flipper to build.rs
125 lines
3.2 KiB
Lua
125 lines
3.2 KiB
Lua
local Rojo = script:FindFirstAncestor("Rojo")
|
|
local Plugin = Rojo.Plugin
|
|
|
|
local Roact = require(Rojo.Roact)
|
|
|
|
local Theme = require(Plugin.App.Theme)
|
|
local Assets = require(Plugin.Assets)
|
|
|
|
local Header = require(Plugin.App.Components.Header)
|
|
local IconButton = require(Plugin.App.Components.IconButton)
|
|
local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
|
|
|
|
local e = Roact.createElement
|
|
|
|
local function ConnectionDetails(props)
|
|
return Theme.with(function(theme)
|
|
return e(BorderedContainer, {
|
|
transparency = props.transparency,
|
|
size = UDim2.new(1, 0, 0, 70),
|
|
layoutOrder = props.layoutOrder,
|
|
}, {
|
|
TextContainer = e("Frame", {
|
|
Size = UDim2.new(1, 0, 1, 0),
|
|
BackgroundTransparency = 1
|
|
}, {
|
|
ProjectName = e("TextLabel", {
|
|
Text = props.projectName,
|
|
Font = Enum.Font.GothamBold,
|
|
TextSize = 20,
|
|
TextColor3 = theme.ConnectionDetails.ProjectNameColor,
|
|
TextTransparency = props.transparency,
|
|
TextXAlignment = Enum.TextXAlignment.Left,
|
|
|
|
Size = UDim2.new(1, 0, 0, 20),
|
|
|
|
LayoutOrder = 1,
|
|
BackgroundTransparency = 1,
|
|
}),
|
|
|
|
Address = e("TextLabel", {
|
|
Text = props.address,
|
|
Font = Enum.Font.Code,
|
|
TextSize = 15,
|
|
TextColor3 = theme.ConnectionDetails.AddressColor,
|
|
TextTransparency = props.transparency,
|
|
TextXAlignment = Enum.TextXAlignment.Left,
|
|
|
|
Size = UDim2.new(1, 0, 0, 15),
|
|
|
|
LayoutOrder = 2,
|
|
BackgroundTransparency = 1,
|
|
}),
|
|
|
|
Layout = e("UIListLayout", {
|
|
VerticalAlignment = Enum.VerticalAlignment.Center,
|
|
FillDirection = Enum.FillDirection.Vertical,
|
|
SortOrder = Enum.SortOrder.LayoutOrder,
|
|
Padding = UDim.new(0, 6),
|
|
}),
|
|
}),
|
|
|
|
Disconnect = e(IconButton, {
|
|
icon = Assets.Images.Icons.Close,
|
|
iconSize = 24,
|
|
color = theme.ConnectionDetails.DisconnectColor,
|
|
transparency = props.transparency,
|
|
|
|
position = UDim2.new(1, 0, 0.5, 0),
|
|
anchorPoint = Vector2.new(1, 0.5),
|
|
|
|
onClick = props.onDisconnect,
|
|
}),
|
|
|
|
Padding = e("UIPadding", {
|
|
PaddingLeft = UDim.new(0, 17),
|
|
PaddingRight = UDim.new(0, 15),
|
|
}),
|
|
})
|
|
end)
|
|
end
|
|
|
|
local ConnectedPage = Roact.Component:extend("ConnectedPage")
|
|
|
|
function ConnectedPage:render()
|
|
return Roact.createFragment({
|
|
Header = e(Header, {
|
|
transparency = self.props.transparency,
|
|
layoutOrder = 1,
|
|
}),
|
|
|
|
ConnectionDetails = e(ConnectionDetails, {
|
|
projectName = self.state.projectName,
|
|
address = self.state.address,
|
|
transparency = self.props.transparency,
|
|
layoutOrder = 2,
|
|
|
|
onDisconnect = self.props.onDisconnect,
|
|
}),
|
|
|
|
Layout = e("UIListLayout", {
|
|
VerticalAlignment = Enum.VerticalAlignment.Center,
|
|
FillDirection = Enum.FillDirection.Vertical,
|
|
SortOrder = Enum.SortOrder.LayoutOrder,
|
|
Padding = UDim.new(0, 10),
|
|
}),
|
|
|
|
Padding = e("UIPadding", {
|
|
PaddingLeft = UDim.new(0, 20),
|
|
PaddingRight = UDim.new(0, 20),
|
|
}),
|
|
})
|
|
end
|
|
|
|
function ConnectedPage.getDerivedStateFromProps(props)
|
|
-- If projectName or address ever get removed from props, make sure we still have
|
|
-- the properties! The component still needs to have its data for it to be properly
|
|
-- animated out without the labels changing.
|
|
|
|
return {
|
|
projectName = props.projectName,
|
|
address = props.address,
|
|
}
|
|
end
|
|
|
|
return ConnectedPage |