From e377c81fe93eb28310bdd16552ddd394e2ed19c8 Mon Sep 17 00:00:00 2001 From: Tony Chen Date: Thu, 22 Jan 2026 15:07:35 +1100 Subject: [PATCH] Adjust the UI layout --- lib/src/constants/initial_setup.dart | 37 ++++++- .../screens/initial_setup_screen_body.dart | 98 +++++++++++++------ .../initial_setup_welcome.dart | 9 +- 3 files changed, 104 insertions(+), 40 deletions(-) diff --git a/lib/src/constants/initial_setup.dart b/lib/src/constants/initial_setup.dart index 23e4e28..2a86201 100644 --- a/lib/src/constants/initial_setup.dart +++ b/lib/src/constants/initial_setup.dart @@ -58,11 +58,14 @@ const initialStructureTitle = 'Solid Pod'; /// Text string variables used for informing the user about the first-time /// connection and security key requirement. +/// +/// The [appName] parameter allows the message to display the actual app name +/// instead of a generic "this App" reference. -const initialStructureMsg = - 'You have connected to your Solid Pod using this App for the first time. ' - 'A security key is required to encrypt and protect the data stored in your Pod. ' - 'You must remember this security key to access the data for this App.'; +String initialStructureMsg(String appName) => + 'You have connected to your Solid Pod using $appName for the first time. ' + 'A security key is required to encrypt and protect the data stored in your ' + 'Pod. You must remember this security key to access the data for $appName.'; /// The string key of input form for the input of security key @@ -75,9 +78,33 @@ const securityKeyStrReType = '__security_key'; /// Markdown tooltip text for the security key input field. const securityKeyTooltip = - 'A security key can be any string of characters that you can remember.' + 'A security key can be any string of characters that you can remember. ' 'The longer the better, with a mix of characters.'; const securityKeyRetypeTooltip = 'Please retype your security key to ensure it is correct. ' 'We ask this to protect against loss of your data.'; + +/// Tooltip text for the SUBMIT button. +/// +/// The [appName] parameter allows the tooltip to display the actual app name. + +String submitButtonTooltip(String appName) => + 'Tap here once you have provided your security key. ' + 'This will record the key and create the Pod folder for $appName.'; + +/// Tooltip text for the RESOURCES button. +/// +/// The [appName] parameter allows the tooltip to display the actual app name. + +String resourcesButtonTooltip(String appName) => + 'Tap here to list all of the $appName resources ' + 'that will be created to initialise your Pod.'; + +/// Tooltip text for the LOGOUT button. +/// +/// The [appName] parameter allows the tooltip to display the actual app name. + +String logoutButtonTooltip(String appName) => + 'Tap here to logout from your connection to your Pod on the Solid server. ' + 'Next time you start $appName you will need to log into the server again.'; diff --git a/lib/src/screens/initial_setup_screen_body.dart b/lib/src/screens/initial_setup_screen_body.dart index 3d6d0aa..9f7017a 100644 --- a/lib/src/screens/initial_setup_screen_body.dart +++ b/lib/src/screens/initial_setup_screen_body.dart @@ -35,8 +35,11 @@ library; import 'package:flutter/material.dart'; import 'package:flutter_form_builder/flutter_form_builder.dart'; +import 'package:markdown_tooltip/markdown_tooltip.dart'; +import 'package:package_info_plus/package_info_plus.dart'; import 'package:solidui/solidui.dart' show SolidLogin, logoutPopup; +import 'package:solidui/src/constants/initial_setup.dart'; import 'package:solidui/src/screens/initial_setup_widgets/enc_key_input_form.dart'; import 'package:solidui/src/screens/initial_setup_widgets/initial_setup_welcome.dart'; import 'package:solidui/src/screens/initial_setup_widgets/res_create_form_submission.dart'; @@ -84,6 +87,27 @@ class _InitialSetupScreenBodyState extends State { final _formKey = GlobalKey(); + String _appName = 'the App'; + + @override + void initState() { + super.initState(); + _loadAppName(); + } + + Future _loadAppName() async { + final packageInfo = await PackageInfo.fromPlatform(); + if (mounted) { + setState(() { + // Capitalise the first letter of the app name for display. + final name = packageInfo.appName; + _appName = name.isNotEmpty + ? name[0].toUpperCase() + name.substring(1) + : 'the App'; + }); + } + } + @override Widget build(BuildContext context) { final resFoldersLink = (widget.resNeedToCreate['folders'] as List) @@ -156,7 +180,7 @@ class _InitialSetupScreenBodyState extends State { child: ListView( primary: false, children: [ - initialSetupWelcome(context), + initialSetupWelcome(context, _appName), Padding( padding: const EdgeInsets.symmetric(horizontal: 30), child: Column( @@ -242,19 +266,22 @@ class _InitialSetupScreenBodyState extends State { ) { return FocusTraversalOrder( order: const NumericFocusOrder(3), - child: OutlinedButton( - onPressed: () async => _handleFormSubmit( - resFileNames, - resFoldersLink, - resFilesLink, - ), - style: OutlinedButton.styleFrom( - foregroundColor: Colors.blue, - side: const BorderSide(color: Colors.blue), - ), - child: const Text( - 'SUBMIT', - style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14), + child: MarkdownTooltip( + message: submitButtonTooltip(_appName), + child: OutlinedButton( + onPressed: () async => _handleFormSubmit( + resFileNames, + resFoldersLink, + resFilesLink, + ), + style: OutlinedButton.styleFrom( + foregroundColor: Colors.blue, + side: const BorderSide(color: Colors.blue), + ), + child: const Text( + 'SUBMIT', + style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14), + ), ), ), ); @@ -266,33 +293,40 @@ class _InitialSetupScreenBodyState extends State { List extractedParts, ) { return Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + mainAxisAlignment: MainAxisAlignment.end, children: [ FocusTraversalOrder( order: const NumericFocusOrder(4), - child: TextButton( - onPressed: () => - ResourcesDialog.show(context, baseUrl, extractedParts), - child: const Text( - 'RESOURCES', - style: TextStyle( - color: Colors.grey, - fontWeight: FontWeight.bold, - fontSize: 16, + child: MarkdownTooltip( + message: resourcesButtonTooltip(_appName), + child: TextButton( + onPressed: () => + ResourcesDialog.show(context, baseUrl, extractedParts), + child: const Text( + 'RESOURCES', + style: TextStyle( + color: Colors.grey, + fontWeight: FontWeight.bold, + fontSize: 16, + ), ), ), ), ), + const SizedBox(width: 16), FocusTraversalOrder( order: const NumericFocusOrder(5), - child: TextButton( - onPressed: () async => await logoutPopup(context, widget.child), - child: const Text( - 'LOGOUT', - style: TextStyle( - color: Colors.grey, - fontWeight: FontWeight.bold, - fontSize: 16, + child: MarkdownTooltip( + message: logoutButtonTooltip(_appName), + child: TextButton( + onPressed: () async => await logoutPopup(context, widget.child), + child: const Text( + 'LOGOUT', + style: TextStyle( + color: Colors.grey, + fontWeight: FontWeight.bold, + fontSize: 16, + ), ), ), ), diff --git a/lib/src/screens/initial_setup_widgets/initial_setup_welcome.dart b/lib/src/screens/initial_setup_widgets/initial_setup_welcome.dart index fe44f05..6fd0008 100644 --- a/lib/src/screens/initial_setup_widgets/initial_setup_welcome.dart +++ b/lib/src/screens/initial_setup_widgets/initial_setup_welcome.dart @@ -46,9 +46,12 @@ import 'package:solidui/src/widgets/build_message_container.dart'; /// A widget displaying an alert for the user noting that they have probably a /// newly created Solid Pod or their App's Pod is missing resources. /// -/// The widget will inform the user about creating/ re-creating these recources. +/// The widget will inform the user about creating/ re-creating these resources. +/// +/// The [appName] parameter is used to display the actual app name in the +/// message instead of a generic reference. -SizedBox initialSetupWelcome(BuildContext context) { +SizedBox initialSetupWelcome(BuildContext context, String appName) { return SizedBox( child: Padding( padding: const EdgeInsets.all(30.0), @@ -87,7 +90,7 @@ SizedBox initialSetupWelcome(BuildContext context) { context, 'warning', '', // No title for the message box. - initialStructureMsg, + initialStructureMsg(appName), ), ), ],