SnapDialog content: use always the same width to avoid size jumping (#32

)
ubuntu · Jun 14, 2022 · 27398cf · 27398cf
1 parent e272631
commit 27398cf
Show file tree

Hide file tree

Showing 9 changed files with 160 additions and 132 deletions.
diff --git 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"
 } 
diff --git a/lib/store_app/common/constants.dart 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
@@ -12,41 +12,65 @@ class SnapChannelExpandable extends StatelessWidget {
   Widget build(BuildContext context) {
     final model = context.watch<SnapModel>();
 
-    return YaruExpandable(
-      isExpanded: true,
-      expandIcon: const Icon(YaruIcons.pan_end),
-      header: DropdownButton<String>(
-        icon: const Icon(YaruIcons.pan_down),
-        borderRadius: BorderRadius.circular(10),
-        elevation: 1,
-        value: model.channelToBeInstalled,
-        items: [
-          for (final entry in model.selectableChannels.entries)
-            DropdownMenuItem<String>(
-              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<String>(
+              icon: const Icon(YaruIcons.pan_down),
+              borderRadius: BorderRadius.circular(10),
+              elevation: 1,
+              value: model.channelToBeInstalled,
+              items: [
+                for (final entry in model.selectableChannels.entries)
+                  DropdownMenuItem<String>(
+                    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
@@ -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<String, SnapConnection> 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
@@ -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
@@ -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<SnapDialog> {
           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
@@ -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
@@ -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<String, SnapConnection> 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
@@ -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"