From 3620fcb5b08fca1875c376100175f13f85c080bd Mon Sep 17 00:00:00 2001 From: Rico Berger Date: Sat, 8 Jun 2024 18:30:04 +0200 Subject: [PATCH] [core] Wrap Actions in `SafeArea` Widget (#172) With this commit we are wrapping all action widgets in a `SafeArea` widget, to improve the alignment of the actions. --- .../item/details/utils/item_videos.dart | 84 ++++++------ .../item/preview/utils/item_actions.dart | 126 +++++++++--------- .../utils/settings_accounts_actions.dart | 102 +++++++------- .../profile/settings_profile_signout.dart | 102 +++++++------- 4 files changed, 211 insertions(+), 203 deletions(-) diff --git a/app/lib/widgets/item/details/utils/item_videos.dart b/app/lib/widgets/item/details/utils/item_videos.dart index 655bf43..3e3a629 100644 --- a/app/lib/widgets/item/details/utils/item_videos.dart +++ b/app/lib/widgets/item/details/utils/item_videos.dart @@ -94,28 +94,41 @@ class _ItemVideoPlayerState extends State { maxWidth: Constants.centeredFormMaxWidth, ), builder: (BuildContext context) { - return Container( - margin: const EdgeInsets.all( - Constants.spacingMiddle, - ), - padding: const EdgeInsets.only( - left: Constants.spacingMiddle, - right: Constants.spacingMiddle, - ), - decoration: const BoxDecoration( - color: Constants.background, - borderRadius: BorderRadius.all( - Radius.circular(Constants.spacingMiddle), + return SafeArea( + child: Container( + margin: const EdgeInsets.all( + Constants.spacingMiddle, ), - ), - child: Wrap( - alignment: WrapAlignment.center, - crossAxisAlignment: WrapCrossAlignment.center, - children: widget.qualities! - .asMap() - .entries - .map((quality) { - if (quality.key == widget.qualities!.length - 1) { + padding: const EdgeInsets.only( + left: Constants.spacingMiddle, + right: Constants.spacingMiddle, + ), + decoration: const BoxDecoration( + color: Constants.background, + borderRadius: BorderRadius.all( + Radius.circular(Constants.spacingMiddle), + ), + ), + child: Wrap( + alignment: WrapAlignment.center, + crossAxisAlignment: WrapCrossAlignment.center, + children: widget.qualities! + .asMap() + .entries + .map((quality) { + if (quality.key == widget.qualities!.length - 1) { + return [ + ListTile( + mouseCursor: SystemMouseCursors.click, + onTap: () async { + Navigator.of(context).pop(); + await _playerOpen(quality.value.video); + }, + title: Text(quality.value.quality), + ), + ]; + } + return [ ListTile( mouseCursor: SystemMouseCursors.click, @@ -125,27 +138,16 @@ class _ItemVideoPlayerState extends State { }, title: Text(quality.value.quality), ), + const Divider( + color: Constants.dividerColor, + height: 1, + thickness: 1, + ), ]; - } - - return [ - ListTile( - mouseCursor: SystemMouseCursors.click, - onTap: () async { - Navigator.of(context).pop(); - await _playerOpen(quality.value.video); - }, - title: Text(quality.value.quality), - ), - const Divider( - color: Constants.dividerColor, - height: 1, - thickness: 1, - ), - ]; - }) - .expand((e) => e) - .toList(), + }) + .expand((e) => e) + .toList(), + ), ), ); }, diff --git a/app/lib/widgets/item/preview/utils/item_actions.dart b/app/lib/widgets/item/preview/utils/item_actions.dart index 897f9d8..549ee6f 100644 --- a/app/lib/widgets/item/preview/utils/item_actions.dart +++ b/app/lib/widgets/item/preview/utils/item_actions.dart @@ -185,70 +185,72 @@ class _ItemActionsState extends State { maxWidth: Constants.centeredFormMaxWidth, ), builder: (BuildContext context) { - return Container( - margin: const EdgeInsets.all( - Constants.spacingMiddle, - ), - padding: const EdgeInsets.only( - left: Constants.spacingMiddle, - right: Constants.spacingMiddle, - ), - decoration: const BoxDecoration( - color: Constants.background, - borderRadius: BorderRadius.all( - Radius.circular(Constants.spacingMiddle), + return SafeArea( + child: Container( + margin: const EdgeInsets.all( + Constants.spacingMiddle, ), - ), - child: Wrap( - alignment: WrapAlignment.center, - crossAxisAlignment: WrapCrossAlignment.center, - children: [ - ListTile( - mouseCursor: SystemMouseCursors.click, - onTap: () async { - Navigator.of(context).pop(); - _read(mainContext); - }, - leading: widget.item.isRead - ? const Icon(Icons.visibility_off) - : const Icon(Icons.visibility), - title: widget.item.isRead - ? const Text('Mark as Unread') - : const Text('Mark as Read'), + padding: const EdgeInsets.only( + left: Constants.spacingMiddle, + right: Constants.spacingMiddle, + ), + decoration: const BoxDecoration( + color: Constants.background, + borderRadius: BorderRadius.all( + Radius.circular(Constants.spacingMiddle), ), - const Divider( - color: Constants.dividerColor, - height: 1, - thickness: 1, - ), - ListTile( - mouseCursor: SystemMouseCursors.click, - onTap: () async { - Navigator.of(context).pop(); - _bookmark(mainContext); - }, - leading: widget.item.isBookmarked - ? const Icon(Icons.bookmark) - : const Icon(Icons.bookmark_outline), - title: widget.item.isBookmarked - ? const Text('Remove Bookmark') - : const Text('Add Bookmark'), - ), - const Divider( - color: Constants.dividerColor, - height: 1, - thickness: 1, - ), - ListTile( - mouseCursor: SystemMouseCursors.click, - onTap: () async { - Navigator.of(context).pop(); - _openUrl(); - }, - leading: const Icon(Icons.launch), - title: const Text('Open Link'), - ), - ], + ), + child: Wrap( + alignment: WrapAlignment.center, + crossAxisAlignment: WrapCrossAlignment.center, + children: [ + ListTile( + mouseCursor: SystemMouseCursors.click, + onTap: () async { + Navigator.of(context).pop(); + _read(mainContext); + }, + leading: widget.item.isRead + ? const Icon(Icons.visibility_off) + : const Icon(Icons.visibility), + title: widget.item.isRead + ? const Text('Mark as Unread') + : const Text('Mark as Read'), + ), + const Divider( + color: Constants.dividerColor, + height: 1, + thickness: 1, + ), + ListTile( + mouseCursor: SystemMouseCursors.click, + onTap: () async { + Navigator.of(context).pop(); + _bookmark(mainContext); + }, + leading: widget.item.isBookmarked + ? const Icon(Icons.bookmark) + : const Icon(Icons.bookmark_outline), + title: widget.item.isBookmarked + ? const Text('Remove Bookmark') + : const Text('Add Bookmark'), + ), + const Divider( + color: Constants.dividerColor, + height: 1, + thickness: 1, + ), + ListTile( + mouseCursor: SystemMouseCursors.click, + onTap: () async { + Navigator.of(context).pop(); + _openUrl(); + }, + leading: const Icon(Icons.launch), + title: const Text('Open Link'), + ), + ], + ), ), ); }, diff --git a/app/lib/widgets/settings/accounts/utils/settings_accounts_actions.dart b/app/lib/widgets/settings/accounts/utils/settings_accounts_actions.dart index 4e7bf8a..4395170 100644 --- a/app/lib/widgets/settings/accounts/utils/settings_accounts_actions.dart +++ b/app/lib/widgets/settings/accounts/utils/settings_accounts_actions.dart @@ -18,60 +18,62 @@ class SettingsAccountsActions extends StatelessWidget { @override Widget build(BuildContext context) { - return Container( - margin: const EdgeInsets.all( - Constants.spacingMiddle, - ), - padding: const EdgeInsets.only( - left: Constants.spacingMiddle, - right: Constants.spacingMiddle, - ), - decoration: const BoxDecoration( - color: Constants.background, - borderRadius: BorderRadius.all( - Radius.circular(Constants.spacingMiddle), + return SafeArea( + child: Container( + margin: const EdgeInsets.all( + Constants.spacingMiddle, ), - ), - child: Wrap( - alignment: WrapAlignment.center, - crossAxisAlignment: WrapCrossAlignment.center, - children: [ - ListTile( - mouseCursor: SystemMouseCursors.click, - onTap: () { - Navigator.of(context).pop(); - reconnect(); - }, - leading: const Icon( - Icons.link, - ), - title: const Text( - 'Re-Connect', - ), + padding: const EdgeInsets.only( + left: Constants.spacingMiddle, + right: Constants.spacingMiddle, + ), + decoration: const BoxDecoration( + color: Constants.background, + borderRadius: BorderRadius.all( + Radius.circular(Constants.spacingMiddle), ), - const Divider( - color: Constants.dividerColor, - height: 1, - thickness: 1, - ), - ListTile( - mouseCursor: SystemMouseCursors.click, - onTap: () { - Navigator.of(context).pop(); - delete(); - }, - leading: const Icon( - Icons.delete, - color: Constants.error, - ), - title: const Text( - 'Delete', - style: TextStyle( - color: Constants.error, + ), + child: Wrap( + alignment: WrapAlignment.center, + crossAxisAlignment: WrapCrossAlignment.center, + children: [ + ListTile( + mouseCursor: SystemMouseCursors.click, + onTap: () { + Navigator.of(context).pop(); + reconnect(); + }, + leading: const Icon( + Icons.link, + ), + title: const Text( + 'Re-Connect', ), ), - ), - ], + const Divider( + color: Constants.dividerColor, + height: 1, + thickness: 1, + ), + ListTile( + mouseCursor: SystemMouseCursors.click, + onTap: () { + Navigator.of(context).pop(); + delete(); + }, + leading: const Icon( + Icons.delete, + color: Constants.error, + ), + title: const Text( + 'Delete', + style: TextStyle( + color: Constants.error, + ), + ), + ), + ], + ), ), ); } diff --git a/app/lib/widgets/settings/profile/settings_profile_signout.dart b/app/lib/widgets/settings/profile/settings_profile_signout.dart index bb8cdb5..c2f175e 100644 --- a/app/lib/widgets/settings/profile/settings_profile_signout.dart +++ b/app/lib/widgets/settings/profile/settings_profile_signout.dart @@ -152,60 +152,62 @@ class SettingsProfileSignOutActions extends StatelessWidget { @override Widget build(BuildContext context) { - return Container( - margin: const EdgeInsets.all( - Constants.spacingMiddle, - ), - padding: const EdgeInsets.only( - left: Constants.spacingMiddle, - right: Constants.spacingMiddle, - ), - decoration: const BoxDecoration( - color: Constants.background, - borderRadius: BorderRadius.all( - Radius.circular(Constants.spacingMiddle), + return SafeArea( + child: Container( + margin: const EdgeInsets.all( + Constants.spacingMiddle, ), - ), - child: Wrap( - alignment: WrapAlignment.center, - crossAxisAlignment: WrapCrossAlignment.center, - children: [ - ListTile( - mouseCursor: SystemMouseCursors.click, - onTap: () { - Navigator.of(context).pop(); - signOut(supabase.SignOutScope.local); - }, - leading: const Icon( - Icons.logout, - ), - title: const Text( - 'From current device', - ), + padding: const EdgeInsets.only( + left: Constants.spacingMiddle, + right: Constants.spacingMiddle, + ), + decoration: const BoxDecoration( + color: Constants.background, + borderRadius: BorderRadius.all( + Radius.circular(Constants.spacingMiddle), ), - const Divider( - color: Constants.dividerColor, - height: 1, - thickness: 1, - ), - ListTile( - mouseCursor: SystemMouseCursors.click, - onTap: () { - Navigator.of(context).pop(); - signOut(supabase.SignOutScope.global); - }, - leading: const Icon( - Icons.logout, - color: Constants.error, - ), - title: const Text( - 'From all devices', - style: TextStyle( - color: Constants.error, + ), + child: Wrap( + alignment: WrapAlignment.center, + crossAxisAlignment: WrapCrossAlignment.center, + children: [ + ListTile( + mouseCursor: SystemMouseCursors.click, + onTap: () { + Navigator.of(context).pop(); + signOut(supabase.SignOutScope.local); + }, + leading: const Icon( + Icons.logout, + ), + title: const Text( + 'From current device', ), ), - ), - ], + const Divider( + color: Constants.dividerColor, + height: 1, + thickness: 1, + ), + ListTile( + mouseCursor: SystemMouseCursors.click, + onTap: () { + Navigator.of(context).pop(); + signOut(supabase.SignOutScope.global); + }, + leading: const Icon( + Icons.logout, + color: Constants.error, + ), + title: const Text( + 'From all devices', + style: TextStyle( + color: Constants.error, + ), + ), + ), + ], + ), ), ); }