diff --git a/lib/pages/community/community.dart b/lib/pages/community/community.dart index 9a99aff7..23c4b32c 100644 --- a/lib/pages/community/community.dart +++ b/lib/pages/community/community.dart @@ -1,3 +1,5 @@ +import 'dart:ui'; + import 'package:flutter/material.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; import 'package:lemmy_api_client/v3.dart'; @@ -88,7 +90,7 @@ class CommunityPage extends HookWidget { SliverAppBar( expandedHeight: community.community.icon == null ? 220 : 300, pinned: true, - backgroundColor: theme.cardColor, + backgroundColor: theme.canvasColor, title: RevealAfterScroll( scrollController: scrollController, after: community.community.icon == null ? 110 : 190, @@ -107,7 +109,25 @@ class CommunityPage extends HookWidget { CommunityMoreMenu.open(context, fullCommunityView)), ], flexibleSpace: FlexibleSpaceBar( - background: CommunityOverview(fullCommunityView), + background: Stack( + children: [ + CommunityOverview(fullCommunityView), + Expanded( + child: ClipRect( + child: SizedBox( + height: 70, + width: double.infinity, + child: BackdropFilter( + filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3), + child: ColoredBox( + color: Colors.grey.withOpacity(0.3)), + ), + // ColoredBox(color: Colors.grey.withOpacity(0.5)), + ), + ), + ), + ], + ), ), bottom: PreferredSize( preferredSize: const TabBar(tabs: []).preferredSize, diff --git a/lib/pages/community/community_overview.dart b/lib/pages/community/community_overview.dart index 262d584c..15700a99 100644 --- a/lib/pages/community/community_overview.dart +++ b/lib/pages/community/community_overview.dart @@ -18,7 +18,6 @@ class CommunityOverview extends StatelessWidget { @override Widget build(BuildContext context) { final theme = Theme.of(context); - final shadow = BoxShadow(color: theme.canvasColor, blurRadius: 5); final community = fullCommunityView.communityView; @@ -68,55 +67,53 @@ class CommunityOverview extends StatelessWidget { SafeArea( child: Column( children: [ - const SizedBox(height: 45), + const SizedBox(height: 60), if (icon != null) icon, const SizedBox(height: 10), // NAME - RichText( - overflow: TextOverflow.ellipsis, - text: TextSpan( - style: - theme.textTheme.titleMedium?.copyWith(shadows: [shadow]), - children: [ - const TextSpan( - text: '!', - style: TextStyle(fontWeight: FontWeight.w200), - ), - TextSpan( - text: community.community.name, - style: const TextStyle(fontWeight: FontWeight.w600), - ), - const TextSpan( - text: '@', - style: TextStyle(fontWeight: FontWeight.w200), - ), - TextSpan( - text: community.community.originInstanceHost, - style: const TextStyle(fontWeight: FontWeight.w600), - recognizer: TapGestureRecognizer() - ..onTap = () => Navigator.of(context).push( - InstancePage.route( - community.community.originInstanceHost, + BlurBox( + child: RichText( + overflow: TextOverflow.ellipsis, + text: TextSpan( + style: theme.textTheme.titleMedium, + children: [ + const TextSpan( + text: '!', + style: TextStyle(fontWeight: FontWeight.w200), + ), + TextSpan( + text: community.community.name, + style: const TextStyle(fontWeight: FontWeight.w600), + ), + const TextSpan( + text: '@', + style: TextStyle(fontWeight: FontWeight.w200), + ), + TextSpan( + text: community.community.originInstanceHost, + style: const TextStyle(fontWeight: FontWeight.w600), + recognizer: TapGestureRecognizer() + ..onTap = () => Navigator.of(context).push( + InstancePage.route( + community.community.originInstanceHost, + ), ), - ), - ), - ], + ), + ], + ), ), ), + // TITLE/MOTTO const SizedBox(height: 8), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 20), + BlurBox( child: Text( '${community.community.title}${community.community.instanceHost != community.community.originInstanceHost ? ' (via ${community.community.instanceHost})' : ''}', textAlign: TextAlign.center, - style: TextStyle( - fontWeight: FontWeight.w300, - shadows: [shadow], - ), + style: const TextStyle(fontWeight: FontWeight.w300), ), ), - const SizedBox(height: 20), + const SizedBox(height: 15), Stack( alignment: Alignment.center, children: [ @@ -124,14 +121,24 @@ class CommunityOverview extends StatelessWidget { Row( children: [ const Spacer(), - const Icon(Icons.people, size: 20), - const SizedBox(width: 3), - Text(community.counts.subscribers.compact(context)), + BlurBox( + child: Row(children: [ + const Icon(Icons.people, size: 20), + const SizedBox(width: 3), + Text( + community.counts.subscribers.compact(context), + ), + ])), const Spacer(flex: 4), - const Icon(Icons.record_voice_over, size: 20), - const SizedBox(width: 3), - // TODO: v0.18.x migration - Text((fullCommunityView.online ?? 0).compact(context)), + BlurBox( + child: Row(children: [ + const Icon(Icons.record_voice_over, size: 20), + const SizedBox(width: 3), + // TODO: v0.18.x migration + Text( + (fullCommunityView.online ?? 0).compact(context), + ), + ])), const Spacer(), ], ), @@ -145,3 +152,28 @@ class CommunityOverview extends StatelessWidget { ); } } + +class BlurBox extends StatelessWidget { + final Widget child; + + const BlurBox({required this.child, super.key}); + + @override + Widget build(BuildContext context) { + final theme = Theme.of(context); + return Container( + decoration: BoxDecoration( + boxShadow: [ + BoxShadow( + color: theme.canvasColor.withOpacity(0.3), + blurRadius: 1, + spreadRadius: 1, + ) + ], + color: theme.canvasColor.withOpacity(0.3), + ), + child: Padding( + padding: const EdgeInsets.only(left: 5, right: 5), child: child), + ); + } +} diff --git a/lib/pages/profile_tab.dart b/lib/pages/profile_tab.dart index 1c992982..db9541cb 100644 --- a/lib/pages/profile_tab.dart +++ b/lib/pages/profile_tab.dart @@ -55,6 +55,7 @@ class UserProfileTab extends HookWidget { return Scaffold( extendBodyBehindAppBar: true, appBar: AppBar( + backgroundColor: Colors.grey.withOpacity(0.3), title: RadioPicker( title: 'account', values: accountsStore.loggedInInstances diff --git a/lib/pages/user.dart b/lib/pages/user.dart index 33483c4c..6b2288a5 100644 --- a/lib/pages/user.dart +++ b/lib/pages/user.dart @@ -54,6 +54,7 @@ class UserPage extends HookWidget { return Scaffold( extendBodyBehindAppBar: true, appBar: AppBar( + backgroundColor: Colors.grey.withOpacity(0.3), actions: [ if (userDetailsSnap.hasData) ...[ SendMessageButton(userDetailsSnap.data!.personView.person), diff --git a/lib/widgets/post/post_actions.dart b/lib/widgets/post/post_actions.dart index 32b77925..5fe1619a 100644 --- a/lib/widgets/post/post_actions.dart +++ b/lib/widgets/post/post_actions.dart @@ -41,12 +41,21 @@ class PostActions extends HookWidget { const Icon(Icons.comment_rounded), const SizedBox(width: 6), Expanded( - child: Text( - L10n.of(context).number_of_comments( - store.postView.counts.comments, - store.postView.counts.comments), - overflow: TextOverflow.fade, - softWrap: false, + child: LayoutBuilder( + builder: (context, constraint) { + // If the space is too small for the word + // "comments" to display fully, don't show it. + final txt = (constraint.maxWidth < 100.0) + ? store.postView.counts.comments.toString() + : L10n.of(context).number_of_comments( + store.postView.counts.comments, + store.postView.counts.comments); + + return Text( + txt, + softWrap: false, + ); + }, ), ), const PostMoreMenuButton(),