New menu buttons that support hover and a disabled state

OpenRA.Mods.Cnc/OpenRA.Mods.Cnc.csproj

@@ -72,6 +72,7 @@
     <Compile Include="SpawnViceroid.cs" />
     <Compile Include="Widgets\CncMenuLogic.cs" />
     <Compile Include="Widgets\CncServerBrowserLogic.cs" />
+    <Compile Include="Widgets\CncMenuButton.cs" />
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="..\OpenRA.FileFormats\OpenRA.FileFormats.csproj">

OpenRA.Mods.Cnc/Widgets/CncMenuButton.cs

@@ -0,0 +1,44 @@
+#region Copyright & License Information
+/*
+ * Copyright 2007-2011 The OpenRA Developers (see AUTHORS)
+ * This file is part of OpenRA, which is free software. It is made 
+ * available to you under the terms of the GNU General Public License
+ * as published by the Free Software Foundation. For more information,
+ * see COPYING.
+ */
+#endregion
+
+
+using System;
+using OpenRA.Widgets;
+using OpenRA.Graphics;
+using System.Drawing;
+namespace OpenRA.Mods.Cnc.Widgets
+{
+	public class CncMenuButtonWidget : ButtonWidget
+	{
+		public CncMenuButtonWidget() : base() { }
+		protected CncMenuButtonWidget(CncMenuButtonWidget widget)	: base(widget) { }
+
+		public Func<bool> IsDisabled = () => false;
+		
+		public override int2 ChildOrigin { get { return RenderOrigin; } }
+		public override void DrawInner()
+		{
+			var font = Game.Renderer.BoldFont;
+			var state = IsDisabled() ? "button-disabled" : 
+						Depressed ? "button-pressed" : 
+						RenderBounds.Contains(Viewport.LastMousePos) ? "button-hover" : 
+						"button";
+			
+			WidgetUtils.DrawPanel(state, RenderBounds);
+			var text = GetText();
+
+			font.DrawText(text,
+				new int2(RenderOrigin.X + UsableWidth / 2, RenderOrigin.Y + Bounds.Height / 2)
+					- new int2(font.Measure(text).X / 2,
+				font.Measure(text).Y / 2), IsDisabled() ? Color.Gray : Color.White);
+		}
+	}
+}
+

OpenRA.Mods.Cnc/Widgets/CncMenuLogic.cs

@@ -18,7 +18,7 @@ using System.Drawing;
 using System.Linq;
 using OpenRA.GameRules;
 
-namespace OpenRA.Mods.RA.Widgets.Delegates
+namespace OpenRA.Mods.Cnc.Widgets
 {
 	public class CncMenuLogic : IWidgetDelegate
 	{
@@ -47,7 +47,6 @@ namespace OpenRA.Mods.RA.Widgets.Delegates
 			var multiplayerMenu = widget.GetWidget("MULTIPLAYER_MENU");
 			multiplayerMenu.IsVisible = () => Menu == MenuType.Multiplayer;
 			
-			
 			multiplayerMenu.GetWidget("BACK_BUTTON").OnMouseUp = mi => { Menu = MenuType.Main; return true; };
 			multiplayerMenu.GetWidget("JOIN_BUTTON").OnMouseUp = mi =>
 			{

OpenRA.Mods.Cnc/Widgets/CncServerBrowserLogic.cs

@@ -61,14 +61,15 @@ namespace OpenRA.Mods.Cnc.Widgets
 			{
 				searchStatus = SearchStatus.Fetching;
 				sl.RemoveChildren();
+				currentServer = null;
 
 				MasterServerQuery.Refresh(Game.Settings.Server.MasterServer);
 
 				return true;
 			};
 			
-			var join = panel.GetWidget("JOIN_BUTTON");
+			var join = panel.GetWidget<CncMenuButtonWidget>("JOIN_BUTTON");
-			join.IsVisible = () => currentServer != null && ServerBrowserDelegate.CanJoin(currentServer);
+			join.IsDisabled = () => currentServer == null || !ServerBrowserDelegate.CanJoin(currentServer);
 			join.OnMouseUp = mi =>
 			{
 				if (currentServer == null)

artsrc/cnc/buttons.svg

@@ -28,13 +28,13 @@
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
      inkscape:zoom="4"
-     inkscape:cx="30.297739"
+     inkscape:cx="26.047739"
      inkscape:cy="49.497475"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="false"
-     inkscape:window-width="1626"
+     inkscape:window-width="1440"
-     inkscape:window-height="1006"
+     inkscape:window-height="856"
      inkscape:window-x="54"
      inkscape:window-y="22"
      inkscape:window-maximized="0" />
@@ -84,6 +84,16 @@
        height="63"
        width="63"
        id="rect2984"
-       style="fill:#000000;fill-opacity:0.75111109;stroke:#800000;stroke-width:1;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none" />
+       style="fill:#2b2b2b;fill-opacity:0.87843137999999998;stroke:#800000;stroke-width:1;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       inkscape:export-ydpi="90"
+       inkscape:export-xdpi="90"
+       inkscape:export-filename="/Users/paul/src/OpenRA/mods/cnc/uibits/rect3776.png"
+       y="988.86218"
+       x="64.5"
+       height="63"
+       width="63"
+       id="rect3753"
+       style="fill:#0f0000;fill-opacity:0.87843137999999998;stroke:#c00000;stroke-width:1;stroke-linecap:square;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
   </g>
 </svg>

mods/cnc/chrome.yaml

@@ -141,7 +141,50 @@ dialog: uibuttons.png
 	corner-bl: 0,62,2,2
 	corner-br: 62,62,2,2
 
-# Pressed button
+button-hover: uibuttons.png
+	background: 2,2,60,60
+	border-r: 62,2,2,60
+	border-l: 0,2,2,60
+	border-b: 2,62,60,2
+	border-t: 2,0,60,2
+	corner-tl: 0,0,2,2
+	corner-tr: 62,0,2,2
+	corner-bl: 0,62,2,2
+	corner-br: 62,62,2,2
+
+button-disabled: uibuttons.png
+	background: 66,2,60,60
+	border-r: 126,2,2,60
+	border-l: 64,2,2,60
+	border-b: 66,62,60,2
+	border-t: 66,0,60,2
+	corner-tl: 64,0,2,2
+	corner-tr: 126,0,2,2
+	corner-bl: 64,62,2,2
+	corner-br: 126,62,2,2
+
+button-pressed: uibuttons.png
+	background: 66,66,60,60
+	border-r: 126,66,2,60
+	border-l: 64,66,2,60
+	border-b: 66,126,60,2
+	border-t: 66,64,60,2
+	corner-tl: 64,64,2,2
+	corner-tr: 126,64,2,2
+	corner-bl: 64,126,2,2
+	corner-br: 126,126,2,2
+
+button: uibuttons.png
+	background: 2,66,60,60
+	border-r: 62,66,2,60
+	border-l: 0,66,2,60
+	border-b: 2,126,60,2
+	border-t: 2,64,60,2
+	corner-tl: 0,64,2,2
+	corner-tr: 62,64,2,2
+	corner-bl: 0,126,2,2
+	corner-br: 62,126,2,2
+
 dialog3: uibuttons.png
 	background: 2,2,60,60
 	border-r: 62,2,2,60
@@ -153,7 +196,6 @@ dialog3: uibuttons.png
 	corner-bl: 0,62,2,2
 	corner-br: 62,62,2,2
 
-# Normal buttton
 dialog2: uibuttons.png
 	background: 2,66,60,60
 	border-r: 62,66,2,60
@@ -165,8 +207,7 @@ dialog2: uibuttons.png
 	corner-bl: 0,126,2,2
 	corner-br: 62,126,2,2
 
-# Panel background
+panel-black: panel.png
-panel: uibuttons.png
 	background: 66,2,60,60
 	border-r: 126,2,2,60
 	border-l: 64,2,2,60
@@ -177,6 +218,18 @@ panel: uibuttons.png
 	corner-bl: 64,62,2,2
 	corner-br: 126,62,2,2
 
+panel-darkred: panel.png
+	background: 2,66,60,60
+	border-r: 62,66,2,60
+	border-l: 0,66,2,60
+	border-b: 2,126,60,2
+	border-t: 2,64,60,2
+	corner-tl: 0,64,2,2
+	corner-tr: 62,64,2,2
+	corner-bl: 0,126,2,2
+	corner-br: 62,126,2,2
+
+
 dialog4: dialog4.png
 	border-t: 5,0,52,6
 	border-b: 5,58,52,6

mods/cnc/chrome/mainmenu.yaml

@@ -36,48 +36,43 @@ Container@MENU_BACKGROUND:
 							Height:20
 							Text:Main Menu
 							Align:Center
-							Bold:True
+							Font:Bold
 							Contrast:True
-						Button@SOLO_BUTTON:
+						CncMenuButton@SOLO_BUTTON:
 							Id:SOLO_BUTTON
 							X:0
 							Y:0
 							Width:140
 							Height:35
 							Text:Skirmish
-							Bold:True
+						CncMenuButton@MULTIPLAYER_BUTTON:
-						Button@MULTIPLAYER_BUTTON:
 							Id:MULTIPLAYER_BUTTON
 							X:150
 							Y:0
 							Width:140
 							Height:35
 							Text:Multiplayer
-							Bold:True
+						CncMenuButton@SETTINGS_BUTTON:
-						Button@SETTINGS_BUTTON:
 							Id:SETTINGS_BUTTON
 							X:300
 							Y:0
 							Width:140
 							Height:35
 							Text:Settings
-							Bold:True
+						CncMenuButton@REPLAY_BUTTON:
-						Button@REPLAY_BUTTON:
 							Id:REPLAY_BUTTON
 							X:450
 							Y:0
 							Width:140
 							Height:35
 							Text: Replays
-							Bold: True
+						CncMenuButton@QUIT_BUTTON:
-						Button@QUIT_BUTTON:
 							Id:QUIT_BUTTON
 							X:600
 							Y:0
 							Width:140
 							Height:35
 							Text:Quit
-							Bold:True
 				Container@MULTIPLAYER_MENU:
 					Id:MULTIPLAYER_MENU
 					Width:PARENT_RIGHT
@@ -90,40 +85,36 @@ Container@MENU_BACKGROUND:
 							Height:20
 							Text:Multiplayer
 							Align:Center
-							Bold:True
+							Font:Bold
 							Contrast:True
-						Button@CREATE_BUTTON:
+						CncMenuButton@CREATE_BUTTON:
 							Id:CREATE_BUTTON
 							X:0
 							Y:0
 							Width:140
 							Height:35
 							Text:Create Server
-							Bold:True
+						CncMenuButton@JOIN_BUTTON:
-						Button@JOIN_BUTTON:
 							Id:JOIN_BUTTON
 							X:150
 							Y:0
 							Width:140
 							Height:35
 							Text:Find Server
-							Bold:True
+						CncMenuButton@DIRECTCONNECT_BUTTON:
-						Button@DIRECTCONNECT_BUTTON:
 							Id:DIRECTCONNECT_BUTTON
 							X:300
 							Y:0
 							Width:140
 							Height:35
 							Text:Direct Connect
-							Bold:True
+						CncMenuButton@BACK_BUTTON:
-						Button@BACK_BUTTON:
 							Id:BACK_BUTTON
 							X:600
 							Y:0
 							Width:140
 							Height:35
 							Text:Back
-							Bold:True
 				Container@SETTINGS_MENU:
 					Id:SETTINGS_MENU
 					Width:PARENT_RIGHT
@@ -136,40 +127,36 @@ Container@MENU_BACKGROUND:
 							Height:20
 							Text:Settings
 							Align:Center
-							Bold:True
+							Font:Bold
 							Contrast:True
-						Button@MODS_BUTTON:
+						CncMenuButton@MODS_BUTTON:
 							Id:MODS_BUTTON
 							X:0
 							Y:0
 							Width:140
 							Height:35
 							Text:Mods
-							Bold:True
+						CncMenuButton@MUSIC_BUTTON:
-						Button@MUSIC_BUTTON:
 							Id:MUSIC_BUTTON
 							X:150
 							Y:0
 							Width:140
 							Height:35
 							Text:Music
-							Bold:True
+						CncMenuButton@PREFERENCES_BUTTON:
-						Button@PREFERENCES_BUTTON:
 							Id:PREFERENCES_BUTTON
 							X:300
 							Y:0
 							Width:140
 							Height:35
 							Text:Preferences
-							Bold:True
+						CncMenuButton@BACK_BUTTON:
-						Button@BACK_BUTTON:
 							Id:BACK_BUTTON
 							X:600
 							Y:0
 							Width:140
 							Height:35
 							Text:Back
-							Bold:True
 Background@QUICKMODSWITCHER:
 	Id:QUICKMODSWITCHER
 	Background: dialog4
@@ -186,7 +173,7 @@ Background@QUICKMODSWITCHER:
 			Height:25
 			Text:Mod:
 			Align:Left
-			Bold:True
+			Font:Bold
 		DropDownButton@SWITCHER:
 			Id:SWITCHER
 			Text:Team
@@ -201,7 +188,7 @@ Background@QUICKMODSWITCHER:
 			Width:150
 			Height:25
 			Align:Center
-			Bold:True
+			Font:Bold
 Background@PERF_BG:
 	Id:PERF_BG
 	Background:dialog4
@@ -240,7 +227,7 @@ Background@MUSIC_MENU:
 			Height:25
 			Text:Music
 			Align:Center
-			Bold:True
+			Font:Bold
 		Button@BUTTON_INSTALL:
 			Id:BUTTON_INSTALL
 			X:20
@@ -248,7 +235,7 @@ Background@MUSIC_MENU:
 			Width:160
 			Height:25
 			Text:Install Music
-			Bold:True
+			Font:Bold
 		Button@BUTTON_CLOSE:
 			Id:BUTTON_CLOSE
 			X:PARENT_RIGHT - 180
@@ -256,7 +243,7 @@ Background@MUSIC_MENU:
 			Width:160
 			Height:25
 			Text:Close
-			Bold:True
+			Font:Bold
 		Container@BUTTONS:
 			X:PARENT_RIGHT - 150
 			Y:50

mods/cnc/chrome/serverbrowser.yaml

@@ -6,10 +6,17 @@ Container@SERVERBROWSER_PANEL:
 	Width:740
 	Height:535
 	Children:
+		Label@TITLE:
+			Text:Find Server
+			Width:740
+			Y:0-25
+			Font:BigBold
+			Contrast:true
+			Align:Center
 		Background@bg:
 			Width:740
 			Height:500
-			Background:panel
+			Background:panel-black
 			Children:
 				ScrollPanel@SERVER_LIST:
 					Id:SERVER_LIST
@@ -62,7 +69,7 @@ Container@SERVERBROWSER_PANEL:
 							Y:0
 							Text:Title
 							Align:Center
-							Bold:True
+							Font:Bold
 						Label@MAP:
 							Id:MAP
 							X:PARENT_RIGHT-450
@@ -70,7 +77,7 @@ Container@SERVERBROWSER_PANEL:
 							Width:250
 							Height:25									
 							Text:Map
-							Bold:true
+							Font:Bold
 						Label@PLAYERS:
 							Id:PLAYERS
 							X:PARENT_RIGHT-200
@@ -78,7 +85,7 @@ Container@SERVERBROWSER_PANEL:
 							Width:50
 							Height:25
 							Text:Players
-							Bold:true
+							Font:Bold
 						Label@IP:
 							Id:IP
 							Width:140
@@ -86,122 +93,124 @@ Container@SERVERBROWSER_PANEL:
 							Align:Center
 							Height:25
 							Text:Address
-							Bold:true
+							Font:Bold
 				Label@PROGRESS_LABEL:
 					Id:PROGRESS_LABEL
 					X:22
-					Y:150
+					Y:165
 					Width:710
 					Height:25
+					Font:Bold
 					Align:Center
 					Visible:false
-				Container@SERVER_INFO:
+				Background@INFO_BG:
-					Id:SERVER_INFO
 					X:15
 					Y:345
 					Width:710
 					Height:140
-					Visible:false
 					Background:dialog2
 					Children:
-						MapPreview@MAP_PREVIEW:
+						Container@SERVER_INFO:
-							Id:MAP_PREVIEW
+							Id:SERVER_INFO
-							X:10
+							Width:PARENT_RIGHT
-							Y:10
+							Height:PARENT_BOTTOM
-							Width:128
+							Visible:false
-							Height:128
+							Background:panel-darkred
-						Container@STATS_BIN
-							X:200
-							Y:30
-							Width:150
 							Children:
-								Label@SERVER_IP_LABEL:
+								MapPreview@MAP_PREVIEW:
-									Id:SERVER_IP_LABEL
+									Id:MAP_PREVIEW
-									X:0
+									X:10
-									Y:0
+									Y:10
-									Align:Right
+									Width:128
-									Width:70
+									Height:128
-									Height:20
+								Container@STATS_BIN:
-									Text:Server:
+									X:200
-									Bold:True
+									Y:30
-								Label@SERVER_IP:
+									Width:150
-									Id:SERVER_IP
+									Children:
-									X:70
+										Label@SERVER_IP_LABEL:
-									Y:0
+											Id:SERVER_IP_LABEL
-									Align:Left
+											X:0
-									Width:70
+											Y:0
-									Height:20
+											Align:Right
-								Label@MAP_PLAYERS_LABEL:
+											Width:70
-									Id:MAP_PLAYERS_LABEL
+											Height:20
-									X:0
+											Text:Server:
-									Y:20
+											Font:Bold
-									Align:Right
+										Label@SERVER_IP:
-									Width:70
+											Id:SERVER_IP
-									Height:20
+											X:70
-									Text:Players:
+											Y:0
-									Bold:True
+											Align:Left
-								Label@MAP_PLAYERS:
+											Width:70
-									Id:MAP_PLAYERS
+											Height:20
-									X:70
+										Label@MAP_PLAYERS_LABEL:
-									Y:20
+											Id:MAP_PLAYERS_LABEL
-									Align:Left
+											X:0
-									Width:70
+											Y:20
-									Height:20
+											Align:Right
-								Label@MAP_TITLE_LABEL:
+											Width:70
-									Id:MAP_TITLE_LABEL
+											Height:20
-									X:0
+											Text:Players:
-									Y:40
+											Font:Bold
-									Align:Right
+										Label@MAP_PLAYERS:
-									Width:70
+											Id:MAP_PLAYERS
-									Height:20
+											X:70
-									Text:Map:
+											Y:20
-									Bold:True
+											Align:Left
-								Label@MAP_TITLE:
+											Width:70
-									Id:MAP_TITLE
+											Height:20
-									X:70
+										Label@MAP_TITLE_LABEL:
-									Y:40
+											Id:MAP_TITLE_LABEL
-									Align:Left
+											X:0
-									Width:70
+											Y:40
-									Height:20
+											Align:Right
-								Label@SERVER_MODS_LABEL:
+											Width:70
-									Id:SERVER_MODS_LABEL
+											Height:20
-									X:0
+											Text:Map:
-									Y:60
+											Font:Bold
-									Align:Right
+										Label@MAP_TITLE:
-									Width:70
+											Id:MAP_TITLE
-									Height:20
+											X:70
-									Text:Mods:
+											Y:40
-									Bold:True
+											Align:Left
-								Label@SERVER_MODS:
+											Width:70
-									Id:SERVER_MODS
+											Height:20
-									X:70
+										Label@SERVER_MODS_LABEL:
-									Y:63
+											Id:SERVER_MODS_LABEL
-									Align:Left
+											X:0
-									VAlign:Top
+											Y:60
-									Width:70
+											Align:Right
-									Height:20
+											Width:70
-		Button@JOIN_BUTTON:
+											Height:20
+											Text:Mods:
+											Font:Bold
+										Label@SERVER_MODS:
+											Id:SERVER_MODS
+											X:70
+											Y:63
+											Align:Left
+											VAlign:Top
+											Width:70
+											Height:20
+		CncMenuButton@JOIN_BUTTON:
 			Id:JOIN_BUTTON
 			X:0
 			Y:499
 			Width:140
 			Height:35
-			Visible: false
 			Text:Join
-			Bold:True
+		CncMenuButton@REFRESH_BUTTON:
-		Button@REFRESH_BUTTON:
 			Id:REFRESH_BUTTON
 			X:450
 			Y:499
 			Width:140
 			Height:35
 			Text:Refresh
-			Bold:True
+		CncMenuButton@BACK_BUTTON:
-		Button@BACK_BUTTON:
 			Id:BACK_BUTTON
 			X:600
 			Y:499
 			Width:140
 			Height:35
 			Text:Back
-			Bold:True