improve desktop header

pyrossh · Aug 16, 2023 · e6ba8ed · e6ba8ed
1 parent f5009ba
commit e6ba8ed
Show file tree

Hide file tree

Showing 5 changed files with 96 additions and 55 deletions.
diff --git a/lib/screens/bible_select_screen.dart b/lib/screens/bible_select_screen.dart
@@ -1,4 +1,3 @@
-import "package:flutter/cupertino.dart";
 import "package:flutter/material.dart";
 import "package:only_bible_app/state.dart";
 import "package:only_bible_app/models.dart";
@@ -24,7 +23,7 @@ class BibleSelectScreen extends StatelessWidget {
                 return TextButton(
                   child: Text(bible.name),
                   onPressed: () {
-                    model.changeBible(context, bible.id);
+                    model.updateCurrentBible(context, bible.id);
                     Navigator.of(context).pop();
                   },
                 );

diff --git a/lib/state.dart b/lib/state.dart
@@ -8,8 +8,10 @@ import "package:flutter/foundation.dart" show defaultTargetPlatform, TargetPlatf
 import "package:flutter/services.dart";
 import "package:flutter/material.dart";
 import "package:just_audio/just_audio.dart";
+import "package:only_bible_app/screens/bible_select_screen.dart";
+import "package:only_bible_app/screens/book_select_screen.dart";
 import "package:only_bible_app/screens/chapter_view_screen.dart";
-import 'package:only_bible_app/dialog.dart';
+import "package:only_bible_app/dialog.dart";
 import "package:only_bible_app/models.dart";
 import "package:only_bible_app/widgets/actions_sheet.dart";
 import "package:only_bible_app/widgets/scaffold_menu.dart";
@@ -83,13 +85,37 @@ class AppModel extends ChangeNotifier {
     );
   }
 
-  changeBible(BuildContext context, int id) async {
+  changeBible(BuildContext context) {
+    Navigator.of(context).pushReplacement(
+      createNoTransitionPageRoute(
+        const BibleSelectScreen(),
+      ),
+    );
+  }
+
+  changeBibleFromHeader(BuildContext context) {
+    Navigator.of(context).push(
+      createNoTransitionPageRoute(
+        const BibleSelectScreen(),
+      ),
+    );
+  }
+
+  updateCurrentBible(BuildContext context, int id) async {
     // TODO: maybe use a future as the bible needs to load
     bible = await loadBible(id);
     notifyListeners();
     save();
   }
 
+  changeBook(BuildContext context) {
+    Navigator.of(context).push(
+      createNoTransitionPageRoute(
+        BookSelectScreen(bible: bible),
+      ),
+    );
+  }
+
   toggleMode() async {
     darkMode = !darkMode;
     updateStatusBar();
@@ -144,14 +170,14 @@ class AppModel extends ChangeNotifier {
     //     ),
     //   );
     // } else {
-      showModalBottomSheet(
-        context: context,
-        isDismissible: true,
-        enableDrag: true,
-        showDragHandle: true,
-        useSafeArea: true,
-        builder: (context) => const SettingsSheet(),
-      );
+    showModalBottomSheet(
+      context: context,
+      isDismissible: true,
+      enableDrag: true,
+      showDragHandle: true,
+      useSafeArea: true,
+      builder: (context) => const SettingsSheet(),
+    );
     // }
   }
 

diff --git a/lib/widgets/actions_sheet.dart b/lib/widgets/actions_sheet.dart
@@ -9,20 +9,26 @@ class ActionsSheet extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final app = AppModel.of(context);
+    final isDesktop = isWide(context);
+    final iconSize = isDesktop ? 10.0 : 0.0;
     final iconColor = app.darkMode ? Colors.white.withOpacity(0.9) : Colors.black.withOpacity(0.9);
     final bodySmall = Theme.of(context).textTheme.bodySmall;
     final model = ChapterViewModel.of(context);
     final audioIcon = model.isPlaying ? Icons.pause_circle_outline : Icons.play_circle_outline;
     final audioText = model.isPlaying ? "Pause" : "Play";
-    final isDesktop = isWide(context);
+    final highlightRowEnabled = !isDesktop && false;
     return Container(
-      height: isDesktop ? 80 : 160,
+      height: highlightRowEnabled
+          ? 160
+          : isDesktop
+              ? 80
+              : 100,
       color: Theme.of(context).colorScheme.background,
-      padding: EdgeInsets.only(bottom: isIOS() ? 20 : 0, left: 20, right: 20, top: 10),
+      padding: EdgeInsets.only(left: 20, right: 20, top: isDesktop ? 10 : 0),
       child: Column(
-        mainAxisAlignment: MainAxisAlignment.spaceAround,
+        mainAxisAlignment: highlightRowEnabled ? MainAxisAlignment.spaceAround : MainAxisAlignment.start,
         children: [
-          if (!isDesktop)
+          if (highlightRowEnabled)
             Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
@@ -56,15 +62,15 @@ class ActionsSheet extends StatelessWidget {
                 leading: IconButton(
                   padding: EdgeInsets.zero,
                   onPressed: () {},
-                  icon: Icon(Icons.cancel_outlined, size: 24, color: iconColor),
+                  icon: Icon(Icons.cancel_outlined, size: 24 + iconSize, color: iconColor),
                 ),
                 trailing: Text("Clear", style: bodySmall),
               ),
               IconButtonText(
                 leading: IconButton(
                   padding: EdgeInsets.zero,
                   onPressed: () {},
-                  icon: Icon(Icons.copy, size: 24, color: iconColor),
+                  icon: Icon(Icons.copy, size: 24 + iconSize, color: iconColor),
                 ),
                 trailing: Text("Copy", style: bodySmall),
               ),
@@ -76,23 +82,23 @@ class ActionsSheet extends StatelessWidget {
                       model.onPlay(context);
                     }
                   },
-                  icon: Icon(audioIcon, size: 32, color: app.bible.hasAudio ? iconColor : Colors.grey),
+                  icon: Icon(audioIcon, size: 34 + iconSize, color: app.bible.hasAudio ? iconColor : Colors.grey),
                 ),
                 trailing: Text(audioText, style: bodySmall),
               ),
               IconButtonText(
                 leading: IconButton(
                   padding: EdgeInsets.zero,
                   onPressed: () {},
-                  icon: Icon(Icons.post_add_outlined, size: 32, color: iconColor),
+                  icon: Icon(Icons.post_add_outlined, size: 32 + iconSize, color: iconColor),
                 ),
                 trailing: Text("Note", style: bodySmall),
               ),
               IconButtonText(
                 leading: IconButton(
                   padding: EdgeInsets.zero,
                   onPressed: () {},
-                  icon: Icon(Icons.share_outlined, size: 28, color: iconColor),
+                  icon: Icon(Icons.share_outlined, size: 28 + iconSize, color: iconColor),
                 ),
                 trailing: Text("Share", style: bodySmall),
               ),

diff --git a/lib/widgets/chapter_app_bar.dart b/lib/widgets/chapter_app_bar.dart
@@ -1,5 +1,4 @@
 import "package:flutter/material.dart";
-import "package:only_bible_app/screens/book_select_screen.dart";
 import "package:only_bible_app/state.dart";
 
 class ChapterAppBar extends StatelessWidget implements PreferredSizeWidget {
@@ -10,27 +9,22 @@ class ChapterAppBar extends StatelessWidget implements PreferredSizeWidget {
 
   @override
   Widget build(BuildContext context) {
-    final selectedBible = AppModel.of(context).bible;
+    final app = AppModel.of(context);
     final model = ChapterViewModel.of(context);
-    final selectedBook = selectedBible.books[model.book];
+    final selectedBook = app.bible.books[model.book];
     final bookName = selectedBook.name;
+    final isDesktop = isWide(context);
     return SafeArea(
       child: Container(
-        padding: const EdgeInsets.only(left: 18, right: 5),
+        padding: EdgeInsets.only(left: 18, right: 5, top: isDesktop ? 5 : 0),
         child: Row(
-          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.center,
           children: [
             InkWell(
               enableFeedback: true,
-              onTap: () {
-                Navigator.of(context).push(
-                  createNoTransitionPageRoute(
-                    BookSelectScreen(bible: selectedBible),
-                  ),
-                );
-              },
+              onTap: () => app.changeBook(context),
               child: Row(
-                mainAxisAlignment: MainAxisAlignment.start,
                 children: [
                   Text(
                     "$bookName ${model.chapter + 1}",
@@ -44,10 +38,31 @@ class ChapterAppBar extends StatelessWidget implements PreferredSizeWidget {
                 ],
               ),
             ),
-            IconButton(
-              padding: EdgeInsets.zero,
-              onPressed: () => AppModel.ofEvent(context).showSettings(context),
-              icon: const Icon(Icons.more_vert, size: 24),
+            Expanded(
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.end,
+                children: [
+                  if (isDesktop)
+                    TextButton.icon(
+                      onPressed: () => app.changeBibleFromHeader(context),
+                      style: ButtonStyle(
+                        padding: MaterialStateProperty.all(const EdgeInsets.symmetric(horizontal: 10)),
+                      ),
+                      icon: const Icon(Icons.book_outlined),
+                      label: Text(
+                        app.bible.name,
+                      ),
+                    ),
+                  Padding(
+                    padding: const EdgeInsets.only(left: 10),
+                    child: IconButton(
+                      padding: EdgeInsets.zero,
+                      onPressed: () => AppModel.ofEvent(context).showSettings(context),
+                      icon: Icon(Icons.more_vert, size: isDesktop ? 28 : 24),
+                    ),
+                  ),
+                ],
+              ),
             ),
           ],
         ),

diff --git a/lib/widgets/settings_sheet.dart b/lib/widgets/settings_sheet.dart
@@ -1,17 +1,16 @@
 import "package:flutter/material.dart";
 import "package:only_bible_app/state.dart";
 import "package:settings_ui/settings_ui.dart";
-import "package:only_bible_app/screens/bible_select_screen.dart";
 
 class SettingsSheet extends StatelessWidget {
   const SettingsSheet({super.key});
 
   @override
   Widget build(BuildContext context) {
-    final model = AppModel.of(context);
-    final selectedBible = model.bible;
-    final modeIcon = model.darkMode ? Icons.dark_mode : Icons.light_mode;
-    final modeIconColor = model.darkMode ? const Color(0xFF59EEFF) : const Color(0xFFE5B347);
+    final app = AppModel.of(context);
+    final selectedBible = app.bible;
+    final modeIcon = app.darkMode ? Icons.dark_mode : Icons.light_mode;
+    final modeIconColor = app.darkMode ? const Color(0xFF59EEFF) : const Color(0xFFE5B347);
     final iconColor = Theme.of(context).textTheme.bodyMedium!.color;
     return Column(
       children: [
@@ -46,43 +45,39 @@ class SettingsSheet extends StatelessWidget {
                     title: const Text("Bible"),
                     value: Text(selectedBible.name),
                     onPressed: (c) {
-                      Navigator.of(c).pushReplacement(
-                        createNoTransitionPageRoute(
-                          const BibleSelectScreen(),
-                        ),
-                      );
+                      app.changeBible(c);
                       return null;
                     },
                   ),
                   SettingsTile.switchTile(
                     onToggle: (value) {
-                      model.toggleMode();
+                      app.toggleMode();
                     },
-                    initialValue: model.darkMode,
+                    initialValue: app.darkMode,
                     leading: Icon(modeIcon, color: modeIconColor),
                     title: const Text("Dark mode"),
                   ),
                   SettingsTile.switchTile(
                     onToggle: (value) {
-                      model.toggleBold();
+                      app.toggleBold();
                     },
-                    initialValue: model.fontBold,
+                    initialValue: app.fontBold,
                     leading: Icon(Icons.format_bold, color: iconColor),
                     title: const Text("Bold font"),
                   ),
                   SettingsTile(
                     title: const Text("Increase font size"),
                     leading: Icon(Icons.font_download, color: iconColor),
                     trailing: IconButton(
-                      onPressed: model.increaseFont,
+                      onPressed: app.increaseFont,
                       icon: const Icon(Icons.add_circle_outline, size: 32, color: Colors.redAccent),
                     ),
                   ),
                   SettingsTile(
                     title: const Text("Decrease font size"),
                     leading: Icon(Icons.font_download, color: iconColor),
                     trailing: IconButton(
-                      onPressed: model.decreaseFont,
+                      onPressed: app.decreaseFont,
                       icon: const Icon(Icons.remove_circle_outline, size: 32, color: Colors.blueAccent),
                     ),
                   ),