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

Merge pull request #64 from gskinnerTeam/ui-polish-3

Browse Source 
UI polish 3
This commit is contained in:
Shawn 2023-01-05 12:21:23 -07:00 committed by GitHub
commit 64b9136518
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 23 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
lib/styles/styles.dart
View File

@ -79,7 +79,6 @@ class _Text {
final Map<String, TextStyle> _contentFonts = { final Map<String, TextStyle> _contentFonts = {
'en': TextStyle(fontFamily: 'Raleway', fontFeatures: const [ 'en': TextStyle(fontFamily: 'Raleway', fontFeatures: const [
FontFeature.enable('dlig'),
FontFeature.enable('kern'), FontFeature.enable('kern'),
]), ]),
}; };
@ -110,7 +109,7 @@ class _Text {
late final TextStyle title1 = _createFont(titleFont, sizePx: 16, heightPx: 26, spacingPc: 5); 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 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 bodyBold = _createFont(contentFont, sizePx: 16, heightPx: 26, weight: FontWeight.w600);
late final TextStyle bodySmall = _createFont(contentFont, sizePx: 14, heightPx: 23); 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 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 quote2Sub = _createFont(body, sizePx: 16, heightPx: 40, weight: FontWeight.w400);
late final TextStyle caption = 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 = late final TextStyle callout =
_createFont(contentFont, sizePx: 16, heightPx: 26, weight: FontWeight.w600).copyWith(fontStyle: FontStyle.italic); _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, TextStyle _createFont(TextStyle style,
{required double sizePx, double? heightPx, double? spacingPc, FontWeight? weight}) { {required double sizePx, double? heightPx, double? spacingPc, FontWeight? weight}) {

2
lib/ui/common/app_backdrop.dart
View File

@ -18,7 +18,7 @@ class AppBackdrop extends StatelessWidget {
final double normalStrength = clampDouble(strength, 0, 1); final double normalStrength = clampDouble(strength, 0, 1);
if (settingsLogic.useBlurs) { if (settingsLogic.useBlurs) {
return BackdropFilter( return BackdropFilter(
filter: ImageFilter.blur(sigmaX: normalStrength * 5.0, sigmaY: normalStrength * 5.0), filter: ImageFilter.blur(sigmaX: normalStrength * 10, sigmaY: normalStrength * 10),
child: child ?? SizedBox.expand(), child: child ?? SizedBox.expand(),
); );
} }

2
lib/ui/common/controls/locale_switcher.dart
View File

@ -11,6 +11,6 @@ class LocaleSwitcher extends StatelessWidget with GetItMixin {
await settingsLogic.changeLocale(newLocale); 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));
} }
} }

2
lib/ui/common/timeline_event_card.dart
View File

@ -40,7 +40,7 @@ class TimelineEventCard extends StatelessWidget {
/// Text content /// Text content
Expanded( Expanded(
child: Text(text, style: $styles.text.bodySmall), child: Text(text, style: $styles.text.body),
), ),
], ],
), ),

3
lib/ui/screens/artifact/artifact_carousel/widgets/_bottom_text_content.dart
View File

@ -64,7 +64,7 @@ class _BottomTextContent extends StatelessWidget {
), ),
], ],
), ),
if (!shortMode) Gap($styles.insets.md), if (!shortMode) Gap($styles.insets.sm),
Spacer(), Spacer(),
if (!shortMode) if (!shortMode)
AppPageIndicator( AppPageIndicator(
@ -75,7 +75,6 @@ class _BottomTextContent extends StatelessWidget {
Gap($styles.insets.md), Gap($styles.insets.md),
AppBtn.from( AppBtn.from(
text: $strings.artifactsButtonBrowse, text: $strings.artifactsButtonBrowse,
icon: AppIcons.search,
expand: true, expand: true,
onPressed: state._handleSearchTap, onPressed: state._handleSearchTap,
), ),

7
lib/ui/screens/artifact/artifact_search/artifact_search_screen.dart
View File

@ -86,12 +86,11 @@ class _ArtifactSearchScreenState extends State<ArtifactSearchScreen> with GetItS
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
AppHeader(title: $strings.artifactsSearchTitleBrowse, subtitle: wonder.title), AppHeader(title: $strings.artifactsSearchTitleBrowse, subtitle: wonder.title),
Gap($styles.insets.xs), Container(
Padding( color: $styles.colors.black,
padding: EdgeInsets.symmetric(horizontal: $styles.insets.sm), padding: EdgeInsets.fromLTRB($styles.insets.sm, $styles.insets.sm, $styles.insets.sm, 0),
child: _SearchInput(onSubmit: _handleSearchSubmitted, wonder: wonder), child: _SearchInput(onSubmit: _handleSearchSubmitted, wonder: wonder),
), ),
Gap($styles.insets.sm),
Container( Container(
color: $styles.colors.black, color: $styles.colors.black,
padding: EdgeInsets.all($styles.insets.xs * 1.5), padding: EdgeInsets.all($styles.insets.xs * 1.5),

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

@ -109,7 +109,7 @@ class _ClosedTimeRange extends StatelessWidget {
padding: EdgeInsets.symmetric(vertical: $styles.insets.xs), padding: EdgeInsets.symmetric(vertical: $styles.insets.xs),
child: Row( child: Row(
children: [ 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), Gap($styles.insets.xs),
Icon(Icons.edit_calendar_outlined, color: $styles.colors.accent1, size: $styles.insets.md), 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); double safeBottom = max($styles.insets.sm, MediaQuery.of(context).padding.bottom);
List<Widget> timelineGrid = List.generate(5, (_) => Container(width: 1, color: $styles.colors.black)); 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 * $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 captionTextStyle = $styles.text.bodySmall.copyWith(color: $styles.colors.greyMedium);
final startYr = startYear.round(), endYr = endYear.round(); final startYr = startYear.round(), endYr = endYear.round();

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

@ -154,7 +154,7 @@ class _SearchInput extends StatelessWidget {
color: $styles.colors.white, color: $styles.colors.white,
icon: AppIcons.close, icon: AppIcons.close,
semanticLabel: $strings.searchInputSemanticClear, semanticLabel: $strings.searchInputSemanticClear,
size: $styles.insets.lg, size: $styles.insets.md,
iconSize: $styles.insets.sm, iconSize: $styles.insets.sm,
onPressed: () { onPressed: () {
textController.clear(); textController.clear();

2
lib/ui/screens/collection/collection_screen.dart
View File

@ -64,7 +64,7 @@ class _CollectionScreenState extends State<CollectionScreen> with GetItStateMixi
children: [ children: [
Expanded( Expanded(
child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [ child: Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
AppHeader(title: $strings.collectionTitleCollection), AppHeader(title: $strings.collectionTitleCollection, isTransparent: true),
_NewlyDiscoveredItemsBtn(count: discovered, onPressed: _scrollToTarget), _NewlyDiscoveredItemsBtn(count: discovered, onPressed: _scrollToTarget),
Flexible( Flexible(
child: _CollectionList( child: _CollectionList(

2
lib/ui/screens/home_menu/home_menu.dart
View File

@ -54,7 +54,7 @@ class _HomeMenuState extends State<HomeMenu> {
/// Backdrop / Underlay /// Backdrop / Underlay
AppBackdrop( AppBackdrop(
strength: .5, strength: .5,
child: Container(color: $styles.colors.greyStrong.withOpacity(.7)), child: Container(color: $styles.colors.greyStrong.withOpacity(.5)),
), ),
PopNavigatorUnderlay(), PopNavigatorUnderlay(),

4
lib/ui/screens/wonder_events/widgets/_events_list.dart
View File

@ -101,12 +101,12 @@ class _EventsListState extends State<_EventsList> {
double backdropAmt = 0; double backdropAmt = 0;
if (_scroller.hasClients && showBackdrop) { if (_scroller.hasClients && showBackdrop) {
double blurStart = 50; double blurStart = 50;
double maxScroll = 150; double maxScroll = 300;
double scrollPx = _scroller.position.pixels - blurStart; double scrollPx = _scroller.position.pixels - blurStart;
// Normalize scroll position to a value between 0 and 1 // Normalize scroll position to a value between 0 and 1
backdropAmt = (_scroller.position.pixels - blurStart).clamp(0, maxScroll) / maxScroll; backdropAmt = (_scroller.position.pixels - blurStart).clamp(0, maxScroll) / maxScroll;
// Disable backdrop once it is offscreen for an easy perf win // 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 // Container provides a underlay which gets darker as the background blurs
return Stack( return Stack(

6
lib/ui/screens/wonder_events/widgets/_wonder_image_with_timeline.dart
View File

@ -5,7 +5,7 @@ class _WonderImageWithTimeline extends StatelessWidget {
final WonderData data; final WonderData data;
final double height; final double height;
Color _fixLuminance(Color color, [double luminance = 0.35]) { Color _fixLuminance(Color color, [double luminance = 0.2]) {
double d = luminance - color.computeLuminance(); double d = luminance - color.computeLuminance();
if (d <= 0) return color; if (d <= 0) return color;
int r = color.red, g = color.green, b = color.blue; int r = color.red, g = color.green, b = color.blue;
@ -20,7 +20,7 @@ class _WonderImageWithTimeline extends StatelessWidget {
child: LightText( child: LightText(
child: SeparatedColumn( child: SeparatedColumn(
separatorBuilder: () => Gap($styles.insets.xs * 1.5), 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: [ children: [
/// Text and image in a stack /// Text and image in a stack
Expanded( Expanded(
@ -47,7 +47,7 @@ class _WonderImageWithTimeline extends StatelessWidget {
return Container( return Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: isSelected ? _fixLuminance(data.type.fgColor) : Colors.transparent, 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), borderRadius: BorderRadius.circular($styles.corners.md),
), ),
); );

6
lib/ui/screens/wonder_events/wonder_events.dart
View File

@ -35,7 +35,7 @@ class WonderEvents extends StatelessWidget {
children: [ children: [
/// Main view switches between portrait and landscape views /// Main view switches between portrait and landscape views
Positioned.fill( Positioned.fill(
top: $styles.insets.lg, top: $styles.insets.sm,
child: context.isLandscape ? _buildLandscape(context) : _buildPortrait(), child: context.isLandscape ? _buildLandscape(context) : _buildPortrait(),
), ),
@ -108,7 +108,7 @@ class WonderEvents extends StatelessWidget {
return LayoutBuilder(builder: (_, constraints) { return LayoutBuilder(builder: (_, constraints) {
double topHeight = max(constraints.maxHeight * .55, 200); double topHeight = max(constraints.maxHeight * .55, 200);
return CenteredBox( return CenteredBox(
width: $styles.sizes.maxContentWidth3, width: $styles.sizes.maxContentWidth2,
child: Stack( child: Stack(
children: [ children: [
/// Top content, sits underneath scrolling list /// Top content, sits underneath scrolling list
@ -129,7 +129,7 @@ class WonderEvents extends StatelessWidget {
Gap($styles.insets.lg), Gap($styles.insets.lg),
/// Btn /// Btn
_TimelineBtn(type: _data.type, width: $styles.sizes.maxContentWidth3), _TimelineBtn(type: _data.type, width: $styles.sizes.maxContentWidth2),
Gap($styles.insets.lg), Gap($styles.insets.lg),
], ],
), ),