Lemmy
/
lemmur-app-android
mirror of https://github.com/krawieck/lemmur/
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix/overflows (#278) 

* Fix overflow issues

* Add changelog entry

* Fix uneven paddings

* Fix avatar padding

* Better cover the background image

* Add changelog entry
This commit is contained in:
Marcin Wojnarowski 2021-11-03 22:50:03 +01:00 committed by GitHub
parent 84b60c83f7
commit e0aa489478
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 248 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@ -11,6 +11,11 @@
- Fixed a bug where post would go out of sync with full version of the post - Fixed a bug where post would go out of sync with full version of the post
- Fixed a bug where making a comment selectable would not always result in making the comment selectable - Fixed a bug where making a comment selectable would not always result in making the comment selectable
- Full post will now open no matter where you press on the post card - Full post will now open no matter where you press on the post card
- Fixed overflows in various places
### Changed
- User banner photo now fits better on user profile
## v0.6.0 - 2021-09-06 ## v0.6.0 - 2021-09-06

149
lib/pages/community.dart
View File

@ -266,98 +266,93 @@ class _CommunityOverview extends StatelessWidget {
) )
: null; : null;
return Stack(children: [ return Stack(
if (community.community.banner != null) children: [
FullscreenableImage( if (community.community.banner != null)
url: community.community.banner!, FullscreenableImage(
child: CachedNetworkImage( url: community.community.banner!,
imageUrl: community.community.banner!, child: CachedNetworkImage(
errorBuilder: (_, ___) => const SizedBox.shrink(), imageUrl: community.community.banner!,
errorBuilder: (_, ___) => const SizedBox.shrink(),
),
), ),
), SafeArea(
SafeArea( child: Column(
child: Padding( children: [
padding: const EdgeInsets.only(top: 45), const SizedBox(height: 45),
child: Column(children: [ if (icon != null) icon,
if (icon != null) icon, const SizedBox(height: 10),
// NAME // NAME
Center( RichText(
child: Padding( overflow: TextOverflow.ellipsis,
padding: const EdgeInsets.only(top: 10), text: TextSpan(
child: RichText( style: theme.textTheme.subtitle1?.copyWith(shadows: [shadow]),
overflow: TextOverflow.ellipsis, // TODO: fix overflowing children: [
text: TextSpan( const TextSpan(
style: text: '!',
theme.textTheme.subtitle1?.copyWith(shadows: [shadow]), style: TextStyle(fontWeight: FontWeight.w200),
children: [ ),
const TextSpan( TextSpan(
text: '!', text: community.community.name,
style: TextStyle(fontWeight: FontWeight.w200)), style: const TextStyle(fontWeight: FontWeight.w600),
TextSpan( ),
text: community.community.name, const TextSpan(
style: const TextStyle(fontWeight: FontWeight.w600)), text: '@',
const TextSpan( style: TextStyle(fontWeight: FontWeight.w200),
text: '@', ),
style: TextStyle(fontWeight: FontWeight.w200)), TextSpan(
TextSpan( text: community.community.originInstanceHost,
text: community.community.originInstanceHost, style: const TextStyle(fontWeight: FontWeight.w600),
style: const TextStyle(fontWeight: FontWeight.w600), recognizer: TapGestureRecognizer()
recognizer: TapGestureRecognizer() ..onTap = () => goToInstance(
..onTap = () => goToInstance( context,
context, community.community.originInstanceHost), community.community.originInstanceHost,
), ),
], ),
), ],
), ),
), ),
), // TITLE/MOTTO
// TITLE/MOTTO const SizedBox(height: 8),
Center( Padding(
child: Padding( padding: const EdgeInsets.symmetric(horizontal: 20),
padding: const EdgeInsets.only(top: 8, left: 20, right: 20),
child: Text( child: Text(
community.community.title, community.community.title,
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: style: TextStyle(
TextStyle(fontWeight: FontWeight.w300, shadows: [shadow]), fontWeight: FontWeight.w300,
shadows: [shadow],
),
), ),
), ),
), const SizedBox(height: 20),
Padding( Stack(
padding: const EdgeInsets.only(top: 20), alignment: Alignment.center,
child: Stack(
children: [ children: [
// INFO ICONS // INFO ICONS
Padding( Row(
padding: const EdgeInsets.only(top: 5), children: [
child: Row( const Spacer(),
children: [ const Icon(Icons.people, size: 20),
const Spacer(), const SizedBox(width: 3),
const Padding( Text(compactNumber(community.counts.subscribers)),
padding: EdgeInsets.only(right: 3), const Spacer(flex: 4),
child: Icon(Icons.people, size: 20), const Icon(Icons.record_voice_over, size: 20),
), const SizedBox(width: 3),
Text(compactNumber(community.counts.subscribers)), Text(onlineUsers == null
const Spacer(flex: 4), ? 'xx'
const Padding( : compactNumber(onlineUsers!)),
padding: EdgeInsets.only(right: 3), const Spacer(),
child: Icon(Icons.record_voice_over, size: 20), ],
),
Text(onlineUsers == null
? 'xx'
: compactNumber(onlineUsers!)),
const Spacer(),
],
),
), ),
_FollowButton(community), _FollowButton(community),
], ],
), ),
), ],
]), ),
), ),
), ],
]); );
} }
} }

12
lib/pages/profile_tab.dart
View File

@ -76,11 +76,13 @@ class UserProfileTab extends HookWidget {
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Text( Flexible(
// TODO: fix overflow issues child: Text(
displayValue, displayValue,
style: theme.appBarTheme.titleTextStyle, style: theme.appBarTheme.titleTextStyle,
overflow: TextOverflow.fade, overflow: TextOverflow.fade,
softWrap: false,
),
), ),
const Icon(Icons.expand_more), const Icon(Icons.expand_more),
], ],

27
lib/widgets/avatar.dart
View File

@ -15,11 +15,17 @@ class Avatar extends HookWidget {
this.radius = 25, this.radius = 25,
this.noBlank = false, this.noBlank = false,
this.alwaysShow = false, this.alwaysShow = false,
this.padding = EdgeInsets.zero,
this.onTap,
}) : super(key: key); }) : super(key: key);
final String? url; final String? url;
final double radius; final double radius;
final bool noBlank; final bool noBlank;
final VoidCallback? onTap;
/// padding is applied unless blank widget is returned
final EdgeInsetsGeometry padding;
/// Overrides the `showAvatars` setting /// Overrides the `showAvatars` setting
final bool alwaysShow; final bool alwaysShow;
@ -44,13 +50,20 @@ class Avatar extends HookWidget {
return blankWidget; return blankWidget;
} }
return ClipOval( return Padding(
child: CachedNetworkImage( padding: padding,
height: radius * 2, child: InkWell(
width: radius * 2, onTap: onTap,
imageUrl: imageUrl, borderRadius: BorderRadius.circular(radius),
fit: BoxFit.cover, child: ClipOval(
errorBuilder: (_, __) => blankWidget, child: CachedNetworkImage(
height: radius * 2,
width: radius * 2,
imageUrl: imageUrl,
fit: BoxFit.cover,
errorBuilder: (_, __) => blankWidget,
),
),
), ),
); );
} }

188
lib/widgets/post/post_info_section.dart
View File

@ -23,105 +23,107 @@ class PostInfoSection extends StatelessWidget {
final instanceHost = store.postView.instanceHost; final instanceHost = store.postView.instanceHost;
final theme = Theme.of(context); final theme = Theme.of(context);
return Column( return Padding(
children: [ padding: const EdgeInsets.all(10),
Padding( child: Row(
padding: const EdgeInsets.all(10), children: [
child: Row( Avatar(
children: [ url: post.community.icon,
if (post.community.icon != null) padding: const EdgeInsets.only(right: 10),
Padding( onTap: () =>
padding: const EdgeInsets.only(right: 10), goToCommunity.byId(context, instanceHost, post.community.id),
child: InkWell( noBlank: true,
borderRadius: BorderRadius.circular(20), radius: 20,
onTap: () => goToCommunity.byId( ),
context, instanceHost, post.community.id), Expanded(
child: Avatar( child: Column(
url: post.community.icon, crossAxisAlignment: CrossAxisAlignment.start,
noBlank: true, children: [
radius: 20, RichText(
overflow: TextOverflow.fade,
softWrap: false,
text: TextSpan(
style: TextStyle(
fontSize: 15,
color: theme.textTheme.bodyText1?.color,
), ),
children: [
const TextSpan(
text: '!',
style: TextStyle(fontWeight: FontWeight.w300),
),
TextSpan(
text: post.community.name,
style: const TextStyle(fontWeight: FontWeight.w600),
recognizer: TapGestureRecognizer()
..onTap = () => goToCommunity.byId(
context,
instanceHost,
post.community.id,
),
),
const TextSpan(
text: '@',
style: TextStyle(fontWeight: FontWeight.w300),
),
TextSpan(
text: post.post.originInstanceHost,
style: const TextStyle(fontWeight: FontWeight.w600),
recognizer: TapGestureRecognizer()
..onTap = () => goToInstance(
context,
post.post.originInstanceHost,
),
),
],
), ),
), ),
Column( RichText(
crossAxisAlignment: CrossAxisAlignment.start, overflow: TextOverflow.fade,
children: [ softWrap: false,
RichText( text: TextSpan(
overflow: TextOverflow.ellipsis, // TODO: fix overflowing style: TextStyle(
text: TextSpan( fontSize: 13,
style: TextStyle( color: theme.textTheme.bodyText1?.color,
fontSize: 15,
color: theme.textTheme.bodyText1?.color),
children: [
const TextSpan(
text: '!',
style: TextStyle(fontWeight: FontWeight.w300)),
TextSpan(
text: post.community.name,
style:
const TextStyle(fontWeight: FontWeight.w600),
recognizer: TapGestureRecognizer()
..onTap = () => goToCommunity.byId(
context, instanceHost, post.community.id)),
const TextSpan(
text: '@',
style: TextStyle(fontWeight: FontWeight.w300)),
TextSpan(
text: post.post.originInstanceHost,
style:
const TextStyle(fontWeight: FontWeight.w600),
recognizer: TapGestureRecognizer()
..onTap = () => goToInstance(
context, post.post.originInstanceHost)),
],
), ),
children: [
TextSpan(
text: L10n.of(context)!.by,
style: const TextStyle(fontWeight: FontWeight.w300),
),
TextSpan(
text: ' ${post.creator.originPreferredName}',
style: const TextStyle(fontWeight: FontWeight.w600),
recognizer: TapGestureRecognizer()
..onTap = () => goToUser.fromPersonSafe(
context,
post.creator,
),
),
TextSpan(text: ' · ${post.post.published.fancyShort}'),
if (post.post.locked) const TextSpan(text: ' · 🔒'),
if (post.post.stickied) const TextSpan(text: ' · 📌'),
if (post.post.nsfw) const TextSpan(text: ' · '),
if (post.post.nsfw)
TextSpan(
text: L10n.of(context)!.nsfw,
style: const TextStyle(color: Colors.red),
),
if (store.urlDomain != null)
TextSpan(text: ' · ${store.urlDomain}'),
if (post.post.removed)
const TextSpan(text: ' · REMOVED'),
if (post.post.deleted)
const TextSpan(text: ' · DELETED'),
],
), ),
RichText( )
overflow: TextOverflow.ellipsis, ],
text: TextSpan( ),
style: TextStyle(
fontSize: 13,
color: theme.textTheme.bodyText1?.color),
children: [
TextSpan(
text: L10n.of(context)!.by,
style: const TextStyle(fontWeight: FontWeight.w300),
),
TextSpan(
text: ' ${post.creator.originPreferredName}',
style: const TextStyle(fontWeight: FontWeight.w600),
recognizer: TapGestureRecognizer()
..onTap = () => goToUser.fromPersonSafe(
context,
post.creator,
),
),
TextSpan(
text: ' · ${post.post.published.fancyShort}'),
if (post.post.locked) const TextSpan(text: ' · 🔒'),
if (post.post.stickied) const TextSpan(text: ' · 📌'),
if (post.post.nsfw) const TextSpan(text: ' · '),
if (post.post.nsfw)
TextSpan(
text: L10n.of(context)!.nsfw,
style: const TextStyle(color: Colors.red)),
if (store.urlDomain != null)
TextSpan(text: ' · ${store.urlDomain}'),
if (post.post.removed)
const TextSpan(text: ' · REMOVED'),
if (post.post.deleted)
const TextSpan(text: ' · DELETED'),
],
),
)
],
),
const Spacer(),
if (!fullPost) const PostMoreMenuButton(),
],
), ),
), if (!fullPost) const PostMoreMenuButton(),
], ],
),
); );
}); });
} }

104
lib/widgets/user_profile.dart
View File

@ -140,49 +140,47 @@ class _UserOverview extends HookWidget {
textColorBasedOnBackground(theme.colorScheme.secondary); textColorBasedOnBackground(theme.colorScheme.secondary);
return Stack( return Stack(
fit: StackFit.expand,
children: [ children: [
if (userView.person.banner != null) if (userView.person.banner != null)
// TODO: for some reason doesnt react to presses Align(
FullscreenableImage( alignment: Alignment.topCenter,
url: userView.person.banner!, child: FullscreenableImage(
child: CachedNetworkImage( url: userView.person.banner!,
imageUrl: userView.person.banner!, child: CachedNetworkImage(
errorBuilder: (_, ___) => const SizedBox.shrink(), fit: BoxFit.cover,
height: MediaQuery.of(context).padding.top + 100,
width: double.infinity,
imageUrl: userView.person.banner!,
errorBuilder: (_, ___) => const SizedBox.shrink(),
),
), ),
) )
else else
Container( ColoredBox(color: theme.colorScheme.secondary),
width: double.infinity, const IgnorePointer(
height: 200, child: DecoratedBox(
color: theme.colorScheme.secondary, decoration: BoxDecoration(
), gradient: LinearGradient(
Container( begin: FractionalOffset.topCenter,
height: 200, end: FractionalOffset.bottomCenter,
decoration: const BoxDecoration( colors: [
gradient: LinearGradient( Colors.black26,
begin: FractionalOffset.topCenter, Colors.transparent,
end: FractionalOffset.bottomCenter, ],
colors: [ ),
Colors.black26,
Colors.transparent,
],
), ),
), ),
), ),
SafeArea( SafeArea(
child: Padding( child: Padding(
padding: const EdgeInsets.only(top: 60), padding: const EdgeInsets.only(top: 60),
child: SizedBox( child: DecoratedBox(
width: double.infinity, decoration: BoxDecoration(
height: double.infinity, borderRadius: const BorderRadius.vertical(
child: Container( top: Radius.circular(40),
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
topRight: Radius.circular(40),
topLeft: Radius.circular(40),
),
color: theme.cardColor,
), ),
color: theme.cardColor,
), ),
), ),
), ),
@ -191,25 +189,23 @@ class _UserOverview extends HookWidget {
child: Column( child: Column(
children: [ children: [
if (userView.person.avatar != null) if (userView.person.avatar != null)
SizedBox( Container(
width: 80, width: 80,
height: 80, height: 80,
child: Container( decoration: BoxDecoration(
decoration: BoxDecoration( boxShadow: const [
boxShadow: const [ BoxShadow(blurRadius: 6, color: Colors.black54)
BoxShadow(blurRadius: 6, color: Colors.black54) ],
], borderRadius: const BorderRadius.all(Radius.circular(15)),
borderRadius: const BorderRadius.all(Radius.circular(15)), border: Border.all(color: Colors.white, width: 3),
border: Border.all(color: Colors.white, width: 3), ),
), child: ClipRRect(
child: ClipRRect( borderRadius: const BorderRadius.all(Radius.circular(12)),
borderRadius: const BorderRadius.all(Radius.circular(12)), child: FullscreenableImage(
child: FullscreenableImage( url: userView.person.avatar!,
url: userView.person.avatar!, child: CachedNetworkImage(
child: CachedNetworkImage( imageUrl: userView.person.avatar!,
imageUrl: userView.person.avatar!, errorBuilder: (_, ___) => const SizedBox.shrink(),
errorBuilder: (_, ___) => const SizedBox.shrink(),
),
), ),
), ),
), ),
@ -292,13 +288,11 @@ class _UserOverview extends HookWidget {
Icons.cake, Icons.cake,
size: 13, size: 13,
), ),
Padding( const SizedBox(width: 4),
padding: const EdgeInsets.only(left: 4), Text(
child: Text( DateFormat('MMM dd, yyyy')
DateFormat('MMM dd, yyyy') .format(userView.person.published),
.format(userView.person.published), style: theme.textTheme.bodyText1,
style: theme.textTheme.bodyText1,
),
), ),
], ],
), ),