GitLab/fluffychat
2
0
Fork 0
mirror of https://gitlab.com/famedly/fluffychat.git synced 2024-11-04 19:19:29 +01: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/spaces_bottom_bar.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 '../../utils/stream_extension.dart';
import '../../widgets/matrix.dart';
@ -100,8 +99,7 @@ class ChatListView extends StatelessWidget {
onPressed: () =>
VRouter.of(context).to('/search'),
),
if (selectMode == SelectMode.normal &&
Matrix.of(context).client.storiesRooms.isEmpty)
if (selectMode == SelectMode.normal)
IconButton(
icon: const Icon(Icons.camera_alt_outlined),
tooltip: L10n.of(context)!.addToStory,
@ -331,7 +329,7 @@ class _ChatListViewBodyState extends State<_ChatListViewBody> {
);
}
} else {
const dummyChatCount = 8;
const dummyChatCount = 5;
final titleColor =
Theme.of(context).textTheme.bodyText1!.color!.withAlpha(100);
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: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/widgets/avatar.dart';
import 'package:fluffychat/widgets/matrix.dart';
@ -99,7 +98,7 @@ class StoriesHeader extends StatelessWidget {
radius: Avatar.defaultSize / 2,
backgroundColor: Theme.of(context).colorScheme.surface,
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),
onTap: () => _addToStoryAction(context),
@ -109,7 +108,7 @@ class StoriesHeader extends StatelessWidget {
return Container();
}
return SizedBox(
height: 98,
height: 106,
child: ListView(
padding: const EdgeInsets.symmetric(horizontal: 2),
scrollDirection: Axis.horizontal,
@ -117,11 +116,11 @@ class StoriesHeader extends StatelessWidget {
_StoryButton(
label: L10n.of(context)!.yourStory,
onPressed: () => _addToStoryAction(context),
child: const Icon(Icons.add),
child: const Icon(Icons.camera_alt_outlined),
),
...client.storiesRooms.map(
(room) => Opacity(
opacity: room.hasPosts ? 1 : 0.5,
opacity: room.hasPosts ? 1 : 0.75,
child: _StoryButton(
label: room.creatorDisplayname,
child: Avatar(
@ -131,6 +130,7 @@ class StoriesHeader extends StatelessWidget {
.avatarUrl,
name: room.creatorDisplayname,
size: 100,
fontSize: 24,
),
unread: room.notificationCount > 0 ||
room.membership == Membership.invite,
@ -185,7 +185,7 @@ class _StoryButton extends StatelessWidget {
return SizedBox(
width: 78,
child: InkWell(
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
borderRadius: BorderRadius.circular(7),
onTap: onPressed,
onLongPress: onLongPressed,
child: Padding(
@ -193,34 +193,39 @@ class _StoryButton extends StatelessWidget {
child: Column(
children: [
const SizedBox(height: 8),
Container(
padding: const EdgeInsets.all(2),
decoration: BoxDecoration(
gradient: unread
? const LinearGradient(
colors: [
Colors.red,
Colors.purple,
Colors.orange,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
)
: null,
color: unread ? null : Theme.of(context).dividerColor,
borderRadius: BorderRadius.circular(Avatar.defaultSize),
),
child: Material(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(Avatar.defaultSize),
child: Padding(
padding: const EdgeInsets.all(2.0),
child: CircleAvatar(
radius: 30,
backgroundColor: Theme.of(context).colorScheme.surface,
foregroundColor:
Theme.of(context).textTheme.bodyText1?.color,
child: child,
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),
decoration: BoxDecoration(
gradient: unread
? const LinearGradient(
colors: [
Colors.red,
Colors.purple,
Colors.orange,
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
)
: null,
color: unread ? null : Theme.of(context).dividerColor,
borderRadius: BorderRadius.circular(Avatar.defaultSize),
),
child: Material(
color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(Avatar.defaultSize),
child: Padding(
padding: const EdgeInsets.all(2.0),
child: CircleAvatar(
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,
),
),
const SizedBox(height: 8),
],
),
),