GUI: Add Container in StorageWizardDialog

It now looks fine in both 640x400 and 320x200!

8 files changed, 215 insertions, 134 deletions

diff --git a/gui/storagewizarddialog.cpp b/gui/storagewizarddialog.cpp
index e04ca0255e..f1b1796b5c 100644
--- a/gui/storagewizarddialog.cpp
+++ b/gui/storagewizarddialog.cpp
@@ -31,13 +31,14 @@
 #include "gui/gui-manager.h"
 #include "gui/message.h"
 #include "gui/widget.h"
+#include "gui/widgets/edittext.h"
+#include "gui/widgets/scrollcontainer.h"
 #include "backends/cloud/cloudmanager.h"
 #ifdef USE_SDL_NET
 #include "backends/networking/sdl_net/localwebserver.h"
 #endif
 #include "backends/networking/browser/openurl.h"
 #include "common/translation.h"
-#include "widgets/edittext.h"
 
 namespace GUI {
 
@@ -45,7 +46,8 @@ enum {
 	kConnectCmd = 'Cnnt',
 	kCodeBoxCmd = 'CdBx',
 	kOpenUrlCmd = 'OpUr',
-	kPasteCodeCmd = 'PsCd'
+	kPasteCodeCmd = 'PsCd',
+	kStorageWizardContainerReflowCmd = 'SWCr',
 };
 
 StorageWizardDialog::StorageWizardDialog(uint32 storageId):
@@ -55,46 +57,42 @@ StorageWizardDialog::StorageWizardDialog(uint32 storageId):
 #endif
 	_backgroundType = GUI::ThemeEngine::kDialogBackgroundPlain;
 
+	ScrollContainerWidget *container = new ScrollContainerWidget(this, "GlobalOptions_Cloud_ConnectionWizard.Container", kStorageWizardContainerReflowCmd);
+	container->setTarget(this);
+
 	Common::String headline = Common::String::format(_("%s Storage Connection Wizard"), CloudMan.listStorages()[_storageId].c_str());
-	new StaticTextWidget(this, "GlobalOptions_Cloud_ConnectionWizard.Headline", headline);
+	_headlineWidget = new StaticTextWidget(container, "GlobalOptions_Cloud_ConnectionWizard_Container.Headline", headline);
 
-	new StaticTextWidget(this, "GlobalOptions_Cloud_ConnectionWizard.NavigateLine", _s("Navigate to the following URL:"));
-	new StaticTextWidget(this, "GlobalOptions_Cloud_ConnectionWizard.URLLine", getUrl());
+	_navigateLineWidget = new StaticTextWidget(container, "GlobalOptions_Cloud_ConnectionWizard_Container.NavigateLine", _s("Navigate to the following URL:"));
+	_urlLineWidget = new StaticTextWidget(container, "GlobalOptions_Cloud_ConnectionWizard_Container.URLLine", getUrl());
 
-	StaticTextWidget *returnLine1 = new StaticTextWidget(this, "GlobalOptions_Cloud_ConnectionWizard.ReturnLine1", _s("Obtain the code from the storage, enter it"));
-	StaticTextWidget *returnLine2 = new StaticTextWidget(this, "GlobalOptions_Cloud_ConnectionWizard.ReturnLine2", _s("in the following field and press 'Connect':"));
+	_returnLine1 = new StaticTextWidget(container, "GlobalOptions_Cloud_ConnectionWizard_Container.ReturnLine1", _s("Obtain the code from the storage, enter it"));
+	_returnLine2 = new StaticTextWidget(container, "GlobalOptions_Cloud_ConnectionWizard_Container.ReturnLine2", _s("in the following field and press 'Connect':"));
 	for (uint32 i = 0; i < CODE_FIELDS; ++i)
-		_codeWidget[i] = new EditTextWidget(this, "GlobalOptions_Cloud_ConnectionWizard.CodeBox" + Common::String::format("%d", i+1), "", 0, kCodeBoxCmd);
-	_messageWidget = new StaticTextWidget(this, "GlobalOptions_Cloud_ConnectionWizard.MessageLine", "");
+		_codeWidget[i] = new EditTextWidget(container, "GlobalOptions_Cloud_ConnectionWizard_Container.CodeBox" + Common::String::format("%d", i+1), "", 0, kCodeBoxCmd);
+	_messageWidget = new StaticTextWidget(container, "GlobalOptions_Cloud_ConnectionWizard_Container.MessageLine", "");
 
 	// Buttons
-	new ButtonWidget(this, "GlobalOptions_Cloud_ConnectionWizard.CancelButton", _("Cancel"), 0, kCloseCmd);
-	new ButtonWidget(this, "GlobalOptions_Cloud_ConnectionWizard.OpenUrlButton", _("Open URL"), 0, kOpenUrlCmd);
-	_pasteCodeWidget = new ButtonWidget(this, "GlobalOptions_Cloud_ConnectionWizard.PasteCodeButton", _("Paste"), _("Pastes clipboard contents into fields"), kPasteCodeCmd);
-	_connectWidget = new ButtonWidget(this, "GlobalOptions_Cloud_ConnectionWizard.ConnectButton", _("Connect"), 0, kConnectCmd);
+	_cancelWidget = new ButtonWidget(container, "GlobalOptions_Cloud_ConnectionWizard_Container.CancelButton", _("Cancel"), 0, kCloseCmd);
+	_openUrlWidget = new ButtonWidget(container, "GlobalOptions_Cloud_ConnectionWizard_Container.OpenUrlButton", _("Open URL"), 0, kOpenUrlCmd);
+	_pasteCodeWidget = new ButtonWidget(container, "GlobalOptions_Cloud_ConnectionWizard_Container.PasteCodeButton", _("Paste"), _("Pastes clipboard contents into fields"), kPasteCodeCmd);
+	_connectWidget = new ButtonWidget(container, "GlobalOptions_Cloud_ConnectionWizard_Container.ConnectButton", _("Connect"), 0, kConnectCmd);
 
 	if (Cloud::CloudManager::couldUseLocalServer()) {
 		// hide fields and even the button if local webserver is on
-		returnLine1->setLabel(_s("You would be navigated to ScummVM's page"));
-		returnLine2->setLabel(_s("when you'd allow it to use your storage."));
-		for (uint32 i = 0; i < CODE_FIELDS; ++i)
-			_codeWidget[i]->setVisible(false);
-		_messageWidget->setVisible(false);
-		_connectWidget->setVisible(false);
-		_pasteCodeWidget->setVisible(false);
+		_returnLine1->setLabel(_s("You would be navigated to ScummVM's page"));
+		_returnLine2->setLabel(_s("when you'd allow it to use your storage."));
 	}
-
-#ifndef USE_SDL2
-	_pasteCodeWidget->setVisible(false);
-#endif
         
+	_picture = new GraphicsWidget(container, "GlobalOptions_Cloud_ConnectionWizard_Container.Picture");
 #ifndef DISABLE_FANCY_THEMES
-	if (g_gui.theme()->supportsImages() && g_system->getOverlayWidth() > 320) { // picture only in high-res
-		GraphicsWidget *gfx = new GraphicsWidget(this, "GlobalOptions_Cloud_ConnectionWizard.Picture");
-		gfx->useThemeTransparency(true);
-		gfx->setGfx(g_gui.theme()->getImageSurface(ThemeEngine::kImageDropboxLogo));
+	if (g_gui.theme()->supportsImages()) {
+		_picture->useThemeTransparency(true);
+		_picture->setGfx(g_gui.theme()->getImageSurface(ThemeEngine::kImageDropboxLogo));
 	}
 #endif
+
+	containerWidgetsReflow();
 }
 
 void StorageWizardDialog::open() {
@@ -255,6 +253,9 @@ void StorageWizardDialog::handleCommand(CommandSender *sender, uint32 cmd, uint3
 		_close = true;
 		break;
 #endif
+	case kStorageWizardContainerReflowCmd:
+		containerWidgetsReflow();
+		break;
 	default:
 		Dialog::handleCommand(sender, cmd, data);
 	}
@@ -269,6 +270,40 @@ void StorageWizardDialog::handleTickle() {
 	Dialog::handleTickle();
 }
 
+void StorageWizardDialog::containerWidgetsReflow() {
+	// contents
+	if (_headlineWidget) _headlineWidget->setVisible(true);
+	if (_navigateLineWidget) _navigateLineWidget->setVisible(true);
+	if (_urlLineWidget) _urlLineWidget->setVisible(true);
+	if (_returnLine1) _returnLine1->setVisible(true);
+	if (_returnLine2) _returnLine2->setVisible(true);
+
+	bool showFields = (!Cloud::CloudManager::couldUseLocalServer());
+	for (uint32 i = 0; i < CODE_FIELDS; ++i)
+		_codeWidget[i]->setVisible(showFields);
+	_messageWidget->setVisible(showFields);
+
+	// left column / first bottom row
+	if (_picture) {
+		_picture->setVisible(g_system->getOverlayWidth() > 320);
+	}
+	if (_openUrlWidget) _openUrlWidget->setVisible(true);
+	if (_pasteCodeWidget) {
+#ifdef USE_SDL2
+		bool visible = showFields;
+#else
+		bool visible = false;
+#endif
+		_pasteCodeWidget->setVisible(visible);
+	}
+
+	// bottom row
+	if (_cancelWidget) _cancelWidget->setVisible(true);
+	if (_connectWidget) {
+		_connectWidget->setVisible(showFields);
+	}
+}
+
 Common::String StorageWizardDialog::getUrl() const {
 	Common::String url = "https://www.scummvm.org/c/";
 	switch (_storageId) {
diff --git a/gui/storagewizarddialog.h b/gui/storagewizarddialog.h
index b0d099957e..61bc8ac873 100644
--- a/gui/storagewizarddialog.h
+++ b/gui/storagewizarddialog.h
@@ -32,6 +32,7 @@ class CommandSender;
 class EditTextWidget;
 class StaticTextWidget;
 class ButtonWidget;
+class GraphicsWidget;
 
 #ifdef USE_SDL_NET
 enum StorageWizardDialogCommands {
@@ -42,15 +43,30 @@ enum StorageWizardDialogCommands {
 class StorageWizardDialog : public Dialog {
 	static const uint32 CODE_FIELDS = 8;
 	uint32 _storageId;
+
+	StaticTextWidget *_headlineWidget;
+	StaticTextWidget *_navigateLineWidget;
+	StaticTextWidget *_urlLineWidget;
+	StaticTextWidget *_returnLine1;
+	StaticTextWidget *_returnLine2;
 	EditTextWidget *_codeWidget[CODE_FIELDS];
 	StaticTextWidget *_messageWidget;
+
+	GraphicsWidget *_picture;
+	ButtonWidget *_openUrlWidget;
 	ButtonWidget *_pasteCodeWidget;
+
+	ButtonWidget *_cancelWidget;
 	ButtonWidget *_connectWidget;
+
 	bool _close;
 #ifdef USE_SDL_NET
 	bool _stopServerOnClose;
 #endif
 
+	/** Hides/shows widgets for Container to work with them correctly. */
+	void containerWidgetsReflow();
+
 	/** Return short scummvm.org URL for user to navigate to. */
 	Common::String getUrl() const;
 
diff --git a/gui/themes/scummclassic.zip b/gui/themes/scummclassic.zip
index 42c6b10b73..86d5c497a0 100644
--- a/gui/themes/scummclassic.zip
+++ b/gui/themes/scummclassic.zip
diff --git a/gui/themes/scummclassic/classic_layout.stx b/gui/themes/scummclassic/classic_layout.stx
index 3284f7d565..0b030ff799 100644
--- a/gui/themes/scummclassic/classic_layout.stx
+++ b/gui/themes/scummclassic/classic_layout.stx
@@ -635,7 +635,13 @@
 	</dialog>
 
 	<dialog name = 'GlobalOptions_Cloud_ConnectionWizard' overlays = 'Dialog.GlobalOptions'>
-		<layout type = 'vertical' padding = '16, 16, 16, 16' spacing = '8'>
+		<layout type = 'vertical' padding = '0, 0, 0, 0'>		
+			<widget name = 'Container'/>
+		</layout>
+	</dialog>
+
+	<dialog name = 'GlobalOptions_Cloud_ConnectionWizard_Container' overlays = 'GlobalOptions_Cloud_ConnectionWizard.Container'>
+		<layout type = 'vertical' padding = '16, 16, 16, 16' spacing = '0'>
 			<layout type = 'horizontal' padding = '0, 0, 0, 0' spacing = '10' center = 'true'>
 				<layout type = 'vertical' padding = '0, 0, 0, 0' spacing = '6'>
 					<widget name = 'Picture'
diff --git a/gui/themes/scummclassic/classic_layout_lowres.stx b/gui/themes/scummclassic/classic_layout_lowres.stx
index 7666aeb585..9bdea8fa8d 100644
--- a/gui/themes/scummclassic/classic_layout_lowres.stx
+++ b/gui/themes/scummclassic/classic_layout_lowres.stx
@@ -650,6 +650,12 @@
 	</dialog>
 
 	<dialog name = 'GlobalOptions_Cloud_ConnectionWizard' overlays = 'Dialog.GlobalOptions'>
+		<layout type = 'vertical' padding = '0, 0, 0, 0'>
+			<widget name = 'Container'/>
+		</layout>
+	</dialog>
+
+	<dialog name = 'GlobalOptions_Cloud_ConnectionWizard_Container' overlays = 'GlobalOptions_Cloud_ConnectionWizard.Container'>
 		<layout type = 'vertical' padding = '16, 16, 16, 16' spacing = '8'>
 			<layout type = 'vertical' padding = '0, 0, 0, 0' spacing = '4'>
 				<widget name = 'Headline'
@@ -670,60 +676,63 @@
 						height = 'Globals.Line.Height'
 				/>
 				<layout type = 'horizontal' padding = '0, 0, 0, 0' spacing = '4' center = 'true'>
-						<widget name = 'CodeBox1'
-							width = '60'
-							height = '16'
-						/>
-						<widget name = 'CodeBox2'
-							width = '60'
-							height = '16'
-						/>
-						<widget name = 'CodeBox3'
-							width = '60'
-							height = '16'
-						/>
-						<widget name = 'CodeBox4'
-							width = '60'
-							height = '16'
-						/>
-					</layout>
-					<layout type = 'horizontal' padding = '0, 0, 0, 0' spacing = '4' center = 'true'>
-						<widget name = 'CodeBox5'
-							width = '60'
-							height = '16'
-						/>
-						<widget name = 'CodeBox6'
-							width = '60'
-							height = '16'
-						/>
-						<widget name = 'CodeBox7'
-							width = '60'
-							height = '16'
-						/>
-						<widget name = 'CodeBox8'
-							width = '60'
-							height = '16'
-						/>
-					</layout>
-					<widget name = 'MessageLine'
-							height = 'Globals.Line.Height'
+					<widget name = 'CodeBox1'
+						width = '60'
+						height = '16'
 					/>
-				<space size = '4' />
-				<widget name = 'Picture' width = '1' height = '1' />
-			</layout>
-			<layout type = 'horizontal' padding = '0, 0, 0, 0' spacing = '6' center = 'true'>
-				<widget name = 'CancelButton'
-						type = 'Button'
-				/>
-				<widget name = 'OpenUrlButton'
-						type = 'Button'
-				/>
-				<widget name = 'PasteCodeButton'
-						type = 'Button'
-				/>
-				<widget name = 'ConnectButton'
-						type = 'Button'
+					<widget name = 'CodeBox2'
+						width = '60'
+						height = '16'
+					/>
+					<widget name = 'CodeBox3'
+						width = '60'
+						height = '16'
+					/>
+					<widget name = 'CodeBox4'
+						width = '60'
+						height = '16'
+					/>
+				</layout>
+				<layout type = 'horizontal' padding = '0, 0, 0, 0' spacing = '4' center = 'true'>
+					<widget name = 'CodeBox5'
+						width = '60'
+						height = '16'
+					/>
+					<widget name = 'CodeBox6'
+						width = '60'
+						height = '16'
+					/>
+					<widget name = 'CodeBox7'
+						width = '60'
+						height = '16'
+					/>
+					<widget name = 'CodeBox8'
+						width = '60'
+						height = '16'
+					/>
+				</layout>
+				<widget name = 'MessageLine'
+						height = 'Globals.Line.Height'
 				/>
+				<layout type = 'horizontal' padding = '0, 0, 0, 0' spacing = '4' center = 'true'>
+					<widget name = 'OpenUrlButton'
+							type = 'Button'
+					/>
+					<widget name = 'PasteCodeButton'
+							type = 'Button'
+					/>
+				</layout>
+				<layout type = 'horizontal' padding = '0, 0, 0, 0' spacing = '4' center = 'true'>
+					<widget name = 'CancelButton'
+							type = 'Button'
+					/>
+					<space />
+					<widget name = 'ConnectButton'
+							type = 'Button'
+					/>
+				</layout>
+				<space size = '6' />
+				<widget name = 'Picture' width = '1' height = '1' />
 			</layout>
 		</layout>
 	</dialog>
diff --git a/gui/themes/scummmodern.zip b/gui/themes/scummmodern.zip
index b433aaae7a..23662b1da8 100644
--- a/gui/themes/scummmodern.zip
+++ b/gui/themes/scummmodern.zip
diff --git a/gui/themes/scummmodern/scummmodern_layout.stx b/gui/themes/scummmodern/scummmodern_layout.stx
index a242229dff..f1fd702c06 100644
--- a/gui/themes/scummmodern/scummmodern_layout.stx
+++ b/gui/themes/scummmodern/scummmodern_layout.stx
@@ -649,7 +649,13 @@
 	</dialog>
 
 	<dialog name = 'GlobalOptions_Cloud_ConnectionWizard' overlays = 'Dialog.GlobalOptions'>
-		<layout type = 'vertical' padding = '16, 16, 16, 16' spacing = '8'>
+		<layout type = 'vertical' padding = '0, 0, 0, 0'>		
+			<widget name = 'Container'/>
+		</layout>
+	</dialog>
+
+	<dialog name = 'GlobalOptions_Cloud_ConnectionWizard_Container' overlays = 'GlobalOptions_Cloud_ConnectionWizard.Container'>
+		<layout type = 'vertical' padding = '16, 16, 16, 16' spacing = '0'>
 			<layout type = 'horizontal' padding = '0, 0, 0, 0' spacing = '10' center = 'true'>
 				<layout type = 'vertical' padding = '0, 0, 0, 0' spacing = '6'>
 					<widget name = 'Picture'
diff --git a/gui/themes/scummmodern/scummmodern_layout_lowres.stx b/gui/themes/scummmodern/scummmodern_layout_lowres.stx
index 26f7fab465..3f7e263306 100644
--- a/gui/themes/scummmodern/scummmodern_layout_lowres.stx
+++ b/gui/themes/scummmodern/scummmodern_layout_lowres.stx
@@ -648,6 +648,12 @@
 	</dialog>
 
 	<dialog name = 'GlobalOptions_Cloud_ConnectionWizard' overlays = 'Dialog.GlobalOptions'>
+		<layout type = 'vertical' padding = '0, 0, 0, 0'>
+			<widget name = 'Container'/>
+		</layout>
+	</dialog>
+
+	<dialog name = 'GlobalOptions_Cloud_ConnectionWizard_Container' overlays = 'GlobalOptions_Cloud_ConnectionWizard.Container'>
 		<layout type = 'vertical' padding = '16, 16, 16, 16' spacing = '8'>
 			<layout type = 'vertical' padding = '0, 0, 0, 0' spacing = '4'>
 				<widget name = 'Headline'
@@ -668,60 +674,63 @@
 						height = 'Globals.Line.Height'
 				/>
 				<layout type = 'horizontal' padding = '0, 0, 0, 0' spacing = '4' center = 'true'>
-						<widget name = 'CodeBox1'
-							width = '60'
-							height = '16'
-						/>
-						<widget name = 'CodeBox2'
-							width = '60'
-							height = '16'
-						/>
-						<widget name = 'CodeBox3'
-							width = '60'
-							height = '16'
-						/>
-						<widget name = 'CodeBox4'
-							width = '60'
-							height = '16'
-						/>
-					</layout>
-					<layout type = 'horizontal' padding = '0, 0, 0, 0' spacing = '4' center = 'true'>
-						<widget name = 'CodeBox5'
-							width = '60'
-							height = '16'
-						/>
-						<widget name = 'CodeBox6'
-							width = '60'
-							height = '16'
-						/>
-						<widget name = 'CodeBox7'
-							width = '60'
-							height = '16'
-						/>
-						<widget name = 'CodeBox8'
-							width = '60'
-							height = '16'
-						/>
-					</layout>
-					<widget name = 'MessageLine'
-							height = 'Globals.Line.Height'
+					<widget name = 'CodeBox1'
+						width = '60'
+						height = '16'
 					/>
-				<space size = '4' />
-				<widget name = 'Picture' width = '1' height = '1' />
-			</layout>
-			<layout type = 'horizontal' padding = '0, 0, 0, 0' spacing = '6' center = 'true'>
-				<widget name = 'CancelButton'
-						type = 'Button'
-				/>
-				<widget name = 'OpenUrlButton'
-						type = 'Button'
-				/>
-				<widget name = 'PasteCodeButton'
-						type = 'Button'
-				/>
-				<widget name = 'ConnectButton'
-						type = 'Button'
+					<widget name = 'CodeBox2'
+						width = '60'
+						height = '16'
+					/>
+					<widget name = 'CodeBox3'
+						width = '60'
+						height = '16'
+					/>
+					<widget name = 'CodeBox4'
+						width = '60'
+						height = '16'
+					/>
+				</layout>
+				<layout type = 'horizontal' padding = '0, 0, 0, 0' spacing = '4' center = 'true'>
+					<widget name = 'CodeBox5'
+						width = '60'
+						height = '16'
+					/>
+					<widget name = 'CodeBox6'
+						width = '60'
+						height = '16'
+					/>
+					<widget name = 'CodeBox7'
+						width = '60'
+						height = '16'
+					/>
+					<widget name = 'CodeBox8'
+						width = '60'
+						height = '16'
+					/>
+				</layout>
+				<widget name = 'MessageLine'
+						height = 'Globals.Line.Height'
 				/>
+				<layout type = 'horizontal' padding = '0, 0, 0, 0' spacing = '4' center = 'true'>
+					<widget name = 'OpenUrlButton'
+							type = 'Button'
+					/>
+					<widget name = 'PasteCodeButton'
+							type = 'Button'
+					/>
+				</layout>
+				<layout type = 'horizontal' padding = '0, 0, 0, 0' spacing = '4' center = 'true'>
+					<widget name = 'CancelButton'
+							type = 'Button'
+					/>
+					<space />
+					<widget name = 'ConnectButton'
+							type = 'Button'
+					/>
+				</layout>
+				<space size = '6' />
+				<widget name = 'Picture' width = '1' height = '1' />
 			</layout>
 		</layout>
 	</dialog>