From e703d2415a4697b99b8bb75c0487c40cad247750 Mon Sep 17 00:00:00 2001 From: Lukas Klingsbo Date: Thu, 3 Oct 2024 15:57:07 +0200 Subject: [PATCH 1/3] fix: Move up + make search and sort row smaller --- .../app_center/lib/manage/manage_page.dart | 70 +++++++++---------- 1 file changed, 35 insertions(+), 35 deletions(-) diff --git a/packages/app_center/lib/manage/manage_page.dart b/packages/app_center/lib/manage/manage_page.dart index 444534a47..6b798f34e 100644 --- a/packages/app_center/lib/manage/manage_page.dart +++ b/packages/app_center/lib/manage/manage_page.dart @@ -164,17 +164,18 @@ class ManagePage extends ConsumerWidget { SliverList.list( children: [ const SizedBox(height: kSectionSpacing), - Text( - l10n.managePageInstalledAndUpdatedLabel, - style: Theme.of(context) - .textTheme - .titleMedium! - .copyWith(fontWeight: FontWeight.w500), - ), - const SizedBox(height: 8), Row( children: [ - Expanded( + Text( + l10n.managePageInstalledAndUpdatedLabel, + style: Theme.of(context) + .textTheme + .titleMedium! + .copyWith(fontWeight: FontWeight.w500), + ), + const Spacer(), + ConstrainedBox( + constraints: const BoxConstraints(maxWidth: 300), // TODO: refactor - extract common text field decoration from // here and the `SearchField` widget child: TextFormField( @@ -194,36 +195,35 @@ class ManagePage extends ConsumerWidget { .state = value, ), ), - const SizedBox(width: 16), + const SizedBox(width: kSpacing), Text(l10n.searchPageSortByLabel), - const SizedBox(width: 8), + const SizedBox(width: kSpacingSmall), // TODO: refactor - create proper widget - Expanded( - child: 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, - child: Text(sortOrder.localize(l10n)), - ); - }, - ), + 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: 16), + const SizedBox(width: kSpacing), Text(l10n.managePageShowSystemSnapsLabel), - const SizedBox(width: 8), + const SizedBox(width: kSpacingSmall), YaruCheckbox( value: ref.watch(showLocalSystemAppsProvider), onChanged: (value) => ref From b6bc7c9d7a2f6fc040582d1b733a8ed4f5db68da Mon Sep 17 00:00:00 2001 From: Lukas Klingsbo Date: Thu, 3 Oct 2024 16:58:26 +0200 Subject: [PATCH 2/3] fix: Allow search box to shrink on low width --- .../app_center/lib/manage/manage_page.dart | 121 ++++++++++-------- 1 file changed, 66 insertions(+), 55 deletions(-) diff --git a/packages/app_center/lib/manage/manage_page.dart b/packages/app_center/lib/manage/manage_page.dart index 6b798f34e..197539274 100644 --- a/packages/app_center/lib/manage/manage_page.dart +++ b/packages/app_center/lib/manage/manage_page.dart @@ -173,62 +173,73 @@ class ManagePage extends ConsumerWidget { .titleMedium! .copyWith(fontWeight: FontWeight.w500), ), - const Spacer(), - 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, - textAlignVertical: TextAlignVertical.center, - cursorWidth: 1, - decoration: InputDecoration( - isDense: true, - contentPadding: kSearchFieldContentPadding, - 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)), - ); - }, - ), 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, + 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, + textAlignVertical: TextAlignVertical.center, + cursorWidth: 1, + decoration: InputDecoration( + isDense: true, + contentPadding: kSearchFieldContentPadding, + 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)), + ); + }, + ), + 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, + ), + ], + ), ), ], ), From e14163b58fc50d1192f14203bef4f67033ed2e19 Mon Sep 17 00:00:00 2001 From: Lukas Klingsbo Date: Thu, 3 Oct 2024 18:37:51 +0200 Subject: [PATCH 3/3] fix: Split on two rows when on small form factor --- .../app_center/lib/manage/manage_page.dart | 165 ++++++++++-------- 1 file changed, 93 insertions(+), 72 deletions(-) diff --git a/packages/app_center/lib/manage/manage_page.dart b/packages/app_center/lib/manage/manage_page.dart index 197539274..2e36a7a83 100644 --- a/packages/app_center/lib/manage/manage_page.dart +++ b/packages/app_center/lib/manage/manage_page.dart @@ -164,84 +164,105 @@ 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, - textAlignVertical: TextAlignVertical.center, - cursorWidth: 1, - decoration: InputDecoration( - isDense: true, - contentPadding: kSearchFieldContentPadding, - 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, + textAlignVertical: TextAlignVertical.center, + cursorWidth: 1, + decoration: InputDecoration( + isDense: true, + contentPadding: + kSearchFieldContentPadding, + 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), ],