* [pve-devel] [PATCH proxmox_login_manager 2/4] fix: ui: add more padding around the form in portrait mode
2025-11-04 17:38 [pve-devel] [PATCH proxmox_login_manager 0/4] fix #6983: ui: make cosmetic changes inside the login screen Shan Shaji
2025-11-04 17:38 ` [pve-devel] [PATCH proxmox_login_manager 1/4] fix: ui: disable continue button by default in login form Shan Shaji
@ 2025-11-04 17:38 ` Shan Shaji
2025-11-04 17:38 ` [pve-devel] [PATCH proxmox_login_manager 3/4] fix: ui: remove app bar and stack the close button on body Shan Shaji
` (2 subsequent siblings)
4 siblings, 0 replies; 6+ messages in thread
From: Shan Shaji @ 2025-11-04 17:38 UTC (permalink / raw)
To: pve-devel
portrait mode the margins around the "Origin" field are bit tight. To
fix it, if the orientation is portrait set the horizontal padding to
`12` and in landscape it will be `8`.
The helper text was getting truncated after adding the padding. Inorder
to fix that used `Text` widget.
Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
---
lib/proxmox_login_form.dart | 18 ++++++++++++------
1 file changed, 12 insertions(+), 6 deletions(-)
diff --git a/lib/proxmox_login_form.dart b/lib/proxmox_login_form.dart
index 9e95f27..c3781db 100644
--- a/lib/proxmox_login_form.dart
+++ b/lib/proxmox_login_form.dart
@@ -72,11 +72,12 @@ class _ProxmoxLoginFormState extends State<ProxmoxLoginForm> {
if (widget.accessDomains == null) {
return TextFormField(
decoration: const InputDecoration(
- icon: Icon(Icons.vpn_lock),
- labelText: 'Origin',
- hintText: 'e.g. 192.168.1.2',
- helperText:
- 'Protocol (https) and default port (8006 or 443) implied'),
+ icon: Icon(Icons.vpn_lock),
+ labelText: 'Origin',
+ hintText: 'e.g. 192.168.1.2',
+ helper:
+ Text('Protocol (https) and default port (8006 or 443) implied'),
+ ),
textInputAction: TextInputAction.next,
controller: widget.originController,
validator: widget.originValidator,
@@ -322,7 +323,12 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
height: MediaQuery.of(context).size.height),
child: SafeArea(
child: Padding(
- padding: const EdgeInsets.all(8.0),
+ padding: EdgeInsets.symmetric(
+ horizontal: MediaQuery.maybeOrientationOf(context) ==
+ Orientation.portrait
+ ? 12
+ : 8,
+ ),
child: FutureBuilder<List<PveAccessDomainModel?>?>(
future: _accessDomains,
builder: (context, snapshot) {
--
2.50.1
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 6+ messages in thread* [pve-devel] [PATCH proxmox_login_manager 3/4] fix: ui: remove app bar and stack the close button on body
2025-11-04 17:38 [pve-devel] [PATCH proxmox_login_manager 0/4] fix #6983: ui: make cosmetic changes inside the login screen Shan Shaji
2025-11-04 17:38 ` [pve-devel] [PATCH proxmox_login_manager 1/4] fix: ui: disable continue button by default in login form Shan Shaji
2025-11-04 17:38 ` [pve-devel] [PATCH proxmox_login_manager 2/4] fix: ui: add more padding around the form in portrait mode Shan Shaji
@ 2025-11-04 17:38 ` Shan Shaji
2025-11-04 17:38 ` [pve-devel] [PATCH proxmox_login_manager 4/4] cleanup: run dart format command to fix formatting Shan Shaji
2025-11-11 14:05 ` [pve-devel] [PATCH proxmox_login_manager 0/4] fix #6983: ui: make cosmetic changes inside the login screen Shan Shaji
4 siblings, 0 replies; 6+ messages in thread
From: Shan Shaji @ 2025-11-04 17:38 UTC (permalink / raw)
To: pve-devel
In landscape and portrait mode when adding a remote once the "Origin"
field is selected, the top bar becomes a slightly different shade of
blue. This occurs after the keyboard appears and the entire body
begins to scroll.
To fix this, the app bar was removed and the close button was
stacked within the body. The height was also constrained to
avoid system intrusion areas otherwise, the Continue button
would not be visible
Additionally, in landscape mode, the logo caused render
flex issues because the Image widget was placed inside a
Column and the logo was trying to take more height than
the available height. This was fixed by removing the column
and used `Align` widget to center the logo.
Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
---
lib/proxmox_login_form.dart | 43 ++++++++++++++++---------------------
1 file changed, 19 insertions(+), 24 deletions(-)
diff --git a/lib/proxmox_login_form.dart b/lib/proxmox_login_form.dart
index c3781db..30f2ef8 100644
--- a/lib/proxmox_login_form.dart
+++ b/lib/proxmox_login_form.dart
@@ -305,24 +305,17 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
),
child: Scaffold(
backgroundColor: ProxmoxColors.supportBlue,
- extendBodyBehindAppBar: true,
- appBar: AppBar(
- elevation: 0.0,
- backgroundColor: Colors.transparent,
- leading: IconButton(
- icon: const Icon(Icons.close),
- tooltip: "Close",
- onPressed: () => Navigator.of(context).pop(),
- ),
- ),
- body: Stack(
+ body: SafeArea(
+ child: Stack(
children: [
SingleChildScrollView(
child: ConstrainedBox(
constraints: BoxConstraints.tightFor(
- height: MediaQuery.of(context).size.height),
- child: SafeArea(
- child: Padding(
+ height: MediaQuery.sizeOf(context).height -
+ MediaQuery.viewPaddingOf(context).bottom -
+ MediaQuery.viewPaddingOf(context).top,
+ ),
+ child: Padding(
padding: EdgeInsets.symmetric(
horizontal: MediaQuery.maybeOrientationOf(context) ==
Orientation.portrait
@@ -344,15 +337,13 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- Image.asset(
- 'assets/images/proxmox_logo_symbol_wordmark.png',
- package: 'proxmox_login_manager',
- ),
- ],
- ),
+ child: Align(
+ alignment: Alignment.center,
+ child: Image.asset(
+ 'assets/images/proxmox_logo_symbol_wordmark.png',
+ package: 'proxmox_login_manager',
+ ),
+ )
),
ProxmoxLoginForm(
originController: _originController,
@@ -447,12 +438,16 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
),
),
),
+ IconButton(
+ icon: const Icon(Icons.close),
+ tooltip: "Close",
+ onPressed: () => Navigator.of(context).pop(),
),
if (_progressModel.inProgress > 0)
ProxmoxProgressOverlay(message: _progressModel.message),
],
),
- ),
+ )),
);
}
--
2.50.1
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 6+ messages in thread* [pve-devel] [PATCH proxmox_login_manager 4/4] cleanup: run dart format command to fix formatting
2025-11-04 17:38 [pve-devel] [PATCH proxmox_login_manager 0/4] fix #6983: ui: make cosmetic changes inside the login screen Shan Shaji
` (2 preceding siblings ...)
2025-11-04 17:38 ` [pve-devel] [PATCH proxmox_login_manager 3/4] fix: ui: remove app bar and stack the close button on body Shan Shaji
@ 2025-11-04 17:38 ` Shan Shaji
2025-11-11 14:05 ` [pve-devel] [PATCH proxmox_login_manager 0/4] fix #6983: ui: make cosmetic changes inside the login screen Shan Shaji
4 siblings, 0 replies; 6+ messages in thread
From: Shan Shaji @ 2025-11-04 17:38 UTC (permalink / raw)
To: pve-devel
Signed-off-by: Shan Shaji <s.shaji@proxmox.com>
---
lib/proxmox_login_form.dart | 255 ++++++++++++++++++------------------
1 file changed, 128 insertions(+), 127 deletions(-)
diff --git a/lib/proxmox_login_form.dart b/lib/proxmox_login_form.dart
index 30f2ef8..67febab 100644
--- a/lib/proxmox_login_form.dart
+++ b/lib/proxmox_login_form.dart
@@ -304,150 +304,151 @@ class _ProxmoxLoginPageState extends State<ProxmoxLoginPage> {
),
),
child: Scaffold(
- backgroundColor: ProxmoxColors.supportBlue,
- body: SafeArea(
- child: Stack(
- children: [
- SingleChildScrollView(
- child: ConstrainedBox(
- constraints: BoxConstraints.tightFor(
- height: MediaQuery.sizeOf(context).height -
- MediaQuery.viewPaddingOf(context).bottom -
- MediaQuery.viewPaddingOf(context).top,
- ),
- child: Padding(
- padding: EdgeInsets.symmetric(
- horizontal: MediaQuery.maybeOrientationOf(context) ==
- Orientation.portrait
- ? 12
- : 8,
+ backgroundColor: ProxmoxColors.supportBlue,
+ body: SafeArea(
+ child: Stack(
+ children: [
+ SingleChildScrollView(
+ child: ConstrainedBox(
+ constraints: BoxConstraints.tightFor(
+ height: MediaQuery.sizeOf(context).height -
+ MediaQuery.viewPaddingOf(context).bottom -
+ MediaQuery.viewPaddingOf(context).top,
),
- child: FutureBuilder<List<PveAccessDomainModel?>?>(
- future: _accessDomains,
- builder: (context, snapshot) {
- return Form(
- key: _formKey,
- onChanged: () {
- setState(() {
- _submitButtonEnabled =
- _formKey.currentState!.validate();
- });
- },
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- Expanded(
- child: Align(
+ child: Padding(
+ padding: EdgeInsets.symmetric(
+ horizontal: MediaQuery.maybeOrientationOf(context) ==
+ Orientation.portrait
+ ? 12
+ : 8,
+ ),
+ child: FutureBuilder<List<PveAccessDomainModel?>?>(
+ future: _accessDomains,
+ builder: (context, snapshot) {
+ return Form(
+ key: _formKey,
+ onChanged: () {
+ setState(() {
+ _submitButtonEnabled =
+ _formKey.currentState!.validate();
+ });
+ },
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Expanded(
+ child: Align(
alignment: Alignment.center,
child: Image.asset(
'assets/images/proxmox_logo_symbol_wordmark.png',
package: 'proxmox_login_manager',
),
- )
- ),
- ProxmoxLoginForm(
- originController: _originController,
- originValidator: (value) {
- if (value == null || value.isEmpty) {
- return 'Please enter origin';
- }
- try {
- normalizeUrl(value);
- return null;
- } on FormatException catch (_) {
- return 'Invalid URI';
- } on Exception catch (e) {
- return 'Invalid URI: $e';
- }
- },
- usernameController: _usernameController,
- passwordController: _passwordController,
- accessDomains: snapshot.data,
- selectedDomain: _selectedDomain,
- onSavePasswordChanged: (value) {
- _savePasswordCB = value;
- },
- canSavePassword: _canSavePassword,
- passwordSaved: widget.password != null,
- onDomainChanged: (value) {
- setState(() {
- _selectedDomain = value;
- });
- },
- onOriginSubmitted: () {
- final isValid =
- _formKey.currentState!.validate();
- setState(() {
- _submitButtonEnabled = isValid;
- });
- if (isValid) {
+ )),
+ ProxmoxLoginForm(
+ originController: _originController,
+ originValidator: (value) {
+ if (value == null || value.isEmpty) {
+ return 'Please enter origin';
+ }
+ try {
+ normalizeUrl(value);
+ return null;
+ } on FormatException catch (_) {
+ return 'Invalid URI';
+ } on Exception catch (e) {
+ return 'Invalid URI: $e';
+ }
+ },
+ usernameController: _usernameController,
+ passwordController: _passwordController,
+ accessDomains: snapshot.data,
+ selectedDomain: _selectedDomain,
+ onSavePasswordChanged: (value) {
+ _savePasswordCB = value;
+ },
+ canSavePassword: _canSavePassword,
+ passwordSaved: widget.password != null,
+ onDomainChanged: (value) {
setState(() {
- _accessDomains = _getAccessDomains();
+ _selectedDomain = value;
});
- }
- },
- onPasswordSubmitted: _submitButtonEnabled
- ? () {
- final isValid =
- _formKey.currentState!.validate();
- setState(() {
- _submitButtonEnabled = isValid;
- });
- if (isValid) {
- _onLoginButtonPressed();
+ },
+ onOriginSubmitted: () {
+ final isValid =
+ _formKey.currentState!.validate();
+ setState(() {
+ _submitButtonEnabled = isValid;
+ });
+ if (isValid) {
+ setState(() {
+ _accessDomains = _getAccessDomains();
+ });
+ }
+ },
+ onPasswordSubmitted: _submitButtonEnabled
+ ? () {
+ final isValid = _formKey
+ .currentState!
+ .validate();
+ setState(() {
+ _submitButtonEnabled = isValid;
+ });
+ if (isValid) {
+ _onLoginButtonPressed();
+ }
}
- }
- : null,
- ),
- Expanded(
- child: Align(
- alignment: Alignment.bottomCenter,
- child: SizedBox(
- width: MediaQuery.of(context).size.width,
- child: TextButton(
- onPressed: _submitButtonEnabled
- ? () {
- final isValid = _formKey
- .currentState!
- .validate();
- setState(() {
- _submitButtonEnabled =
- isValid;
- });
- if (isValid) {
- if (snapshot.hasData) {
- _onLoginButtonPressed();
- } else {
- setState(() {
- _accessDomains =
- _getAccessDomains();
- });
+ : null,
+ ),
+ Expanded(
+ child: Align(
+ alignment: Alignment.bottomCenter,
+ child: SizedBox(
+ width:
+ MediaQuery.of(context).size.width,
+ child: TextButton(
+ onPressed: _submitButtonEnabled
+ ? () {
+ final isValid = _formKey
+ .currentState!
+ .validate();
+ setState(() {
+ _submitButtonEnabled =
+ isValid;
+ });
+ if (isValid) {
+ if (snapshot.hasData) {
+ _onLoginButtonPressed();
+ } else {
+ setState(() {
+ _accessDomains =
+ _getAccessDomains();
+ });
+ }
}
}
- }
- : null,
- child: const Text('Continue'),
+ : null,
+ child: const Text('Continue'),
+ ),
),
),
),
- ),
- ],
- ),
- );
- }),
+ ],
+ ),
+ );
+ }),
+ ),
),
),
- ),
- IconButton(
- icon: const Icon(Icons.close),
- tooltip: "Close",
- onPressed: () => Navigator.of(context).pop(),
+ IconButton(
+ icon: const Icon(Icons.close),
+ tooltip: "Close",
+ onPressed: () => Navigator.of(context).pop(),
+ ),
+ if (_progressModel.inProgress > 0)
+ ProxmoxProgressOverlay(message: _progressModel.message),
+ ],
),
- if (_progressModel.inProgress > 0)
- ProxmoxProgressOverlay(message: _progressModel.message),
- ],
- ),
- )),
+ )),
);
}
--
2.50.1
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 6+ messages in thread