diff --git a/lib/ui/views/reader/reader_view.dart b/lib/ui/views/reader/reader_view.dart index 311eb58..11346c4 100644 --- a/lib/ui/views/reader/reader_view.dart +++ b/lib/ui/views/reader/reader_view.dart @@ -35,73 +35,168 @@ class ReaderView extends StackedView { statusBarIconBrightness: Brightness.light, statusBarColor: context.theme.appColors.appbarBackground, )); + final bool isTablet = MediaQuery.of(context).size.shortestSide >= 800; + final bool isLandscape = + MediaQuery.of(context).orientation == Orientation.landscape; + return Scaffold( key: _scaffoldKey, backgroundColor: context.theme.appColors.appbarBackground, - appBar: viewModel.showSecondaryArea - ? PreferredSize( - preferredSize: const Size(double.infinity, kToolbarHeight), - child: SafeArea( - child: SecondaryReaderAppbar( - isReaderAreaPopupActive: viewModel.isSecondaryReaderAreaPopupActive, - onTapBook: () => viewModel.onTapBook(Area.secondary), - onTapBibleVersion: () => viewModel.onTapBibleVersion(Area.secondary), - onTapClose: viewModel.onTapCloseSecondaryArea, - ), - ), - ) - : null, body: SafeArea( - child: Stack( + child: Column( children: [ - Container( - color: context.theme.appColors.background, - child: Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.stretch, + Expanded( + child: Stack( children: [ - Expanded( - child: WebViewWidget( - controller: viewModel.webviewController, + Container( + padding: EdgeInsets.only( + top: (!(isTablet || isLandscape) && + viewModel.showSecondaryArea) + ? 58.0 + : 0.0, + ), + color: context.theme.appColors.background, + child: Column( + mainAxisSize: MainAxisSize.max, + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + Expanded( + child: WebViewWidget( + controller: viewModel.webviewController, + ), + ), + if (viewModel.primaryAreaBible.startsWith('OET') || + viewModel.secondaryAreaBible.startsWith('OET')) + Container( + color: context.theme.appColors.background, + padding: const EdgeInsets.symmetric( + vertical: 4.0, horizontal: 12.0), + child: Text( + 'This is still a very early look into the unfinished text of the Open English Translation of the Bible. Please double-check the text in advance before using in public. Found a mistake or have questions about the translation? Please visit www.openenglishtranslation.bible.', + style: TextStyle( + fontSize: 8.0, + color: context.theme.appColors.readerText, + ), + ), + ), + ], ), ), - if (viewModel.primaryAreaBible.startsWith('OET') || viewModel.secondaryAreaBible.startsWith('OET')) - Container( - color: context.theme.appColors.background, - padding: const EdgeInsets.symmetric(vertical: 4.0, horizontal: 12.0), - child: Text( - 'This is still a very early look into the unfinished text of the Open English Translation of the Bible. Please double-check the text in advance before using in public. Found a mistake or have questions about the translation? Please visit www.openenglishtranslation.bible.', - style: TextStyle( - fontSize: 8.0, - color: context.theme.appColors.readerText, + if (viewModel.isBusy) + Center( + child: CircularProgressIndicator( + color: context.theme.appColors.loadingSpinner, + ), + ), + if (viewModel.isSecondaryReaderAreaPopupActive && + !(viewModel.isPrimaryReaderAreaPopupActive)) + Padding( + padding: EdgeInsets.only( + top: (isLandscape || isTablet) ? 0.0 : 58.0, + ), + child: Align( + alignment: + (isLandscape || isTablet) //TODO CHANGE ARROW BUTTON + ? Alignment.bottomCenter + : Alignment.topCenter, + child: ReaderAreaPopup( + readerArea: Area.secondary, + onToggleSecondaryArea: + viewModel.onToggleSecondaryArea, + onToggleLinkedScrolling: + viewModel.onToggleLinkedScrolling, ), ), ), + if (viewModel.isPrimaryReaderAreaPopupActive && + !(viewModel.isSecondaryReaderAreaPopupActive)) + Align( + alignment: Alignment.bottomCenter, + child: ReaderAreaPopup( + readerArea: Area.primary, + onToggleSecondaryArea: viewModel.onToggleSecondaryArea, + onToggleLinkedScrolling: + viewModel.onToggleLinkedScrolling, + ), + ), + if (!(isTablet || isLandscape) && + viewModel + .showSecondaryArea) //for portrait phones only, show secondary appbar at the top of the screen + Align( + alignment: Alignment.topCenter, + child: SecondaryReaderAppbar( + isReaderAreaPopupActive: + viewModel.isSecondaryReaderAreaPopupActive, + onTapBook: () => viewModel.onTapBook(Area.secondary), + onTapBibleVersion: () => + viewModel.onTapBibleVersion(Area.secondary), + onTapClose: viewModel.onTapCloseSecondaryArea, + ), + ), ], ), ), - if (viewModel.isBusy) + if (viewModel.showSecondaryArea) //is there a secondary appbar? + // Tablet: side-by-side, Phone: secondary on top via Stack overlay + primary bottom. + //TODO: allow multiple screens (teriary, quaternary, etc) and make this more dynamic instead of just primary vs secondary + isTablet || isLandscape + ? Row( + children: [ + Expanded( + //Primary + child: Align( + alignment: Alignment.centerLeft, + child: PrimaryReaderAppbar( + isReaderAreaPopupActive: + viewModel.isPrimaryReaderAreaPopupActive, + onTapSearch: viewModel.onTapSearch, + onTapBook: () => + viewModel.onTapBook(Area.primary), + onTapBibleVersion: () => + viewModel.onTapBibleVersion(Area.primary), + ), + ), + ), + Expanded( + //Secondary + child: Align( + alignment: Alignment.centerRight, + child: SecondaryReaderAppbar( + isReaderAreaPopupActive: + viewModel.isSecondaryReaderAreaPopupActive, + onTapBook: () => + viewModel.onTapBook(Area.secondary), + onTapBibleVersion: () => + viewModel.onTapBibleVersion(Area.secondary), + onTapClose: viewModel.onTapCloseSecondaryArea, + onTapMenu: () => + _scaffoldKey.currentState?.openEndDrawer(), + ), + ), + ), + ], + ) + : PrimaryReaderAppbar( + //if phone in portait + isReaderAreaPopupActive: + viewModel.isPrimaryReaderAreaPopupActive, + onTapSearch: viewModel.onTapSearch, + onTapBook: () => viewModel.onTapBook(Area.primary), + onTapBibleVersion: () => + viewModel.onTapBibleVersion(Area.primary), + onTapMenu: () => + _scaffoldKey.currentState?.openEndDrawer(), + ) + else //no secondary appbar, just show the primary appbar regardless of screen size or orientation Center( - child: CircularProgressIndicator( - color: context.theme.appColors.loadingSpinner, - ), - ), - if (viewModel.isSecondaryReaderAreaPopupActive) - Align( - alignment: Alignment.topCenter, - child: ReaderAreaPopup( - readerArea: Area.secondary, - onToggleSecondaryArea: viewModel.onToggleSecondaryArea, - onToggleLinkedScrolling: viewModel.onToggleLinkedScrolling, - ), - ), - if (viewModel.isPrimaryReaderAreaPopupActive) - Align( - alignment: Alignment.bottomCenter, - child: ReaderAreaPopup( - readerArea: Area.primary, - onToggleSecondaryArea: viewModel.onToggleSecondaryArea, - onToggleLinkedScrolling: viewModel.onToggleLinkedScrolling, + child: PrimaryReaderAppbar( + isReaderAreaPopupActive: + viewModel.isPrimaryReaderAreaPopupActive, + onTapSearch: viewModel.onTapSearch, + onTapBook: () => viewModel.onTapBook(Area.primary), + onTapBibleVersion: () => + viewModel.onTapBibleVersion(Area.primary), + onTapMenu: () => _scaffoldKey.currentState?.openEndDrawer(), ), ), ], @@ -110,13 +205,6 @@ class ReaderView extends StackedView { endDrawer: SideNavigationDrawer( closeNavigation: () => _scaffoldKey.currentState?.closeEndDrawer(), ), - bottomNavigationBar: PrimaryReaderAppbar( - isReaderAreaPopupActive: viewModel.isPrimaryReaderAreaPopupActive, - onTapSearch: viewModel.onTapSearch, - onTapBook: () => viewModel.onTapBook(Area.primary), - onTapBibleVersion: () => viewModel.onTapBibleVersion(Area.primary), - onTapMenu: () => _scaffoldKey.currentState?.openEndDrawer(), - ), // floatingActionButton: kDebugMode // ? FloatingActionButton.small( // backgroundColor: context.theme.appColors.appbarBackground, diff --git a/lib/ui/views/reader/reader_viewmodel.dart b/lib/ui/views/reader/reader_viewmodel.dart index ad9dd34..41c51e5 100644 --- a/lib/ui/views/reader/reader_viewmodel.dart +++ b/lib/ui/views/reader/reader_viewmodel.dart @@ -583,6 +583,7 @@ class ReaderViewModel extends ReactiveViewModel { } void onTapCloseSecondaryArea() async { + log("ON TAP CLOSE SECONDARY AREA"); onToggleSecondaryArea(); isPrimaryReaderAreaPopupActive = false; isSecondaryReaderAreaPopupActive = false; diff --git a/lib/ui/views/reader/widgets/primary_reader_appbar/primary_reader_appbar.dart b/lib/ui/views/reader/widgets/primary_reader_appbar/primary_reader_appbar.dart index 4e93ae0..1ffd941 100644 --- a/lib/ui/views/reader/widgets/primary_reader_appbar/primary_reader_appbar.dart +++ b/lib/ui/views/reader/widgets/primary_reader_appbar/primary_reader_appbar.dart @@ -14,14 +14,14 @@ class PrimaryReaderAppbar extends StackedView { required this.onTapSearch, required this.onTapBook, required this.onTapBibleVersion, - required this.onTapMenu, + this.onTapMenu, }); final bool isReaderAreaPopupActive; final Function() onTapSearch; final Function() onTapBook; final Function() onTapBibleVersion; - final Function() onTapMenu; + final Function()? onTapMenu; @override Widget builder( @@ -53,18 +53,21 @@ class PrimaryReaderAppbar extends StackedView { onTapBook: onTapBook, onTapBibleVersion: onTapBibleVersion, ), - InkWell( - onTap: onTapMenu, - child: Padding( - padding: const EdgeInsets.all(16.0), - child: PhosphorIcon( - PhosphorIcons.list(PhosphorIconsStyle.bold), - color: context.theme.appColors.appbarIcon, - size: 20.0, - semanticLabel: 'Menu', + if (onTapMenu != null) + InkWell( + onTap: onTapMenu, + child: Padding( + padding: const EdgeInsets.all(16.0), + child: PhosphorIcon( + PhosphorIcons.list(PhosphorIconsStyle.bold), + color: context.theme.appColors.appbarIcon, + size: 20.0, + semanticLabel: 'Menu', + ), ), - ), - ), + ) + else + const SizedBox(width: 52.0), ], ), ), diff --git a/lib/ui/views/reader/widgets/secondary_reader_appbar/secondary_reader_appbar.dart b/lib/ui/views/reader/widgets/secondary_reader_appbar/secondary_reader_appbar.dart index f6aa4f8..b60d867 100644 --- a/lib/ui/views/reader/widgets/secondary_reader_appbar/secondary_reader_appbar.dart +++ b/lib/ui/views/reader/widgets/secondary_reader_appbar/secondary_reader_appbar.dart @@ -14,12 +14,14 @@ class SecondaryReaderAppbar extends StackedView { required this.onTapBook, required this.onTapBibleVersion, required this.onTapClose, + this.onTapMenu, }); final bool isReaderAreaPopupActive; final Function() onTapBook; final Function() onTapBibleVersion; final Function() onTapClose; + final Function()? onTapMenu; @override Widget builder( @@ -35,27 +37,47 @@ class SecondaryReaderAppbar extends StackedView { crossAxisAlignment: CrossAxisAlignment.center, children: [ const SizedBox( - width: 36, + width: 52, height: 29, ), - ReaderSelectorBtn( - readerArea: Area.secondary, - isActive: isReaderAreaPopupActive, - onTapBook: onTapBook, - onTapBibleVersion: onTapBibleVersion, - ), - InkWell( - onTap: onTapClose, - child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 9.0), - child: PhosphorIcon( - PhosphorIcons.x(PhosphorIconsStyle.bold), - color: context.theme.appColors.secondaryOnDark, - size: 20.0, - semanticLabel: 'Close', + Row( + mainAxisSize: MainAxisSize.min, + children: [ + ReaderSelectorBtn( + readerArea: Area.secondary, + isActive: isReaderAreaPopupActive, + onTapBook: onTapBook, + onTapBibleVersion: onTapBibleVersion, + ), + InkWell( + onTap: onTapClose, + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 9.0), + child: PhosphorIcon( + PhosphorIcons.x(PhosphorIconsStyle.bold), + color: context.theme.appColors.secondaryOnDark, + size: 20.0, + semanticLabel: 'Close', + ), + ), ), - ), + ], ), + if (onTapMenu != null) + InkWell( + onTap: onTapMenu, + child: Padding( + padding: const EdgeInsets.all(16.0), + child: PhosphorIcon( + PhosphorIcons.list(PhosphorIconsStyle.bold), + color: context.theme.appColors.appbarIcon, + size: 20.0, + semanticLabel: 'Menu', + ), + ), + ) + else + const SizedBox(width: 52.0), ], ), ); diff --git a/lib/ui/widgets/common/side_navigation_drawer/side_navigation_drawer.dart b/lib/ui/widgets/common/side_navigation_drawer/side_navigation_drawer.dart index 021b782..1bc7b58 100644 --- a/lib/ui/widgets/common/side_navigation_drawer/side_navigation_drawer.dart +++ b/lib/ui/widgets/common/side_navigation_drawer/side_navigation_drawer.dart @@ -19,9 +19,12 @@ class SideNavigationDrawer extends StackedView { SideNavigationDrawerModel viewModel, Widget? child, ) { - return Container( + return Drawer( width: 270.0, - color: context.theme.appColors.appbarBackground, + backgroundColor: context.theme.appColors.appbarBackground, + shape: const RoundedRectangleBorder( + borderRadius: BorderRadius.zero, + ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.max, @@ -44,7 +47,8 @@ class SideNavigationDrawer extends StackedView { InkWell( onTap: closeNavigation, child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 13.0, vertical: 14.0), + padding: const EdgeInsets.symmetric( + horizontal: 13.0, vertical: 14.0), child: PhosphorIcon( PhosphorIcons.x(PhosphorIconsStyle.bold), color: context.theme.appColors.secondaryOnDark, @@ -70,14 +74,17 @@ class SideNavigationDrawer extends StackedView { color: context.theme.appColors.readerSelectorBackground, borderRadius: BorderRadius.circular(70.0), ), - padding: const EdgeInsets.symmetric(vertical: 14.0, horizontal: 14.0), + padding: const EdgeInsets.symmetric( + vertical: 14.0, horizontal: 14.0), child: Row( mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.max, children: [ PhosphorIcon( - PhosphorIcons.bookOpenText(PhosphorIconsStyle.regular), - color: context.theme.appColors.primaryOnDark.withAlpha(220), + PhosphorIcons.bookOpenText( + PhosphorIconsStyle.regular), + color: context.theme.appColors.primaryOnDark + .withAlpha(220), size: 24.0, ), const SizedBox(width: 12.0), @@ -99,14 +106,17 @@ class SideNavigationDrawer extends StackedView { viewModel.onTapBookmarks(); }, child: Padding( - padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 14.0), + padding: const EdgeInsets.symmetric( + vertical: 16.0, horizontal: 14.0), child: Row( mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.max, children: [ PhosphorIcon( - PhosphorIcons.bookmarksSimple(PhosphorIconsStyle.regular), - color: context.theme.appColors.primaryOnDark.withAlpha(220), + PhosphorIcons.bookmarksSimple( + PhosphorIconsStyle.regular), + color: context.theme.appColors.primaryOnDark + .withAlpha(220), size: 24.0, ), const SizedBox(width: 12.0), @@ -128,14 +138,17 @@ class SideNavigationDrawer extends StackedView { viewModel.onTapSearch(); }, child: Padding( - padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 14.0), + padding: const EdgeInsets.symmetric( + vertical: 16.0, horizontal: 14.0), child: Row( mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.max, children: [ PhosphorIcon( - PhosphorIcons.magnifyingGlass(PhosphorIconsStyle.regular), - color: context.theme.appColors.primaryOnDark.withAlpha(220), + PhosphorIcons.magnifyingGlass( + PhosphorIconsStyle.regular), + color: context.theme.appColors.primaryOnDark + .withAlpha(220), size: 24.0, ), const SizedBox(width: 12.0), @@ -157,14 +170,16 @@ class SideNavigationDrawer extends StackedView { viewModel.onTapSettings(); }, child: Padding( - padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 14.0), + padding: const EdgeInsets.symmetric( + vertical: 16.0, horizontal: 14.0), child: Row( mainAxisAlignment: MainAxisAlignment.start, mainAxisSize: MainAxisSize.max, children: [ PhosphorIcon( PhosphorIcons.gear(PhosphorIconsStyle.regular), - color: context.theme.appColors.primaryOnDark.withAlpha(220), + color: context.theme.appColors.primaryOnDark + .withAlpha(220), size: 24.0, ), const SizedBox(width: 12.0), diff --git a/pubspec.lock b/pubspec.lock index 90c35f7..043785d 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -395,10 +395,10 @@ packages: dependency: transitive description: name: matcher - sha256: "12956d0ad8390bbcc63ca2e1469c0619946ccb52809807067a7020d57e647aa6" + sha256: dc0b7dc7651697ea4ff3e69ef44b0407ea32c487a39fff6a4004fa585e901861 url: "https://pub.dev" source: hosted - version: "0.12.18" + version: "0.12.19" material_color_utilities: dependency: transitive description: @@ -751,10 +751,10 @@ packages: dependency: transitive description: name: test_api - sha256: "19a78f63e83d3a61f00826d09bc2f60e191bf3504183c001262be6ac75589fb8" + sha256: "8161c84903fd860b26bfdefb7963b3f0b68fee7adea0f59ef805ecca346f0c7a" url: "https://pub.dev" source: hosted - version: "0.7.8" + version: "0.7.10" timing: dependency: transitive description: