mirror of
https://github.com/rojo-rbx/rojo.git
synced 2026-04-20 20:55:50 +00:00
New UI (#367)
* 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
This commit is contained in:
Reselim
GitHub
239
plugin/src/App/Theme.lua
Normal file
239
plugin/src/App/Theme.lua
Normal file
@@ -0,0 +1,239 @@
|
||||
--[[
|
||||
Theming system taking advantage of Roact's new context API.
|
||||
Doesn't use colors provided by Studio and instead just branches on theme
|
||||
name. This isn't exactly best practice.
|
||||
]]
|
||||
|
||||
-- Studio does not exist outside Roblox Studio, so we'll lazily initialize it
|
||||
-- when possible.
|
||||
local _Studio
|
||||
local function getStudio()
|
||||
if _Studio == nil then
|
||||
_Studio = settings():GetService("Studio")
|
||||
end
|
||||
|
||||
return _Studio
|
||||
end
|
||||
|
||||
local Rojo = script:FindFirstAncestor("Rojo")
|
||||
|
||||
local Roact = require(Rojo.Roact)
|
||||
local Log = require(Rojo.Log)
|
||||
|
||||
local strict = require(script.Parent.Parent.strict)
|
||||
|
||||
-- Copying hex colors back and forth from design programs is faster
|
||||
local function hexColor(decimal)
|
||||
local red = bit32.band(bit32.rshift(decimal, 16), 2^8 - 1)
|
||||
local green = bit32.band(bit32.rshift(decimal, 8), 2^8 - 1)
|
||||
local blue = bit32.band(decimal, 2^8 - 1)
|
||||
|
||||
return Color3.fromRGB(red, green, blue)
|
||||
end
|
||||
|
||||
local BRAND_COLOR = hexColor(0xE13835)
|
||||
|
||||
local lightTheme = strict("LightTheme", {
|
||||
BackgroundColor = hexColor(0xF0F0F0),
|
||||
Button = {
|
||||
Solid = {
|
||||
ActionFillColor = hexColor(0xFFFFFF),
|
||||
ActionFillTransparency = 0.8,
|
||||
Enabled = {
|
||||
TextColor = hexColor(0xFFFFFF),
|
||||
BackgroundColor = BRAND_COLOR,
|
||||
},
|
||||
Disabled = {
|
||||
TextColor = hexColor(0xFFFFFF),
|
||||
BackgroundColor = BRAND_COLOR,
|
||||
},
|
||||
},
|
||||
Bordered = {
|
||||
ActionFillColor = hexColor(0x000000),
|
||||
ActionFillTransparency = 0.9,
|
||||
Enabled = {
|
||||
TextColor = hexColor(0x393939),
|
||||
BorderColor = hexColor(0xACACAC),
|
||||
},
|
||||
Disabled = {
|
||||
TextColor = hexColor(0x393939),
|
||||
BorderColor = hexColor(0xACACAC),
|
||||
},
|
||||
},
|
||||
},
|
||||
Checkbox = {
|
||||
Active = {
|
||||
IconColor = hexColor(0xFFFFFF),
|
||||
BackgroundColor = BRAND_COLOR,
|
||||
},
|
||||
Inactive = {
|
||||
IconColor = hexColor(0xCACACA),
|
||||
BorderColor = hexColor(0xAFAFAF),
|
||||
},
|
||||
},
|
||||
AddressEntry = {
|
||||
TextColor = hexColor(0x000000),
|
||||
PlaceholderColor = hexColor(0x8C8C8C)
|
||||
},
|
||||
BorderedContainer = {
|
||||
BorderColor = hexColor(0xCBCBCB),
|
||||
BackgroundColor = hexColor(0xE0E0E0),
|
||||
},
|
||||
Spinner = {
|
||||
ForegroundColor = BRAND_COLOR,
|
||||
BackgroundColor = hexColor(0xE0E0E0),
|
||||
},
|
||||
ConnectionDetails = {
|
||||
ProjectNameColor = hexColor(0x00000),
|
||||
AddressColor = hexColor(0x00000),
|
||||
DisconnectColor = BRAND_COLOR,
|
||||
},
|
||||
Settings = {
|
||||
DividerColor = hexColor(0xCBCBCB),
|
||||
Navbar = {
|
||||
BackButtonColor = hexColor(0x000000),
|
||||
TextColor = hexColor(0x000000),
|
||||
},
|
||||
Setting = {
|
||||
NameColor = hexColor(0x000000),
|
||||
DescriptionColor = hexColor(0x5F5F5F),
|
||||
},
|
||||
},
|
||||
Header = {
|
||||
LogoColor = BRAND_COLOR,
|
||||
VersionColor = hexColor(0x727272),
|
||||
},
|
||||
ErrorColor = hexColor(0x000000),
|
||||
ScrollBarColor = hexColor(0x000000),
|
||||
})
|
||||
|
||||
local darkTheme = strict("DarkTheme", {
|
||||
BackgroundColor = hexColor(0x272727),
|
||||
Button = {
|
||||
Solid = {
|
||||
ActionFillColor = hexColor(0xFFFFFF),
|
||||
ActionFillTransparency = 0.8,
|
||||
Enabled = {
|
||||
TextColor = hexColor(0xFFFFFF),
|
||||
BackgroundColor = BRAND_COLOR,
|
||||
},
|
||||
Disabled = {
|
||||
TextColor = hexColor(0xFFFFFF),
|
||||
BackgroundColor = BRAND_COLOR,
|
||||
},
|
||||
},
|
||||
Bordered = {
|
||||
ActionFillColor = hexColor(0xFFFFFF),
|
||||
ActionFillTransparency = 0.9,
|
||||
Enabled = {
|
||||
TextColor = hexColor(0xDBDBDB),
|
||||
BorderColor = hexColor(0x535353),
|
||||
},
|
||||
Disabled = {
|
||||
TextColor = hexColor(0xDBDBDB),
|
||||
BorderColor = hexColor(0x535353),
|
||||
},
|
||||
},
|
||||
},
|
||||
Checkbox = {
|
||||
Active = {
|
||||
IconColor = hexColor(0xFFFFFF),
|
||||
BackgroundColor = BRAND_COLOR,
|
||||
},
|
||||
Inactive = {
|
||||
IconColor = hexColor(0x484848),
|
||||
BorderColor = hexColor(0x5A5A5A),
|
||||
},
|
||||
},
|
||||
AddressEntry = {
|
||||
TextColor = hexColor(0xFFFFFF),
|
||||
PlaceholderColor = hexColor(0x717171)
|
||||
},
|
||||
BorderedContainer = {
|
||||
BorderColor = hexColor(0x535353),
|
||||
BackgroundColor = hexColor(0x323232),
|
||||
},
|
||||
Spinner = {
|
||||
ForegroundColor = BRAND_COLOR,
|
||||
BackgroundColor = hexColor(0x323232),
|
||||
},
|
||||
ConnectionDetails = {
|
||||
ProjectNameColor = hexColor(0xFFFFFF),
|
||||
AddressColor = hexColor(0xFFFFFF),
|
||||
DisconnectColor = hexColor(0xFFFFFF),
|
||||
},
|
||||
Settings = {
|
||||
DividerColor = hexColor(0x535353),
|
||||
Navbar = {
|
||||
BackButtonColor = hexColor(0xFFFFFF),
|
||||
TextColor = hexColor(0xFFFFFF),
|
||||
},
|
||||
Setting = {
|
||||
NameColor = hexColor(0xFFFFFF),
|
||||
DescriptionColor = hexColor(0xD3D3D3),
|
||||
},
|
||||
},
|
||||
Header = {
|
||||
LogoColor = hexColor(0xFFFFFF),
|
||||
VersionColor = hexColor(0xD3D3D3)
|
||||
},
|
||||
ErrorColor = hexColor(0xFFFFFF),
|
||||
ScrollBarColor = hexColor(0xFFFFFF),
|
||||
})
|
||||
|
||||
local Context = Roact.createContext(lightTheme)
|
||||
|
||||
local StudioProvider = Roact.Component:extend("StudioProvider")
|
||||
|
||||
-- Pull the current theme from Roblox Studio and update state with it.
|
||||
function StudioProvider:updateTheme()
|
||||
local studioTheme = getStudio().Theme
|
||||
|
||||
if studioTheme.Name == "Light" then
|
||||
self:setState({
|
||||
theme = lightTheme,
|
||||
})
|
||||
elseif studioTheme.Name == "Dark" then
|
||||
self:setState({
|
||||
theme = darkTheme,
|
||||
})
|
||||
else
|
||||
Log.warn("Unexpected theme '{}'' -- falling back to light theme!", studioTheme.Name)
|
||||
|
||||
self:setState({
|
||||
theme = lightTheme,
|
||||
})
|
||||
end
|
||||
end
|
||||
|
||||
function StudioProvider:init()
|
||||
self:updateTheme()
|
||||
end
|
||||
|
||||
function StudioProvider:render()
|
||||
return Roact.createElement(Context.Provider, {
|
||||
value = self.state.theme,
|
||||
}, self.props[Roact.Children])
|
||||
end
|
||||
|
||||
function StudioProvider:didMount()
|
||||
self.connection = getStudio().ThemeChanged:Connect(function()
|
||||
self:updateTheme()
|
||||
end)
|
||||
end
|
||||
|
||||
function StudioProvider:willUnmount()
|
||||
self.connection:Disconnect()
|
||||
end
|
||||
|
||||
local function with(callback)
|
||||
return Roact.createElement(Context.Consumer, {
|
||||
render = callback,
|
||||
})
|
||||
end
|
||||
|
||||
return {
|
||||
StudioProvider = StudioProvider,
|
||||
Consumer = Context.Consumer,
|
||||
with = with,
|
||||
}
|
||||
Reference in New Issue
Block a user