GitLab/fluffychat
2
0
Fork 0
mirror of https://gitlab.com/famedly/fluffychat.git synced 2025-04-29 22:27:24 +02:00
Code Issues Projects Releases 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 f9617b1b57
commit 24c1d2ac01
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 =

20
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,7 +193,11 @@ class _StoryButton extends StatelessWidget {
child: Column( child: Column(
children: [ children: [
const SizedBox(height: 8), const SizedBox(height: 8),
Container( Material(
elevation: Theme.of(context).appBarTheme.elevation ?? 7,
shadowColor: Theme.of(context).appBarTheme.shadowColor,
borderRadius: BorderRadius.circular(Avatar.defaultSize),
child: Container(
padding: const EdgeInsets.all(2), padding: const EdgeInsets.all(2),
decoration: BoxDecoration( decoration: BoxDecoration(
gradient: unread gradient: unread
@ -225,6 +229,7 @@ class _StoryButton extends StatelessWidget {
), ),
), ),
), ),
),
const SizedBox(height: 8), const SizedBox(height: 8),
Text( Text(
label, label,
@ -235,6 +240,7 @@ class _StoryButton extends StatelessWidget {
fontWeight: unread ? FontWeight.bold : null, fontWeight: unread ? FontWeight.bold : null,
), ),
), ),
const SizedBox(height: 8),
], ],
), ),
), ),