From 27398cf5c3f786ae4e98c387d8f48b4168169e5f Mon Sep 17 00:00:00 2001 From: Frederik Feichtmeier Date: Tue, 14 Jun 2022 14:02:37 +0200 Subject: [PATCH] SnapDialog content: use always the same width to avoid size jumping (#32) --- lib/l10n/app_en.arb | 4 +- lib/store_app/common/constants.dart | 1 + .../common/snap_channel_expandable.dart | 94 ++++++++++++------- .../common/snap_connections_settings.dart | 45 +++++++++ lib/store_app/common/snap_content.dart | 71 +++++++------- lib/store_app/common/snap_dialog.dart | 33 +++---- .../common/snap_installation_controls.dart | 3 +- lib/store_app/common/snap_page_header.dart | 33 ------- pubspec.lock | 8 +- 9 files changed, 160 insertions(+), 132 deletions(-) create mode 100644 lib/store_app/common/constants.dart create mode 100644 lib/store_app/common/snap_connections_settings.dart diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb index c62d993ff..0706a26f4 100644 --- a/lib/l10n/app_en.arb +++ b/lib/l10n/app_en.arb @@ -48,6 +48,6 @@ "updateAvailable": "Update available", "size": "Size", "name": "Name", - "sortBy": "Sort by" - + "sortBy": "Sort by", + "media": "Media" } \ No newline at end of file diff --git a/lib/store_app/common/constants.dart b/lib/store_app/common/constants.dart new file mode 100644 index 000000000..bfdc22db0 --- /dev/null +++ b/lib/store_app/common/constants.dart @@ -0,0 +1 @@ +const dialogWidth = 400.0; diff --git a/lib/store_app/common/snap_channel_expandable.dart b/lib/store_app/common/snap_channel_expandable.dart index cf91ba373..8c0c54d32 100644 --- a/lib/store_app/common/snap_channel_expandable.dart +++ b/lib/store_app/common/snap_channel_expandable.dart @@ -12,41 +12,65 @@ class SnapChannelExpandable extends StatelessWidget { Widget build(BuildContext context) { final model = context.watch(); - return YaruExpandable( - isExpanded: true, - expandIcon: const Icon(YaruIcons.pan_end), - header: DropdownButton( - icon: const Icon(YaruIcons.pan_down), - borderRadius: BorderRadius.circular(10), - elevation: 1, - value: model.channelToBeInstalled, - items: [ - for (final entry in model.selectableChannels.entries) - DropdownMenuItem( - value: entry.key, - child: Text( - '${context.l10n.channel}: ${entry.key}', - overflow: TextOverflow.ellipsis, - style: Theme.of(context).textTheme.bodyMedium, - ), + return model.selectableChannels.isEmpty + ? Row( + children: [ + YaruRoundIconButton( + child: const Icon(YaruIcons.refresh), + onTap: () => model.init(), + ) + ], + ) + : YaruExpandable( + isExpanded: true, + expandIcon: const Icon(YaruIcons.pan_end), + header: DropdownButton( + icon: const Icon(YaruIcons.pan_down), + borderRadius: BorderRadius.circular(10), + elevation: 1, + value: model.channelToBeInstalled, + items: [ + for (final entry in model.selectableChannels.entries) + DropdownMenuItem( + value: entry.key, + child: Text( + '${context.l10n.channel}: ${entry.key}', + overflow: TextOverflow.ellipsis, + style: Theme.of(context).textTheme.bodyMedium, + ), + ), + ], + onChanged: model.appChangeInProgress + ? null + : (v) => model.channelToBeInstalled = v!, ), - ], - onChanged: model.appChangeInProgress - ? null - : (v) => model.channelToBeInstalled = v!, - ), - child: Column( - children: [ - YaruSingleInfoRow( - infoLabel: context.l10n.version, - infoValue: model.selectedChannelVersion ?? '', - ), - YaruSingleInfoRow( - infoLabel: context.l10n.lastUpdated, - infoValue: model.releasedAt, - ), - ], - ), - ); + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Padding( + padding: const EdgeInsets.all(8.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text(context.l10n.version), + SelectableText(model.selectedChannelVersion ?? ''), + ], + ), + ), + Padding( + padding: const EdgeInsets.all(8.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text(context.l10n.lastUpdated), + SelectableText(model.releasedAt), + ], + ), + ), + ], + ), + ); } } diff --git a/lib/store_app/common/snap_connections_settings.dart b/lib/store_app/common/snap_connections_settings.dart new file mode 100644 index 000000000..0248724df --- /dev/null +++ b/lib/store_app/common/snap_connections_settings.dart @@ -0,0 +1,45 @@ +import 'package:flutter/material.dart'; +import 'package:snapd/snapd.dart'; +import 'package:software/l10n/l10n.dart'; +import 'package:yaru_icons/yaru_icons.dart'; +import 'package:yaru_widgets/yaru_widgets.dart'; + +class SnapConnectionsSettings extends StatelessWidget { + const SnapConnectionsSettings({super.key, required this.connections}); + + final Map connections; + + @override + Widget build(BuildContext context) { + return Padding( + padding: const EdgeInsets.only(bottom: 8), + child: YaruExpandable( + isExpanded: true, + header: Text( + context.l10n.connections, + style: const TextStyle(fontWeight: FontWeight.w500), + ), + expandIcon: const Icon(YaruIcons.pan_end), + child: Column( + children: [ + if (connections.isNotEmpty) + for (final connection in connections.entries) + Padding( + padding: const EdgeInsets.all(8.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text(connection.key), + Switch( + value: true, + onChanged: (v) {}, + ) + ], + ), + ), + ], + ), + ), + ); + } +} diff --git a/lib/store_app/common/snap_content.dart b/lib/store_app/common/snap_content.dart index 806da0621..bf07eb8a4 100644 --- a/lib/store_app/common/snap_content.dart +++ b/lib/store_app/common/snap_content.dart @@ -26,46 +26,38 @@ class SnapContent extends StatelessWidget { mainAxisSize: MainAxisSize.min, children: [ if (media.isNotEmpty) - YaruExpandable( - expandIcon: const Icon(YaruIcons.pan_end), - isExpanded: true, - header: const SizedBox( - width: 395, - child: Divider(), - ), - child: Padding( - padding: const EdgeInsets.symmetric(vertical: 8.0), - child: YaruCarousel( - nextIcon: const Icon(YaruIcons.go_next), - previousIcon: const Icon(YaruIcons.go_previous), - navigationControls: media.length > 1, - viewportFraction: 1, - height: 250, - children: [ - for (final image in media) - InkWell( - borderRadius: BorderRadius.circular(10), - onTap: () => showDialog( - context: context, - builder: (context) => SimpleDialog( - children: [ - InkWell( - onTap: () => Navigator.of(context).pop(), - child: SafeImage( - url: image.url, - fit: BoxFit.contain, - filterQuality: FilterQuality.medium, - ), - ) - ], - ), - ), - child: SafeImage( - url: image.url, + Padding( + padding: const EdgeInsets.symmetric(vertical: 8.0), + child: YaruCarousel( + nextIcon: const Icon(YaruIcons.go_next), + previousIcon: const Icon(YaruIcons.go_previous), + navigationControls: media.length > 1, + viewportFraction: 1, + height: 250, + children: [ + for (final image in media) + InkWell( + borderRadius: BorderRadius.circular(10), + onTap: () => showDialog( + context: context, + builder: (context) => SimpleDialog( + children: [ + InkWell( + onTap: () => Navigator.of(context).pop(), + child: SafeImage( + url: image.url, + fit: BoxFit.contain, + filterQuality: FilterQuality.medium, + ), + ) + ], ), - ) - ], - ), + ), + child: SafeImage( + url: image.url, + ), + ) + ], ), ), const SizedBox( @@ -94,6 +86,7 @@ class SnapContent extends StatelessWidget { YaruExpandable( header: Text( context.l10n.description, + style: const TextStyle(fontWeight: FontWeight.w500), ), expandIcon: const Icon(YaruIcons.pan_end), child: Text( diff --git a/lib/store_app/common/snap_dialog.dart b/lib/store_app/common/snap_dialog.dart index c7f977dc8..c97b05869 100644 --- a/lib/store_app/common/snap_dialog.dart +++ b/lib/store_app/common/snap_dialog.dart @@ -2,7 +2,9 @@ import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:snapd/snapd.dart'; import 'package:software/services/app_change_service.dart'; +import 'package:software/store_app/common/constants.dart'; import 'package:software/store_app/common/snap_channel_expandable.dart'; +import 'package:software/store_app/common/snap_connections_settings.dart'; import 'package:software/store_app/common/snap_content.dart'; import 'package:software/store_app/common/snap_installation_controls.dart'; import 'package:software/store_app/common/snap_model.dart'; @@ -11,8 +13,6 @@ import 'package:ubuntu_service/ubuntu_service.dart'; import 'package:yaru_icons/yaru_icons.dart'; import 'package:yaru_widgets/yaru_widgets.dart'; -const headerStyle = TextStyle(fontWeight: FontWeight.w500, fontSize: 14); - class SnapDialog extends StatefulWidget { const SnapDialog({ Key? key, @@ -54,25 +54,22 @@ class _SnapDialogState extends State { right: 25, ), titlePadding: EdgeInsets.zero, - title: const YaruDialogTitle( - mainAxisAlignment: MainAxisAlignment.center, - closeIconData: YaruIcons.window_close, - titleWidget: SnapPageHeader(), + title: const SizedBox( + width: dialogWidth, + child: YaruDialogTitle( + mainAxisAlignment: MainAxisAlignment.center, + closeIconData: YaruIcons.window_close, + titleWidget: SnapPageHeader(), + ), ), content: model.connectionsExpanded && model.connections.isNotEmpty - ? ConnectionsSettings(connections: model.connections) - : const SnapContent(), + ? SnapConnectionsSettings(connections: model.connections) + : const SizedBox(width: dialogWidth, child: SnapContent()), actions: [ - if (model.selectableChannels.isEmpty) - YaruRoundIconButton( - child: const Icon(YaruIcons.refresh), - onTap: () => model.init(), - ) - else - const Padding( - padding: EdgeInsets.only(bottom: 20), - child: SnapChannelExpandable(), - ), + const Padding( + padding: EdgeInsets.only(bottom: 20), + child: SizedBox(child: SnapChannelExpandable()), + ), if (model.appChangeInProgress) const SizedBox( height: 25, diff --git a/lib/store_app/common/snap_installation_controls.dart b/lib/store_app/common/snap_installation_controls.dart index c25517f57..52681a38d 100644 --- a/lib/store_app/common/snap_installation_controls.dart +++ b/lib/store_app/common/snap_installation_controls.dart @@ -20,7 +20,8 @@ class SnapInstallationControls extends StatelessWidget { ); } else { return Row( - mainAxisSize: MainAxisSize.min, + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.end, children: [ if (model.snapIsInstalled) OutlinedButton( diff --git a/lib/store_app/common/snap_page_header.dart b/lib/store_app/common/snap_page_header.dart index 327f668f4..6194bcb40 100644 --- a/lib/store_app/common/snap_page_header.dart +++ b/lib/store_app/common/snap_page_header.dart @@ -1,6 +1,5 @@ import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; -import 'package:snapd/snapd.dart'; import 'package:software/l10n/l10n.dart'; import 'package:software/store_app/common/safe_image.dart'; import 'package:software/store_app/common/snap_model.dart'; @@ -181,35 +180,3 @@ class SnapPageHeader extends StatelessWidget { ); } } - -class ConnectionsSettings extends StatelessWidget { - const ConnectionsSettings({super.key, required this.connections}); - - final Map connections; - - @override - Widget build(BuildContext context) { - return Padding( - padding: const EdgeInsets.only(bottom: 8), - child: YaruExpandable( - isExpanded: true, - header: Text( - context.l10n.connections, - style: const TextStyle(fontWeight: FontWeight.w500), - ), - expandIcon: const Icon(YaruIcons.pan_end), - child: Column( - children: [ - if (connections.isNotEmpty) - for (final connection in connections.entries) - YaruSwitchRow( - trailingWidget: Text(connection.key), - value: true, - onChanged: (v) {}, - ), - ], - ), - ), - ); - } -} diff --git a/pubspec.lock b/pubspec.lock index 8b9c9dd39..d95708be9 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -63,7 +63,7 @@ packages: name: connectivity_plus url: "https://pub.dartlang.org" source: hosted - version: "2.3.3" + version: "2.3.4" connectivity_plus_linux: dependency: transitive description: @@ -91,7 +91,7 @@ packages: name: connectivity_plus_web url: "https://pub.dartlang.org" source: hosted - version: "1.2.1" + version: "1.2.2" connectivity_plus_windows: dependency: transitive description: @@ -425,7 +425,7 @@ packages: description: path: "." ref: HEAD - resolved-ref: "9a819ec5c9229052fd32af9f44d290f06d971188" + resolved-ref: e0576c7d57d7adf17146d12e2187feca301f2b97 url: "https://github.com/canonical/snapd.dart" source: git version: "0.4.2" @@ -622,7 +622,7 @@ packages: description: path: "." ref: HEAD - resolved-ref: a04cdbb60bea7828ec02f8b14d5c700b5738ca35 + resolved-ref: f33a5d5a9d625e2150fa3b9a4992f0960bdf4dd7 url: "https://github.com/ubuntu/yaru_widgets.dart" source: git version: "1.0.13"