Add changing toolbar icon to indicate state (#538)

* Add changing toolbar icon

* Return to default icon after closing error

* Update changelog

* Add assets

* Improved link icon

* Upload new icons

Co-authored-by: Lucien Greathouse <me@lpghatguy.com>

CHANGELOG.md

@@ -5,11 +5,13 @@
 * Added support for optional paths in project files. ([#472])
 * Added support for the new Open Cloud API when uploading. ([#504])
 * Added `sourcemap` command for generating sourcemaps to feed into other tools. ([#530])
+* Added changing toolbar icon to indicate state ([#538])
 
 [#472]: https://github.com/rojo-rbx/rojo/pull/472
 [#504]: https://github.com/rojo-rbx/rojo/pull/504
 [#507]: https://github.com/rojo-rbx/rojo/pull/507
 [#530]: https://github.com/rojo-rbx/rojo/pull/530
+[#538]: https://github.com/rojo-rbx/rojo/pull/538
 
 ## [7.0.0] - December 10, 2021
 * Fixed Rojo's interactions with properties enabled by FFlags that are not yet enabled. ([#493])
@@ -96,7 +98,7 @@ The shorthand property format that most users use is not impacted. For reference
 ## [7.0.0-alpha.4][7.0.0-alpha.4] (May 5, 2021)
 * Added the `gameId` and `placeId` optional properties to project files.
     * When connecting from the Rojo Roblox Studio plugin, Rojo will set the game and place ID of the current place to these values, if set.
-    * This is equivalent to running `game:SetUniverseId(...)` and `game:SetPlaceId(...)` from the command bar in Studio. 
+    * This is equivalent to running `game:SetUniverseId(...)` and `game:SetPlaceId(...)` from the command bar in Studio.
 * Added "EXPERIMENTAL!" label to two-way sync toggle in Rojo's Roblox Studio plugin.
 * Fixed `Name` and `Parent` properties being allowed in Rojo projects. ([#413][pr-413])
 * Fixed "Open Scripts Externally" feature crashing Studio. ([#369][issue-369])
@@ -484,4 +486,4 @@ This is a general maintenance release for the Rojo 0.5.x release series.
 * More robust syncing with a new reconciler
 
 ## [0.1.0](https://github.com/rojo-rbx/rojo/releases/tag/v0.1.0) (November 29, 2017)
-* Initial release, functionally very similar to [rbxfs](https://github.com/LPGhatguy/rbxfs)
+* Initial release, functionally very similar to [rbxfs](https://github.com/LPGhatguy/rbxfs)

plugin/src/App/Components/Studio/StudioToggleButton.lua

@@ -44,6 +44,10 @@ function StudioToggleButton:didUpdate(lastProps)
 		self.button.Enabled = self.props.enabled
 	end
 
+	if self.props.icon ~= lastProps.icon then
+		self.button.Icon = self.props.icon
+	end
+
 	if self.props.active ~= lastProps.active then
 		self.button:SetActive(self.props.active)
 	end
@@ -63,4 +67,4 @@ local function StudioToggleButtonWrapper(props)
 	})
 end
 
-return StudioToggleButtonWrapper
+return StudioToggleButtonWrapper

plugin/src/App/init.lua

@@ -40,6 +40,7 @@ function App:init()
 	self:setState({
 		appStatus = AppStatus.NotConnected,
 		guiEnabled = false,
+		toolbarIcon = Assets.Images.PluginButton,
 	})
 end
 
@@ -57,6 +58,7 @@ function App:startSession(host, port, sessionOptions)
 		if status == ServeSession.Status.Connecting then
 			self:setState({
 				appStatus = AppStatus.Connecting,
+				toolbarIcon = Assets.Images.PluginButton,
 			})
 		elseif status == ServeSession.Status.Connected then
 			local address = ("%s:%s"):format(host, port)
@@ -64,6 +66,7 @@ function App:startSession(host, port, sessionOptions)
 				appStatus = AppStatus.Connected,
 				projectName = details,
 				address = address,
+				toolbarIcon = Assets.Images.PluginButtonConnected,
 			})
 		elseif status == ServeSession.Status.Disconnected then
 			self.serveSession = nil
@@ -76,10 +79,12 @@ function App:startSession(host, port, sessionOptions)
 				self:setState({
 					appStatus = AppStatus.Error,
 					errorMessage = tostring(details),
+					toolbarIcon = Assets.Images.PluginButtonWarning,
 				})
 			else
 				self:setState({
 					appStatus = AppStatus.NotConnected,
+					toolbarIcon = Assets.Images.PluginButton,
 				})
 			end
 		end
@@ -186,6 +191,7 @@ function App:render()
 						onClose = function()
 							self:setState({
 								appStatus = AppStatus.NotConnected,
+								toolbarIcon = Assets.Images.PluginButton,
 							})
 						end,
 					}),
@@ -206,7 +212,7 @@ function App:render()
 					button = e(StudioToggleButton, {
 						name = "Rojo",
 						tooltip = "Show or hide the Rojo panel",
-						icon = Assets.Images.PluginButton,
+						icon = self.state.toolbarIcon,
 						active = self.state.guiEnabled,
 						enabled = true,
 						onClick = function()
@@ -223,4 +229,4 @@ function App:render()
 	})
 end
 
-return App
+return App

plugin/src/Assets.lua

@@ -18,6 +18,8 @@ local Assets = {
 	Images = {
 		Logo = "rbxassetid://5990772764",
 		PluginButton = "rbxassetid://3405341609",
+		PluginButtonConnected = "rbxassetid://9529783993",
+		PluginButtonWarning = "rbxassetid://9529784530",
 		Icons = {
 			Close = "rbxassetid://6012985953",
 			Back = "rbxassetid://6017213752",