rojo-rbx/rojo
1
0
Fork 1
mirror of https://github.com/rojo-rbx/rojo.git synced 2026-04-22 13:45:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dynamic theming. Closes #241.

Browse Source 
Upgrades to Roact master and introduces dynamic theme switching.

We branch on the theme name in order to try to use Rojo's brand
colors instead of Studio's. I kind of winged it with these colors
and we might want to choose slightly nicer dark theme colors
in the future.

I also took the opportunity to reorganize the color naming scheme
since it didn't really work for dark theme.
This commit is contained in:
Lucien Greathouse
2020-03-08 18:32:42 -07:00
parent 04529de7b3
commit 3107b1b21b
13 changed files with 455 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
plugin/src/Components/RojoFooter.lua
View File

@@ -6,7 +6,7 @@ local Roact = require(Rojo.Roact)
local Config = require(Plugin.Config)
local Version = require(Plugin.Version)
local Assets = require(Plugin.Assets)
local Theme = require(Plugin.Theme)
local Theme = require(Plugin.Components.Theme)
local e = Roact.createElement
@@ -18,50 +18,53 @@ function RojoFooter:init()
end
function RojoFooter:render()
return e("Frame", {
LayoutOrder = 3,
Size = UDim2.new(1, 0, 0, 32),
BackgroundColor3 = Theme.SecondaryColor,
BorderSizePixel = 0,
}, {
Padding = e("UIPadding", {
PaddingTop = UDim.new(0, 4),
PaddingBottom = UDim.new(0, 4),
PaddingLeft = UDim.new(0, 8),
PaddingRight = UDim.new(0, 8),
}),
LogoContainer = e("Frame", {
BackgroundTransparency = 1,
Size = UDim2.new(0, 0, 0, 32),
return Theme.with(function(theme)
return e("Frame", {
LayoutOrder = 3,
Size = UDim2.new(1, 0, 0, 32),
BackgroundColor3 = theme.Background2,
BorderSizePixel = 0,
ZIndex = 2,
}, {
Logo = e("ImageLabel", {
Image = Assets.Images.Logo,
Size = UDim2.new(0, 80, 0, 40),
ScaleType = Enum.ScaleType.Fit,
BackgroundTransparency = 1,
Position = UDim2.new(0, 0, 1, -10),
AnchorPoint = Vector2.new(0, 1),
Padding = e("UIPadding", {
PaddingTop = UDim.new(0, 4),
PaddingBottom = UDim.new(0, 4),
PaddingLeft = UDim.new(0, 8),
PaddingRight = UDim.new(0, 8),
}),
}),
Version = e("TextLabel", {
Position = UDim2.new(1, 0, 0, 0),
Size = UDim2.new(0, 0, 1, 0),
AnchorPoint = Vector2.new(1, 0),
Font = Theme.TitleFont,
TextSize = 18,
Text = Version.display(Config.version),
TextXAlignment = Enum.TextXAlignment.Right,
TextColor3 = Theme.LightTextColor,
BackgroundTransparency = 1,
LogoContainer = e("Frame", {
BackgroundTransparency = 1,
[Roact.Change.AbsoluteSize] = function(rbx)
self.setFooterVersionSize(rbx.AbsoluteSize)
end,
}),
})
Size = UDim2.new(0, 0, 0, 32),
}, {
Logo = e("ImageLabel", {
Image = Assets.Images.Logo,
Size = UDim2.new(0, 80, 0, 40),
ScaleType = Enum.ScaleType.Fit,
BackgroundTransparency = 1,
Position = UDim2.new(0, 0, 1, -10),
AnchorPoint = Vector2.new(0, 1),
}),
}),
Version = e("TextLabel", {
Position = UDim2.new(1, 0, 0, 0),
Size = UDim2.new(0, 0, 1, 0),
AnchorPoint = Vector2.new(1, 0),
Font = theme.TitleFont,
TextSize = 18,
Text = Version.display(Config.version),
TextXAlignment = Enum.TextXAlignment.Right,
TextColor3 = theme.Text2,
BackgroundTransparency = 1,
[Roact.Change.AbsoluteSize] = function(rbx)
self.setFooterVersionSize(rbx.AbsoluteSize)
end,
}),
})
end)
end
return RojoFooter