Matrix/fluffychat
Matrix/fluffychat
1
0
Fork 0
mirror of https://github.com/krille-chan/fluffychat synced 2024-09-17 08:15:09 +00:00
Code Issues Projects Releases Packages Wiki Activity

design: Improve story header design

Browse source
This commit is contained in:
Krille Fear 2022-02-06 20:59:30 +01:00
parent 97066eed0f
commit 0e2506cd2b
2 changed files with 42 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
lib/pages/chat_list/chat_list_view.dart
View file

@ -14,7 +14,6 @@ import 'package:fluffychat/pages/chat_list/chat_list_item.dart';
import 'package:fluffychat/pages/chat_list/client_chooser_button.dart'; import 'package:fluffychat/pages/chat_list/client_chooser_button.dart';
import 'package:fluffychat/pages/chat_list/spaces_bottom_bar.dart'; import 'package:fluffychat/pages/chat_list/spaces_bottom_bar.dart';
import 'package:fluffychat/pages/chat_list/stories_header.dart'; import 'package:fluffychat/pages/chat_list/stories_header.dart';
import 'package:fluffychat/utils/matrix_sdk_extensions.dart/client_stories_extension.dart';
import 'package:fluffychat/widgets/connection_status_header.dart'; import 'package:fluffychat/widgets/connection_status_header.dart';
import '../../utils/stream_extension.dart'; import '../../utils/stream_extension.dart';
import '../../widgets/matrix.dart'; import '../../widgets/matrix.dart';
@ -100,8 +99,7 @@ class ChatListView extends StatelessWidget {
onPressed: () => onPressed: () =>
VRouter.of(context).to('/search'), VRouter.of(context).to('/search'),
), ),
if (selectMode == SelectMode.normal && if (selectMode == SelectMode.normal)
Matrix.of(context).client.storiesRooms.isEmpty)
IconButton( IconButton(
icon: const Icon(Icons.camera_alt_outlined), icon: const Icon(Icons.camera_alt_outlined),
tooltip: L10n.of(context)!.addToStory, tooltip: L10n.of(context)!.addToStory,
@ -331,7 +329,7 @@ class _ChatListViewBodyState extends State<_ChatListViewBody> {
); );
} }
} else { } else {
const dummyChatCount = 8; const dummyChatCount = 5;
final titleColor = final titleColor =
Theme.of(context).textTheme.bodyText1!.color!.withAlpha(100); Theme.of(context).textTheme.bodyText1!.color!.withAlpha(100);
final subtitleColor = final subtitleColor =

74
lib/pages/chat_list/stories_header.dart
View file

@ -6,7 +6,6 @@ import 'package:future_loading_dialog/future_loading_dialog.dart';
import 'package:matrix/matrix.dart'; import 'package:matrix/matrix.dart';
import 'package:vrouter/vrouter.dart'; import 'package:vrouter/vrouter.dart';
import 'package:fluffychat/config/app_config.dart';
import 'package:fluffychat/utils/matrix_sdk_extensions.dart/client_stories_extension.dart'; import 'package:fluffychat/utils/matrix_sdk_extensions.dart/client_stories_extension.dart';
import 'package:fluffychat/widgets/avatar.dart'; import 'package:fluffychat/widgets/avatar.dart';
import 'package:fluffychat/widgets/matrix.dart'; import 'package:fluffychat/widgets/matrix.dart';
@ -99,7 +98,7 @@ class StoriesHeader extends StatelessWidget {
radius: Avatar.defaultSize / 2, radius: Avatar.defaultSize / 2,
backgroundColor: Theme.of(context).colorScheme.surface, backgroundColor: Theme.of(context).colorScheme.surface,
foregroundColor: Theme.of(context).textTheme.bodyText1?.color, foregroundColor: Theme.of(context).textTheme.bodyText1?.color,
child: const Icon(Icons.add), child: const Icon(Icons.camera_alt_outlined),
), ),
title: Text(L10n.of(context)!.addToStory), title: Text(L10n.of(context)!.addToStory),
onTap: () => _addToStoryAction(context), onTap: () => _addToStoryAction(context),
@ -109,7 +108,7 @@ class StoriesHeader extends StatelessWidget {
return Container(); return Container();
} }
return SizedBox( return SizedBox(
height: 98, height: 106,
child: ListView( child: ListView(
padding: const EdgeInsets.symmetric(horizontal: 2), padding: const EdgeInsets.symmetric(horizontal: 2),
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
@ -117,11 +116,11 @@ class StoriesHeader extends StatelessWidget {
_StoryButton( _StoryButton(
label: L10n.of(context)!.yourStory, label: L10n.of(context)!.yourStory,
onPressed: () => _addToStoryAction(context), onPressed: () => _addToStoryAction(context),
child: const Icon(Icons.add), child: const Icon(Icons.camera_alt_outlined),
), ),
...client.storiesRooms.map( ...client.storiesRooms.map(
(room) => Opacity( (room) => Opacity(
opacity: room.hasPosts ? 1 : 0.5, opacity: room.hasPosts ? 1 : 0.75,
child: _StoryButton( child: _StoryButton(
label: room.creatorDisplayname, label: room.creatorDisplayname,
child: Avatar( child: Avatar(
@ -131,6 +130,7 @@ class StoriesHeader extends StatelessWidget {
.avatarUrl, .avatarUrl,
name: room.creatorDisplayname, name: room.creatorDisplayname,
size: 100, size: 100,
fontSize: 24,
), ),
unread: room.notificationCount > 0 || unread: room.notificationCount > 0 ||
room.membership == Membership.invite, room.membership == Membership.invite,
@ -185,7 +185,7 @@ class _StoryButton extends StatelessWidget {
return SizedBox( return SizedBox(
width: 78, width: 78,
child: InkWell( child: InkWell(
borderRadius: BorderRadius.circular(AppConfig.borderRadius), borderRadius: BorderRadius.circular(7),
onTap: onPressed, onTap: onPressed,
onLongPress: onLongPressed, onLongPress: onLongPressed,
child: Padding( child: Padding(
@ -193,34 +193,39 @@ class _StoryButton extends StatelessWidget {
child: Column( child: Column(
children: [ children: [
const SizedBox(height: 8), const SizedBox(height: 8),
Container( Material(
padding: const EdgeInsets.all(2), elevation: Theme.of(context).appBarTheme.elevation ?? 7,
decoration: BoxDecoration( shadowColor: Theme.of(context).appBarTheme.shadowColor,
gradient: unread borderRadius: BorderRadius.circular(Avatar.defaultSize),
? const LinearGradient( child: Container(
colors: [ padding: const EdgeInsets.all(2),
Colors.red, decoration: BoxDecoration(
Colors.purple, gradient: unread
Colors.orange, ? const LinearGradient(
], colors: [
begin: Alignment.topLeft, Colors.red,
end: Alignment.bottomRight, Colors.purple,
) Colors.orange,
: null, ],
color: unread ? null : Theme.of(context).dividerColor, begin: Alignment.topLeft,
borderRadius: BorderRadius.circular(Avatar.defaultSize), end: Alignment.bottomRight,
), )
child: Material( : null,
color: Theme.of(context).colorScheme.surface, color: unread ? null : Theme.of(context).dividerColor,
borderRadius: BorderRadius.circular(Avatar.defaultSize), borderRadius: BorderRadius.circular(Avatar.defaultSize),
child: Padding( ),
padding: const EdgeInsets.all(2.0), child: Material(
child: CircleAvatar( color: Theme.of(context).colorScheme.surface,
radius: 30, borderRadius: BorderRadius.circular(Avatar.defaultSize),
backgroundColor: Theme.of(context).colorScheme.surface, child: Padding(
foregroundColor: padding: const EdgeInsets.all(2.0),
Theme.of(context).textTheme.bodyText1?.color, child: CircleAvatar(
child: child, radius: 30,
backgroundColor: Theme.of(context).colorScheme.surface,
foregroundColor:
Theme.of(context).textTheme.bodyText1?.color,
child: child,
),
), ),
), ),
), ),
@ -235,6 +240,7 @@ class _StoryButton extends StatelessWidget {
fontWeight: unread ? FontWeight.bold : null, fontWeight: unread ? FontWeight.bold : null,
), ),
), ),
const SizedBox(height: 8),
], ],
), ),
), ),