diff --git a/plugin/src/App/StatusPages/Permissions/init.lua b/plugin/src/App/StatusPages/Permissions/init.lua new file mode 100644 index 00000000..f88010aa --- /dev/null +++ b/plugin/src/App/StatusPages/Permissions/init.lua @@ -0,0 +1,95 @@ +local Rojo = script:FindFirstAncestor("Rojo") +local Plugin = Rojo.Plugin +local Packages = Rojo.Packages + +local Roact = require(Packages.Roact) +local Log = require(Packages.Log) + +local Assets = require(Plugin.Assets) +local Theme = require(Plugin.App.Theme) + +local IconButton = require(Plugin.App.Components.IconButton) +local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame) +local Tooltip = require(Plugin.App.Components.Tooltip) + +local e = Roact.createElement + +local function Navbar(props) + return Theme.with(function(theme) + theme = theme.Settings.Navbar + + return e("Frame", { + Size = UDim2.new(1, 0, 0, 46), + LayoutOrder = props.layoutOrder, + BackgroundTransparency = 1, + }, { + Back = e(IconButton, { + icon = Assets.Images.Icons.Back, + iconSize = 24, + color = theme.BackButtonColor, + transparency = props.transparency, + + position = UDim2.new(0, 0, 0.5, 0), + anchorPoint = Vector2.new(0, 0.5), + + onClick = props.onBack, + }, { + Tip = e(Tooltip.Trigger, { + text = "Back" + }), + }), + + Text = e("TextLabel", { + Text = "Permissions", + Font = Enum.Font.Gotham, + TextSize = 18, + TextColor3 = theme.TextColor, + TextTransparency = props.transparency, + + Size = UDim2.new(1, 0, 1, 0), + + BackgroundTransparency = 1, + }) + }) + end) +end + +local PermissionsPage = Roact.Component:extend("PermissionsPage") + +function PermissionsPage:init() + self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0)) +end + +function PermissionsPage:render() + return Theme.with(function(theme) + theme = theme.Settings + + return e(ScrollingFrame, { + size = UDim2.new(1, 0, 1, 0), + contentSize = self.contentSize, + transparency = self.props.transparency, + }, { + Navbar = e(Navbar, { + onBack = self.props.onBack, + transparency = self.props.transparency, + layoutOrder = 0, + }), + + Layout = e("UIListLayout", { + FillDirection = Enum.FillDirection.Vertical, + SortOrder = Enum.SortOrder.LayoutOrder, + + [Roact.Change.AbsoluteContentSize] = function(object) + self.setContentSize(object.AbsoluteContentSize) + end, + }), + + Padding = e("UIPadding", { + PaddingLeft = UDim.new(0, 20), + PaddingRight = UDim.new(0, 20), + }), + }) + end) +end + +return PermissionsPage diff --git a/plugin/src/App/StatusPages/Settings/Setting.lua b/plugin/src/App/StatusPages/Settings/Setting.lua index 8bf688f6..d294264d 100644 --- a/plugin/src/App/StatusPages/Settings/Setting.lua +++ b/plugin/src/App/StatusPages/Settings/Setting.lua @@ -33,19 +33,22 @@ function Setting:init() self.contentSize, self.setContentSize = Roact.createBinding(Vector2.new(0, 0)) self.containerSize, self.setContainerSize = Roact.createBinding(Vector2.new(0, 0)) - self:setState({ - setting = Settings:get(self.props.id), - }) - - self.changedCleanup = Settings:onChanged(self.props.id, function(value) + if self.props.id then self:setState({ - setting = value, + setting = Settings:get(self.props.id), }) - end) + self.changedCleanup = Settings:onChanged(self.props.id, function(value) + self:setState({ + setting = value, + }) + end) + end end function Setting:willUnmount() - self.changedCleanup() + if self.changedCleanup then + self.changedCleanup() + end end function Setting:render() @@ -64,7 +67,9 @@ function Setting:render() self.setContainerSize(object.AbsoluteSize) end, }, { - Input = if self.props.options ~= nil then + Input = if self.props.customInput then + self.props.customInput + elseif self.props.options ~= nil then e(Dropdown, { options = self.props.options, active = self.state.setting, diff --git a/plugin/src/App/StatusPages/Settings/init.lua b/plugin/src/App/StatusPages/Settings/init.lua index 1d484423..60ff7d87 100644 --- a/plugin/src/App/StatusPages/Settings/init.lua +++ b/plugin/src/App/StatusPages/Settings/init.lua @@ -12,6 +12,7 @@ local Theme = require(Plugin.App.Theme) local IconButton = require(Plugin.App.Components.IconButton) local ScrollingFrame = require(Plugin.App.Components.ScrollingFrame) local Tooltip = require(Plugin.App.Components.Tooltip) +local SlicedImage = require(Plugin.App.Components.SlicedImage) local Setting = require(script.Setting) local e = Roact.createElement @@ -95,12 +96,52 @@ function SettingsPage:render() layoutOrder = 1, }), + Permissions = e(Setting, { + name = "Third Party Permissions", + description = "Manage permissions for third party plugins", + transparency = self.props.transparency, + layoutOrder = 2, + customInput = e("TextButton", { + Text = "", + BackgroundTransparency = 1, + Size = UDim2.fromOffset(28, 28), + Position = UDim2.fromScale(1, 0.5), + AnchorPoint = Vector2.new(1, 0.5), + + [Roact.Event.Activated] = function() + self.props.onNavigatePermissions() + end, + }, { + Button = Theme.with(function(theme) + theme = theme.Checkbox + return e(SlicedImage, { + slice = Assets.Slices.RoundedBorder, + color = theme.Inactive.BorderColor, + transparency = self.props.transparency, + size = UDim2.new(1, 0, 1, 0), + }, { + Icon = e("ImageLabel", { + Image = Assets.Images.Icons.Expand, + ImageColor3 = theme.Inactive.IconColor, + ImageTransparency = self.props.transparency, + + Size = UDim2.new(0, 16, 0, 16), + Position = UDim2.new(0.5, 0, 0.5, 0), + AnchorPoint = Vector2.new(0.5, 0.5), + + BackgroundTransparency = 1, + }), + }) + end), + }), + }), + ShowNotifications = e(Setting, { id = "showNotifications", name = "Show Notifications", description = "Popup notifications in viewport", transparency = self.props.transparency, - layoutOrder = 2, + layoutOrder = 3, }), PlaySounds = e(Setting, { @@ -108,7 +149,7 @@ function SettingsPage:render() name = "Play Sounds", description = "Toggle sound effects", transparency = self.props.transparency, - layoutOrder = 3, + layoutOrder = 4, }), TwoWaySync = e(Setting, { @@ -116,7 +157,7 @@ function SettingsPage:render() name = "Two-Way Sync", description = "EXPERIMENTAL! Editing files in Studio will sync them into the filesystem", transparency = self.props.transparency, - layoutOrder = 4, + layoutOrder = 5, }), LogLevel = e(Setting, { @@ -124,7 +165,7 @@ function SettingsPage:render() name = "Log Level", description = "Plugin output verbosity level", transparency = self.props.transparency, - layoutOrder = 5, + layoutOrder = 6, options = invertedLevels, showReset = Settings:getBinding("logLevel"):map(function(value) @@ -140,7 +181,7 @@ function SettingsPage:render() name = "Typechecking", description = "Toggle typechecking on the API surface", transparency = self.props.transparency, - layoutOrder = 6, + layoutOrder = 7, }), Layout = e("UIListLayout", { diff --git a/plugin/src/App/StatusPages/init.lua b/plugin/src/App/StatusPages/init.lua index 03d64e45..cdcac6f1 100644 --- a/plugin/src/App/StatusPages/init.lua +++ b/plugin/src/App/StatusPages/init.lua @@ -1,7 +1,8 @@ return { NotConnected = require(script.NotConnected), Settings = require(script.Settings), + Permissions = require(script.Permissions), Connecting = require(script.Connecting), Connected = require(script.Connected), Error = require(script.Error), -} \ No newline at end of file +} diff --git a/plugin/src/App/init.lua b/plugin/src/App/init.lua index 35cd041a..15dd98ed 100644 --- a/plugin/src/App/init.lua +++ b/plugin/src/App/init.lua @@ -35,6 +35,7 @@ local StatusPages = require(script.StatusPages) local AppStatus = strict("AppStatus", { NotConnected = "NotConnected", Settings = "Settings", + Permissions = "Permissions", Connecting = "Connecting", Connected = "Connected", Error = "Error", @@ -509,6 +510,20 @@ function App:render() appStatus = AppStatus.NotConnected, }) end, + + onNavigatePermissions = function() + self:setState({ + appStatus = AppStatus.Permissions, + }) + end, + }), + + Permissions = createPageElement(AppStatus.Permissions, { + onBack = function() + self:setState({ + appStatus = AppStatus.Settings, + }) + end, }), Error = createPageElement(AppStatus.Error, { diff --git a/plugin/src/Assets.lua b/plugin/src/Assets.lua index a5484aa5..78ab84fe 100644 --- a/plugin/src/Assets.lua +++ b/plugin/src/Assets.lua @@ -25,6 +25,7 @@ local Assets = { Close = "rbxassetid://6012985953", Back = "rbxassetid://6017213752", Reset = "rbxassetid://10142422327", + Expand = "rbxassetid://12045401097", }, Checkbox = { Active = "rbxassetid://6016251644",