Skip to content

Commit

Permalink
Preview theme colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@vocksel
vocksel committed Jan 23, 2024
1 parent e9ecc73 commit 6407b5f
Show file tree
Hide file tree
Showing 3 changed files with 156 additions and 65 deletions.
67 changes: 4 additions & 63 deletions plugin/src/components/ThemeDetails.luau
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ local Sift = require("@pkg/Sift")
local types = require("@root/types")
local applyTheme = require("@root/applyTheme")
local getLayoutOrder = require("./getLayoutOrder")
local ThemeLabel = require("./ThemeLabel")

local useCallback = React.useCallback

local ACTION_BUTTON_WIDTH = 120
local PADDING = UDim.new(0, 8)

export type Props = {
Expand Down Expand Up @@ -58,68 +58,9 @@ local function ThemeDetails(providedProps: Props)
AutomaticSize = Enum.AutomaticSize.Y,
Size = UDim2.fromScale(1, 0),
}, {
Layout = React.createElement("UIListLayout", {
SortOrder = Enum.SortOrder.LayoutOrder,
FillDirection = Enum.FillDirection.Horizontal,
VerticalAlignment = Enum.VerticalAlignment.Center,
}),

Padding = React.createElement("UIPadding", {
PaddingTop = PADDING,
PaddingRight = PADDING,
PaddingBottom = PADDING,
PaddingLeft = PADDING,
}),

Main = React.createElement("Frame", {
LayoutOrder = getLayoutOrder(),
Size = UDim2.fromScale(1, 0) - UDim2.fromOffset(ACTION_BUTTON_WIDTH, 0),
AutomaticSize = Enum.AutomaticSize.Y,
BackgroundTransparency = 1,
}, {
Layout = React.createElement("UIListLayout", {
SortOrder = Enum.SortOrder.LayoutOrder,
Padding = PADDING,
}),

Name = React.createElement("TextLabel", {
LayoutOrder = getLayoutOrder(),
AutomaticSize = Enum.AutomaticSize.XY,
BackgroundTransparency = 1,
Text = theme.name,
TextSize = 16,
Font = Enum.Font.GothamMedium,
TextXAlignment = Enum.TextXAlignment.Left,
TextYAlignment = Enum.TextYAlignment.Top,
TextColor3 = Color3.fromRGB(255, 255, 255),
TextTruncate = Enum.TextTruncate.AtEnd,
}),
}),

Action = React.createElement("TextButton", {
LayoutOrder = getLayoutOrder(),
Text = "Use Theme",
TextSize = 14,
TextColor3 = Color3.fromRGB(255, 255, 255),
BorderSizePixel = 0,
Font = Enum.Font.GothamMedium,
Size = UDim2.fromOffset(ACTION_BUTTON_WIDTH, 0),
AutomaticSize = Enum.AutomaticSize.Y,
BackgroundColor3 = Color3.fromRGB(143, 186, 86),
[React.Event.Activated] = function()
onApplyTheme(theme)
end,
}, {
Padding = React.createElement("UIPadding", {
PaddingTop = PADDING,
PaddingRight = PADDING,
PaddingBottom = PADDING,
PaddingLeft = PADDING,
}),

Corner = React.createElement("UICorner", {
CornerRadius = PADDING,
}),
ThemeLabel = React.createElement(ThemeLabel, {
theme = theme,
onApplyTheme = onApplyTheme,
}),
})
end
Expand Down
150 changes: 150 additions & 0 deletions plugin/src/components/ThemeLabel.luau
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
local React = require("@pkg/React")
local types = require("@root/types")
local getLayoutOrder = require("./getLayoutOrder")
local getThemeColors = require("@root/getThemeColors")

local useMemo = React.useMemo

local ACTION_BUTTON_WIDTH = 120
local PADDING = UDim.new(0, 8)
local NUM_PREVIEW_COLORS = 5

export type Props = {
theme: types.ExtensionTheme,
onApplyTheme: ((theme: types.ExtensionTheme) -> ())?,
LayoutOrder: number?,
}

local function ThemeLabel(props: Props)
local previewedColors = useMemo(function()
local colors = getThemeColors(props.theme)
local elements = {}
local count = 0

for _, colorCode in colors.found do
local success, color = pcall(Color3.fromHex, colorCode)
if success then
elements[colorCode] = React.createElement("Frame", {
LayoutOrder = count,
BackgroundColor3 = color,
Size = UDim2.fromOffset(32, 32),
BorderSizePixel = 0,
}, {
BorderRadius = React.createElement("UICorner", {
CornerRadius = UDim.new(1, 0),
}),
})

count += 1
if count == NUM_PREVIEW_COLORS then
break
end
end
end

for i = 1, NUM_PREVIEW_COLORS do
local color = colors.found[i]

if color then
elements[tostring(color)] = React.createElement("Frame", {
LayoutOrder = i,
BackgroundColor3 = color,
Size = UDim2.fromOffset(32, 32),
BorderSizePixel = 0,
})
end
end

return elements
end, { props.theme })

return React.createElement("Frame", {
LayoutOrder = props.LayoutOrder,
BackgroundTransparency = 1,
AutomaticSize = Enum.AutomaticSize.Y,
Size = UDim2.fromScale(1, 0),
}, {
Layout = React.createElement("UIListLayout", {
SortOrder = Enum.SortOrder.LayoutOrder,
FillDirection = Enum.FillDirection.Horizontal,
VerticalAlignment = Enum.VerticalAlignment.Center,
}),

Padding = React.createElement("UIPadding", {
PaddingTop = PADDING,
PaddingRight = PADDING,
PaddingBottom = PADDING,
PaddingLeft = PADDING,
}),

Main = React.createElement("Frame", {
LayoutOrder = getLayoutOrder(),
Size = UDim2.fromScale(1, 0) - UDim2.fromOffset(ACTION_BUTTON_WIDTH, 0),
AutomaticSize = Enum.AutomaticSize.Y,
BackgroundTransparency = 1,
}, {
Layout = React.createElement("UIListLayout", {
SortOrder = Enum.SortOrder.LayoutOrder,
Padding = PADDING,
}),

Name = React.createElement("TextLabel", {
LayoutOrder = getLayoutOrder(),
AutomaticSize = Enum.AutomaticSize.XY,
BackgroundTransparency = 1,
Text = props.theme.name,
TextSize = 16,
Font = Enum.Font.GothamMedium,
TextXAlignment = Enum.TextXAlignment.Left,
TextYAlignment = Enum.TextYAlignment.Top,
TextColor3 = Color3.fromRGB(255, 255, 255),
TextTruncate = Enum.TextTruncate.AtEnd,
}),

Colors = React.createElement("Frame", {
LayoutOrder = getLayoutOrder(),
Size = UDim2.fromScale(1, 0),
AutomaticSize = Enum.AutomaticSize.Y,
BackgroundTransparency = 1,
}, {
Layout = React.createElement("UIListLayout", {
SortOrder = Enum.SortOrder.LayoutOrder,
FillDirection = Enum.FillDirection.Horizontal,
Padding = PADDING,
}),

PreviewColors = React.createElement(React.Fragment, {}, previewedColors),
}),
}),

Action = React.createElement("TextButton", {
LayoutOrder = getLayoutOrder(),
Text = "Use Theme",
TextSize = 14,
TextColor3 = Color3.fromRGB(255, 255, 255),
BorderSizePixel = 0,
Font = Enum.Font.GothamMedium,
Size = UDim2.fromOffset(ACTION_BUTTON_WIDTH, 0),
AutomaticSize = Enum.AutomaticSize.Y,
BackgroundColor3 = Color3.fromRGB(143, 186, 86),
[React.Event.Activated] = function()
if props.onApplyTheme then
props.onApplyTheme(props.theme)
end
end,
}, {
Padding = React.createElement("UIPadding", {
PaddingTop = PADDING,
PaddingRight = PADDING,
PaddingBottom = PADDING,
PaddingLeft = PADDING,
}),

Corner = React.createElement("UICorner", {
CornerRadius = PADDING,
}),
}),
})
end

return ThemeLabel
4 changes: 2 additions & 2 deletions plugin/src/getThemeColors.luau
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ local constants = require("@root/constants")
local getScopeColors = require("@root/getScopeColors")

local function getThemeColors(theme): {
found: { [string]: Color3 },
found: { [string]: string },
missing: { string },
}
local found = {}
local missing = {}

for studioName, vscodeColors in constants.ROBLOX_VSCODE_THEME_MAP do
local color: Color3
local color: string

for _, vscodeColor in vscodeColors do
-- TODO: Some default themes like Dark+ have an "include" field, which
Expand Down

0 comments on commit 6407b5f

Please sign in to comment.