From 5274cc92c1055a3209dfae7e5346bfe52c35e4a8 Mon Sep 17 00:00:00 2001
From: Thorbjørn Lindeijer <bjorn@lindeijer.nl>
Date: Mon, 17 Mar 2025 10:39:38 +0100
Subject: Define the GUI theme in XML

Now all images used by the various UI widgets are defined in a
`theme.xml`, removing hardcoded requirements on the size of images,
borders and sub-images and their locations. The `colors.xml` file was
merged into this new file as well.

The `<img>` element defines either a plain image, or a 9-scale that is
automatically rendered at the size of the widget when any of the `left`,
`right`, `top` or `bottom` attributes are given.

The `x`, `y`, `width` and `height` attributes determine the
sub-rectangle within the image referenced by `src`. `x` and `y` default
to 0 and `width` and `height` default to the imge size.

The `<state>` element defines in which state its images are used by
setting its `selected`, `disabled`, `hovered` or `focused` attributes to
either `true` or `false`. Only the first matching state is rendered.

The `Text` and `SpeechBubble` classes now use the same skin to draw the
bubble, as well as using a newly introduced `BUBBLE_TEXT` color from the
theme palette.
---
 data/graphics/gui/colors.xml       |  50 --------
 data/graphics/gui/speechbubble.xml |  18 ---
 data/graphics/gui/theme.xml        | 234 +++++++++++++++++++++++++++++++++++++
 data/graphics/gui/window.xml       |  18 ---
 4 files changed, 234 insertions(+), 86 deletions(-)
 delete mode 100644 data/graphics/gui/colors.xml
 delete mode 100644 data/graphics/gui/speechbubble.xml
 create mode 100644 data/graphics/gui/theme.xml
 delete mode 100644 data/graphics/gui/window.xml

(limited to 'data')

diff --git a/data/graphics/gui/colors.xml b/data/graphics/gui/colors.xml
deleted file mode 100644
index 4a35d081..00000000
--- a/data/graphics/gui/colors.xml
+++ /dev/null
@@ -1,50 +0,0 @@
-<colors>
-	<color id="TEXT" color="#000000" />
-	<color id="SHADOW" color="#000000" />
-	<color id="OUTLINE" color="#000000" />
-	<color id="PROGRESS_BAR" color="#ffffff" />
-	<color id="BUTTON" color="#000000" />
-	<color id="BUTTON_DISABLED" color="#333333" />
-	<color id="TAB" color="#000000" />
-	<color id="PARTY_CHAT_TAB" color="#f48055" />
-	<color id="PARTY_SOCIAL_TAB" color="#ff00d8" />
-	<color id="BACKGROUND" color="#ffffff" />
-	<color id="HIGHLIGHT" color="#c0c0c0" />
-	<color id="TAB_FLASH" color="#ff0000" effect="pulse" />
-	<color id="SHOP_WARNING" color="#910000" />
-	<color id="ITEM_EQUIPPED" color="#000091" />
-	<color id="CHAT" color="#000000" />
-	<color id="GM" color="#ff0000" />
-	<color id="PLAYER" color="#1fa052" />
-	<color id="WHISPER" color="#0000ff" />
-	<color id="IS" color="#a08527" />
-	<color id="PARTY" color="#ff00d8" />
-	<color id="GUILD" color="#ff00d8" />
-	<color id="SERVER" color="#8415e2" />
-	<color id="LOGGER" color="#919191" />
-	<color id="HYPERLINK" color="#e50d0d" />
-	<color id="UNKNOWN_ITEM" color="#000000" />
-	<color id="GENERIC" color="#21a5b1" />
-	<color id="HEAD" color="#527fa4" />
-	<color id="USABLE" color="#268d24" />
-	<color id="TORSO" color="#d12aa4" />
-	<color id="ONEHAND" color="#f42a2a" />
-	<color id="LEGS" color="#699900" />
-	<color id="FEET" color="#aa1d48" />
-	<color id="TWOHAND" color="#f46d0e" />
-	<color id="SHIELD" color="#9c2424" />
-	<color id="RING" color="#0000ff" />
-	<color id="NECKLACE" color="#ff00ff" />
-	<color id="ARMS" color="#9c24e8" />
-	<color id="AMMO" color="#8b6311" />
-	<color id="SERVER_VERSION_NOT_SUPPORTED" color="#DC0000" />
-
-	<progressbar id="DEFAULT" color="#969696" />
-	<progressbar id="HP" color="#ff0000,e28000,c38948,0f6a20" />
-	<progressbar id="MP" color="#1a66e6" />
-	<progressbar id="NO_MP" color="#646464" />
-	<progressbar id="EXP" color="#8fc0d3" />
-	<progressbar id="INVY_SLOTS" color="#e1c819" />
-	<progressbar id="WEIGHT" color="#0000ff,ffff00,ff0000" />
-	<progressbar id="JOB" color="#e187cb" />
-</colors>
diff --git a/data/graphics/gui/speechbubble.xml b/data/graphics/gui/speechbubble.xml
deleted file mode 100644
index 84b6557b..00000000
--- a/data/graphics/gui/speechbubble.xml
+++ /dev/null
@@ -1,18 +0,0 @@
-<skinset name="SpeechBubble" image="bubble.png">
-    <widget type="Window">
-        <!-- Top Row -->
-        <part type="top-left-corner" xpos="0" ypos="0" width="5" height="5" />
-	<part type="top-edge" xpos="5" ypos="0" width="5" height="5" />
-	<part type="top-right-corner" xpos="10" ypos="0" width="5" height="5" />
-
-	<!-- Middle Row -->
-	<part type="left-edge" xpos="0" ypos="5" width="5" height="5" />
-	<part type="bg-quad" xpos="5" ypos="5" width="5" height="5" />
-	<part type="right-edge" xpos="10" ypos="5" width="5" height="5" />
-
-	<!-- Bottom Row -->
-	<part type="bottom-left-corner" xpos="0" ypos="10" width="5" height="5" />
-	<part type="bottom-edge" xpos="5" ypos="10" width="5" height="5" />
-	<part type="bottom-right-corner" xpos="10" ypos="10" width="5" height="5" />
-	</widget>
-</skinset>
diff --git a/data/graphics/gui/theme.xml b/data/graphics/gui/theme.xml
new file mode 100644
index 00000000..652a9422
--- /dev/null
+++ b/data/graphics/gui/theme.xml
@@ -0,0 +1,234 @@
+<theme name="Mana">
+  <color id="TEXT" color="#000000" />
+  <color id="SHADOW" color="#000000" />
+  <color id="OUTLINE" color="#000000" />
+  <color id="PROGRESS_BAR" color="#ffffff" />
+  <color id="BUTTON" color="#000000" />
+  <color id="BUTTON_DISABLED" color="#333333" />
+  <color id="TAB" color="#000000" />
+  <color id="PARTY_CHAT_TAB" color="#f48055" />
+  <color id="PARTY_SOCIAL_TAB" color="#ff00d8" />
+  <color id="BACKGROUND" color="#ffffff" />
+  <color id="HIGHLIGHT" color="#c0c0c0" />
+  <color id="TAB_FLASH" color="#ff0000" effect="pulse" />
+  <color id="SHOP_WARNING" color="#910000" />
+  <color id="ITEM_EQUIPPED" color="#000091" />
+  <color id="CHAT" color="#000000" />
+  <color id="BUBBLE_TEXT" color="#ffffff" />
+  <color id="GM" color="#ff0000" />
+  <color id="PLAYER" color="#1fa052" />
+  <color id="WHISPER" color="#0000ff" />
+  <color id="IS" color="#a08527" />
+  <color id="PARTY" color="#ff00d8" />
+  <color id="GUILD" color="#ff00d8" />
+  <color id="SERVER" color="#8415e2" />
+  <color id="LOGGER" color="#919191" />
+  <color id="HYPERLINK" color="#e50d0d" />
+  <color id="UNKNOWN_ITEM" color="#000000" />
+  <color id="GENERIC" color="#21a5b1" />
+  <color id="HEAD" color="#527fa4" />
+  <color id="USABLE" color="#268d24" />
+  <color id="TORSO" color="#d12aa4" />
+  <color id="ONEHAND" color="#f42a2a" />
+  <color id="LEGS" color="#699900" />
+  <color id="FEET" color="#aa1d48" />
+  <color id="TWOHAND" color="#f46d0e" />
+  <color id="SHIELD" color="#9c2424" />
+  <color id="RING" color="#0000ff" />
+  <color id="NECKLACE" color="#ff00ff" />
+  <color id="ARMS" color="#9c24e8" />
+  <color id="AMMO" color="#8b6311" />
+  <color id="SERVER_VERSION_NOT_SUPPORTED" color="#DC0000" />
+
+  <progressbar id="DEFAULT" color="#969696" />
+  <progressbar id="HP" color="#ff0000,e28000,c38948,0f6a20" />
+  <progressbar id="MP" color="#1a66e6" />
+  <progressbar id="NO_MP" color="#646464" />
+  <progressbar id="EXP" color="#8fc0d3" />
+  <progressbar id="INVY_SLOTS" color="#e1c819" />
+  <progressbar id="WEIGHT" color="#0000ff,ffff00,ff0000" />
+  <progressbar id="JOB" color="#e187cb" />
+
+  <skin type="Window">
+    <state>
+      <img src="window.png" left="4" right="4" top="4" bottom="4" />
+    </state>
+  </skin>
+  <skin type="ResizeGrip">
+    <state>
+      <img src="resize.png" />
+    </state>
+  </skin>
+  <skin type="Popup">
+    <state>
+      <img src="window.png" left="4" right="4" top="4" bottom="4" />
+    </state>
+  </skin>
+  <skin type="SpeechBubble">
+    <state>
+      <img src="bubble.png|W:#000000" left="5" right="5" top="5" bottom="5" height="15" />
+    </state>
+  </skin>
+  <skin type="Button">
+    <state disabled="true">
+      <img src="button_disabled.png" left="10" right="10" top="5" bottom="5" />
+    </state>
+    <state selected="true">
+      <img src="buttonpress.png" left="10" right="10" top="5" bottom="5" />
+    </state>
+    <state hovered="true">
+      <img src="buttonhi.png" left="10" right="10" top="5" bottom="5" />
+    </state>
+    <state>
+      <img src="button.png" left="10" right="10" top="5" bottom="5" />
+    </state>
+  </skin>
+  <skin type="Tab">
+    <state selected="true">
+      <img src="tabselected.png" left="10" right="10" top="5" bottom="9" />
+    </state>
+    <state hovered="true">
+      <img src="tab_hilight.png" left="10" right="10" top="14" bottom="2" />
+    </state>
+    <state>
+      <img src="tab.png" left="10" right="10" top="14" bottom="2" />
+    </state>
+  </skin>
+  <skin type="CheckBox">
+    <state disabled="true" selected="true">
+      <img src="checkbox.png" x="27" y="0" width="9" height="10" offsetX="2" offsetY="2" />
+    </state>
+    <state disabled="true">
+      <img src="checkbox.png" x="18" y="0" width="9" height="10" offsetX="2" offsetY="2" />
+    </state>
+    <state selected="true" hovered="true">
+      <img src="checkbox.png" x="45" y="0" width="9" height="10" offsetX="2" offsetY="2" />
+    </state>
+    <state hovered="true">
+      <img src="checkbox.png" x="36" y="0" width="9" height="10" offsetX="2" offsetY="2" />
+    </state>
+    <state selected="true">
+      <img src="checkbox.png" x="9" y="0" width="9" height="10" offsetX="2" offsetY="2" />
+    </state>
+    <state>
+      <img src="checkbox.png" x="0" y="0" width="9" height="10" offsetX="2" offsetY="2" />
+    </state>
+  </skin>
+  <skin type="RadioButton">
+    <state hovered="true" selected="true">
+      <img src="radioin_highlight.png" offsetX="2" offsetY="2" />
+    </state>
+    <state hovered="true">
+      <img src="radioout_highlight.png" offsetX="2" offsetY="2" />
+    </state>
+    <state selected="true">
+      <img src="radioin.png" offsetX="2" offsetY="2" />
+    </state>
+    <state>
+      <img src="radioout.png" offsetX="2" offsetY="2" />
+    </state>
+  </skin>
+  <skin type="TextField">
+    <state>
+      <img src="deepbox.png" left="4" right="4" top="4" bottom="4" />
+    </state>
+  </skin>
+  <skin type="ScrollArea">
+    <state>
+      <img src="deepbox.png" left="4" right="4" top="4" bottom="4" />
+    </state>
+  </skin>
+  <skin type="DropDownFrame">
+    <state>
+      <img src="deepbox.png" left="4" right="4" top="4" bottom="4" />
+    </state>
+  </skin>
+  <skin type="DropDownButton">
+    <state selected="true" hovered="true">
+      <img src="vscroll_up_pressed.png" offsetX="-2" offsetY="2" />
+    </state>
+    <state selected="true">
+      <img src="vscroll_up_default.png" offsetX="-2" offsetY="2" />
+    </state>
+    <state hovered="true">
+      <img src="vscroll_down_pressed.png" offsetX="-2" offsetY="2" />
+    </state>
+    <state>
+      <img src="vscroll_down_default.png" offsetX="-2" offsetY="2" />
+    </state>
+  </skin>
+  <skin type="ScrollBar">
+    <state hovered="true">
+      <img src="vscroll_highlight.png" left="4" right="4" top="4" bottom="4" />
+    </state>
+    <state>
+      <img src="vscroll_grey.png" left="4" right="4" top="4" bottom="4" />
+    </state>
+  </skin>
+  <skin type="ProgressBar">
+    <state>
+      <img src="vscroll_grey.png" left="4" right="4" top="4" bottom="4" />
+    </state>
+  </skin>
+  <skin type="Slider">
+    <state hovered="true">
+      <img src="slider_hilight.png" height="6" left="4" right="4" top="6" offsetY="4" />
+    </state>
+    <state>
+      <img src="slider.png" height="6" left="4" right="4" top="6" offsetY="4" />
+    </state>
+  </skin>
+  <skin type="SliderHandle">
+    <state hovered="true">
+      <img src="slider_hilight.png" x="6" y="8" width="9" height="10" offsetY="2" />
+    </state>
+    <state>
+      <img src="slider.png" x="6" y="8" width="9" height="10" offsetY="2" />
+    </state>
+  </skin>
+  <skin type="ButtonUp">
+    <state selected="true">
+      <img src="vscroll_up_pressed.png" />
+    </state>
+    <state>
+      <img src="vscroll_up_default.png" />
+    </state>
+  </skin>
+  <skin type="ButtonDown">
+    <state selected="true">
+      <img src="vscroll_down_pressed.png" />
+    </state>
+    <state>
+      <img src="vscroll_down_default.png" />
+    </state>
+  </skin>
+  <skin type="ButtonLeft">
+    <state selected="true">
+      <img src="hscroll_left_pressed.png" />
+    </state>
+    <state>
+      <img src="hscroll_left_default.png" />
+    </state>
+  </skin>
+  <skin type="ButtonRight">
+    <state selected="true">
+      <img src="hscroll_right_pressed.png" />
+    </state>
+    <state>
+      <img src="hscroll_right_default.png" />
+    </state>
+  </skin>
+  <skin type="ButtonClose">
+    <state>
+      <img src="close_button.png" />
+    </state>
+  </skin>
+  <skin type="ButtonSticky">
+    <state selected="true">
+      <img src="sticky_button.png" x="15" width="15" height="15" />
+    </state>
+    <state>
+      <img src="sticky_button.png" width="15" height="15" />
+    </state>
+  </skin>
+</theme>
diff --git a/data/graphics/gui/window.xml b/data/graphics/gui/window.xml
deleted file mode 100644
index f27dbc7f..00000000
--- a/data/graphics/gui/window.xml
+++ /dev/null
@@ -1,18 +0,0 @@
-<skinset name="Default" image="window.png">
-	<widget type="Window">
-		<!-- Top Row -->
-		<part type="top-left-corner" xpos="0" ypos="0" width="4" height="4" />
-		<part type="top-edge" xpos="4" ypos="0" width="32" height="4" />
-		<part type="top-right-corner" xpos="36" ypos="0" width="4" height="4" />
-
-		<!-- Middle Row -->
-		<part type="left-edge" xpos="0" ypos="4" width="4" height="216" />
-		<part type="bg-quad" xpos="4" ypos="4" width="32" height="216" />
-		<part type="right-edge" xpos="36" ypos="4" width="4" height="216" />
-
-		<!-- Bottom Row -->
-		<part type="bottom-left-corner" xpos="0" ypos="220" width="4" height="4" />
-		<part type="bottom-edge" xpos="4" ypos="220" width="32" height="4" />
-		<part type="bottom-right-corner" xpos="36" ypos="220" width="4" height="4" />
-	</widget>
-</skinset>
-- 
cgit v1.2.3-70-g09d2