rojo-rbx/rojo
1
0
Fork 1
mirror of https://github.com/rojo-rbx/rojo.git synced 2026-04-20 20:55:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Partial plugin retheme

Browse Source
This commit is contained in:
Lucien Greathouse
2019-01-21 16:02:51 -08:00
parent aa7b7e43ff
commit 578abfabb3
7 changed files with 119 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/round-rect-8px-radius.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 251 B

12
plugin/src/Assets.lua
View File

@@ -9,11 +9,17 @@ local Assets = {
},
},
Slices = {
RoundBox = {
RoundBoxWithBorder = {
asset = "rbxassetid://2754309674",
offset = Vector2.new(0, 0),
size = Vector2.new(0, 0),
center = Rect.new(16, 16, 17, 17),
size = Vector2.new(32, 32),
center = Rect.new(15, 15, 16, 16),
},
RoundBox = {
asset = "rbxassetid://2773074100",
offset = Vector2.new(0, 0),
size = Vector2.new(32, 32),
center = Rect.new(15, 15, 16, 16),
},
},
StartSession = "",

104
plugin/src/Components/ConnectPanel.lua
View File

@@ -5,6 +5,7 @@ local Roact = require(Rojo.Roact)
local Config = require(Plugin.Config)
local Assets = require(Plugin.Assets)
local Theme = require(Plugin.Theme)
local FitList = require(Plugin.Components.FitList)
local FitText = require(Plugin.Components.FitText)
@@ -65,7 +66,13 @@ function ConnectPanel:render()
HorizontalAlignment = Enum.HorizontalAlignment.Center,
},
}, {
Head = e("Frame", {
Head = e("ImageLabel", {
Image = RoundBox.asset,
ImageRectOffset = RoundBox.offset,
ImageRectSize = RoundBox.size * Vector2.new(1, 0.5),
SliceCenter = RoundBox.center,
ScaleType = Enum.ScaleType.Slice,
ImageColor3 = Theme.SecondaryColor,
LayoutOrder = 1,
Size = UDim2.new(1, 0, 0, 36),
BackgroundTransparency = 1,
@@ -102,20 +109,14 @@ function ConnectPanel:render()
}),
}),
Border = e("Frame", {
BorderSizePixel = 0,
BackgroundColor3 = Color3.new(0.7, 0.7, 0.7),
Size = UDim2.new(1, -4, 0, 2),
LayoutOrder = 2,
}),
Body = e(FitList, {
Inputs = e(FitList, {
containerProps = {
BackgroundTransparency = 1,
LayoutOrder = 3,
LayoutOrder = 2,
},
layoutProps = {
Padding = UDim.new(0, 8),
FillDirection = Enum.FillDirection.Horizontal,
Padding = UDim.new(0, 12),
},
paddingProps = {
PaddingTop = UDim.new(0, 8),
@@ -130,12 +131,11 @@ function ConnectPanel:render()
BackgroundTransparency = 1,
},
layoutProps = {
FillDirection = Enum.FillDirection.Horizontal,
Padding = UDim.new(0, 8),
Padding = UDim.new(0, 4),
},
}, {
Label = e(FitText, {
MinSize = Vector2.new(0, 28),
MinSize = Vector2.new(0, 20),
Kind = "TextLabel",
LayoutOrder = 1,
BackgroundTransparency = 1,
@@ -156,7 +156,7 @@ function ConnectPanel:render()
Input = e(FormTextInput, {
layoutOrder = 2,
size = UDim2.new(0, 300, 0, 28),
size = UDim2.new(0, 160, 0, 28),
value = self.state.address,
onValueChange = function(newValue)
self:setState({
@@ -172,12 +172,11 @@ function ConnectPanel:render()
BackgroundTransparency = 1,
},
layoutProps = {
FillDirection = Enum.FillDirection.Horizontal,
Padding = UDim.new(0, 8),
Padding = UDim.new(0, 4),
},
}, {
Label = e(FitText, {
MinSize = Vector2.new(0, 28),
MinSize = Vector2.new(0, 20),
Kind = "TextLabel",
LayoutOrder = 1,
BackgroundTransparency = 1,
@@ -198,7 +197,7 @@ function ConnectPanel:render()
Input = e(FormTextInput, {
layoutOrder = 2,
size = UDim2.new(0, 300, 0, 28),
size = UDim2.new(0, 70, 0, 28),
value = self.state.port,
onValueChange = function(newValue)
self:setState({
@@ -207,36 +206,47 @@ function ConnectPanel:render()
end,
}),
}),
}),
Buttons = e(FitList, {
containerProps = {
LayoutOrder = 3,
BackgroundTransparency = 1,
},
layoutProps = {
FillDirection = Enum.FillDirection.Horizontal,
Padding = UDim.new(0, 8),
},
}, {
e(FormButton, {
text = "Start",
onClick = function()
if startSession ~= nil then
startSession(self.state.address, self.state.port)
end
end,
}),
Buttons = e(FitList, {
fitAxes = "Y",
containerProps = {
BackgroundTransparency = 1,
LayoutOrder = 3,
Size = UDim2.new(1, 0, 0, 0),
},
layoutProps = {
FillDirection = Enum.FillDirection.Horizontal,
HorizontalAlignment = Enum.HorizontalAlignment.Right,
Padding = UDim.new(0, 8),
},
paddingProps = {
PaddingTop = UDim.new(0, 0),
PaddingBottom = UDim.new(0, 8),
PaddingLeft = UDim.new(0, 8),
PaddingRight = UDim.new(0, 8),
},
}, {
e(FormButton, {
layoutOrder = 1,
text = "Cancel",
onClick = function()
if cancel ~= nil then
cancel()
end
end,
secondary = true,
}),
e(FormButton, {
text = "Cancel",
onClick = function()
if cancel ~= nil then
cancel()
end
end,
secondary = true,
}),
})
e(FormButton, {
layoutOrder = 2,
text = "Connect",
onClick = function()
if startSession ~= nil then
startSession(self.state.address, self.state.port)
end
end,
}),
})
})
end

23
plugin/src/Components/FitList.lua
View File

@@ -12,6 +12,7 @@ end
function FitList:render()
local containerKind = self.props.containerKind or "Frame"
local fitAxes = self.props.fitAxes or "XY"
local containerProps = self.props.containerProps
local layoutProps = self.props.layoutProps
local paddingProps = self.props.paddingProps
@@ -25,15 +26,31 @@ function FitList:render()
["$Layout"] = e("UIListLayout", Dictionary.merge({
SortOrder = Enum.SortOrder.LayoutOrder,
[Roact.Change.AbsoluteContentSize] = function(instance)
local size = instance.AbsoluteContentSize
local contentSize = instance.AbsoluteContentSize
if paddingProps ~= nil then
size = size + Vector2.new(
contentSize = contentSize + Vector2.new(
paddingProps.PaddingLeft.Offset + paddingProps.PaddingRight.Offset,
paddingProps.PaddingTop.Offset + paddingProps.PaddingBottom.Offset)
end
self.setSize(UDim2.new(0, size.X, 0, size.Y))
local combinedSize
if fitAxes == "X" then
combinedSize = UDim2.new(0, contentSize.X, containerProps.Size.Y.Scale, containerProps.Size.Y.Offset)
elseif fitAxes == "Y" then
combinedSize = UDim2.new(containerProps.Size.X.Scale, containerProps.Size.X.Offset, 0, contentSize.Y)
elseif fitAxes == "XY" then
combinedSize = UDim2.new(0, contentSize.X, 0, contentSize.Y)
else
error("Invalid fitAxes value")
end
if fitAxes ~= "XY" then
print("combinedSize", combinedSize)
end
self.setSize(combinedSize)
end,
}, layoutProps)),

18
plugin/src/Components/FormButton.lua
View File

@@ -4,6 +4,7 @@ local Plugin = Rojo.Plugin
local Roact = require(Rojo.Roact)
local Assets = require(Plugin.Assets)
local Theme = require(Plugin.Theme)
local FitList = require(Plugin.Components.FitList)
local FitText = require(Plugin.Components.FitText)
@@ -16,7 +17,16 @@ local function FormButton(props)
local layoutOrder = props.layoutOrder
local onClick = props.onClick
local imageColor = props.secondary and Color3.new(0.95, 0.95, 0.95) or nil
local textColor
local backgroundColor
if props.secondary then
textColor = Theme.AccentColor
backgroundColor = Theme.SecondaryColor
else
textColor = Theme.SecondaryColor
backgroundColor = Theme.AccentColor
end
return e(FitList, {
containerKind = "ImageButton",
@@ -28,7 +38,7 @@ local function FormButton(props)
ImageRectSize = RoundBox.size,
SliceCenter = RoundBox.center,
ScaleType = Enum.ScaleType.Slice,
ImageColor3 = imageColor,
ImageColor3 = backgroundColor,
[Roact.Event.Activated] = function()
if onClick ~= nil then
@@ -41,9 +51,9 @@ local function FormButton(props)
Kind = "TextLabel",
Text = text,
TextSize = 22,
Font = Enum.Font.SourceSansBold,
TextColor3 = textColor,
Font = Theme.ButtonFont,
Padding = Vector2.new(14, 6),
TextColor3 = Color3.new(0.05, 0.05, 0.05),
BackgroundTransparency = 1,
}),
})

5
plugin/src/Components/FormTextInput.lua
View File

@@ -4,6 +4,7 @@ local Plugin = Rojo.Plugin
local Roact = require(Rojo.Roact)
local Assets = require(Plugin.Assets)
local Theme = require(Plugin.Theme)
local e = Roact.createElement
@@ -22,7 +23,7 @@ local function FormTextInput(props)
ImageRectSize = RoundBox.size,
ScaleType = Enum.ScaleType.Slice,
SliceCenter = RoundBox.center,
ImageColor3 = Color3.new(0.95, 0.95, 0.95),
ImageColor3 = Theme.SecondaryColor,
Size = size,
BackgroundTransparency = 1,
}, {
@@ -36,7 +37,7 @@ local function FormTextInput(props)
TextXAlignment = Enum.TextXAlignment.Left,
TextSize = 20,
Text = value,
TextColor3 = Color3.new(0.05, 0.05, 0.05),
TextColor3 = Theme.PrimaryColor,
[Roact.Change.Text] = function(rbx)
onValueChange(rbx.Text)

16
plugin/src/Theme.lua Normal file
View File

@@ -0,0 +1,16 @@
local Theme = {
ButtonFont = Enum.Font.SourceSansSemibold,
TitleFont = Enum.Font.SourceSansSemibold,
MainFont = Enum.Font.SourceSans,
AccentColor = Color3.fromRGB(136, 0, 27),
PrimaryColor = Color3.fromRGB(20, 20, 20),
SecondaryColor = Color3.fromRGB(240, 240, 240),
}
setmetatable(Theme, {
__index = function(_, key)
error(("%s is not a valid member of Theme"):format(key), 2)
end
})
return Theme