From e767fc0c218abdfed1fc5f250ed6376d8bd47197 Mon Sep 17 00:00:00 2001 From: Shawn Date: Mon, 24 Oct 2022 15:42:27 -0600 Subject: [PATCH] restore font and inset scaling --- lib/logic/app_logic.dart | 4 + lib/styles/styles.dart | 97 +++++++++++++------ lib/ui/app_scaffold.dart | 4 + .../diagonal_text_page_indicator.dart | 5 +- .../expanding_time_range_selector.dart | 2 +- .../widgets/_results_grid.dart | 2 +- .../widgets/_circular_title_bar.dart | 5 +- .../widgets/_collapsing_pull_quote_image.dart | 2 +- .../widgets/_large_simple_quote.dart | 2 +- lib/ui/screens/intro/intro_screen.dart | 4 +- .../screens/photo_gallery/photo_gallery.dart | 5 +- .../wonders_details_screen.dart | 1 - .../chichen_itza_illustration.dart | 18 ++-- .../common/wonder_title_text.dart | 4 +- macos/Flutter/GeneratedPluginRegistrant.swift | 2 + pubspec.lock | 17 +++- pubspec.yaml | 1 + .../flutter/generated_plugin_registrant.cc | 3 + windows/flutter/generated_plugins.cmake | 1 + 19 files changed, 122 insertions(+), 57 deletions(-) diff --git a/lib/logic/app_logic.dart b/lib/logic/app_logic.dart index 16ee9e39..1f939f22 100644 --- a/lib/logic/app_logic.dart +++ b/lib/logic/app_logic.dart @@ -1,5 +1,6 @@ import 'dart:async'; +import 'package:desktop_window/desktop_window.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter_displaymode/flutter_displaymode.dart'; import 'package:wonders/common_libs.dart'; @@ -16,6 +17,9 @@ class AppLogic { // Default error handler FlutterError.onError = _handleFlutterError; + // Set min-sizes for desktop apps + await DesktopWindow.setMinWindowSize($styles.sizes.minAppSize); + // Load any bitmaps the views might need await AppBitmaps.init(); diff --git a/lib/styles/styles.dart b/lib/styles/styles.dart index 16bd4fcd..318eb28c 100644 --- a/lib/styles/styles.dart +++ b/lib/styles/styles.dart @@ -6,10 +6,32 @@ import 'package:wonders/common_libs.dart'; export 'colors.dart'; -final $styles = AppStyle(); +AppStyle $styles = AppStyle(); @immutable class AppStyle { + AppStyle({Size? appSize}) { + if (appSize == null) { + scale = 1; + return; + } + final screenSize = (appSize.width + appSize.height) / 2; + if (screenSize > 1600) { + scale = 1.25; + } else if (screenSize > 1400) { + scale = 1.15; + } else if (screenSize > 1000) { + scale = 1.1; + } else if (screenSize > 800) { + scale = 1; + } else { + scale = .9; + } + debugPrint('screenSize=$screenSize, scale=$scale'); + } + + late final double scale; + /// The current theme colors for the app final AppColors colors = AppColors(); @@ -19,20 +41,23 @@ class AppStyle { late final _Shadows shadows = _Shadows(); /// Padding and margin values - late final _Insets insets = _Insets(); + late final _Insets insets = _Insets(scale); /// Text styles - late final _Text text = _Text(); + late final _Text text = _Text(scale); /// Animation Durations final _Times times = _Times(); /// Shared sizes - final _Sizes sizes = _Sizes(); + late final _Sizes sizes = _Sizes(); } @immutable class _Text { + _Text(this._scale); + final double _scale; + final Map _titleFonts = { 'en': TextStyle(fontFamily: 'Tenor'), }; @@ -71,35 +96,41 @@ class _Text { TextStyle get contentFont => _getFontForLocale(_contentFonts); TextStyle get monoTitleFont => _getFontForLocale(_monoTitleFonts); - late final TextStyle dropCase = copy(quoteFont, sizePx: 56, heightPx: 20); + late final TextStyle dropCase = _createFont(quoteFont, sizePx: 56, heightPx: 20); - late final TextStyle wonderTitle = copy(wonderTitleFont, sizePx: 64, heightPx: 56); + late final TextStyle wonderTitle = _createFont(wonderTitleFont, sizePx: 64, heightPx: 56); - late final TextStyle h1 = copy(titleFont, sizePx: 64, heightPx: 62); - late final TextStyle h2 = copy(titleFont, sizePx: 32, heightPx: 46); - late final TextStyle h3 = copy(titleFont, sizePx: 24, heightPx: 36, weight: FontWeight.w600); - late final TextStyle h4 = copy(contentFont, sizePx: 14, heightPx: 23, spacingPc: 5, weight: FontWeight.w600); + late final TextStyle h1 = _createFont(titleFont, sizePx: 64, heightPx: 62); + late final TextStyle h2 = _createFont(titleFont, sizePx: 32, heightPx: 46); + late final TextStyle h3 = _createFont(titleFont, sizePx: 24, heightPx: 36, weight: FontWeight.w600); + late final TextStyle h4 = _createFont(contentFont, sizePx: 14, heightPx: 23, spacingPc: 5, weight: FontWeight.w600); - late final TextStyle title1 = copy(titleFont, sizePx: 16, heightPx: 26, spacingPc: 5); - late final TextStyle title2 = copy(titleFont, sizePx: 14, heightPx: 16.38); + late final TextStyle title1 = _createFont(titleFont, sizePx: 16, heightPx: 26, spacingPc: 5); + late final TextStyle title2 = _createFont(titleFont, sizePx: 14, heightPx: 16.38); - late final TextStyle body = copy(contentFont, sizePx: 16, heightPx: 27); - late final TextStyle bodyBold = copy(contentFont, sizePx: 16, heightPx: 26, weight: FontWeight.w600); - late final TextStyle bodySmall = copy(contentFont, sizePx: 14, heightPx: 23); - late final TextStyle bodySmallBold = copy(contentFont, sizePx: 14, heightPx: 23, weight: FontWeight.w600); + late final TextStyle body = _createFont(contentFont, sizePx: 16, heightPx: 27); + late final TextStyle bodyBold = _createFont(contentFont, sizePx: 16, heightPx: 26, weight: FontWeight.w600); + late final TextStyle bodySmall = _createFont(contentFont, sizePx: 14, heightPx: 23); + late final TextStyle bodySmallBold = _createFont(contentFont, sizePx: 14, heightPx: 23, weight: FontWeight.w600); - late final TextStyle quote1 = copy(quoteFont, sizePx: 32, heightPx: 40, weight: FontWeight.w600, spacingPc: -3); - late final TextStyle quote2 = copy(quoteFont, sizePx: 21, heightPx: 32, weight: FontWeight.w400); - late final TextStyle quote2Sub = copy(body, sizePx: 16, heightPx: 40, weight: FontWeight.w400); + late final TextStyle quote1 = + _createFont(quoteFont, sizePx: 32, heightPx: 40, weight: FontWeight.w600, spacingPc: -3); + late final TextStyle quote2 = _createFont(quoteFont, sizePx: 21, heightPx: 32, weight: FontWeight.w400); + late final TextStyle quote2Sub = _createFont(body, sizePx: 16, heightPx: 40, weight: FontWeight.w400); late final TextStyle caption = - copy(contentFont, sizePx: 12, heightPx: 18, weight: FontWeight.w500).copyWith(fontStyle: FontStyle.italic); + _createFont(contentFont, sizePx: 12, heightPx: 18, weight: FontWeight.w500).copyWith(fontStyle: FontStyle.italic); late final TextStyle callout = - copy(contentFont, sizePx: 16, heightPx: 26, weight: FontWeight.w600).copyWith(fontStyle: FontStyle.italic); - late final TextStyle btn = copy(titleFont, sizePx: 12, weight: FontWeight.w600, heightPx: 13.2); + _createFont(contentFont, sizePx: 16, heightPx: 26, weight: FontWeight.w600).copyWith(fontStyle: FontStyle.italic); + late final TextStyle btn = _createFont(titleFont, sizePx: 12, weight: FontWeight.w600, heightPx: 13.2); - TextStyle copy(TextStyle style, {required double sizePx, double? heightPx, double? spacingPc, FontWeight? weight}) { + TextStyle _createFont(TextStyle style, + {required double sizePx, double? heightPx, double? spacingPc, FontWeight? weight}) { + sizePx *= _scale; + if (heightPx != null) { + heightPx *= _scale; + } return style.copyWith( fontSize: sizePx, height: heightPx != null ? (heightPx / sizePx) : style.height, @@ -126,18 +157,22 @@ class _Corners { // TODO: add, @immutable when design is solidified class _Sizes { double get maxContentWidth => 800; + final Size minAppSize = Size(450, 600); } @immutable class _Insets { - late final double xxs = 4; - late final double xs = 8; - late final double sm = 16; - late final double md = 24; - late final double lg = 32; - late final double xl = 48; - late final double xxl = 56; - late final double offset = 80; + _Insets(this._scale); + final double _scale; + + late final double xxs = 4 * _scale; + late final double xs = 8 * _scale; + late final double sm = 16 * _scale; + late final double md = 24 * _scale; + late final double lg = 32 * _scale; + late final double xl = 48 * _scale; + late final double xxl = 56 * _scale; + late final double offset = 80 * _scale; } @immutable diff --git a/lib/ui/app_scaffold.dart b/lib/ui/app_scaffold.dart index 9824c777..37035772 100644 --- a/lib/ui/app_scaffold.dart +++ b/lib/ui/app_scaffold.dart @@ -8,7 +8,11 @@ class WondersAppScaffold extends StatelessWidget with GetItMixin { @override Widget build(BuildContext context) { Animate.defaultDuration = $styles.times.fast; + // Listen to the device size, and update AppStyle when it changes + //$styles = AppStyle(appSize: null); //Size(context.widthPx, context.heightPx)); + $styles = AppStyle(appSize: Size(context.widthPx, context.heightPx)); return Stack( + key: ValueKey($styles.scale), children: [ Theme( data: $styles.colors.toThemeData(), diff --git a/lib/ui/common/controls/diagonal_text_page_indicator.dart b/lib/ui/common/controls/diagonal_text_page_indicator.dart index 4d62d346..881727b5 100644 --- a/lib/ui/common/controls/diagonal_text_page_indicator.dart +++ b/lib/ui/common/controls/diagonal_text_page_indicator.dart @@ -5,13 +5,12 @@ class DiagonalTextPageIndicator extends StatelessWidget { const DiagonalTextPageIndicator({Key? key, required this.current, required this.total}) : super(key: key); final int current; final int total; - static const double _fontSize = 26; + static final _fontSize = 26 * $styles.scale; @override Widget build(BuildContext context) { - //final textShadows = [Shadow(color: Colors.black.withOpacity(.5), offset: Offset(0, 4), blurRadius: 6)]; final textStyle = $styles.text.titleFont.copyWith(fontSize: _fontSize, height: 1); - const size = _fontSize * 1.5; + final size = _fontSize * 1.5; return StaticTextScale( child: Padding( padding: EdgeInsets.symmetric(horizontal: textStyle.fontSize! * .4).copyWith(top: textStyle.fontSize! * .2), diff --git a/lib/ui/screens/artifact/artifact_search/time_range_selector/expanding_time_range_selector.dart b/lib/ui/screens/artifact/artifact_search/time_range_selector/expanding_time_range_selector.dart index bac05725..49c3abb4 100644 --- a/lib/ui/screens/artifact/artifact_search/time_range_selector/expanding_time_range_selector.dart +++ b/lib/ui/screens/artifact/artifact_search/time_range_selector/expanding_time_range_selector.dart @@ -172,7 +172,7 @@ class _OpenedTimeRange extends StatelessWidget { double safeBottom = max($styles.insets.sm, MediaQuery.of(context).padding.bottom); List timelineGrid = List.generate(5, (_) => Container(width: 1, color: $styles.colors.black)); - final headingTextStyle = $styles.text.title1.copyWith(color: $styles.colors.offWhite, fontSize: 18); + final headingTextStyle = $styles.text.title1.copyWith(color: $styles.colors.offWhite, fontSize: 18 * $styles.scale); final captionTextStyle = $styles.text.bodySmall.copyWith(color: $styles.colors.greyMedium); final startYr = startYear.round(), endYr = endYear.round(); diff --git a/lib/ui/screens/artifact/artifact_search/widgets/_results_grid.dart b/lib/ui/screens/artifact/artifact_search/widgets/_results_grid.dart index f0b83f2d..1449bdc6 100644 --- a/lib/ui/screens/artifact/artifact_search/widgets/_results_grid.dart +++ b/lib/ui/screens/artifact/artifact_search/widgets/_results_grid.dart @@ -2,7 +2,7 @@ part of '../artifact_search_screen.dart'; /// Staggered Masonry styled grid for displaying two columns of different aspect-ratio images. class _ResultsGrid extends StatefulWidget { - _ResultsGrid({Key? key, required this.searchResults, required this.onPressed}) : super(key: key); + const _ResultsGrid({Key? key, required this.searchResults, required this.onPressed}) : super(key: key); final void Function(SearchData) onPressed; final List searchResults; diff --git a/lib/ui/screens/editorial/widgets/_circular_title_bar.dart b/lib/ui/screens/editorial/widgets/_circular_title_bar.dart index 9314a938..f4c3ac5e 100644 --- a/lib/ui/screens/editorial/widgets/_circular_title_bar.dart +++ b/lib/ui/screens/editorial/widgets/_circular_title_bar.dart @@ -134,7 +134,10 @@ class _AnimatedCircleWithTextState extends State<_AnimatedCircleWithText> with S } Widget _buildCircularText(String title) { - final textStyle = $styles.text.monoTitleFont.copyWith(fontSize: 22, color: $styles.colors.accent1); + final textStyle = $styles.text.monoTitleFont.copyWith( + fontSize: 22 * $styles.scale, + color: $styles.colors.accent1, + ); return CircularText( position: CircularTextPosition.inside, children: [ diff --git a/lib/ui/screens/editorial/widgets/_collapsing_pull_quote_image.dart b/lib/ui/screens/editorial/widgets/_collapsing_pull_quote_image.dart index 093a370d..706db5e5 100644 --- a/lib/ui/screens/editorial/widgets/_collapsing_pull_quote_image.dart +++ b/lib/ui/screens/editorial/widgets/_collapsing_pull_quote_image.dart @@ -18,7 +18,7 @@ class _CollapsingPullQuoteImage extends StatelessWidget { var quoteStyle = $styles.text.quote1; quoteStyle = quoteStyle.copyWith(color: $styles.colors.caption); if (isAuthor) { - quoteStyle = quoteStyle.copyWith(fontSize: 20, fontWeight: FontWeight.w600); + quoteStyle = quoteStyle.copyWith(fontSize: 20 * $styles.scale, fontWeight: FontWeight.w600); } double offsetY = (imgHeight / 2 + outerPadding * .25) * (1 - collapseAmt); if (top) offsetY *= -1; // flip? diff --git a/lib/ui/screens/editorial/widgets/_large_simple_quote.dart b/lib/ui/screens/editorial/widgets/_large_simple_quote.dart index 651a0b06..a977929c 100644 --- a/lib/ui/screens/editorial/widgets/_large_simple_quote.dart +++ b/lib/ui/screens/editorial/widgets/_large_simple_quote.dart @@ -17,7 +17,7 @@ class _LargeSimpleQuote extends StatelessWidget { '“', style: $styles.text.quote1.copyWith( color: $styles.colors.accent1, - fontSize: 90, + fontSize: 90 * $styles.scale, height: .7, ), ), diff --git a/lib/ui/screens/intro/intro_screen.dart b/lib/ui/screens/intro/intro_screen.dart index 7d3211ad..266a5b70 100644 --- a/lib/ui/screens/intro/intro_screen.dart +++ b/lib/ui/screens/intro/intro_screen.dart @@ -218,7 +218,7 @@ class _Page extends StatelessWidget { child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ - Text(data.title, style: $styles.text.wonderTitle.copyWith(fontSize: 24)), + Text(data.title, style: $styles.text.wonderTitle.copyWith(fontSize: 24 * $styles.scale)), Gap($styles.insets.sm), Text(data.desc, style: $styles.text.body, textAlign: TextAlign.center), ], @@ -245,7 +245,7 @@ class _WonderousLogo extends StatelessWidget { StaticTextScale( child: Text( $strings.introSemanticWonderous, - style: $styles.text.wonderTitle.copyWith(fontSize: 32, color: $styles.colors.offWhite), + style: $styles.text.wonderTitle.copyWith(fontSize: 32 * $styles.scale, color: $styles.colors.offWhite), ), ) ], diff --git a/lib/ui/screens/photo_gallery/photo_gallery.dart b/lib/ui/screens/photo_gallery/photo_gallery.dart index f3475fff..40565a42 100644 --- a/lib/ui/screens/photo_gallery/photo_gallery.dart +++ b/lib/ui/screens/photo_gallery/photo_gallery.dart @@ -138,7 +138,10 @@ class _PhotoGalleryState extends State { return Center(child: AppLoadingIndicator()); } - Size imgSize = (widget.imageSize ?? Size(context.widthPx * .66, context.heightPx * .5)) * _scale; + Size imgSize = context.isLandscape + ? Size(context.widthPx * .5, context.heightPx * .66) + : Size(context.widthPx * .66, context.heightPx * .5); + imgSize = (widget.imageSize ?? imgSize) * _scale; // Get transform offset for the current _index final padding = $styles.insets.md; diff --git a/lib/ui/screens/wonder_details/wonders_details_screen.dart b/lib/ui/screens/wonder_details/wonders_details_screen.dart index 61723101..38efce6f 100644 --- a/lib/ui/screens/wonder_details/wonders_details_screen.dart +++ b/lib/ui/screens/wonder_details/wonders_details_screen.dart @@ -77,7 +77,6 @@ class _WonderDetailsScreenState extends State tabController: _tabController, wonderType: wonder.type, showBg: showTabBarBg, - showHomeBtn: true, ), ), ), diff --git a/lib/ui/wonder_illustrations/chichen_itza_illustration.dart b/lib/ui/wonder_illustrations/chichen_itza_illustration.dart index 01885d2b..35347159 100644 --- a/lib/ui/wonder_illustrations/chichen_itza_illustration.dart +++ b/lib/ui/wonder_illustrations/chichen_itza_illustration.dart @@ -46,15 +46,19 @@ class ChichenItzaIllustration extends StatelessWidget { } List _buildMg(BuildContext context, Animation anim) { + // We want to size to the shortest side return [ Align( - alignment: Alignment(0, config.shortMode ? 1.2 : -.15), - child: FractionallySizedBox( - heightFactor: config.shortMode ? null : 2.6, - child: WonderHero( - config, - 'chichen-mg', - child: Image.asset('$assetPath/chichen.png', opacity: anim, fit: BoxFit.contain), + alignment: Alignment(0, config.shortMode ? 1 : 0), + child: Transform.translate( + offset: Offset(0, config.shortMode ? 30 : 0), + child: FractionallySizedBox( + heightFactor: config.shortMode ? 1 : .6, + child: WonderHero( + config, + 'chichen-mg', + child: Image.asset('$assetPath/chichen.png', opacity: anim, fit: BoxFit.cover), + ), ), ), ), diff --git a/lib/ui/wonder_illustrations/common/wonder_title_text.dart b/lib/ui/wonder_illustrations/common/wonder_title_text.dart index cf10d44d..b9187a81 100644 --- a/lib/ui/wonder_illustrations/common/wonder_title_text.dart +++ b/lib/ui/wonder_illustrations/common/wonder_title_text.dart @@ -18,7 +18,7 @@ class WonderTitleText extends StatelessWidget { ); bool smallText = [WonderType.christRedeemer, WonderType.colosseum].contains(data.type); if (smallText) { - textStyle = textStyle.copyWith(fontSize: 56); + textStyle = textStyle.copyWith(fontSize: 56 * $styles.scale); } // First, get a list like: ['the\n', 'great wall'] @@ -37,7 +37,7 @@ class WonderTitleText extends StatelessWidget { } return TextSpan( text: '$text${addLinebreak ? '\n' : addSpace ? ' ' : ''}', - style: useSmallText ? textStyle.copyWith(fontSize: 20) : textStyle, + style: useSmallText ? textStyle.copyWith(fontSize: 20 * $styles.scale) : textStyle, ); } diff --git a/macos/Flutter/GeneratedPluginRegistrant.swift b/macos/Flutter/GeneratedPluginRegistrant.swift index c4ec6394..35f1cff2 100644 --- a/macos/Flutter/GeneratedPluginRegistrant.swift +++ b/macos/Flutter/GeneratedPluginRegistrant.swift @@ -5,6 +5,7 @@ import FlutterMacOS import Foundation +import desktop_window import package_info_plus_macos import path_provider_macos import share_plus_macos @@ -12,6 +13,7 @@ import shared_preferences_macos import url_launcher_macos func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) { + DesktopWindowPlugin.register(with: registry.registrar(forPlugin: "DesktopWindowPlugin")) FLTPackageInfoPlusPlugin.register(with: registry.registrar(forPlugin: "FLTPackageInfoPlusPlugin")) PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin")) SharePlusMacosPlugin.register(with: registry.registrar(forPlugin: "SharePlusMacosPlugin")) diff --git a/pubspec.lock b/pubspec.lock index ccd91552..39817344 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -197,6 +197,13 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "2.2.3" + desktop_window: + dependency: "direct main" + description: + name: desktop_window + url: "https://pub.dartlang.org" + source: hosted + version: "0.4.0" drop_cap_text: dependency: "direct main" description: @@ -238,7 +245,7 @@ packages: name: file url: "https://pub.dartlang.org" source: hosted - version: "6.1.4" + version: "6.1.2" fixnum: dependency: transitive description: @@ -1027,7 +1034,7 @@ packages: name: test_api url: "https://pub.dartlang.org" source: hosted - version: "0.4.14" + version: "0.4.12" timing: dependency: transitive description: @@ -1125,14 +1132,14 @@ packages: name: vector_math url: "https://pub.dartlang.org" source: hosted - version: "2.1.3" + version: "2.1.2" vm_service: dependency: transitive description: name: vm_service url: "https://pub.dartlang.org" source: hosted - version: "9.4.0" + version: "9.3.0" watcher: dependency: transitive description: @@ -1190,5 +1197,5 @@ packages: source: hosted version: "2.3.0" sdks: - dart: ">=2.18.0 <3.0.0" + dart: ">=2.17.1 <3.0.0" flutter: ">=3.0.0" diff --git a/pubspec.yaml b/pubspec.yaml index de58affb..7872f510 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -15,6 +15,7 @@ dependencies: collection: ^1.15.0 copy_with_extension: ^4.0.3 + desktop_window: ^0.4.0 drop_cap_text: ^1.1.3 equatable: ^2.0.5 extra_alignments: ^1.0.0+1 diff --git a/windows/flutter/generated_plugin_registrant.cc b/windows/flutter/generated_plugin_registrant.cc index 4f788487..33bc361e 100644 --- a/windows/flutter/generated_plugin_registrant.cc +++ b/windows/flutter/generated_plugin_registrant.cc @@ -6,9 +6,12 @@ #include "generated_plugin_registrant.h" +#include #include void RegisterPlugins(flutter::PluginRegistry* registry) { + DesktopWindowPluginRegisterWithRegistrar( + registry->GetRegistrarForPlugin("DesktopWindowPlugin")); UrlLauncherWindowsRegisterWithRegistrar( registry->GetRegistrarForPlugin("UrlLauncherWindows")); } diff --git a/windows/flutter/generated_plugins.cmake b/windows/flutter/generated_plugins.cmake index 88b22e5c..d3bb5785 100644 --- a/windows/flutter/generated_plugins.cmake +++ b/windows/flutter/generated_plugins.cmake @@ -3,6 +3,7 @@ # list(APPEND FLUTTER_PLUGIN_LIST + desktop_window url_launcher_windows )