Add font scaling

This commit is contained in:
Hillel Coren 2021-12-05 09:15:11 +02:00
parent e883d03737
commit 8f3a25a9c1
3 changed files with 353 additions and 297 deletions

View File

@ -250,6 +250,12 @@ class InvoiceNinjaAppState extends State<InvoiceNinjaApp> {
state.prefState.enableDarkMode ? Colors.white : Colors.black87, state.prefState.enableDarkMode ? Colors.white : Colors.black87,
); );
// https://stackoverflow.com/a/69883043/497368
MediaQueryData windowData =
MediaQueryData.fromWindow(WidgetsBinding.instance.window);
windowData = windowData.copyWith(
textScaleFactor: state.prefState.textScaleFactor);
return StyledToast( return StyledToast(
locale: locale, locale: locale,
duration: Duration(seconds: 3), duration: Duration(seconds: 3),
@ -262,12 +268,15 @@ class InvoiceNinjaAppState extends State<InvoiceNinjaApp> {
), ),
child: WebSocketRefresh( child: WebSocketRefresh(
companyId: state.company?.id, companyId: state.company?.id,
child: MediaQuery(
data: windowData,
child: MaterialApp( child: MaterialApp(
useInheritedMediaQuery: true,
scrollBehavior: MyCustomScrollBehavior(), scrollBehavior: MyCustomScrollBehavior(),
navigatorKey: navigatorKey, navigatorKey: navigatorKey,
supportedLocales: kLanguages supportedLocales: kLanguages
.map( .map((String locale) =>
(String locale) => AppLocalization.createLocale(locale)) AppLocalization.createLocale(locale))
.toList(), .toList(),
debugShowCheckedModeBanner: false, debugShowCheckedModeBanner: false,
//showPerformanceOverlay: true, //showPerformanceOverlay: true,
@ -303,8 +312,8 @@ class InvoiceNinjaAppState extends State<InvoiceNinjaApp> {
primaryColorDark: Colors.black, primaryColorDark: Colors.black,
textButtonTheme: textButtonTheme:
TextButtonThemeData(style: textButtonTheme), TextButtonThemeData(style: textButtonTheme),
outlinedButtonTheme: outlinedButtonTheme: OutlinedButtonThemeData(
OutlinedButtonThemeData(style: outlinedButtonTheme), style: outlinedButtonTheme),
) )
: ThemeData( : ThemeData(
colorScheme: ColorScheme.fromSwatch() colorScheme: ColorScheme.fromSwatch()
@ -340,17 +349,19 @@ class InvoiceNinjaAppState extends State<InvoiceNinjaApp> {
appBarTheme: AppBarTheme( appBarTheme: AppBarTheme(
color: hasAccentColor ? accentColor : Colors.white, color: hasAccentColor ? accentColor : Colors.white,
iconTheme: IconThemeData( iconTheme: IconThemeData(
color: hasAccentColor ? Colors.white : accentColor, color:
hasAccentColor ? Colors.white : accentColor,
), ),
titleTextStyle: TextStyle( titleTextStyle: TextStyle(
fontSize: 20, fontSize: 20,
color: color: hasAccentColor
hasAccentColor ? Colors.white : Colors.black), ? Colors.white
: Colors.black),
), ),
textButtonTheme: textButtonTheme:
TextButtonThemeData(style: textButtonTheme), TextButtonThemeData(style: textButtonTheme),
outlinedButtonTheme: outlinedButtonTheme: OutlinedButtonThemeData(
OutlinedButtonThemeData(style: outlinedButtonTheme), style: outlinedButtonTheme),
), ),
title: kAppName, title: kAppName,
onGenerateRoute: isMobile(context) ? null : generateRoute, onGenerateRoute: isMobile(context) ? null : generateRoute,
@ -370,9 +381,12 @@ class InvoiceNinjaAppState extends State<InvoiceNinjaApp> {
ProductViewScreen(), ProductViewScreen(),
ProductEditScreen.route: (context) => ProductEditScreen.route: (context) =>
ProductEditScreen(), ProductEditScreen(),
ClientScreen.route: (context) => ClientScreenBuilder(), ClientScreen.route: (context) =>
ClientViewScreen.route: (context) => ClientViewScreen(), ClientScreenBuilder(),
ClientEditScreen.route: (context) => ClientEditScreen(), ClientViewScreen.route: (context) =>
ClientViewScreen(),
ClientEditScreen.route: (context) =>
ClientEditScreen(),
ClientPdfScreen.route: (context) => ClientPdfScreen(), ClientPdfScreen.route: (context) => ClientPdfScreen(),
InvoiceScreen.route: (context) => InvoiceScreen.route: (context) =>
InvoiceScreenBuilder(), InvoiceScreenBuilder(),
@ -382,7 +396,8 @@ class InvoiceNinjaAppState extends State<InvoiceNinjaApp> {
InvoiceEditScreen(), InvoiceEditScreen(),
InvoiceEmailScreen.route: (context) => InvoiceEmailScreen.route: (context) =>
InvoiceEmailScreen(), InvoiceEmailScreen(),
InvoicePdfScreen.route: (context) => InvoicePdfScreen(), InvoicePdfScreen.route: (context) =>
InvoicePdfScreen(),
DocumentScreen.route: (context) => DocumentScreen.route: (context) =>
DocumentScreenBuilder(), DocumentScreenBuilder(),
DocumentViewScreen.route: (context) => DocumentViewScreen.route: (context) =>
@ -395,9 +410,12 @@ class InvoiceNinjaAppState extends State<InvoiceNinjaApp> {
ExpenseViewScreen(), ExpenseViewScreen(),
ExpenseEditScreen.route: (context) => ExpenseEditScreen.route: (context) =>
ExpenseEditScreen(), ExpenseEditScreen(),
VendorScreen.route: (context) => VendorScreenBuilder(), VendorScreen.route: (context) =>
VendorViewScreen.route: (context) => VendorViewScreen(), VendorScreenBuilder(),
VendorEditScreen.route: (context) => VendorEditScreen(), VendorViewScreen.route: (context) =>
VendorViewScreen(),
VendorEditScreen.route: (context) =>
VendorEditScreen(),
TaskScreen.route: (context) => TaskScreenBuilder(), TaskScreen.route: (context) => TaskScreenBuilder(),
TaskViewScreen.route: (context) => TaskViewScreen(), TaskViewScreen.route: (context) => TaskViewScreen(),
TaskEditScreen.route: (context) => TaskEditScreen(), TaskEditScreen.route: (context) => TaskEditScreen(),
@ -418,7 +436,8 @@ class InvoiceNinjaAppState extends State<InvoiceNinjaApp> {
QuoteScreen.route: (context) => QuoteScreenBuilder(), QuoteScreen.route: (context) => QuoteScreenBuilder(),
QuoteViewScreen.route: (context) => QuoteViewScreen(), QuoteViewScreen.route: (context) => QuoteViewScreen(),
QuoteEditScreen.route: (context) => QuoteEditScreen(), QuoteEditScreen.route: (context) => QuoteEditScreen(),
QuoteEmailScreen.route: (context) => QuoteEmailScreen(), QuoteEmailScreen.route: (context) =>
QuoteEmailScreen(),
QuotePdfScreen.route: (context) => QuotePdfScreen(), QuotePdfScreen.route: (context) => QuotePdfScreen(),
// STARTER: routes - do not remove comment // STARTER: routes - do not remove comment
RecurringExpenseScreen.route: (context) => RecurringExpenseScreen.route: (context) =>
@ -470,12 +489,18 @@ class InvoiceNinjaAppState extends State<InvoiceNinjaApp> {
PaymentTermEditScreen(), PaymentTermEditScreen(),
PaymentTermViewScreen.route: (context) => PaymentTermViewScreen.route: (context) =>
PaymentTermViewScreen(), PaymentTermViewScreen(),
DesignScreen.route: (context) => DesignScreenBuilder(), DesignScreen.route: (context) =>
DesignViewScreen.route: (context) => DesignViewScreen(), DesignScreenBuilder(),
DesignEditScreen.route: (context) => DesignEditScreen(), DesignViewScreen.route: (context) =>
CreditScreen.route: (context) => CreditScreenBuilder(), DesignViewScreen(),
CreditViewScreen.route: (context) => CreditViewScreen(), DesignEditScreen.route: (context) =>
CreditEditScreen.route: (context) => CreditEditScreen(), DesignEditScreen(),
CreditScreen.route: (context) =>
CreditScreenBuilder(),
CreditViewScreen.route: (context) =>
CreditViewScreen(),
CreditEditScreen.route: (context) =>
CreditEditScreen(),
CreditEmailScreen.route: (context) => CreditEmailScreen.route: (context) =>
CreditEmailScreen(), CreditEmailScreen(),
CreditPdfScreen.route: (context) => CreditPdfScreen(), CreditPdfScreen.route: (context) => CreditPdfScreen(),
@ -548,6 +573,7 @@ class InvoiceNinjaAppState extends State<InvoiceNinjaApp> {
: {}, : {},
), ),
), ),
),
); );
}), }),
), ),

View File

@ -29,6 +29,7 @@ abstract class PrefState implements Built<PrefState, PrefStateBuilder> {
requireAuthentication: false, requireAuthentication: false,
colorTheme: kColorThemeLight, colorTheme: kColorThemeLight,
isFilterVisible: false, isFilterVisible: false,
textScaleFactor: 1,
longPressSelectionIsDefault: true, longPressSelectionIsDefault: true,
tapSelectedToEdit: false, tapSelectedToEdit: false,
hideDesktopWarning: false, hideDesktopWarning: false,
@ -44,6 +45,11 @@ abstract class PrefState implements Built<PrefState, PrefStateBuilder> {
PrefState._(); PrefState._();
static const TEXT_SCALING_NORMAL = 1.0;
static const TEXT_SCALING_LARGE = 1.2;
static const TEXT_SCALING_LARGER = 1.4;
static const TEXT_SCALING_LARGEST = 1.6;
static const THEME_SIDEBAR_ACTIVE_BACKGROUND_COLOR = static const THEME_SIDEBAR_ACTIVE_BACKGROUND_COLOR =
'sidebar_active_background_color'; 'sidebar_active_background_color';
static const THEME_SIDEBAR_ACTIVE_FONT_COLOR = 'sidebar_active_font_color'; static const THEME_SIDEBAR_ACTIVE_FONT_COLOR = 'sidebar_active_font_color';
@ -123,6 +129,8 @@ abstract class PrefState implements Built<PrefState, PrefStateBuilder> {
bool get hideDesktopWarning; bool get hideDesktopWarning;
double get textScaleFactor;
BuiltMap<EntityType, PrefStateSortField> get sortFields; BuiltMap<EntityType, PrefStateSortField> get sortFields;
ColorTheme get colorThemeModel => colorThemesMap.containsKey(colorTheme) ColorTheme get colorThemeModel => colorThemesMap.containsKey(colorTheme)
@ -190,6 +198,7 @@ abstract class PrefState implements Built<PrefState, PrefStateBuilder> {
..persistData = false ..persistData = false
..persistUI = true ..persistUI = true
..showPdfPreview = true ..showPdfPreview = true
..textScaleFactor = 1
..colorTheme = ..colorTheme =
builder.enableDarkMode == true ? kColorThemeLight : kColorThemeLight; builder.enableDarkMode == true ? kColorThemeLight : kColorThemeLight;

View File

@ -178,6 +178,9 @@ class _$PrefStateSerializer implements StructuredSerializer<PrefState> {
'hideDesktopWarning', 'hideDesktopWarning',
serializers.serialize(object.hideDesktopWarning, serializers.serialize(object.hideDesktopWarning,
specifiedType: const FullType(bool)), specifiedType: const FullType(bool)),
'textScaleFactor',
serializers.serialize(object.textScaleFactor,
specifiedType: const FullType(double)),
'sortFields', 'sortFields',
serializers.serialize(object.sortFields, serializers.serialize(object.sortFields,
specifiedType: const FullType(BuiltMap, const [ specifiedType: const FullType(BuiltMap, const [
@ -292,6 +295,10 @@ class _$PrefStateSerializer implements StructuredSerializer<PrefState> {
result.hideDesktopWarning = serializers.deserialize(value, result.hideDesktopWarning = serializers.deserialize(value,
specifiedType: const FullType(bool)) as bool; specifiedType: const FullType(bool)) as bool;
break; break;
case 'textScaleFactor':
result.textScaleFactor = serializers.deserialize(value,
specifiedType: const FullType(double)) as double;
break;
case 'sortFields': case 'sortFields':
result.sortFields.replace(serializers.deserialize(value, result.sortFields.replace(serializers.deserialize(value,
specifiedType: const FullType(BuiltMap, const [ specifiedType: const FullType(BuiltMap, const [
@ -579,6 +586,8 @@ class _$PrefState extends PrefState {
@override @override
final bool hideDesktopWarning; final bool hideDesktopWarning;
@override @override
final double textScaleFactor;
@override
final BuiltMap<EntityType, PrefStateSortField> sortFields; final BuiltMap<EntityType, PrefStateSortField> sortFields;
@override @override
final BuiltMap<String, CompanyPrefState> companyPrefs; final BuiltMap<String, CompanyPrefState> companyPrefs;
@ -608,6 +617,7 @@ class _$PrefState extends PrefState {
this.rowsPerPage, this.rowsPerPage,
this.colorTheme, this.colorTheme,
this.hideDesktopWarning, this.hideDesktopWarning,
this.textScaleFactor,
this.sortFields, this.sortFields,
this.companyPrefs}) this.companyPrefs})
: super._() { : super._() {
@ -651,6 +661,8 @@ class _$PrefState extends PrefState {
colorTheme, 'PrefState', 'colorTheme'); colorTheme, 'PrefState', 'colorTheme');
BuiltValueNullFieldError.checkNotNull( BuiltValueNullFieldError.checkNotNull(
hideDesktopWarning, 'PrefState', 'hideDesktopWarning'); hideDesktopWarning, 'PrefState', 'hideDesktopWarning');
BuiltValueNullFieldError.checkNotNull(
textScaleFactor, 'PrefState', 'textScaleFactor');
BuiltValueNullFieldError.checkNotNull( BuiltValueNullFieldError.checkNotNull(
sortFields, 'PrefState', 'sortFields'); sortFields, 'PrefState', 'sortFields');
BuiltValueNullFieldError.checkNotNull( BuiltValueNullFieldError.checkNotNull(
@ -689,6 +701,7 @@ class _$PrefState extends PrefState {
rowsPerPage == other.rowsPerPage && rowsPerPage == other.rowsPerPage &&
colorTheme == other.colorTheme && colorTheme == other.colorTheme &&
hideDesktopWarning == other.hideDesktopWarning && hideDesktopWarning == other.hideDesktopWarning &&
textScaleFactor == other.textScaleFactor &&
sortFields == other.sortFields && sortFields == other.sortFields &&
companyPrefs == other.companyPrefs; companyPrefs == other.companyPrefs;
} }
@ -714,8 +727,7 @@ class _$PrefState extends PrefState {
$jc( $jc(
$jc( $jc(
$jc( $jc(
$jc($jc($jc($jc($jc(0, appLayout.hashCode), moduleLayout.hashCode), menuSidebarMode.hashCode), historySidebarMode.hashCode), $jc($jc($jc($jc($jc($jc(0, appLayout.hashCode), moduleLayout.hashCode), menuSidebarMode.hashCode), historySidebarMode.hashCode), useSidebarEditor.hashCode),
useSidebarEditor.hashCode),
customColors.hashCode), customColors.hashCode),
isPreviewVisible.hashCode), isPreviewVisible.hashCode),
isMenuVisible.hashCode), isMenuVisible.hashCode),
@ -732,6 +744,7 @@ class _$PrefState extends PrefState {
rowsPerPage.hashCode), rowsPerPage.hashCode),
colorTheme.hashCode), colorTheme.hashCode),
hideDesktopWarning.hashCode), hideDesktopWarning.hashCode),
textScaleFactor.hashCode),
sortFields.hashCode), sortFields.hashCode),
companyPrefs.hashCode)); companyPrefs.hashCode));
} }
@ -760,6 +773,7 @@ class _$PrefState extends PrefState {
..add('rowsPerPage', rowsPerPage) ..add('rowsPerPage', rowsPerPage)
..add('colorTheme', colorTheme) ..add('colorTheme', colorTheme)
..add('hideDesktopWarning', hideDesktopWarning) ..add('hideDesktopWarning', hideDesktopWarning)
..add('textScaleFactor', textScaleFactor)
..add('sortFields', sortFields) ..add('sortFields', sortFields)
..add('companyPrefs', companyPrefs)) ..add('companyPrefs', companyPrefs))
.toString(); .toString();
@ -870,6 +884,11 @@ class PrefStateBuilder implements Builder<PrefState, PrefStateBuilder> {
set hideDesktopWarning(bool hideDesktopWarning) => set hideDesktopWarning(bool hideDesktopWarning) =>
_$this._hideDesktopWarning = hideDesktopWarning; _$this._hideDesktopWarning = hideDesktopWarning;
double _textScaleFactor;
double get textScaleFactor => _$this._textScaleFactor;
set textScaleFactor(double textScaleFactor) =>
_$this._textScaleFactor = textScaleFactor;
MapBuilder<EntityType, PrefStateSortField> _sortFields; MapBuilder<EntityType, PrefStateSortField> _sortFields;
MapBuilder<EntityType, PrefStateSortField> get sortFields => MapBuilder<EntityType, PrefStateSortField> get sortFields =>
_$this._sortFields ??= new MapBuilder<EntityType, PrefStateSortField>(); _$this._sortFields ??= new MapBuilder<EntityType, PrefStateSortField>();
@ -910,6 +929,7 @@ class PrefStateBuilder implements Builder<PrefState, PrefStateBuilder> {
_rowsPerPage = $v.rowsPerPage; _rowsPerPage = $v.rowsPerPage;
_colorTheme = $v.colorTheme; _colorTheme = $v.colorTheme;
_hideDesktopWarning = $v.hideDesktopWarning; _hideDesktopWarning = $v.hideDesktopWarning;
_textScaleFactor = $v.textScaleFactor;
_sortFields = $v.sortFields.toBuilder(); _sortFields = $v.sortFields.toBuilder();
_companyPrefs = $v.companyPrefs.toBuilder(); _companyPrefs = $v.companyPrefs.toBuilder();
_$v = null; _$v = null;
@ -963,6 +983,7 @@ class PrefStateBuilder implements Builder<PrefState, PrefStateBuilder> {
rowsPerPage: BuiltValueNullFieldError.checkNotNull(rowsPerPage, 'PrefState', 'rowsPerPage'), rowsPerPage: BuiltValueNullFieldError.checkNotNull(rowsPerPage, 'PrefState', 'rowsPerPage'),
colorTheme: BuiltValueNullFieldError.checkNotNull(colorTheme, 'PrefState', 'colorTheme'), colorTheme: BuiltValueNullFieldError.checkNotNull(colorTheme, 'PrefState', 'colorTheme'),
hideDesktopWarning: BuiltValueNullFieldError.checkNotNull(hideDesktopWarning, 'PrefState', 'hideDesktopWarning'), hideDesktopWarning: BuiltValueNullFieldError.checkNotNull(hideDesktopWarning, 'PrefState', 'hideDesktopWarning'),
textScaleFactor: BuiltValueNullFieldError.checkNotNull(textScaleFactor, 'PrefState', 'textScaleFactor'),
sortFields: sortFields.build(), sortFields: sortFields.build(),
companyPrefs: companyPrefs.build()); companyPrefs: companyPrefs.build());
} catch (_) { } catch (_) {