Sync reminder notification & notification actions

CHANGELOG.md

@@ -5,12 +5,14 @@
 * Fixed the diff visualizer of connected sessions. ([#674])
 * Fixed disconnected session activity. ([#675])
 * Skip confirming patches that contain only a datamodel name change. ([#688])
+* Added sync reminder notification. ([#689])
 * Added protection against syncing a model to a place. ([#691])
 
 [#668]: https://github.com/rojo-rbx/rojo/pull/668
 [#674]: https://github.com/rojo-rbx/rojo/pull/674
 [#675]: https://github.com/rojo-rbx/rojo/pull/675
 [#688]: https://github.com/rojo-rbx/rojo/pull/688
+[#689]: https://github.com/rojo-rbx/rojo/pull/689
 [#691]: https://github.com/rojo-rbx/rojo/pull/691
 
 ## [7.3.0] - April 22, 2023

plugin/src/App/Notifications.lua

@@ -7,13 +7,15 @@ local Packages = Rojo.Packages
 
 local Roact = require(Packages.Roact)
 local Flipper = require(Packages.Flipper)
+local Log = require(Packages.Log)
 
 local bindingUtil = require(script.Parent.bindingUtil)
 
 local Theme = require(Plugin.App.Theme)
 local Assets = require(Plugin.Assets)
 
 local BorderedContainer = require(Plugin.App.Components.BorderedContainer)
+local TextButton = require(Plugin.App.Components.TextButton)
 
 local baseClock = DateTime.now().UnixTimestampMillis
 
@@ -28,10 +30,8 @@ function Notification:init()
 	self.lifetime = self.props.timeout
 
 	self.motor:onStep(function(value)
-		if value <= 0 then
-			if self.props.onClose then
-				self.props.onClose()
-			end
+		if value <= 0 and self.props.onClose then
+			self.props.onClose()
 		end
 	end)
 end
@@ -86,23 +86,54 @@ function Notification:willUnmount()
 end
 
 function Notification:render()
-	local time = DateTime.fromUnixTimestampMillis(self.props.timestamp)
+	local transparency = self.binding:map(function(value)
+		return 1 - value
+	end)
 
 	local textBounds = TextService:GetTextSize(
 		self.props.text,
 		15,
-		Enum.Font.GothamSemibold,
+		Enum.Font.GothamMedium,
 		Vector2.new(350, 700)
 	)
 
-	local transparency = self.binding:map(function(value)
-		return 1 - value
-	end)
+	local actionButtons = {}
+	local buttonsX = 0
+	if self.props.actions then
+		local count = 0
+		for key, action in self.props.actions do
+			actionButtons[key] = e(TextButton, {
+				text = action.text,
+				style = action.style,
+				onClick = function()
+					local success, err = pcall(action.onClick, self)
+					if not success then
+						Log.warn("Error in notification action: " .. tostring(err))
+					end
+				end,
+				layoutOrder = -action.layoutOrder,
+				transparency = transparency,
+			})
+
+			buttonsX += TextService:GetTextSize(
+				action.text, 18, Enum.Font.GothamMedium,
+				Vector2.new(math.huge, math.huge)
+			).X + 30
+
+			count += 1
+		end
+
+		buttonsX += (count - 1) * 5
+	end
+
+	local paddingY, logoSize = 20, 32
+	local actionsY = if self.props.actions then 35 else 0
+	local contentX = math.max(textBounds.X, buttonsX)
 
 	local size = self.binding:map(function(value)
 		return UDim2.fromOffset(
-			(35+40+textBounds.X)*value,
-			math.max(14+20+textBounds.Y, 32+20)
+			(35 + 40 + contentX) * value,
+			5 + actionsY + paddingY + math.max(logoSize, textBounds.Y)
 		)
 	end)
 
@@ -122,22 +153,22 @@ function Notification:render()
 				transparency = transparency,
 				size = UDim2.new(1, 0, 1, 0),
 			}, {
-				TextContainer = e("Frame", {
-					Size = UDim2.new(0, 35+textBounds.X, 1, -20),
-					Position = UDim2.new(0, 0, 0, 10),
+				Contents = e("Frame", {
+					Size = UDim2.new(0, 35 + contentX, 1, -paddingY),
+					Position = UDim2.new(0, 0, 0, paddingY / 2),
 					BackgroundTransparency = 1
 				}, {
 					Logo = e("ImageLabel", {
 						ImageTransparency = transparency,
 						Image = Assets.Images.PluginButton,
 						BackgroundTransparency = 1,
-						Size = UDim2.new(0, 32, 0, 32),
-						Position = UDim2.new(0, 0, 0.5, 0),
-						AnchorPoint = Vector2.new(0, 0.5),
+						Size = UDim2.new(0, logoSize, 0, logoSize),
+						Position = UDim2.new(0, 0, 0, 0),
+						AnchorPoint = Vector2.new(0, 0),
 					}),
 					Info = e("TextLabel", {
 						Text = self.props.text,
-						Font = Enum.Font.GothamSemibold,
+						Font = Enum.Font.GothamMedium,
 						TextSize = 15,
 						TextColor3 = theme.Notification.InfoColor,
 						TextTransparency = transparency,
@@ -150,20 +181,21 @@ function Notification:render()
 						LayoutOrder = 1,
 						BackgroundTransparency = 1,
 					}),
-					Time = e("TextLabel", {
-						Text = time:FormatLocalTime("LTS", "en-us"),
-						Font = Enum.Font.Code,
-						TextSize = 12,
-						TextColor3 = theme.Notification.InfoColor,
-						TextTransparency = transparency,
-						TextXAlignment = Enum.TextXAlignment.Left,
-
-						Size = UDim2.new(1, -35, 0, 14),
-						Position = UDim2.new(0, 35, 1, -14),
-
-						LayoutOrder = 1,
+					Actions = if self.props.actions then e("Frame", {
+						Size = UDim2.new(1, -40, 0, 35),
+						Position = UDim2.new(1, 0, 1, 0),
+						AnchorPoint = Vector2.new(1, 1),
 						BackgroundTransparency = 1,
-					}),
+					}, {
+						Layout = e("UIListLayout", {
+							FillDirection = Enum.FillDirection.Horizontal,
+							HorizontalAlignment = Enum.HorizontalAlignment.Right,
+							VerticalAlignment = Enum.VerticalAlignment.Center,
+							SortOrder = Enum.SortOrder.LayoutOrder,
+							Padding = UDim.new(0, 5),
+						}),
+						Buttons = Roact.createFragment(actionButtons),
+					}) else nil,
 				}),
 
 				Padding = e("UIPadding", {
@@ -180,15 +212,16 @@ local Notifications = Roact.Component:extend("Notifications")
 function Notifications:render()
 	local notifs = {}
 
-	for index, notif in ipairs(self.props.notifications) do
-		notifs[notif] = e(Notification, {
+	for id, notif in self.props.notifications do
+		notifs["NotifID_" .. id] = e(Notification, {
 			soundPlayer = self.props.soundPlayer,
 			text = notif.text,
 			timestamp = notif.timestamp,
 			timeout = notif.timeout,
+			actions = notif.actions,
 			layoutOrder = (notif.timestamp - baseClock),
 			onClose = function()
-				self.props.onClose(index)
+				self.props.onClose(id)
 			end,
 		})
 	end

plugin/src/App/StatusPages/Settings/Setting.lua

@@ -59,6 +59,7 @@ function Setting:render()
 			LayoutOrder = self.props.layoutOrder,
 			ZIndex = -self.props.layoutOrder,
 			BackgroundTransparency = 1,
+			Visible = self.props.visible,
 
 			[Roact.Change.AbsoluteSize] = function(object)
 				self.setContainerSize(object.AbsoluteSize)

plugin/src/App/StatusPages/Settings/init.lua

@@ -87,19 +87,20 @@ function SettingsPage:render()
 				layoutOrder = 0,
 			}),
 
-			OpenScriptsExternally = e(Setting, {
-				id = "openScriptsExternally",
-				name = "Open Scripts Externally",
-				description = "Attempt to open scripts in an external editor",
-				transparency = self.props.transparency,
-				layoutOrder = 1,
-			}),
-
 			ShowNotifications = e(Setting, {
 				id = "showNotifications",
 				name = "Show Notifications",
 				description = "Popup notifications in viewport",
 				transparency = self.props.transparency,
+				layoutOrder = 1,
+			}),
+
+			SyncReminder = e(Setting, {
+				id = "syncReminder",
+				name = "Sync Reminder",
+				description = "Notify to sync when opening a place that has previously been synced",
+				transparency = self.props.transparency,
+				visible = Settings:getBinding("showNotifications"),
 				layoutOrder = 2,
 			}),
 
@@ -111,20 +112,28 @@ function SettingsPage:render()
 				layoutOrder = 3,
 			}),
 
+			OpenScriptsExternally = e(Setting, {
+				id = "openScriptsExternally",
+				name = "Open Scripts Externally",
+				description = "EXPERIMENTAL! Attempt to open scripts in an external editor",
+				transparency = self.props.transparency,
+				layoutOrder = 4,
+			}),
+
 			TwoWaySync = e(Setting, {
 				id = "twoWaySync",
 				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, {
 				id = "logLevel",
 				name = "Log Level",
 				description = "Plugin output verbosity level",
 				transparency = self.props.transparency,
-				layoutOrder = 5,
+				layoutOrder = 100,
 
 				options = invertedLevels,
 				showReset = Settings:getBinding("logLevel"):map(function(value)
@@ -140,7 +149,7 @@ function SettingsPage:render()
 				name = "Typechecking",
 				description = "Toggle typechecking on the API surface",
 				transparency = self.props.transparency,
-				layoutOrder = 6,
+				layoutOrder = 101,
 			}),
 
 			Layout = e("UIListLayout", {