Add notification popups (#540)

* Add notifications prototype

* Add timeout

* Improve function name

* Faster timeouts and fully clickable

* Update remove padding from old X button

* Only auto-dismiss when viewport is open

* Start auto dismiss once viewed

* Avoid redundantly displaying widget text as notifs

* Add sound effect

* Add setting for notifications

* Remove duplicate PluginSettings.StudioProvider

* Use short pop sound effect

* Fix broken audio, thanks Roblox

* Use e instead of createElement
This commit is contained in:
boatbomber
2022-06-29 16:06:13 -07:00
committed by GitHub
parent f1cdf2fe79
commit ca0759a011
9 changed files with 293 additions and 10 deletions

View File

@@ -16,6 +16,7 @@ local Theme = require(script.Theme)
local PluginSettings = require(script.PluginSettings)
local Page = require(script.Page)
local Notifications = require(script.Notifications)
local StudioPluginAction = require(script.Components.Studio.StudioPluginAction)
local StudioToolbar = require(script.Components.Studio.StudioToolbar)
local StudioToggleButton = require(script.Components.Studio.StudioToggleButton)
@@ -44,10 +45,37 @@ function App:init()
self:setState({
appStatus = AppStatus.NotConnected,
guiEnabled = false,
notifications = {},
toolbarIcon = Assets.Images.PluginButton,
})
end
function App:addNotification(text: string, timeout: number?)
if not self.props.settings:get("showNotifications") then
return
end
local notifications = table.clone(self.state.notifications)
table.insert(notifications, {
text = text,
timestamp = DateTime.now().UnixTimestampMillis,
timeout = timeout or 3,
})
self:setState({
notifications = notifications,
})
end
function App:closeNotification(index: number)
local notifications = table.clone(self.state.notifications)
table.remove(notifications, index)
self:setState({
notifications = notifications,
})
end
function App:getHostAndPort()
local host = self.host:getValue()
local port = self.port:getValue()
@@ -81,6 +109,7 @@ function App:startSession()
appStatus = AppStatus.Connecting,
toolbarIcon = Assets.Images.PluginButton,
})
self:addNotification("Connecting to session...")
elseif status == ServeSession.Status.Connected then
local address = ("%s:%s"):format(host, port)
self:setState({
@@ -89,8 +118,7 @@ function App:startSession()
address = address,
toolbarIcon = Assets.Images.PluginButtonConnected,
})
Log.info("Connected to session '{}' at {}", details, address)
self:addNotification(string.format("Connected to session '%s' at %s.", details, address), 5)
elseif status == ServeSession.Status.Disconnected then
self.serveSession = nil
@@ -104,13 +132,13 @@ function App:startSession()
errorMessage = tostring(details),
toolbarIcon = Assets.Images.PluginButtonWarning,
})
self:addNotification(tostring(details), 10)
else
self:setState({
appStatus = AppStatus.NotConnected,
toolbarIcon = Assets.Images.PluginButton,
})
Log.info("Disconnected session")
self:addNotification("Disconnected from session.")
end
end
end)
@@ -236,6 +264,21 @@ function App:render()
end),
}),
RojoNotifications = e("ScreenGui", {}, {
layout = e("UIListLayout", {
SortOrder = Enum.SortOrder.LayoutOrder,
HorizontalAlignment = Enum.HorizontalAlignment.Right,
VerticalAlignment = Enum.VerticalAlignment.Bottom,
Padding = UDim.new(0, 5),
}),
notifs = e(Notifications, {
notifications = self.state.notifications,
onClose = function(index)
self:closeNotification(index)
end,
}),
}),
toggleAction = e(StudioPluginAction, {
name = "RojoConnection",
title = "Rojo: Connect/Disconnect",