From d459db44c81c589a50c72c4584d22e7f3537807a Mon Sep 17 00:00:00 2001 From: Lukas Klingsbo Date: Thu, 3 Oct 2024 18:37:51 +0200 Subject: [PATCH] fix: Split on two rows when on small form factor --- .../app_center/lib/manage/manage_page.dart | 162 ++++++++++-------- 1 file changed, 91 insertions(+), 71 deletions(-) diff --git a/packages/app_center/lib/manage/manage_page.dart b/packages/app_center/lib/manage/manage_page.dart index 9f34f0bf7..e0105b51e 100644 --- a/packages/app_center/lib/manage/manage_page.dart +++ b/packages/app_center/lib/manage/manage_page.dart @@ -164,83 +164,103 @@ class ManagePage extends ConsumerWidget { SliverList.list( children: [ const SizedBox(height: kSectionSpacing), - Row( - children: [ - Text( - l10n.managePageInstalledAndUpdatedLabel, - style: Theme.of(context) - .textTheme - .titleMedium! - .copyWith(fontWeight: FontWeight.w500), - ), - const SizedBox(width: kSpacing), - Expanded( - child: Row( - mainAxisAlignment: MainAxisAlignment.end, + Builder( + builder: (context) { + final compact = ResponsiveLayout.of(context).type == + ResponsiveLayoutType.small; + return ConstrainedBox( + constraints: const BoxConstraints(maxHeight: 80), + child: Flex( + direction: compact ? Axis.vertical : Axis.horizontal, + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: compact + ? CrossAxisAlignment.start + : CrossAxisAlignment.center, children: [ - Flexible( - child: ConstrainedBox( - constraints: const BoxConstraints(maxWidth: 300), - // TODO: refactor - extract common text field decoration from - // here and the `SearchField` widget - child: TextFormField( - style: Theme.of(context).textTheme.bodyMedium, - strutStyle: kSearchFieldStrutStyle, - textAlignVertical: TextAlignVertical.center, - cursorWidth: 1, - decoration: InputDecoration( - prefixIcon: kSearchFieldPrefixIcon, - prefixIconConstraints: - kSearchFieldIconConstraints, - hintText: l10n.managePageSearchFieldSearchHint, + Text( + l10n.managePageInstalledAndUpdatedLabel, + style: Theme.of(context) + .textTheme + .titleMedium! + .copyWith(fontWeight: FontWeight.w500), + ), + const SizedBox.square(dimension: kSpacing), + Expanded( + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + Flexible( + child: ConstrainedBox( + constraints: + const BoxConstraints(maxWidth: 300), + // TODO: refactor - extract common text field decoration from + // here and the `SearchField` widget + child: TextFormField( + style: + Theme.of(context).textTheme.bodyMedium, + strutStyle: kSearchFieldStrutStyle, + textAlignVertical: TextAlignVertical.center, + cursorWidth: 1, + decoration: InputDecoration( + prefixIcon: kSearchFieldPrefixIcon, + prefixIconConstraints: + kSearchFieldIconConstraints, + hintText: + l10n.managePageSearchFieldSearchHint, + ), + initialValue: + ref.watch(localSnapFilterProvider), + onChanged: (value) => ref + .read(localSnapFilterProvider.notifier) + .state = value, + ), + ), + ), + const SizedBox(width: kSpacing), + Text(l10n.searchPageSortByLabel), + const SizedBox(width: kSpacingSmall), + // TODO: refactor - create proper widget + Consumer( + builder: (context, ref, child) { + final sortOrder = + ref.watch(localSnapSortOrderProvider); + return MenuButtonBuilder( + values: const [ + SnapSortOrder.alphabeticalAsc, + SnapSortOrder.alphabeticalDesc, + SnapSortOrder.installedDateAsc, + SnapSortOrder.installedDateDesc, + SnapSortOrder.installedSizeAsc, + SnapSortOrder.installedSizeDesc, + ], + itemBuilder: (context, sortOrder, child) => + Text(sortOrder.localize(l10n)), + onSelected: (value) => ref + .read( + localSnapSortOrderProvider.notifier, + ) + .state = value, + expanded: false, + child: Text(sortOrder.localize(l10n)), + ); + }, ), - initialValue: ref.watch(localSnapFilterProvider), - onChanged: (value) => ref - .read(localSnapFilterProvider.notifier) - .state = value, - ), + const SizedBox(width: kSpacing), + Text(l10n.managePageShowSystemSnapsLabel), + const SizedBox(width: kSpacingSmall), + YaruCheckbox( + value: ref.watch(showLocalSystemAppsProvider), + onChanged: (value) => ref + .read(showLocalSystemAppsProvider.notifier) + .state = value ?? false, + ), + ], ), ), - const SizedBox(width: kSpacing), - Text(l10n.searchPageSortByLabel), - const SizedBox(width: kSpacingSmall), - // TODO: refactor - create proper widget - Consumer( - builder: (context, ref, child) { - final sortOrder = - ref.watch(localSnapSortOrderProvider); - return MenuButtonBuilder( - values: const [ - SnapSortOrder.alphabeticalAsc, - SnapSortOrder.alphabeticalDesc, - SnapSortOrder.installedDateAsc, - SnapSortOrder.installedDateDesc, - SnapSortOrder.installedSizeAsc, - SnapSortOrder.installedSizeDesc, - ], - itemBuilder: (context, sortOrder, child) => - Text(sortOrder.localize(l10n)), - onSelected: (value) => ref - .read(localSnapSortOrderProvider.notifier) - .state = value, - expanded: false, - child: Text(sortOrder.localize(l10n)), - ); - }, - ), - const SizedBox(width: kSpacing), - Text(l10n.managePageShowSystemSnapsLabel), - const SizedBox(width: kSpacingSmall), - YaruCheckbox( - value: ref.watch(showLocalSystemAppsProvider), - onChanged: (value) => ref - .read(showLocalSystemAppsProvider.notifier) - .state = value ?? false, - ), ], ), - ), - ], + ); + }, ), const SizedBox(height: kMarginLarge), ],