From 28cf48459b8c7db6927bc5106a1eb6ef4fa08ad9 Mon Sep 17 00:00:00 2001 From: Paul Chote Date: Fri, 6 May 2011 18:19:59 +1200 Subject: [PATCH] New menu buttons that support hover and a disabled state --- OpenRA.Mods.Cnc/OpenRA.Mods.Cnc.csproj | 1 + OpenRA.Mods.Cnc/Widgets/CncMenuButton.cs | 44 ++++ OpenRA.Mods.Cnc/Widgets/CncMenuLogic.cs | 3 +- .../Widgets/CncServerBrowserLogic.cs | 5 +- artsrc/cnc/buttons.svg | 18 +- mods/cnc/chrome.yaml | 61 +++++- mods/cnc/chrome/mainmenu.yaml | 55 ++--- mods/cnc/chrome/serverbrowser.yaml | 191 +++++++++--------- mods/cnc/uibits/uibuttons.png | Bin 530 -> 549 bytes 9 files changed, 241 insertions(+), 137 deletions(-) create mode 100644 OpenRA.Mods.Cnc/Widgets/CncMenuButton.cs diff --git a/OpenRA.Mods.Cnc/OpenRA.Mods.Cnc.csproj b/OpenRA.Mods.Cnc/OpenRA.Mods.Cnc.csproj index 415a3569ba..61f99472d9 100644 --- a/OpenRA.Mods.Cnc/OpenRA.Mods.Cnc.csproj +++ b/OpenRA.Mods.Cnc/OpenRA.Mods.Cnc.csproj @@ -72,6 +72,7 @@ + diff --git a/OpenRA.Mods.Cnc/Widgets/CncMenuButton.cs b/OpenRA.Mods.Cnc/Widgets/CncMenuButton.cs new file mode 100644 index 0000000000..fb322082e4 --- /dev/null +++ b/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 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); + } + } +} + diff --git a/OpenRA.Mods.Cnc/Widgets/CncMenuLogic.cs b/OpenRA.Mods.Cnc/Widgets/CncMenuLogic.cs index a597d62da2..65ea2b807d 100755 --- a/OpenRA.Mods.Cnc/Widgets/CncMenuLogic.cs +++ b/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 => { diff --git a/OpenRA.Mods.Cnc/Widgets/CncServerBrowserLogic.cs b/OpenRA.Mods.Cnc/Widgets/CncServerBrowserLogic.cs index 8c2f27b7ae..2c815e8973 100644 --- a/OpenRA.Mods.Cnc/Widgets/CncServerBrowserLogic.cs +++ b/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"); - join.IsVisible = () => currentServer != null && ServerBrowserDelegate.CanJoin(currentServer); + var join = panel.GetWidget("JOIN_BUTTON"); + join.IsDisabled = () => currentServer == null || !ServerBrowserDelegate.CanJoin(currentServer); join.OnMouseUp = mi => { if (currentServer == null) diff --git a/artsrc/cnc/buttons.svg b/artsrc/cnc/buttons.svg index 037bf026a6..4c3bd4d3e9 100644 --- a/artsrc/cnc/buttons.svg +++ b/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-height="1006" + inkscape:window-width="1440" + 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" /> + diff --git a/mods/cnc/chrome.yaml b/mods/cnc/chrome.yaml index 2302c33d5b..ec1418d8ce 100644 --- a/mods/cnc/chrome.yaml +++ b/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: uibuttons.png +panel-black: panel.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 diff --git a/mods/cnc/chrome/mainmenu.yaml b/mods/cnc/chrome/mainmenu.yaml index 6e888e08d0..b99d34d47b 100644 --- a/mods/cnc/chrome/mainmenu.yaml +++ b/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 - Button@MULTIPLAYER_BUTTON: + CncMenuButton@MULTIPLAYER_BUTTON: Id:MULTIPLAYER_BUTTON X:150 Y:0 Width:140 Height:35 Text:Multiplayer - Bold:True - Button@SETTINGS_BUTTON: + CncMenuButton@SETTINGS_BUTTON: Id:SETTINGS_BUTTON X:300 Y:0 Width:140 Height:35 Text:Settings - Bold:True - Button@REPLAY_BUTTON: + CncMenuButton@REPLAY_BUTTON: Id:REPLAY_BUTTON X:450 Y:0 Width:140 Height:35 Text: Replays - Bold: True - Button@QUIT_BUTTON: + CncMenuButton@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 - Button@JOIN_BUTTON: + CncMenuButton@JOIN_BUTTON: Id:JOIN_BUTTON X:150 Y:0 Width:140 Height:35 Text:Find Server - Bold:True - Button@DIRECTCONNECT_BUTTON: + CncMenuButton@DIRECTCONNECT_BUTTON: Id:DIRECTCONNECT_BUTTON X:300 Y:0 Width:140 Height:35 Text:Direct Connect - Bold:True - Button@BACK_BUTTON: + CncMenuButton@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 - Button@MUSIC_BUTTON: + CncMenuButton@MUSIC_BUTTON: Id:MUSIC_BUTTON X:150 Y:0 Width:140 Height:35 Text:Music - Bold:True - Button@PREFERENCES_BUTTON: + CncMenuButton@PREFERENCES_BUTTON: Id:PREFERENCES_BUTTON X:300 Y:0 Width:140 Height:35 Text:Preferences - Bold:True - Button@BACK_BUTTON: + CncMenuButton@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 diff --git a/mods/cnc/chrome/serverbrowser.yaml b/mods/cnc/chrome/serverbrowser.yaml index 1e9f43b7f7..f543140731 100644 --- a/mods/cnc/chrome/serverbrowser.yaml +++ b/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: - Id:SERVER_INFO + Background@INFO_BG: X:15 Y:345 Width:710 Height:140 - Visible:false Background:dialog2 Children: - MapPreview@MAP_PREVIEW: - Id:MAP_PREVIEW - X:10 - Y:10 - Width:128 - Height:128 - Container@STATS_BIN - X:200 - Y:30 - Width:150 + Container@SERVER_INFO: + Id:SERVER_INFO + Width:PARENT_RIGHT + Height:PARENT_BOTTOM + Visible:false + Background:panel-darkred Children: - Label@SERVER_IP_LABEL: - Id:SERVER_IP_LABEL - X:0 - Y:0 - Align:Right - Width:70 - Height:20 - Text:Server: - Bold:True - Label@SERVER_IP: - Id:SERVER_IP - X:70 - Y:0 - Align:Left - Width:70 - Height:20 - Label@MAP_PLAYERS_LABEL: - Id:MAP_PLAYERS_LABEL - X:0 - Y:20 - Align:Right - Width:70 - Height:20 - Text:Players: - Bold:True - Label@MAP_PLAYERS: - Id:MAP_PLAYERS - X:70 - Y:20 - Align:Left - Width:70 - Height:20 - Label@MAP_TITLE_LABEL: - Id:MAP_TITLE_LABEL - X:0 - Y:40 - Align:Right - Width:70 - Height:20 - Text:Map: - Bold:True - Label@MAP_TITLE: - Id:MAP_TITLE - X:70 - Y:40 - Align:Left - Width:70 - Height:20 - Label@SERVER_MODS_LABEL: - Id:SERVER_MODS_LABEL - X:0 - Y:60 - Align:Right - Width:70 - Height:20 - Text:Mods: - Bold:True - Label@SERVER_MODS: - Id:SERVER_MODS - X:70 - Y:63 - Align:Left - VAlign:Top - Width:70 - Height:20 - Button@JOIN_BUTTON: + MapPreview@MAP_PREVIEW: + Id:MAP_PREVIEW + X:10 + Y:10 + Width:128 + Height:128 + Container@STATS_BIN: + X:200 + Y:30 + Width:150 + Children: + Label@SERVER_IP_LABEL: + Id:SERVER_IP_LABEL + X:0 + Y:0 + Align:Right + Width:70 + Height:20 + Text:Server: + Font:Bold + Label@SERVER_IP: + Id:SERVER_IP + X:70 + Y:0 + Align:Left + Width:70 + Height:20 + Label@MAP_PLAYERS_LABEL: + Id:MAP_PLAYERS_LABEL + X:0 + Y:20 + Align:Right + Width:70 + Height:20 + Text:Players: + Font:Bold + Label@MAP_PLAYERS: + Id:MAP_PLAYERS + X:70 + Y:20 + Align:Left + Width:70 + Height:20 + Label@MAP_TITLE_LABEL: + Id:MAP_TITLE_LABEL + X:0 + Y:40 + Align:Right + Width:70 + Height:20 + Text:Map: + Font:Bold + Label@MAP_TITLE: + Id:MAP_TITLE + X:70 + Y:40 + Align:Left + Width:70 + Height:20 + Label@SERVER_MODS_LABEL: + Id:SERVER_MODS_LABEL + X:0 + Y:60 + Align:Right + Width:70 + 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 - Button@REFRESH_BUTTON: + CncMenuButton@REFRESH_BUTTON: Id:REFRESH_BUTTON X:450 Y:499 Width:140 Height:35 Text:Refresh - Bold:True - Button@BACK_BUTTON: + CncMenuButton@BACK_BUTTON: Id:BACK_BUTTON X:600 Y:499 Width:140 Height:35 Text:Back - Bold:True \ No newline at end of file diff --git a/mods/cnc/uibits/uibuttons.png b/mods/cnc/uibits/uibuttons.png index 4fd615cd05f1a9bb0be1d23f4d5066c94735d757..725f522ca2bceb7e29487c80b26308da5653374c 100644 GIT binary patch delta 176 zcmbQlvXo^)Ug#oE7srr_IdAV87BV{uxE`G7ZNt~#F{4qr(SUoi0f%c^feMR*M~Z~- zmu!~$RdE|`#+{q_{lK}mjHlNb8}Bz>|5j0YUwYrnnaAI{-K(#+>+gRncr$e3{fx== zjB3i$H@|eJq$qL>FVdQ&MBb@0NNi^NdN!< delta 157 zcmV;O0Al~81d;@hZcC3zL_t(|obBB~Q3OF0M8R5Oe5@)&pn`RQ2uzF>lq@p(kS`Tf zN4!Jd{^Q=>gWabG9CmHn&-QnE$O&KDbK73%`(NAh