Change story type selection to app bar filter chip

Mosc · Jan 12, 2024 · 8dbb5c9 · 8dbb5c9
1 parent 3efafe7
commit 8dbb5c9
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 68 deletions.
diff --git a/lib/l10n/arb/app_en.arb b/lib/l10n/arb/app_en.arb
@@ -33,7 +33,7 @@
     "userAvatars": "User avatars",
     "behavior": "Behavior",
     "showJobs": "Show job stories",
-    "showJobsDescription": "Also shows jobs tab",
+    "showJobsDescription": "Also shows jobs in dropdown menu",
     "threadNavigation": "Thread navigation",
     "threadNavigationDescription": "Allows jumps between top-level comments",
     "downvoting": "Downvoting",
@@ -66,11 +66,11 @@
     "logout": "Log out",
     "showMore": "Show more",
     "stories": "Frontpage",
-    "storyTypeTop": "Top",
-    "storyTypeNew": "New",
-    "storyTypeBest": "Best",
-    "storyTypeAsk": "Ask",
-    "storyTypeShow": "Show",
+    "storyTypeTop": "Top stories",
+    "storyTypeNew": "New stories",
+    "storyTypeBest": "Best stories",
+    "storyTypeAsk": "Ask HN",
+    "storyTypeShow": "Show HN",
     "storyTypeJob": "Jobs",
     "submit": "Submit",
     "catchUp": "Catch up",

diff --git a/lib/stories/view/stories_shell_page.dart b/lib/stories/view/stories_shell_page.dart
@@ -64,12 +64,6 @@ class _StoriesShellPageState extends State<StoriesShellPage> {
             widget._authCubit,
             widget._settingsCubit,
           ),
-          SliverToBoxAdapter(
-            child: StoriesTypeView(
-              widget._storiesCubit,
-              widget._settingsCubit,
-            ),
-          ),
           SliverSafeArea(
             top: false,
             sliver: _SliverStoriesBody(
@@ -111,7 +105,10 @@ class _SliverStoriesAppBarState extends State<_SliverStoriesAppBar> {
   @override
   Widget build(BuildContext context) {
     return SliverAppBar(
-      title: Text(context.l10n.stories),
+      title: StoriesTypeView(
+        widget._storiesCubit,
+        widget._settingsCubit,
+      ),
       flexibleSpace: AppBarProgressIndicator(widget._storiesCubit),
       actions: [
         _StoriesSearchAnchor(

diff --git a/lib/stories/view/stories_type_view.dart b/lib/stories/view/stories_type_view.dart
@@ -16,70 +16,35 @@ class StoriesTypeView extends StatelessWidget {
   final StoriesCubit _storiesCubit;
   final SettingsCubit _settingsCubit;
 
-  @override
-  Widget build(BuildContext context) {
-    final directionality = Directionality.of(context);
-    final padding = MediaQuery.paddingOf(context);
-
-    return SingleChildScrollView(
-      scrollDirection: Axis.horizontal,
-      padding: EdgeInsetsDirectional.only(
-        top: AppSpacing.s,
-        bottom: AppSpacing.s,
-        start: AppSpacing.xl +
-            switch (directionality) {
-              TextDirection.ltr => padding.left,
-              TextDirection.rtl => padding.right,
-            },
-        end: AppSpacing.xl +
-            switch (directionality) {
-              TextDirection.ltr => padding.right,
-              TextDirection.rtl => padding.left,
-            },
-      ),
-      child: _StoriesTypeBody(
-        _storiesCubit,
-        _settingsCubit,
-      ),
-    );
-  }
-}
-
-class _StoriesTypeBody extends StatelessWidget {
-  const _StoriesTypeBody(
-    this._storiesCubit,
-    this._settingsCubit,
-  );
-
-  final StoriesCubit _storiesCubit;
-  final SettingsCubit _settingsCubit;
-
   @override
   Widget build(BuildContext context) {
     return BlocBuilder<StoriesCubit, StoriesState>(
       bloc: _storiesCubit,
-      buildWhen: (previous, current) => previous.storyType != current.storyType,
       builder: (context, state) => BlocBuilder<SettingsCubit, SettingsState>(
         bloc: _settingsCubit,
-        buildWhen: (previous, current) => previous.showJobs != current.showJobs,
-        builder: (context, settingsState) => Row(
-          children: [
+        builder: (context, settingsState) => MenuAnchor(
+          menuChildren: [
             for (final storyType in StoryType.values)
               if (storyType != StoryType.jobStories || settingsState.showJobs)
-                ChoiceChip(
-                  showCheckmark: false,
-                  avatar: Icon(
-                    state.storyType == storyType
-                        ? storyType.selectedIcon
-                        : storyType.icon,
-                    color: Theme.of(context).colorScheme.onBackground,
-                  ),
-                  label: Text(storyType.label(context)),
-                  selected: state.storyType == storyType,
-                  onSelected: (selected) =>
-                      _storiesCubit.setStoryType(storyType),
+                MenuItemButton(
+                  onPressed: () async => _storiesCubit.setStoryType(storyType),
+                  child: Text(storyType.label(context)),
+                ),
+          ],
+          builder: (context, controller, child) => FilterChip.elevated(
+            avatar: Icon(state.storyType.icon),
+            label: Row(
+              children: [
+                Expanded(
+                  child: Text(state.storyType.label(context)),
                 ),
-          ].spaced(width: AppSpacing.m),
+                const Icon(Icons.arrow_drop_down),
+              ].spaced(width: AppSpacing.m),
+            ),
+            labelPadding: const EdgeInsetsDirectional.only(start: AppSpacing.m),
+            onSelected: (storyType) =>
+                controller.isOpen ? controller.close() : controller.open(),
+          ),
         ),
       ),
     );