From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [IPv6:2a01:7e0:0:424::9]) by lore.proxmox.com (Postfix) with ESMTPS id 7285F1FF170 for ; Thu, 15 May 2025 14:19:09 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 581C43110F; Thu, 15 May 2025 14:19:31 +0200 (CEST) From: Shan Shaji To: pve-devel@lists.proxmox.com Date: Thu, 15 May 2025 14:19:24 +0200 Message-Id: <20250515121924.59961-1-s.shaji@proxmox.com> X-Mailer: git-send-email 2.39.5 (Apple Git-154) MIME-Version: 1.0 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.175 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment POISEN_SPAM_PILL 0.1 Meta: its spam POISEN_SPAM_PILL_2 0.1 random spam to be learned in bayes POISEN_SPAM_PILL_4 0.1 random spam to be learned in bayes RCVD_IN_VALIDITY_CERTIFIED_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. RCVD_IN_VALIDITY_RPBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. RCVD_IN_VALIDITY_SAFE_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pve-devel] [PATCH pve_flutter_frontend] fix: ui: app bar text alignment issues in iOS X-BeenThere: pve-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox VE development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Reply-To: Proxmox VE development discussion Content-Type: text/plain; charset="us-ascii" Content-Transfer-Encoding: 7bit Errors-To: pve-devel-bounces@lists.proxmox.com Sender: "pve-devel" By default iOS centers the title in the appbar, which can create a visual inconsistency with the left aligned two line app name. Added a custom `PveAppBar` widget to maintain the design and alignment similliar to android. Also the new widget replaces all other `AppBar` widgets that has the title property specified. Signed-off-by: Shan Shaji --- lib/pages/main_layout_slim.dart | 9 ++--- lib/widgets/pve_app_bar.dart | 47 +++++++++++++++++++++++ lib/widgets/pve_file_selector_widget.dart | 4 +- lib/widgets/pve_guest_backup_widget.dart | 7 ++-- lib/widgets/pve_guest_migrate_widget.dart | 4 +- lib/widgets/pve_lxc_overview.dart | 4 +- lib/widgets/pve_node_overview.dart | 5 +-- lib/widgets/pve_qemu_overview.dart | 5 +-- 8 files changed, 64 insertions(+), 21 deletions(-) create mode 100644 lib/widgets/pve_app_bar.dart diff --git a/lib/pages/main_layout_slim.dart b/lib/pages/main_layout_slim.dart index ac5a6f9..5e1bfa5 100644 --- a/lib/pages/main_layout_slim.dart +++ b/lib/pages/main_layout_slim.dart @@ -23,6 +23,7 @@ import 'package:pve_flutter_frontend/widgets/proxmox_custom_icon.dart'; import 'package:pve_flutter_frontend/widgets/proxmox_gauge_chart.dart'; import 'package:pve_flutter_frontend/widgets/proxmox_heartbeat_indicator.dart'; import 'package:pve_flutter_frontend/widgets/proxmox_stream_builder_widget.dart'; +import 'package:pve_flutter_frontend/widgets/pve_app_bar.dart'; import 'package:pve_flutter_frontend/widgets/pve_file_selector_widget.dart'; import 'package:pve_flutter_frontend/widgets/pve_guest_icon_widget.dart'; import 'package:pve_flutter_frontend/widgets/pve_help_icon_button_widget.dart'; @@ -167,7 +168,7 @@ class MobileDashboard extends StatelessWidget { final cBloc = Provider.of(context); final rBloc = Provider.of(context); return Scaffold( - appBar: AppBar( + appBar: PveAppBar( title: const Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -185,7 +186,6 @@ class MobileDashboard extends StatelessWidget { ) ], ), - elevation: 0.0, leading: const Icon( ProxmoxIcons.proxmox, size: 36, @@ -607,9 +607,8 @@ class MobileResourceOverview extends StatelessWidget { child: ColoredSafeArea( child: Scaffold( endDrawer: _MobileResourceFilterSheet(), - appBar: AppBar( + appBar: PveAppBar( automaticallyImplyLeading: false, - elevation: 0, title: AppbarSearchTextField( onChanged: (filter) => rBloc.events.add(FilterResources(nameFilter: filter)), @@ -1051,7 +1050,7 @@ class MobileAccessManagement extends StatelessWidget { return DefaultTabController( length: 5, child: Scaffold( - appBar: AppBar( + appBar: PveAppBar( title: const Text('Permissions'), //backgroundColor: Colors.transparent, elevation: 0.0, diff --git a/lib/widgets/pve_app_bar.dart b/lib/widgets/pve_app_bar.dart new file mode 100644 index 0000000..de24b96 --- /dev/null +++ b/lib/widgets/pve_app_bar.dart @@ -0,0 +1,47 @@ +import 'package:flutter/material.dart'; + +class PveAppBar extends StatelessWidget implements PreferredSizeWidget { + PveAppBar({ + super.key, + this.title, + this.automaticallyImplyLeading = true, + this.elevation, + this.leading, + this.actions, + this.centerTitle, + this.bottom, + this.toolbarHeight, + this.backgroundColor, + this.iconTheme, + }) : preferredSize = Size.fromHeight((toolbarHeight ?? kToolbarHeight) + + (bottom?.preferredSize.height ?? 0)); + + final Widget? title; + final double? elevation; + final Widget? leading; + final bool automaticallyImplyLeading; + final List? actions; + final bool? centerTitle; + final PreferredSizeWidget? bottom; + final double? toolbarHeight; + final Color? backgroundColor; + final IconThemeData? iconTheme; + + @override + final Size preferredSize; + + @override + Widget build(BuildContext context) { + return AppBar( + centerTitle: centerTitle ?? false, + title: title, + elevation: elevation ?? 0, + leading: leading, + automaticallyImplyLeading: automaticallyImplyLeading, + actions: actions, + bottom: bottom, + backgroundColor: backgroundColor, + iconTheme: iconTheme, + ); + } +} diff --git a/lib/widgets/pve_file_selector_widget.dart b/lib/widgets/pve_file_selector_widget.dart index 9770ff8..f03a021 100644 --- a/lib/widgets/pve_file_selector_widget.dart +++ b/lib/widgets/pve_file_selector_widget.dart @@ -11,6 +11,7 @@ import 'package:pve_flutter_frontend/utils/renderers.dart'; import 'package:pve_flutter_frontend/widgets/proxmox_capacity_indicator.dart'; import 'package:pve_flutter_frontend/widgets/proxmox_stream_builder_widget.dart'; import 'package:pve_flutter_frontend/widgets/proxmox_stream_listener.dart'; +import 'package:pve_flutter_frontend/widgets/pve_app_bar.dart'; class PveFileSelector extends StatefulWidget { final PveFileSelectorBloc? fBloc; @@ -32,8 +33,7 @@ class _PveFileSelectorState extends State { Widget build(BuildContext context) { return ProxmoxLayoutBuilder( builder: (context, layout) => Scaffold( - appBar: AppBar( - elevation: 0, + appBar: PveAppBar( title: const Text("Storage"), ), body: PveFileSelectorWidget( diff --git a/lib/widgets/pve_guest_backup_widget.dart b/lib/widgets/pve_guest_backup_widget.dart index 8aa7e31..7bd38d4 100644 --- a/lib/widgets/pve_guest_backup_widget.dart +++ b/lib/widgets/pve_guest_backup_widget.dart @@ -12,6 +12,7 @@ import 'package:pve_flutter_frontend/utils/utils.dart'; import 'package:pve_flutter_frontend/utils/validators.dart'; import 'package:pve_flutter_frontend/widgets/proxmox_stream_builder_widget.dart'; import 'package:pve_flutter_frontend/widgets/proxmox_stream_listener.dart'; +import 'package:pve_flutter_frontend/widgets/pve_app_bar.dart'; import 'package:pve_flutter_frontend/widgets/pve_file_selector_widget.dart'; import 'package:pve_flutter_frontend/widgets/pve_storage_selector_widget.dart'; @@ -25,8 +26,7 @@ class PveGuestBackupWidget extends StatelessWidget { final sBloc = Provider.of(context); final fBloc = Provider.of(context); return Scaffold( - appBar: AppBar( - elevation: 0, + appBar: PveAppBar( title: Text("Backup $guestID"), ), body: Column( @@ -417,10 +417,9 @@ class _PveBackupFormState extends State { return ScaffoldMessenger( key: _scaffoldKey, child: Scaffold( - appBar: AppBar( + appBar: PveAppBar( iconTheme: const IconThemeData(color: Colors.black), backgroundColor: Colors.transparent, - elevation: 0, title: const Text( "Schedule backup", style: TextStyle(color: Colors.black), diff --git a/lib/widgets/pve_guest_migrate_widget.dart b/lib/widgets/pve_guest_migrate_widget.dart index d467dd7..5ef72eb 100644 --- a/lib/widgets/pve_guest_migrate_widget.dart +++ b/lib/widgets/pve_guest_migrate_widget.dart @@ -8,6 +8,7 @@ import 'package:pve_flutter_frontend/bloc/pve_resource_bloc.dart'; import 'package:pve_flutter_frontend/states/pve_migrate_state.dart'; import 'package:pve_flutter_frontend/states/pve_node_selector_state.dart'; import 'package:pve_flutter_frontend/widgets/proxmox_stream_builder_widget.dart'; +import 'package:pve_flutter_frontend/widgets/pve_app_bar.dart'; import 'package:pve_flutter_frontend/widgets/pve_guest_migration_connector_widget.dart'; import 'package:pve_flutter_frontend/widgets/pve_help_icon_button_widget.dart'; @@ -23,7 +24,7 @@ class PveGuestMigrate extends StatelessWidget { bloc: migrateBloc, builder: (context, migrateState) { return Scaffold( - appBar: AppBar( + appBar: PveAppBar( title: const Text( "Migration", style: TextStyle(color: Colors.white, fontSize: 25), @@ -34,7 +35,6 @@ class PveGuestMigrate extends StatelessWidget { icon: const Icon(Icons.close), onPressed: () => Navigator.of(context).pop(), ), - elevation: 0.0, actions: [ PveHelpIconButton( baseUrl: (Provider.of(context) diff --git a/lib/widgets/pve_lxc_overview.dart b/lib/widgets/pve_lxc_overview.dart index e8e6edb..2af58df 100644 --- a/lib/widgets/pve_lxc_overview.dart +++ b/lib/widgets/pve_lxc_overview.dart @@ -23,6 +23,7 @@ import 'package:pve_flutter_frontend/widgets/colored_safe_area.dart'; import 'package:pve_flutter_frontend/widgets/proxmox_stream_builder_widget.dart'; import 'package:pve_flutter_frontend/widgets/proxmox_stream_listener.dart'; import 'package:pve_flutter_frontend/widgets/pve_action_card_widget.dart'; +import 'package:pve_flutter_frontend/widgets/pve_app_bar.dart'; import 'package:pve_flutter_frontend/widgets/pve_guest_backup_widget.dart'; import 'package:pve_flutter_frontend/widgets/pve_guest_migrate_widget.dart'; import 'package:pve_flutter_frontend/widgets/pve_guest_overview_header.dart'; @@ -72,8 +73,7 @@ class PveLxcOverview extends StatelessWidget { final config = state.config; return ColoredSafeArea( child: Scaffold( - appBar: AppBar( - elevation: 0, + appBar: PveAppBar( title: Text(config?.hostname ?? 'CT $guestID'), ), backgroundColor: Theme.of(context).colorScheme.surfaceContainer, diff --git a/lib/widgets/pve_node_overview.dart b/lib/widgets/pve_node_overview.dart index 85410fb..98767fe 100644 --- a/lib/widgets/pve_node_overview.dart +++ b/lib/widgets/pve_node_overview.dart @@ -9,6 +9,7 @@ import 'package:pve_flutter_frontend/states/pve_task_log_state.dart'; import 'package:pve_flutter_frontend/utils/renderers.dart'; import 'package:pve_flutter_frontend/utils/utils.dart'; import 'package:pve_flutter_frontend/widgets/colored_safe_area.dart'; +import 'package:pve_flutter_frontend/widgets/pve_app_bar.dart'; import 'package:pve_flutter_frontend/widgets/pve_node_power_settings_widget.dart'; import 'package:pve_flutter_frontend/widgets/proxmox_capacity_indicator.dart'; import 'package:pve_flutter_frontend/widgets/proxmox_stream_builder_widget.dart'; @@ -52,9 +53,7 @@ class PveNodeOverview extends StatelessWidget { Theme.of(context).colorScheme.onPrimary.withValues(alpha: 0.75); return ColoredSafeArea( child: Scaffold( - appBar: AppBar( - //backgroundColor: Colors.transparent, - elevation: 0, + appBar: PveAppBar( title: Text( "Node $nodeID", style: diff --git a/lib/widgets/pve_qemu_overview.dart b/lib/widgets/pve_qemu_overview.dart index b019b0f..20bb648 100644 --- a/lib/widgets/pve_qemu_overview.dart +++ b/lib/widgets/pve_qemu_overview.dart @@ -23,6 +23,7 @@ import 'package:pve_flutter_frontend/widgets/colored_safe_area.dart'; import 'package:pve_flutter_frontend/widgets/proxmox_stream_builder_widget.dart'; import 'package:pve_flutter_frontend/widgets/proxmox_stream_listener.dart'; import 'package:pve_flutter_frontend/widgets/pve_action_card_widget.dart'; +import 'package:pve_flutter_frontend/widgets/pve_app_bar.dart'; import 'package:pve_flutter_frontend/widgets/pve_guest_backup_widget.dart'; import 'package:pve_flutter_frontend/widgets/pve_guest_overview_header.dart'; import 'package:pve_flutter_frontend/widgets/pve_guest_migrate_widget.dart'; @@ -73,9 +74,7 @@ class PveQemuOverview extends StatelessWidget { return ColoredSafeArea( child: Scaffold( - appBar: AppBar( - //backgroundColor: Colors.transparent, - elevation: 0, + appBar: PveAppBar( title: Text(config?.name ?? 'VM $guestID'), ), backgroundColor: -- 2.39.5 (Apple Git-154) _______________________________________________ pve-devel mailing list pve-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel