Merge branch 'krille/stories-design' into 'main'

design: Display own stories at first place and combine with new stories button

See merge request famedly/fluffychat!812
This commit is contained in:
Krille Fear 2022-04-08 05:53:01 +00:00
commit 15feef181a
3 changed files with 116 additions and 85 deletions

View File

@ -107,48 +107,45 @@ class StoriesHeader extends StatelessWidget {
if (client.storiesRooms.isEmpty) { if (client.storiesRooms.isEmpty) {
return Container(); return Container();
} }
final stories = client.storiesRooms
..sort((a, b) =>
a.getState(EventTypes.RoomCreate)?.senderId == client.userID
? -1
: 1);
return SizedBox( return SizedBox(
height: 106, height: 106,
child: ListView( child: ListView.builder(
padding: const EdgeInsets.symmetric(horizontal: 2), padding: const EdgeInsets.symmetric(horizontal: 2),
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
children: [ itemCount: stories.length,
_StoryButton( itemBuilder: (context, i) {
label: L10n.of(context)!.yourStory, final room = stories[i];
onPressed: () => _addToStoryAction(context), return Opacity(
child: const Icon(Icons.camera_alt_outlined),
),
...client.storiesRooms.map(
(room) => Opacity(
opacity: room.hasPosts ? 1 : 0.75, opacity: room.hasPosts ? 1 : 0.75,
child: FutureBuilder<Profile>( child: FutureBuilder<Profile>(
future: room.getCreatorProfile(), future: room.getCreatorProfile(),
builder: (context, snapshot) { builder: (context, snapshot) {
final displayname = snapshot.data?.displayName ?? final userId =
room room.getState(EventTypes.RoomCreate)!.senderId;
.getState(EventTypes.RoomCreate)! final displayname =
.senderId snapshot.data?.displayName ?? userId.localpart!;
.localpart!;
final avatarUrl = snapshot.data?.avatarUrl; final avatarUrl = snapshot.data?.avatarUrl;
return _StoryButton( return _StoryButton(
label: displayname, profile: Profile(
child: Avatar( displayName: displayname,
mxContent: avatarUrl, avatarUrl: avatarUrl,
name: displayname, userId: userId,
size: 100,
fontSize: 24,
), ),
showEditFab: userId == client.userID,
unread: room.membership == Membership.invite || unread: room.membership == Membership.invite ||
room.hasNewMessages, room.hasNewMessages,
onPressed: () => onPressed: () => _goToStoryAction(context, room.id),
_goToStoryAction(context, room.id),
onLongPressed: () => onLongPressed: () =>
_contextualActions(context, room), _contextualActions(context, room),
); );
}), }),
), );
), },
],
), ),
); );
}), }),
@ -174,16 +171,16 @@ extension on Room {
} }
class _StoryButton extends StatelessWidget { class _StoryButton extends StatelessWidget {
final Widget child; final Profile profile;
final String label; final bool showEditFab;
final bool unread;
final void Function() onPressed; final void Function() onPressed;
final void Function()? onLongPressed; final void Function()? onLongPressed;
final bool unread;
const _StoryButton({ const _StoryButton({
required this.child, required this.profile,
required this.label,
required this.onPressed, required this.onPressed,
this.showEditFab = false,
this.unread = false, this.unread = false,
this.onLongPressed, this.onLongPressed,
Key? key, Key? key,
@ -223,25 +220,55 @@ class _StoryButton extends StatelessWidget {
color: unread ? null : Theme.of(context).dividerColor, color: unread ? null : Theme.of(context).dividerColor,
borderRadius: BorderRadius.circular(Avatar.defaultSize), borderRadius: BorderRadius.circular(Avatar.defaultSize),
), ),
child: Material( child: Stack(
children: [
Material(
color: Theme.of(context).colorScheme.surface, color: Theme.of(context).colorScheme.surface,
borderRadius: BorderRadius.circular(Avatar.defaultSize), borderRadius: BorderRadius.circular(Avatar.defaultSize),
child: Padding( child: Padding(
padding: const EdgeInsets.all(2.0), padding: const EdgeInsets.all(2.0),
child: CircleAvatar( child: CircleAvatar(
radius: 30, radius: 30,
backgroundColor: Theme.of(context).colorScheme.surface, backgroundColor:
Theme.of(context).colorScheme.surface,
foregroundColor: foregroundColor:
Theme.of(context).textTheme.bodyText1?.color, Theme.of(context).textTheme.bodyText1?.color,
child: child, child: Avatar(
mxContent: profile.avatarUrl,
name: profile.displayName,
size: 100,
fontSize: 24,
), ),
), ),
), ),
), ),
if (showEditFab)
Positioned(
right: 0,
bottom: 0,
child: SizedBox(
width: 24,
height: 24,
child: FloatingActionButton.small(
backgroundColor:
Theme.of(context).backgroundColor,
foregroundColor: Theme.of(context).primaryColor,
onPressed: () =>
VRouter.of(context).to('/stories/create'),
child: const Icon(
Icons.add_outlined,
size: 16,
),
),
),
),
],
),
),
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
Text( Text(
label, profile.displayName ?? '',
maxLines: 1, maxLines: 1,
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(

View File

@ -227,7 +227,11 @@ class StoryPageController extends State<StoryPage> {
void skip() { void skip() {
if (index + 1 >= max) { if (index + 1 >= max) {
if (isOwnStory) {
VRouter.of(context).to('/stories/create');
} else {
VRouter.of(context).to('/rooms'); VRouter.of(context).to('/rooms');
}
return; return;
} }
setState(() { setState(() {

View File

@ -225,16 +225,7 @@ class StoryView extends StatelessWidget {
); );
}, },
), ),
SafeArea( AnimatedContainer(
child: GestureDetector(
onTapDown: controller.hold,
onTapUp: controller.unhold,
onTapCancel: controller.unhold,
onVerticalDragStart: controller.hold,
onVerticalDragEnd: controller.unhold,
onHorizontalDragStart: controller.hold,
onHorizontalDragEnd: controller.unhold,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200), duration: const Duration(milliseconds: 200),
padding: const EdgeInsets.all(16.0), padding: const EdgeInsets.all(16.0),
decoration: BoxDecoration( decoration: BoxDecoration(
@ -253,6 +244,15 @@ class StoryView extends StatelessWidget {
controller.storyThemeData.alignmentX.toDouble() / 100, controller.storyThemeData.alignmentX.toDouble() / 100,
controller.storyThemeData.alignmentY.toDouble() / 100, controller.storyThemeData.alignmentY.toDouble() / 100,
), ),
child: SafeArea(
child: GestureDetector(
onTapDown: controller.hold,
onTapUp: controller.unhold,
onTapCancel: controller.unhold,
onVerticalDragStart: controller.hold,
onVerticalDragEnd: controller.unhold,
onHorizontalDragStart: controller.hold,
onHorizontalDragEnd: controller.unhold,
child: LinkText( child: LinkText(
text: controller.loadingMode text: controller.loadingMode
? L10n.of(context)!.loadingPleaseWait ? L10n.of(context)!.loadingPleaseWait