epic/OpenRA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New menu buttons that support hover and a disabled state

Browse Source
This commit is contained in:
Paul Chote
2011-05-06 18:19:59 +12:00
parent 845b32281d
commit 28cf48459b
9 changed files with 241 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
OpenRA.Mods.Cnc/OpenRA.Mods.Cnc.csproj
View File

@@ -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">

44
OpenRA.Mods.Cnc/Widgets/CncMenuButton.cs Normal file
View File

@@ -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);
}
}
}

3
OpenRA.Mods.Cnc/Widgets/CncMenuLogic.cs
View File

@@ -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 =>
{

5
OpenRA.Mods.Cnc/Widgets/CncServerBrowserLogic.cs
View File

@@ -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<CncMenuButtonWidget>("JOIN_BUTTON");
join.IsDisabled = () => currentServer == null || !ServerBrowserDelegate.CanJoin(currentServer);
join.OnMouseUp = mi =>
{
if (currentServer == null)

18
artsrc/cnc/buttons.svg
View File

@@ -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" />
<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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

61
mods/cnc/chrome.yaml
View File

@@ -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

55
mods/cnc/chrome/mainmenu.yaml
View File

@@ -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

191
mods/cnc/chrome/serverbrowser.yaml
View File

@@ -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

BIN
mods/cnc/uibits/uibuttons.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 530 B

After

Width:  |  Height:  |  Size: 549 B