Add notification badge to the back button

equalitie · Jun 21, 2023 · e7e66f8 · e7e66f8
1 parent 18a42eb
commit e7e66f8
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 27 deletions.
diff --git a/lib/app/cubits/cubits.dart b/lib/app/cubits/cubits.dart
@@ -19,6 +19,7 @@ import 'repos.dart';
 import 'power_control.dart';
 import 'state_monitor.dart';
 import 'upgrade_exists.dart';
+import '../utils/constants.dart';
 
 class Cubits {
   final ReposCubit repositories;
@@ -28,6 +29,20 @@ class Cubits {
 
   Cubits(this.repositories, this.powerControl, this.panicCounter,
       this.upgradeExists);
+
+  Color? mainNotificationBadgeColor() {
+    final upgradeExists = this.upgradeExists.state;
+    final panicCount = panicCounter.state ?? 0;
+    final isNetworkEnabled = powerControl.state.isNetworkEnabled ?? true;
+
+    if (upgradeExists || panicCount > 0) {
+      return Constants.errorColor;
+    } else if (!isNetworkEnabled) {
+      return Constants.warningColor;
+    } else {
+      return null;
+    }
+  }
 }
 
 Widget multiBlocBuilder(

diff --git a/lib/app/pages/main_page.dart b/lib/app/pages/main_page.dart
@@ -318,14 +318,11 @@ class _MainPageState extends State<MainPage>
 
   _buildOuiSyncBar() => OuiSyncBar(
         reposCubit: _cubits.repositories,
-        repoPicker: _buildRepositoriesBar(),
+        repoPicker: RepositoriesBar(_cubits),
         appSettingsButton: _buildAppSettingsIcon(),
         repoSettingsButton: _buildRepoSettingsIcon(),
       );
 
-  RepositoriesBar _buildRepositoriesBar() =>
-      RepositoriesBar(reposCubit: _cubits.repositories);
-
   Widget _buildAppSettingsIcon() {
     final button = Fields.actionIcon(const Icon(Icons.settings_outlined),
         onPressed: () async => await _showAppSettings(),
@@ -334,18 +331,7 @@ class _MainPageState extends State<MainPage>
     return multiBlocBuilder(
         [_cubits.upgradeExists, _cubits.powerControl, _cubits.panicCounter],
         () {
-      final upgradeExists = _cubits.upgradeExists.state;
-      final panicCount = _cubits.panicCounter.state ?? 0;
-      final isNetworkEnabled =
-          _cubits.powerControl.state.isNetworkEnabled ?? true;
-
-      Color? color;
-
-      if (upgradeExists || panicCount > 0) {
-        color = Constants.errorColor;
-      } else if (!isNetworkEnabled) {
-        color = Constants.warningColor;
-      }
+      Color? color = _cubits.mainNotificationBadgeColor();
 
       if (color != null) {
         return Fields.addBadge(button, color: color);

diff --git a/lib/app/widgets/bars/repositories_bar.dart b/lib/app/widgets/bars/repositories_bar.dart
@@ -5,11 +5,12 @@ import '../../../generated/l10n.dart';
 import '../../cubits/cubits.dart';
 import '../../models/models.dart';
 import '../../utils/utils.dart';
+import '../../utils/platform/platform.dart';
 
 class RepositoriesBar extends StatelessWidget implements PreferredSizeWidget {
-  const RepositoriesBar({required this.reposCubit});
+  const RepositoriesBar(this._cubits);
 
-  final ReposCubit reposCubit;
+  final Cubits _cubits;
 
   @override
   Widget build(BuildContext context) {
@@ -28,14 +29,14 @@ class RepositoriesBar extends StatelessWidget implements PreferredSizeWidget {
   }
 
   Widget _buildRepoDescription(BuildContext context) =>
-      reposCubit.builder((state) {
+      _cubits.repositories.builder((state) {
         if (state.isLoading) {
           return Column(
             children: const [CircularProgressIndicator(color: Colors.white)],
           );
         }
 
-        if (reposCubit.showList) {
+        if (_cubits.repositories.showList) {
           return _buildRepoListState(context);
         }
 
@@ -87,9 +88,7 @@ class RepositoriesBar extends StatelessWidget implements PreferredSizeWidget {
     required String repoName,
   }) =>
       Row(children: [
-        Fields.actionIcon(const Icon(Icons.arrow_back_rounded),
-            onPressed: () => reposCubit.pushRepoList(true),
-            size: Dimensions.sizeIconSmall),
+        _buildBackButton(),
         Expanded(
             child: Container(
                 padding: Dimensions.paddingRepositoryPicker,
@@ -98,15 +97,15 @@ class RepositoriesBar extends StatelessWidget implements PreferredSizeWidget {
                       icon: Icon(icon),
                       iconSize: Dimensions.sizeIconSmall,
                       onPressed: () async {
-                        if (reposCubit.currentRepo == null) return;
+                        if (_cubits.repositories.currentRepo == null) return;
 
-                        if (reposCubit.currentRepo?.accessMode ==
+                        if (_cubits.repositories.currentRepo?.accessMode ==
                             AccessMode.blind) return;
 
-                        final repo = reposCubit.currentRepo;
+                        final repo = _cubits.repositories.currentRepo;
 
                         if (repo is OpenRepoEntry) {
-                          await reposCubit
+                          await _cubits.repositories
                               .lockRepository(repo.settingsRepoEntry);
                         }
                       }),
@@ -115,6 +114,33 @@ class RepositoriesBar extends StatelessWidget implements PreferredSizeWidget {
                 ])))
       ]);
 
+  Widget _buildBackButton() {
+    return multiBlocBuilder(
+        [_cubits.upgradeExists, _cubits.powerControl, _cubits.panicCounter],
+        () {
+      final button = Fields.actionIcon(const Icon(Icons.arrow_back_rounded),
+          onPressed: () => _cubits.repositories.pushRepoList(true),
+          size: Dimensions.sizeIconSmall);
+
+      if (PlatformValues.isDesktopDevice) {
+        // At time of writing this function we also have the gear settings
+        // button on this page which shows the badge notification, so no need
+        // to show it again on the back button.
+        return button;
+      }
+
+      Color? color = _cubits.mainNotificationBadgeColor();
+
+      if (color != null) {
+        // TODO: Why does the badge appear to move quickly after entering this screen?
+        return Fields.addBadge(button,
+            color: color, moveDownwards: 3, moveRight: 3);
+      } else {
+        return button;
+      }
+    });
+  }
+
   @override
   Size get preferredSize {
     // TODO: This value was found experimentally, can it be done programmatically?