GUI: Add DropdownButtonWidget and use it in the launcher for mass add

DropdownButtonWidget is a button split in two parts vertically. Clicking
the left part triggers a default action. Clicking the right part shows a
list of other actions the user can choose from.

Using this widget on the launcher lets 'Mass add' be a secondary action
of the 'Add' button, removing the necessity of pressing the shift key to
access the feature.

3 files changed, 384 insertions, 17 deletions

diff --git a/gui/themes/scummmodern/scummmodern_gfx.stx b/gui/themes/scummmodern/scummmodern_gfx.stx
index 0e62f36627..c449c1a30e 100644
--- a/gui/themes/scummmodern/scummmodern_gfx.stx
+++ b/gui/themes/scummmodern/scummmodern_gfx.stx
@@ -86,6 +86,9 @@
 		<color name = 'darkgray'
 				rgb = '176, 168, 144'
 		/>
+		<color name = 'darkgray2'
+				rgb = '192, 192, 192'
+		/>
 		<color name = 'lightgray'
 				rgb = '210, 200, 170'
 		/>
@@ -208,7 +211,7 @@
 		/>
 
 		<text_color	id = 'color_alternative_disabled'
-				color = '192, 192, 192'
+				color = 'darkgray2'
 		/>
 
 		<text_color	id = 'color_button'
@@ -216,7 +219,7 @@
 		/>
 
 		<text_color	id = 'color_button_disabled'
-				color = '192, 192, 192'
+				color = 'darkgray2'
 		/>
 	</fonts>
 
@@ -856,6 +859,361 @@
 		/>
 	</drawdata>
 
+	<!-- Dropdown button widget -->
+	<drawdata id = 'dropdown_button_idle' cache = 'false' resolution = 'y>399'>
+		<text	font = 'text_button'
+				text_color = 'color_button'
+				vertical_align = 'center'
+				horizontal_align = 'center'
+		/>
+		<drawstep	func = 'roundedsq'
+					radius = '5'
+					stroke = '1'
+					fill = 'gradient'
+					shadow = '0'
+					fg_color = 'darkredborder'
+					gradient_start = 'brightred'
+					gradient_end = 'darkred'
+					bevel = '1'
+					bevel_color = 'brightredborder'
+		/>
+		<drawstep	func = 'triangle'
+					fg_color = 'white'
+					fill = 'foreground'
+					width = '8'
+					height = '6'
+					xpos = 'right'
+					ypos = 'center'
+					padding = '0,0,2,0'
+					orientation = 'bottom'
+		/>
+	</drawdata>
+	<drawdata id = 'dropdown_button_idle' cache = 'false' resolution = 'y<400'>
+		<text	font = 'text_button'
+				text_color = 'color_button'
+				vertical_align = 'center'
+				horizontal_align = 'center'
+		/>
+		<drawstep	func = 'roundedsq'
+					radius = '5'
+					stroke = '1'
+					fill = 'gradient'
+					shadow = '0'
+					fg_color = 'darkredborder'
+					gradient_start = 'brightred'
+					gradient_end = 'darkred'
+					bevel = '1'
+					bevel_color = 'brightredborder'
+		/>
+		<drawstep	func = 'triangle'
+					fg_color = 'white'
+					fill = 'foreground'
+					width = '6'
+					height = '6'
+					xpos = 'right'
+					ypos = 'center'
+					padding = '0,0,0,0'
+					orientation = 'bottom'
+		/>
+	</drawdata>
+
+	<drawdata id = 'dropdown_button_hover_left' cache = 'false' resolution = 'y>399'>
+		<text	font = 'text_button'
+				text_color = 'color_button'
+				vertical_align = 'center'
+				horizontal_align = 'center'
+		/>
+		<drawstep	func = 'roundedsq'
+					radius = '5'
+					stroke = '1'
+					fill = 'gradient'
+					shadow = '0'
+					fg_color = 'darkredborder'
+					gradient_start = 'brightpink'
+					gradient_end = 'darkpink'
+					bevel = '1'
+					bevel_color = 'brightredborder'
+					clip = '0,0,-13,0'
+		/>
+		<drawstep	func = 'triangle'
+					fg_color = 'white'
+					fill = 'foreground'
+					width = '8'
+					height = '6'
+					xpos = 'right'
+					ypos = 'center'
+					padding = '0,0,2,0'
+					orientation = 'bottom'
+		/>
+	</drawdata>
+	<drawdata id = 'dropdown_button_hover_left' cache = 'false' resolution = 'y<400'>
+		<text	font = 'text_button'
+				text_color = 'color_button'
+				vertical_align = 'center'
+				horizontal_align = 'center'
+		/>
+		<drawstep	func = 'roundedsq'
+					radius = '5'
+					stroke = '1'
+					fill = 'gradient'
+					shadow = '0'
+					fg_color = 'darkredborder'
+					gradient_start = 'brightpink'
+					gradient_end = 'darkpink'
+					bevel = '1'
+					bevel_color = 'brightredborder'
+					clip = '0,0,-7,0'
+		/>
+		<drawstep	func = 'triangle'
+					fg_color = 'white'
+					fill = 'foreground'
+					width = '6'
+					height = '6'
+					xpos = 'right'
+					ypos = 'center'
+					padding = '0,0,0,0'
+					orientation = 'bottom'
+		/>
+	</drawdata>
+
+	<drawdata id = 'dropdown_button_hover_right' cache = 'false' resolution = 'y>399'>
+		<text	font = 'text_button'
+				text_color = 'color_button'
+				vertical_align = 'center'
+				horizontal_align = 'center'
+		/>
+		<drawstep	func = 'roundedsq'
+					radius = '5'
+					stroke = '1'
+					fill = 'gradient'
+					shadow = '0'
+					fg_color = 'darkredborder'
+					gradient_start = 'brightpink'
+					gradient_end = 'darkpink'
+					bevel = '1'
+					bevel_color = 'brightredborder'
+					clip = '-13,0,0,0'
+		/>
+		<drawstep	func = 'triangle'
+					fg_color = 'white'
+					fill = 'foreground'
+					width = '8'
+					height = '6'
+					xpos = 'right'
+					ypos = 'center'
+					padding = '0,0,2,0'
+					orientation = 'bottom'
+		/>
+	</drawdata>
+	<drawdata id = 'dropdown_button_hover_right' cache = 'false' resolution = 'y<400'>
+		<text	font = 'text_button'
+				text_color = 'color_button'
+				vertical_align = 'center'
+				horizontal_align = 'center'
+		/>
+		<drawstep	func = 'roundedsq'
+					radius = '5'
+					stroke = '1'
+					fill = 'gradient'
+					shadow = '0'
+					fg_color = 'darkredborder'
+					gradient_start = 'brightpink'
+					gradient_end = 'darkpink'
+					bevel = '1'
+					bevel_color = 'brightredborder'
+					clip = '-7,0,0,0'
+		/>
+		<drawstep	func = 'triangle'
+					fg_color = 'white'
+					fill = 'foreground'
+					width = '6'
+					height = '6'
+					xpos = 'right'
+					ypos = 'center'
+					padding = '0,0,0,0'
+					orientation = 'bottom'
+		/>
+	</drawdata>
+
+	<drawdata id = 'dropdown_button_disabled' cache = 'false' resolution = 'y>399'>
+		<text	font = 'text_button'
+				text_color = 'color_button_disabled'
+				vertical_align = 'center'
+				horizontal_align = 'center'
+		/>
+		<drawstep	func = 'roundedsq'
+					radius = '5'
+					stroke = '1'
+					fill = 'gradient'
+					shadow = '0'
+					fg_color = 'shadowcolor'
+					gradient_start = 'darkenedbrightred'
+					gradient_end = 'darkeneddarkred'
+					bevel = '1'
+					bevel_color = 'darkgray'
+		/>
+		<drawstep	func = 'triangle'
+					fg_color = 'darkgray2'
+					fill = 'foreground'
+					width = '8'
+					height = '6'
+					xpos = 'right'
+					ypos = 'center'
+					padding = '0,0,2,0'
+					orientation = 'bottom'
+		/>
+	</drawdata>
+	<drawdata id = 'dropdown_button_disabled' cache = 'false' resolution = 'y<400'>
+		<text	font = 'text_button'
+				text_color = 'color_button_disabled'
+				vertical_align = 'center'
+				horizontal_align = 'center'
+		/>
+		<drawstep	func = 'roundedsq'
+					radius = '5'
+					stroke = '1'
+					fill = 'gradient'
+					shadow = '0'
+					fg_color = 'shadowcolor'
+					gradient_start = 'darkenedbrightred'
+					gradient_end = 'darkeneddarkred'
+					bevel = '1'
+					bevel_color = 'darkgray'
+		/>
+		<drawstep	func = 'triangle'
+					fg_color = 'darkgray2'
+					fill = 'foreground'
+					width = '6'
+					height = '6'
+					xpos = 'right'
+					ypos = 'center'
+					padding = '0,0,0,0'
+					orientation = 'bottom'
+		/>
+	</drawdata>
+
+	<drawdata id = 'dropdown_button_pressed_left' cache = 'false' resolution = 'y>399'>
+		<text	font = 'text_button'
+				text_color = 'color_button'
+				vertical_align = 'center'
+				horizontal_align = 'center'
+		/>
+		<drawstep	func = 'roundedsq'
+					radius = '5'
+					stroke = '1'
+					fill = 'foreground'
+					shadow = '0'
+					factor = '0'
+					fg_color = '120, 40, 16'
+					gradient_start = '255, 0, 0'
+					gradient_end = '255, 0, 0'
+					bevel = '1'
+					bevel_color = 'black'
+					clip = '0,0,-13,0'
+		/>
+		<drawstep	func = 'triangle'
+					fg_color = 'white'
+					fill = 'foreground'
+					width = '8'
+					height = '6'
+					xpos = 'right'
+					ypos = 'center'
+					padding = '0,0,2,0'
+					orientation = 'bottom'
+		/>
+	</drawdata>
+	<drawdata id = 'dropdown_button_pressed_left' cache = 'false' resolution = 'y<400'>
+		<text	font = 'text_button'
+				text_color = 'color_button'
+				vertical_align = 'center'
+				horizontal_align = 'center'
+		/>
+		<drawstep	func = 'roundedsq'
+					radius = '5'
+					stroke = '1'
+					fill = 'foreground'
+					shadow = '0'
+					factor = '0'
+					fg_color = '120, 40, 16'
+					gradient_start = '255, 0, 0'
+					gradient_end = '255, 0, 0'
+					bevel = '1'
+					bevel_color = 'black'
+					clip = '0,0,-7,0'
+		/>
+		<drawstep	func = 'triangle'
+					fg_color = 'white'
+					fill = 'foreground'
+					width = '6'
+					height = '6'
+					xpos = 'right'
+					ypos = 'center'
+					padding = '0,0,0,0'
+					orientation = 'bottom'
+		/>
+	</drawdata>
+
+	<drawdata id = 'dropdown_button_pressed_right' cache = 'false' resolution = 'y>399'>
+		<text	font = 'text_button'
+				text_color = 'color_button'
+				vertical_align = 'center'
+				horizontal_align = 'center'
+		/>
+		<drawstep	func = 'roundedsq'
+					radius = '5'
+					stroke = '1'
+					fill = 'foreground'
+					shadow = '0'
+					factor = '0'
+					fg_color = '120, 40, 16'
+					gradient_start = '255, 0, 0'
+					gradient_end = '255, 0, 0'
+					bevel = '1'
+					bevel_color = 'black'
+					clip = '-13,0,0,0'
+		/>
+		<drawstep	func = 'triangle'
+					fg_color = 'white'
+					fill = 'foreground'
+					width = '8'
+					height = '6'
+					xpos = 'right'
+					ypos = 'center'
+					padding = '0,0,2,0'
+					orientation = 'bottom'
+		/>
+	</drawdata>
+	<drawdata id = 'dropdown_button_pressed_right' cache = 'false' resolution = 'y<400'>
+		<text	font = 'text_button'
+				text_color = 'color_button'
+				vertical_align = 'center'
+				horizontal_align = 'center'
+		/>
+		<drawstep	func = 'roundedsq'
+					radius = '5'
+					stroke = '1'
+					fill = 'foreground'
+					shadow = '0'
+					factor = '0'
+					fg_color = '120, 40, 16'
+					gradient_start = '255, 0, 0'
+					gradient_end = '255, 0, 0'
+					bevel = '1'
+					bevel_color = 'black'
+					clip = '-7,0,0,0'
+		/>
+		<drawstep	func = 'triangle'
+					fg_color = 'white'
+					fill = 'foreground'
+					width = '6'
+					height = '6'
+					xpos = 'right'
+					ypos = 'center'
+					padding = '0,0,0,0'
+					orientation = 'bottom'
+		/>
+	</drawdata>
+
 	<!-- Disabled checkbox -->
 	<drawdata id = 'checkbox_disabled' cache = 'false'>
 		<text	font = 'text_default'
diff --git a/gui/themes/scummmodern/scummmodern_layout.stx b/gui/themes/scummmodern/scummmodern_layout.stx
index a45dd3edca..dd958ea4a0 100644
--- a/gui/themes/scummmodern/scummmodern_layout.stx
+++ b/gui/themes/scummmodern/scummmodern_layout.stx
@@ -58,6 +58,8 @@
 		<def var = 'Predictive.Button.Width' value = '60' />
 		<def var = 'Predictive.ShowDeletePic' value = '1'/>
 
+		<def var = 'DropdownButton.Width' value = '13'/>
+
 		<widget name = 'OptionsLabel'
 				size = '115, Globals.Line.Height'
 				textalign = 'right'
@@ -75,6 +77,9 @@
 		<widget name = 'Button'
 				size = '108, 24'
 		/>
+		<widget name = 'LauncherButton'
+				size = '130, 24'
+		/>
 		<widget name = 'WideButton'
 				size = '216, 24'
 		/>
@@ -160,31 +165,31 @@
 				<widget name = 'GameList'/>
 				<layout type = 'vertical' padding = '10, 0, 0, 0'>
 					<widget name = 'StartButton'
-							type = 'Button'
+							type = 'LauncherButton'
 					/>
 					<widget name = 'LoadGameButton'
-							type = 'Button'
+							type = 'LauncherButton'
 					/>
 					<space size = '10' />
 					<widget name = 'AddGameButton'
-							type = 'Button'
+							type = 'LauncherButton'
 					/>
 					<widget name = 'EditGameButton'
-							type = 'Button'
+							type = 'LauncherButton'
 					/>
 					<widget name = 'RemoveGameButton'
-							type = 'Button'
+							type = 'LauncherButton'
 					/>
 					<space size = '10' />
 					<widget name = 'OptionsButton'
-							type = 'Button'
+							type = 'LauncherButton'
 					/>
 					<widget name = 'AboutButton'
-							type = 'Button'
+							type = 'LauncherButton'
 					/>
 					<space size = '10' />
 					<widget name = 'QuitButton'
-							type = 'Button'
+							type = 'LauncherButton'
 					/>
 				</layout>
 			</layout>
@@ -260,7 +265,7 @@
 			</layout>
 		</layout>
 	</dialog>
-	
+
 	<dialog name = 'GlobalOptions_Control' overlays = 'Dialog.GlobalOptions.TabWidget'>
 		<layout type = 'vertical' padding = '16, 16, 16, 16' spacing = '8'>
 			<widget name = 'grOnScreenCheckbox'
@@ -934,13 +939,12 @@
 		<layout type='vertical' padding='16,16,16,16' spacing='16'>
 			<widget name='TTSCheckbox'
 				type='Checkbox'
-				/>
+			/>
 			<widget name='TTSVoiceSelection'
 				type='PopUp'
-				/>
-			</layout>
-		</dialog>
-
+			/>
+		</layout>
+	</dialog>
 	<dialog name='KeysDialog' overlays='Dialog.GlobalOptions' shading='dim'>
 		<layout type='vertical' padding='8,8,8,8' center='true'>
 			<widget name='Action'
@@ -1821,5 +1825,6 @@
 			</layout>
 		</layout>
 	</dialog>
-
+	<dialog name = 'DropdownDialog' overlays = 'screen_center'>
+	</dialog>
 </layout_info>
diff --git a/gui/themes/scummmodern/scummmodern_layout_lowres.stx b/gui/themes/scummmodern/scummmodern_layout_lowres.stx
index 20363bbba0..7324663fee 100644
--- a/gui/themes/scummmodern/scummmodern_layout_lowres.stx
+++ b/gui/themes/scummmodern/scummmodern_layout_lowres.stx
@@ -43,6 +43,8 @@
 		<def var = 'Predictive.Button.Height' value = '15' />
 		<def var = 'Predictive.ShowDeletePic' value = '0'/>
 
+		<def var = 'DropdownButton.Width' value = '7'/>
+
 		<widget name = 'Button'
 				size = '72, 16'
 		/>
@@ -1793,4 +1795,6 @@
 			</layout>
 		</layout>
 	</dialog>
+	<dialog name = 'DropdownDialog' overlays = 'screen_center'>
+	</dialog>
 </layout_info>