GUI: Improved pop up and scrollbar arrows look

Previous triangle drawing was all wrong, rewrote it from the scratch.
Added padding to drawsteps in stx files

8 files changed, 445 insertions, 54 deletions

diff --git a/gui/ThemeEngine.cpp b/gui/ThemeEngine.cpp
index 4952d0f2ef..6d95cab526 100644
--- a/gui/ThemeEngine.cpp
+++ b/gui/ThemeEngine.cpp
@@ -972,7 +972,7 @@ void ThemeEngine::drawScrollbar(const Common::Rect &r, int sliderY, int sliderHe
 	r2.left += 1;
 	r2.right -= 1;
 	r2.top += sliderY;
-	r2.bottom = r2.top + sliderHeight - 1;
+	r2.bottom = r2.top + sliderHeight;
 
 	r2.top += r.width() / 5;
 	r2.bottom -= r.width() / 5;
diff --git a/gui/ThemeEngine.h b/gui/ThemeEngine.h
index d9b1f09f25..0029886de5 100644
--- a/gui/ThemeEngine.h
+++ b/gui/ThemeEngine.h
@@ -35,7 +35,7 @@
 #include "graphics/pixelformat.h"
 
 
-#define SCUMMVM_THEME_VERSION_STR "SCUMMVM_STX0.8.4"
+#define SCUMMVM_THEME_VERSION_STR "SCUMMVM_STX0.8.5"
 
 class OSystem;
 
diff --git a/gui/ThemeParser.cpp b/gui/ThemeParser.cpp
index 7279279598..ea50dcc061 100644
--- a/gui/ThemeParser.cpp
+++ b/gui/ThemeParser.cpp
@@ -544,6 +544,16 @@ bool ThemeParser::parseDrawStep(ParserNode *stepNode, Graphics::DrawStep *drawst
 		else
 			return parserError("'" + stepNode->values["fill"] + "' is not a valid fill mode for a shape.");
 	}
+	
+	if (stepNode->values.contains("padding")) {
+		val = stepNode->values["padding"];
+		int pr, pt, pl, pb;
+		if (parseIntegerKey(val, 4, &pl, &pt, &pr, &pb)) 
+			drawstep->padding.left = pl,
+			drawstep->padding.top = pt,
+			drawstep->padding.right = pr,
+			drawstep->padding.bottom = pb;
+	}
 
 #undef PARSER_ASSIGN_INT
 #undef PARSER_ASSIGN_RGB
diff --git a/gui/ThemeParser.h b/gui/ThemeParser.h
index 39a951e007..1999850643 100644
--- a/gui/ThemeParser.h
+++ b/gui/ThemeParser.h
@@ -138,6 +138,7 @@ protected:
 					XML_PROP(height, false)
 					XML_PROP(xpos, false)
 					XML_PROP(ypos, false)
+					XML_PROP(padding, false)					
 					XML_PROP(orientation, false)
 					XML_PROP(file, false)
 				KEY_END()
diff --git a/gui/themes/scummclassic/THEMERC b/gui/themes/scummclassic/THEMERC
index b871dfe430..f6a46692a0 100644
--- a/gui/themes/scummclassic/THEMERC
+++ b/gui/themes/scummclassic/THEMERC
@@ -1 +1 @@
-[SCUMMVM_STX0.8.4:ScummVM Classic Theme:No Author]
+[SCUMMVM_STX0.8.5:ScummVM Classic Theme:No Author]
diff --git a/gui/themes/scummclassic/classic_gfx.stx b/gui/themes/scummclassic/classic_gfx.stx
index c0fcc9f083..2f8f0a358a 100644
--- a/gui/themes/scummclassic/classic_gfx.stx
+++ b/gui/themes/scummclassic/classic_gfx.stx
@@ -176,7 +176,7 @@
 		/>
 	</drawdata>
 
-	<drawdata id = 'scrollbar_button_idle' cache = 'false'>
+	<drawdata id = 'scrollbar_button_idle' cache = 'false' resolution = 'y>400'>
 		<drawstep	func = 'bevelsq'
 					bevel = '2'
 					fill = 'none'
@@ -184,26 +184,62 @@
 		<drawstep	func = 'triangle'
 					fg_color = 'green'
 					fill = 'foreground'
-					width = 'auto'
-					height = 'auto'
-					xpos = 'center'
+					width = '10'
+					height = '10'
+					xpos = 'right'
+					ypos = 'center'
+					padding = '0,0,3,0'
+					orientation = 'top'
+		/>
+	</drawdata>
+	
+	<drawdata id = 'scrollbar_button_idle' cache = 'false' resolution = 'y<400'>
+		<drawstep	func = 'bevelsq'
+					bevel = '2'
+					fill = 'none'
+		/>
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '5'
+					height = '5'
+					xpos = 'right'
 					ypos = 'center'
+					padding = '0,0,2,0'
 					orientation = 'top'
 		/>
 	</drawdata>
 
-	<drawdata id = 'scrollbar_button_hover' cache = 'false'>
+	<drawdata id = 'scrollbar_button_hover' cache = 'false' resolution = 'y>400'>
 		<drawstep	func = 'bevelsq'
 					bevel = '2'
 					fill = 'none'
 		/>
 		<drawstep	func = 'triangle'
-					fg_color = 'green2'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '10'
+					height = '10'
+					xpos = 'right'
+					ypos = 'center'
+					padding = '0,0,3,0'
+					orientation = 'top'
+		/>
+	</drawdata>
+	
+	<drawdata id = 'scrollbar_button_hover' cache = 'false' resolution = 'y<400'>
+		<drawstep	func = 'bevelsq'
+					bevel = '2'
+					fill = 'none'
+		/>
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
 					fill = 'foreground'
-					width = 'auto'
-					height = 'auto'
-					xpos = 'center'
+					width = '5'
+					height = '5'
+					xpos = 'right'
 					ypos = 'center'
+					padding = '0,0,2,0'
 					orientation = 'top'
 		/>
 	</drawdata>
@@ -272,20 +308,70 @@
 		/>
 	</drawdata>
 
-	<drawdata id = 'popup_idle' cache = 'false'>
+	<!--popup_idle HERE  -->
+	<drawdata id = 'popup_idle' cache = 'false' resolution = 'y>400'>
 		<drawstep	func = 'bevelsq'
 					bevel = '2'
 					fill = 'none'
 		/>
+		
 		<drawstep	func = 'triangle'
 					fg_color = 'green'
 					fill = 'foreground'
-					width = 'height'
-					height = 'auto'
+					width = '10'
+					height = '5'
 					xpos = 'right'
-					ypos = 'center'
+					ypos = '10'
+					padding = '0, 0, 7, 0'
 					orientation = 'bottom'
 		/>
+		
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '10'
+					height = '5'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 7, 0'
+					orientation = 'top'
+		/>
+		
+		<text	font = 'text_default'
+				text_color = 'color_normal'
+				vertical_align = 'center'
+				horizontal_align = 'left'
+		/>
+	</drawdata>
+	
+	<drawdata id = 'popup_idle' cache = 'false' resolution = 'y<400'>
+		<drawstep	func = 'bevelsq'
+					bevel = '2'
+					fill = 'none'
+		/>
+		
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '9'
+					padding = '0, 0, 3, 0'
+					orientation = 'bottom'
+		/>
+		
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 3, 0'
+					orientation = 'top'
+		/>
+		
 		<text	font = 'text_default'
 				text_color = 'color_normal'
 				vertical_align = 'center'
@@ -293,47 +379,141 @@
 		/>
 	</drawdata>
 
-	<drawdata id = 'popup_disabled' cache = 'false'>
+	<drawdata id = 'popup_disabled' cache = 'false' resolution = 'y>400'>
 		<drawstep	func = 'bevelsq'
 					bevel = '2'
 					fill = 'none'
 		/>
 		<drawstep	func = 'triangle'
-					fg_color = 'lightgrey'
+					fg_color = 'green'
 					fill = 'foreground'
-					width = 'height'
-					height = 'auto'
+					width = '10'
+					height = '5'
 					xpos = 'right'
-					ypos = 'center'
+					ypos = '10'
+					padding = '0, 0, 7, 0'
 					orientation = 'bottom'
 		/>
+		
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '10'
+					height = '5'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 7, 0'
+					orientation = 'top'
+		/>
 		<text	font = 'text_default'
 				text_color = 'color_normal_disabled'
 				vertical_align = 'center'
 				horizontal_align = 'left'
 		/>
 	</drawdata>
+	
+	<drawdata id = 'popup_disabled' cache = 'false' resolution = 'y<400'>
+		<drawstep	func = 'bevelsq'
+					bevel = '2'
+					fill = 'none'
+		/>
+		
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '9'
+					padding = '0, 0, 3, 0'
+					orientation = 'bottom'
+		/>
+		
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 3, 0'
+					orientation = 'top'
+		/>
+		
+		<text	font = 'text_default'
+				text_color = 'color_normal'
+				vertical_align = 'center'
+				horizontal_align = 'left'
+		/>
+	</drawdata>
 
-	<drawdata id = 'popup_hover' cache = 'false'>
+	<drawdata id = 'popup_hover' cache = 'false' resolution = 'y>400'>
 		<drawstep	func = 'bevelsq'
 					bevel = '2'
 					fill = 'none'
 		/>
 		<drawstep	func = 'triangle'
-					fg_color = 'green2'
+					fg_color = 'green'
 					fill = 'foreground'
-					width = 'height'
-					height = 'auto'
+					width = '10'
+					height = '5'
 					xpos = 'right'
-					ypos = 'center'
+					ypos = '10'
+					padding = '0, 0, 7, 0'
 					orientation = 'bottom'
 		/>
+		
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '10'
+					height = '5'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 7, 0'
+					orientation = 'top'
+		/>
 		<text	font = 'text_default'
 				text_color = 'color_normal_hover'
 				vertical_align = 'center'
 				horizontal_align = 'left'
 		/>
 	</drawdata>
+	
+	<drawdata id = 'popup_hover' cache = 'false' resolution = 'y<400'>
+		<drawstep	func = 'bevelsq'
+					bevel = '2'
+					fill = 'none'
+		/>
+		
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '9'
+					padding = '0, 0, 3, 0'
+					orientation = 'bottom'
+		/>
+		
+		<drawstep	func = 'triangle'
+					fg_color = 'green'
+					fill = 'foreground'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 3, 0'
+					orientation = 'top'
+		/>
+		
+		<text	font = 'text_default'
+				text_color = 'color_normal'
+				vertical_align = 'center'
+				horizontal_align = 'left'
+		/>
+	</drawdata>
 
 	<drawdata id = 'widget_textedit' cache = 'false'>
 		<drawstep	func = 'bevelsq'
diff --git a/gui/themes/scummmodern/THEMERC b/gui/themes/scummmodern/THEMERC
index e6e2efe60e..1d288adffd 100644
--- a/gui/themes/scummmodern/THEMERC
+++ b/gui/themes/scummmodern/THEMERC
@@ -1 +1 @@
-[SCUMMVM_STX0.8.4:ScummVM Modern Theme:No Author]
+[SCUMMVM_STX0.8.5:ScummVM Modern Theme:No Author]
diff --git a/gui/themes/scummmodern/scummmodern_gfx.stx b/gui/themes/scummmodern/scummmodern_gfx.stx
index 24e41a84bc..e2c809af59 100644
--- a/gui/themes/scummmodern/scummmodern_gfx.stx
+++ b/gui/themes/scummmodern/scummmodern_gfx.stx
@@ -260,7 +260,7 @@
 	</drawdata>
 
 	<!-- Buttons at the top and bottom of the scrollbar -->
-	<drawdata id = 'scrollbar_button_idle' cache = 'false'>
+	<drawdata id = 'scrollbar_button_idle' cache = 'false' resolution = 'y>400'>
 		<drawstep	func = 'roundedsq'
 					radius = '10'
 					fill = 'none'
@@ -270,15 +270,35 @@
 		<drawstep	func = 'triangle'
 					fg_color = 'shadowcolor'
 					fill = 'foreground'
-					width = 'auto'
-					height = 'auto'
-					xpos = 'center'
+					width = '10'
+					height = '10'
+					xpos = 'right'
 					ypos = 'center'
+					padding = '0,0,2,0'
 					orientation = 'top'
 		/>
 	</drawdata>
 
-	<drawdata id = 'scrollbar_button_hover' cache = 'false'>
+	<drawdata id = 'scrollbar_button_idle' cache = 'false' resolution = 'y<400'>
+		<drawstep	func = 'roundedsq'
+					radius = '10'
+					fill = 'none'
+					fg_color = 'darkgray'
+					stroke = '1'
+		/>
+		<drawstep	func = 'triangle'
+					fg_color = 'shadowcolor'
+					fill = 'foreground'
+					width = '5'
+					height = '5'
+					xpos = 'right'
+					ypos = 'center'
+					padding = '0,0,1,0'
+					orientation = 'top'
+		/>
+	</drawdata>
+	
+	<drawdata id = 'scrollbar_button_hover' cache = 'false' resolution = 'y>400'>
 		<drawstep	func = 'roundedsq'
 					radius = '10'
 					fill = 'gradient'
@@ -292,10 +312,30 @@
 		<drawstep	func = 'triangle'
 					fg_color = 'shadowcolor'
 					fill = 'foreground'
-					width = 'auto'
-					height = 'auto'
-					xpos = 'center'
+					width = '10'
+					height = '10'
+					xpos = 'right'
 					ypos = 'center'
+					padding = '0,0,2,0'
+					orientation = 'top'
+		/>
+	</drawdata>
+	
+	<drawdata id = 'scrollbar_button_hover' cache = 'false' resolution = 'y<400'>
+		<drawstep	func = 'roundedsq'
+					radius = '10'
+					fill = 'none'
+					fg_color = 'darkgray'
+					stroke = '1'
+		/>
+		<drawstep	func = 'triangle'
+					fg_color = 'shadowcolor'
+					fill = 'foreground'
+					width = '5'
+					height = '5'
+					xpos = 'right'
+					ypos = 'center'
+					padding = '0,0,2,0'
 					orientation = 'top'
 		/>
 	</drawdata>
@@ -393,7 +433,7 @@
 	</drawdata>
 
 	<!-- Idle popup -->
-	<drawdata id = 'popup_idle' cache = 'false'>
+	<drawdata id = 'popup_idle' cache = 'false' resolution = 'y>400'>
 		<drawstep	func = 'roundedsq'
 					radius = '5'
 					stroke = '1'
@@ -402,15 +442,68 @@
 					bg_color = 'xtrabrightred'
 					shadow = '2'
 		/>
+	
 		<drawstep	func = 'triangle'
 					bg_color = 'shadowcolor'
 					fill = 'background'
-					width = 'height'
-					height = 'auto'
+					width = '10'
+					height = '5'
 					xpos = 'right'
-					ypos = 'center'
+					ypos = '10'
+					padding = '0, 0, 6, 0'
 					orientation = 'bottom'
 		/>
+		
+		<drawstep	func = 'triangle'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '10'
+					height = '5'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 6, 0'
+					orientation = 'top'
+		/>
+		
+		<text	font = 'text_default'
+				text_color = 'color_normal'
+				vertical_align = 'center'
+				horizontal_align = 'left'
+		/>
+	</drawdata>
+	
+	<drawdata id = 'popup_idle' cache = 'false' resolution ='y<400'>
+		<drawstep	func = 'roundedsq'
+					radius = '5'
+					stroke = '1'
+					fg_color = 'lightgray2'
+					fill = 'background'
+					bg_color = 'xtrabrightred'
+					shadow = '2'
+		/>
+	
+		<drawstep	func = 'triangle'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '9'
+					padding = '0, 0, 3, 0'
+					orientation = 'bottom'
+		/>
+		
+		<drawstep	func = 'triangle'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 3, 0'
+					orientation = 'top'
+		/>
+		
 		<text	font = 'text_default'
 				text_color = 'color_normal'
 				vertical_align = 'center'
@@ -419,31 +512,86 @@
 	</drawdata>
 
 	<!-- Disabled popup -->
-	<drawdata id = 'popup_disabled' cache = 'false'>
+	<drawdata id = 'popup_disabled' cache = 'false' resolution = 'y>400'>
 		<drawstep	func = 'roundedsq'
+					stroke = '1'
+					fg_color = 'lightgray'
 					radius = '5'
-					fill = 'foreground'
-					fg_color = 'darkgray'
+					fill = 'gradient'
+					gradient_start = 'blandyellow'
+					gradient_end = 'xtrabrightred'
+					shadow = '0'
+		/>
+		<drawstep	func = 'triangle'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '10'
+					height = '5'
+					xpos = 'right'
+					ypos = '10'
+					padding = '0, 0, 6, 0'
+					orientation = 'bottom'
+		/>
+		
+		<drawstep	func = 'triangle'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '10'
+					height = '5'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 6, 0'
+					orientation = 'top'
+		/>
+		
+		<text	font = 'text_default'
+				text_color = 'color_normal_hover'
+				vertical_align = 'center'
+				horizontal_align = 'left'
+		/>
+	</drawdata>
+	
+	<drawdata id = 'popup_disabled' cache = 'false' resolution = 'y<400'>
+		<drawstep	func = 'roundedsq'
+					radius = '5'
+					stroke = '1'
+					fg_color = 'lightgray2'
+					fill = 'background'
+					bg_color = 'xtrabrightred'
 					shadow = '2'
 		/>
+	
 		<drawstep	func = 'triangle'
-					fg_color = 'shadowcolor'
-					fill = 'foreground'
-					width = 'height'
-					height = 'auto'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '7'
+					height = '4'
 					xpos = 'right'
-					ypos = 'center'
+					ypos = '9'
+					padding = '0, 0, 3, 0'
 					orientation = 'bottom'
 		/>
+		
+		<drawstep	func = 'triangle'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 3, 0'
+					orientation = 'top'
+		/>
+		
 		<text	font = 'text_default'
-				text_color = 'color_normal_disabled'
+				text_color = 'color_normal'
 				vertical_align = 'center'
 				horizontal_align = 'left'
 		/>
 	</drawdata>
 
 	<!-- Hovered popup -->
-	<drawdata id = 'popup_hover' cache = 'false'>
+	<drawdata id = 'popup_hover' cache = 'false' resolution = 'y>400'>
 		<drawstep	func = 'roundedsq'
 					stroke = '1'
 					fg_color = 'lightgray'
@@ -454,20 +602,72 @@
 					shadow = '0'
 		/>
 		<drawstep	func = 'triangle'
-					fg_color = 'shadowcolor'
-					fill = 'foreground'
-					width = 'height'
-					height = 'auto'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '10'
+					height = '5'
 					xpos = 'right'
-					ypos = 'center'
+					ypos = '10'
+					padding = '0, 0, 6, 0'
 					orientation = 'bottom'
 		/>
+		
+		<drawstep	func = 'triangle'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '10'
+					height = '5'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 6, 0'
+					orientation = 'top'
+		/>
+		
 		<text	font = 'text_default'
 				text_color = 'color_normal_hover'
 				vertical_align = 'center'
 				horizontal_align = 'left'
 		/>
 	</drawdata>
+	
+	<drawdata id = 'popup_hover' cache = 'false' resolution = 'y<400'>
+		<drawstep	func = 'roundedsq'
+					radius = '5'
+					stroke = '1'
+					fg_color = 'lightgray2'
+					fill = 'background'
+					bg_color = 'xtrabrightred'
+					shadow = '2'
+		/>
+	
+		<drawstep	func = 'triangle'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '9'
+					padding = '0, 0, 3, 0'
+					orientation = 'bottom'
+		/>
+		
+		<drawstep	func = 'triangle'
+					bg_color = 'shadowcolor'
+					fill = 'background'
+					width = '7'
+					height = '4'
+					xpos = 'right'
+					ypos = '4'
+					padding = '0, 0, 3, 0'
+					orientation = 'top'
+		/>
+		
+		<text	font = 'text_default'
+				text_color = 'color_normal'
+				vertical_align = 'center'
+				horizontal_align = 'left'
+		/>
+	</drawdata>
 
 	<!-- Background of the textedit widget -->
 	<drawdata id = 'widget_textedit' cache = 'false'>