From 1eae15a1a82b07fa88cd637658b6af673e1efdb3 Mon Sep 17 00:00:00 2001 From: Jared Bell Date: Wed, 4 Jan 2023 21:32:50 -0700 Subject: [PATCH 1/6] Menu screen enhancements * Increase background blur * Reduce overlay transparency * Override local button padding to reduce size --- lib/ui/common/app_backdrop.dart | 2 +- lib/ui/common/controls/locale_switcher.dart | 2 +- lib/ui/screens/home_menu/home_menu.dart | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/ui/common/app_backdrop.dart b/lib/ui/common/app_backdrop.dart index 9993fc56..4bf0edea 100644 --- a/lib/ui/common/app_backdrop.dart +++ b/lib/ui/common/app_backdrop.dart @@ -18,7 +18,7 @@ class AppBackdrop extends StatelessWidget { final double normalStrength = clampDouble(strength, 0, 1); if (settingsLogic.useBlurs) { return BackdropFilter( - filter: ImageFilter.blur(sigmaX: normalStrength * 5.0, sigmaY: normalStrength * 5.0), + filter: ImageFilter.blur(sigmaX: normalStrength * 15.0, sigmaY: normalStrength * 15.0), child: child ?? SizedBox.expand(), ); } diff --git a/lib/ui/common/controls/locale_switcher.dart b/lib/ui/common/controls/locale_switcher.dart index 9db2beef..debc42e1 100644 --- a/lib/ui/common/controls/locale_switcher.dart +++ b/lib/ui/common/controls/locale_switcher.dart @@ -11,6 +11,6 @@ class LocaleSwitcher extends StatelessWidget with GetItMixin { await settingsLogic.changeLocale(newLocale); } - return AppBtn.from(text: $strings.localeSwapButton, onPressed: handleSwapLocale); + return AppBtn.from(text: $strings.localeSwapButton, onPressed: handleSwapLocale, padding: EdgeInsets.all($styles.insets.sm)); } } diff --git a/lib/ui/screens/home_menu/home_menu.dart b/lib/ui/screens/home_menu/home_menu.dart index 97f14ebb..8a34628e 100644 --- a/lib/ui/screens/home_menu/home_menu.dart +++ b/lib/ui/screens/home_menu/home_menu.dart @@ -54,7 +54,7 @@ class _HomeMenuState extends State { /// Backdrop / Underlay AppBackdrop( strength: .5, - child: Container(color: $styles.colors.greyStrong.withOpacity(.7)), + child: Container(color: $styles.colors.greyStrong.withOpacity(.5)), ), PopNavigatorUnderlay(), From 008a09ac05fccfd7abb337ca294ec90363601d4c Mon Sep 17 00:00:00 2001 From: Jared Bell Date: Wed, 4 Jan 2023 21:33:39 -0700 Subject: [PATCH 2/6] Remove collection header background * Change to transparent --- lib/ui/screens/collection/collection_screen.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/ui/screens/collection/collection_screen.dart b/lib/ui/screens/collection/collection_screen.dart index 4be40b4d..5a55d7eb 100644 --- a/lib/ui/screens/collection/collection_screen.dart +++ b/lib/ui/screens/collection/collection_screen.dart @@ -64,7 +64,7 @@ class _CollectionScreenState extends State with GetItStateMixi children: [ Expanded( child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - AppHeader(title: $strings.collectionTitleCollection), + AppHeader(title: $strings.collectionTitleCollection, isTransparent: true), _NewlyDiscoveredItemsBtn(count: discovered, onPressed: _scrollToTarget), Flexible( child: _CollectionList( From 4fe946e587de4bc9405f392d909f8e9d73408eb6 Mon Sep 17 00:00:00 2001 From: Jared Bell Date: Wed, 4 Jan 2023 22:13:26 -0700 Subject: [PATCH 3/6] Enhance Wonder Events * Increase font sizes + remove discretionary ligatures from body type (clean up, simplify) * Adjust spacing * Standardize maxContentWidth use * Adjust scroll blur height for tablet portrait (was unblurring) --- lib/styles/styles.dart | 7 +++---- lib/ui/common/timeline_event_card.dart | 2 +- lib/ui/screens/wonder_events/widgets/_events_list.dart | 4 ++-- .../wonder_events/widgets/_wonder_image_with_timeline.dart | 6 +++--- lib/ui/screens/wonder_events/wonder_events.dart | 6 +++--- 5 files changed, 12 insertions(+), 13 deletions(-) diff --git a/lib/styles/styles.dart b/lib/styles/styles.dart index 0a9ec4db..2fdc9e33 100644 --- a/lib/styles/styles.dart +++ b/lib/styles/styles.dart @@ -79,7 +79,6 @@ class _Text { final Map _contentFonts = { 'en': TextStyle(fontFamily: 'Raleway', fontFeatures: const [ - FontFeature.enable('dlig'), FontFeature.enable('kern'), ]), }; @@ -110,7 +109,7 @@ class _Text { 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 = _createFont(contentFont, sizePx: 16, heightPx: 27); + late final TextStyle body = _createFont(contentFont, sizePx: 16, heightPx: 26); 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); @@ -121,11 +120,11 @@ class _Text { late final TextStyle quote2Sub = _createFont(body, sizePx: 16, heightPx: 40, weight: FontWeight.w400); late final TextStyle caption = - _createFont(contentFont, sizePx: 12, heightPx: 18, weight: FontWeight.w500).copyWith(fontStyle: FontStyle.italic); + _createFont(contentFont, sizePx: 14, heightPx: 20, weight: FontWeight.w500).copyWith(fontStyle: FontStyle.italic); late final TextStyle callout = _createFont(contentFont, sizePx: 16, heightPx: 26, weight: FontWeight.w600).copyWith(fontStyle: FontStyle.italic); - late final TextStyle btn = _createFont(contentFont, sizePx: 12, weight: FontWeight.w600, heightPx: 14); + late final TextStyle btn = _createFont(contentFont, sizePx: 14, weight: FontWeight.w500, spacingPc: 2, heightPx: 14); TextStyle _createFont(TextStyle style, {required double sizePx, double? heightPx, double? spacingPc, FontWeight? weight}) { diff --git a/lib/ui/common/timeline_event_card.dart b/lib/ui/common/timeline_event_card.dart index 8f1289d2..c8c6947d 100644 --- a/lib/ui/common/timeline_event_card.dart +++ b/lib/ui/common/timeline_event_card.dart @@ -40,7 +40,7 @@ class TimelineEventCard extends StatelessWidget { /// Text content Expanded( - child: Text(text, style: $styles.text.bodySmall), + child: Text(text, style: $styles.text.body), ), ], ), diff --git a/lib/ui/screens/wonder_events/widgets/_events_list.dart b/lib/ui/screens/wonder_events/widgets/_events_list.dart index 417b80c2..8913761a 100644 --- a/lib/ui/screens/wonder_events/widgets/_events_list.dart +++ b/lib/ui/screens/wonder_events/widgets/_events_list.dart @@ -101,12 +101,12 @@ class _EventsListState extends State<_EventsList> { double backdropAmt = 0; if (_scroller.hasClients && showBackdrop) { double blurStart = 50; - double maxScroll = 150; + double maxScroll = 300; double scrollPx = _scroller.position.pixels - blurStart; // Normalize scroll position to a value between 0 and 1 backdropAmt = (_scroller.position.pixels - blurStart).clamp(0, maxScroll) / maxScroll; // Disable backdrop once it is offscreen for an easy perf win - showBackdrop = (scrollPx <= 500); + showBackdrop = (scrollPx <= 1000); } // Container provides a underlay which gets darker as the background blurs return Stack( diff --git a/lib/ui/screens/wonder_events/widgets/_wonder_image_with_timeline.dart b/lib/ui/screens/wonder_events/widgets/_wonder_image_with_timeline.dart index 2e303a21..e7c49fb0 100644 --- a/lib/ui/screens/wonder_events/widgets/_wonder_image_with_timeline.dart +++ b/lib/ui/screens/wonder_events/widgets/_wonder_image_with_timeline.dart @@ -5,7 +5,7 @@ class _WonderImageWithTimeline extends StatelessWidget { final WonderData data; final double height; - Color _fixLuminance(Color color, [double luminance = 0.35]) { + Color _fixLuminance(Color color, [double luminance = 0.2]) { double d = luminance - color.computeLuminance(); if (d <= 0) return color; int r = color.red, g = color.green, b = color.blue; @@ -20,7 +20,7 @@ class _WonderImageWithTimeline extends StatelessWidget { child: LightText( child: SeparatedColumn( separatorBuilder: () => Gap($styles.insets.xs * 1.5), - padding: EdgeInsets.only(top: $styles.insets.md, bottom: $styles.insets.sm), + padding: EdgeInsets.only(bottom: $styles.insets.sm), children: [ /// Text and image in a stack Expanded( @@ -47,7 +47,7 @@ class _WonderImageWithTimeline extends StatelessWidget { return Container( decoration: BoxDecoration( color: isSelected ? _fixLuminance(data.type.fgColor) : Colors.transparent, - border: Border.all(color: $styles.colors.greyMedium), + border: isSelected ? Border.all(color: Colors.transparent) : Border.all(color: $styles.colors.greyMedium), borderRadius: BorderRadius.circular($styles.corners.md), ), ); diff --git a/lib/ui/screens/wonder_events/wonder_events.dart b/lib/ui/screens/wonder_events/wonder_events.dart index 16a36a9f..ea56adac 100644 --- a/lib/ui/screens/wonder_events/wonder_events.dart +++ b/lib/ui/screens/wonder_events/wonder_events.dart @@ -35,7 +35,7 @@ class WonderEvents extends StatelessWidget { children: [ /// Main view switches between portrait and landscape views Positioned.fill( - top: $styles.insets.lg, + top: $styles.insets.sm, child: context.isLandscape ? _buildLandscape(context) : _buildPortrait(), ), @@ -108,7 +108,7 @@ class WonderEvents extends StatelessWidget { return LayoutBuilder(builder: (_, constraints) { double topHeight = max(constraints.maxHeight * .55, 200); return CenteredBox( - width: $styles.sizes.maxContentWidth3, + width: $styles.sizes.maxContentWidth2, child: Stack( children: [ /// Top content, sits underneath scrolling list @@ -129,7 +129,7 @@ class WonderEvents extends StatelessWidget { Gap($styles.insets.lg), /// Btn - _TimelineBtn(type: _data.type, width: $styles.sizes.maxContentWidth3), + _TimelineBtn(type: _data.type, width: $styles.sizes.maxContentWidth2), Gap($styles.insets.lg), ], ), From 2106da96abfd226b6de6723392b6cb73e3e3369c Mon Sep 17 00:00:00 2001 From: Jared Bell Date: Wed, 4 Jan 2023 22:16:09 -0700 Subject: [PATCH 4/6] Update _bottom_text_content.dart Remove search icon to standardize buttons, adjust spacing to avoid two-line misalignments. --- .../artifact_carousel/widgets/_bottom_text_content.dart | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/ui/screens/artifact/artifact_carousel/widgets/_bottom_text_content.dart b/lib/ui/screens/artifact/artifact_carousel/widgets/_bottom_text_content.dart index 1fc1803a..01d0592c 100644 --- a/lib/ui/screens/artifact/artifact_carousel/widgets/_bottom_text_content.dart +++ b/lib/ui/screens/artifact/artifact_carousel/widgets/_bottom_text_content.dart @@ -64,7 +64,7 @@ class _BottomTextContent extends StatelessWidget { ), ], ), - if (!shortMode) Gap($styles.insets.md), + if (!shortMode) Gap($styles.insets.sm), Spacer(), if (!shortMode) AppPageIndicator( @@ -75,7 +75,6 @@ class _BottomTextContent extends StatelessWidget { Gap($styles.insets.md), AppBtn.from( text: $strings.artifactsButtonBrowse, - icon: AppIcons.search, expand: true, onPressed: state._handleSearchTap, ), From 602c506452a7cb3f44f6713d250096f8ca220ecc Mon Sep 17 00:00:00 2001 From: Jared Bell Date: Wed, 4 Jan 2023 22:17:13 -0700 Subject: [PATCH 5/6] Cleanup artifact search styles * Fill in entire header black * Adjust padding * Adjust font sizes for date range picker --- .../artifact/artifact_search/artifact_search_screen.dart | 7 +++---- .../time_range_selector/expanding_time_range_selector.dart | 4 ++-- .../artifact/artifact_search/widgets/_search_input.dart | 2 +- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/lib/ui/screens/artifact/artifact_search/artifact_search_screen.dart b/lib/ui/screens/artifact/artifact_search/artifact_search_screen.dart index 8ea4eb58..e5db28bb 100644 --- a/lib/ui/screens/artifact/artifact_search/artifact_search_screen.dart +++ b/lib/ui/screens/artifact/artifact_search/artifact_search_screen.dart @@ -86,12 +86,11 @@ class _ArtifactSearchScreenState extends State with GetItS crossAxisAlignment: CrossAxisAlignment.stretch, children: [ AppHeader(title: $strings.artifactsSearchTitleBrowse, subtitle: wonder.title), - Gap($styles.insets.xs), - Padding( - padding: EdgeInsets.symmetric(horizontal: $styles.insets.sm), + Container( + color: $styles.colors.black, + padding: EdgeInsets.fromLTRB($styles.insets.sm, $styles.insets.sm, $styles.insets.sm, 0), child: _SearchInput(onSubmit: _handleSearchSubmitted, wonder: wonder), ), - Gap($styles.insets.sm), Container( color: $styles.colors.black, padding: EdgeInsets.all($styles.insets.xs * 1.5), 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 45f06db7..4e097d9d 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 @@ -109,7 +109,7 @@ class _ClosedTimeRange extends StatelessWidget { padding: EdgeInsets.symmetric(vertical: $styles.insets.xs), child: Row( children: [ - Text(text, style: $styles.text.titleFont.copyWith(color: $styles.colors.offWhite)), + Text(text, style: $styles.text.title2.copyWith(color: $styles.colors.offWhite)), Gap($styles.insets.xs), Icon(Icons.edit_calendar_outlined, color: $styles.colors.accent1, size: $styles.insets.md), ], @@ -170,7 +170,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 * $styles.scale); + final headingTextStyle = $styles.text.title1.copyWith(color: $styles.colors.offWhite, fontSize: 20 * $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/_search_input.dart b/lib/ui/screens/artifact/artifact_search/widgets/_search_input.dart index fe77c687..5ea28b35 100644 --- a/lib/ui/screens/artifact/artifact_search/widgets/_search_input.dart +++ b/lib/ui/screens/artifact/artifact_search/widgets/_search_input.dart @@ -154,7 +154,7 @@ class _SearchInput extends StatelessWidget { color: $styles.colors.white, icon: AppIcons.close, semanticLabel: $strings.searchInputSemanticClear, - size: $styles.insets.lg, + size: $styles.insets.md, iconSize: $styles.insets.sm, onPressed: () { textController.clear(); From 5abdc2210285ad9deb255d861203591cd9377190 Mon Sep 17 00:00:00 2001 From: Shawn Date: Thu, 5 Jan 2023 12:20:46 -0700 Subject: [PATCH 6/6] Reduce blur slightly --- lib/ui/common/app_backdrop.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/ui/common/app_backdrop.dart b/lib/ui/common/app_backdrop.dart index 4bf0edea..4b3e5e5c 100644 --- a/lib/ui/common/app_backdrop.dart +++ b/lib/ui/common/app_backdrop.dart @@ -18,7 +18,7 @@ class AppBackdrop extends StatelessWidget { final double normalStrength = clampDouble(strength, 0, 1); if (settingsLogic.useBlurs) { return BackdropFilter( - filter: ImageFilter.blur(sigmaX: normalStrength * 15.0, sigmaY: normalStrength * 15.0), + filter: ImageFilter.blur(sigmaX: normalStrength * 10, sigmaY: normalStrength * 10), child: child ?? SizedBox.expand(), ); }