bachelor/wonders
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

restore font and inset scaling

Browse Source
This commit is contained in:
Shawn 2022-10-24 15:42:27 -06:00
parent 24f82bba46
commit e767fc0c21
19 changed files with 122 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
lib/logic/app_logic.dart
View File

@ -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();

97
lib/styles/styles.dart
View File

@ -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<String, TextStyle> _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

4
lib/ui/app_scaffold.dart
View File

@ -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(),

5
lib/ui/common/controls/diagonal_text_page_indicator.dart
View File

@ -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),

2
lib/ui/screens/artifact/artifact_search/time_range_selector/expanding_time_range_selector.dart
View File

@ -172,7 +172,7 @@ class _OpenedTimeRange extends StatelessWidget {
double safeBottom = max($styles.insets.sm, MediaQuery.of(context).padding.bottom);
List<Widget> 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();

2
lib/ui/screens/artifact/artifact_search/widgets/_results_grid.dart
View File

@ -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<SearchData> searchResults;

5
lib/ui/screens/editorial/widgets/_circular_title_bar.dart
View File

@ -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: [

2
lib/ui/screens/editorial/widgets/_collapsing_pull_quote_image.dart
View File

@ -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?

2
lib/ui/screens/editorial/widgets/_large_simple_quote.dart
View File

@ -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,
),
),

4
lib/ui/screens/intro/intro_screen.dart
View File

@ -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),
),
)
],

5
lib/ui/screens/photo_gallery/photo_gallery.dart
View File

@ -138,7 +138,10 @@ class _PhotoGalleryState extends State<PhotoGallery> {
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;

1
lib/ui/screens/wonder_details/wonders_details_screen.dart
View File

@ -77,7 +77,6 @@ class _WonderDetailsScreenState extends State<WonderDetailsScreen>
tabController: _tabController,
wonderType: wonder.type,
showBg: showTabBarBg,
showHomeBtn: true,
),
),
),

18
lib/ui/wonder_illustrations/chichen_itza_illustration.dart
View File

@ -46,15 +46,19 @@ class ChichenItzaIllustration extends StatelessWidget {
}
List<Widget> _buildMg(BuildContext context, Animation<double> 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),
),
),
),
),

4
lib/ui/wonder_illustrations/common/wonder_title_text.dart
View File

@ -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,
);
}

2
macos/Flutter/GeneratedPluginRegistrant.swift
View File

@ -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"))

17
pubspec.lock
View File

@ -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"

1
pubspec.yaml
View File

@ -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

3
windows/flutter/generated_plugin_registrant.cc
View File

@ -6,9 +6,12 @@
#include "generated_plugin_registrant.h"
#include <desktop_window/desktop_window_plugin.h>
#include <url_launcher_windows/url_launcher_windows.h>
void RegisterPlugins(flutter::PluginRegistry* registry) {
DesktopWindowPluginRegisterWithRegistrar(
registry->GetRegistrarForPlugin("DesktopWindowPlugin"));
UrlLauncherWindowsRegisterWithRegistrar(
registry->GetRegistrarForPlugin("UrlLauncherWindows"));
}

1
windows/flutter/generated_plugins.cmake
View File

@ -3,6 +3,7 @@
#
list(APPEND FLUTTER_PLUGIN_LIST
desktop_window
url_launcher_windows
)