Merge branch 'krille/fixdesign-for-smaller-screens' into 'main'

chore: Fix design for smaller screens

See merge request famedly/fluffychat!685
This commit is contained in:
Krille Fear 2022-01-15 12:38:59 +00:00
commit 13cfaab660
3 changed files with 225 additions and 209 deletions

View File

@ -79,9 +79,11 @@ class _InviteStoryPageState extends State<InviteStoryPage> {
onPressed: () => Navigator.of(context).pop<bool>(false), onPressed: () => Navigator.of(context).pop<bool>(false),
), ),
title: Text(L10n.of(context)!.whoCanSeeMyStories), title: Text(L10n.of(context)!.whoCanSeeMyStories),
bottom: PreferredSize( elevation: 0,
preferredSize: const Size.fromHeight(56), ),
child: ListTile( body: Column(
children: [
ListTile(
title: Text(L10n.of(context)!.whoCanSeeMyStoriesDesc), title: Text(L10n.of(context)!.whoCanSeeMyStoriesDesc),
leading: CircleAvatar( leading: CircleAvatar(
backgroundColor: Theme.of(context).secondaryHeaderColor, backgroundColor: Theme.of(context).secondaryHeaderColor,
@ -89,35 +91,40 @@ class _InviteStoryPageState extends State<InviteStoryPage> {
child: const Icon(Icons.lock), child: const Icon(Icons.lock),
), ),
), ),
), const Divider(height: 1),
Expanded(
child: FutureBuilder<List<User>>(
future: loadContacts,
builder: (context, snapshot) {
final contacts = snapshot.data;
if (contacts == null) {
final error = snapshot.error;
if (error != null) {
return Center(
child: Text(error.toLocalizedString(context)));
}
return const Center(
child: CircularProgressIndicator.adaptive());
}
_undecided = contacts.map((u) => u.id).toSet();
return ListView.builder(
itemCount: contacts.length,
itemBuilder: (context, i) => SwitchListTile.adaptive(
value: _invite.contains(contacts[i].id),
onChanged: (b) => setState(() => b
? _invite.add(contacts[i].id)
: _invite.remove(contacts[i].id)),
secondary: Avatar(
mxContent: contacts[i].avatarUrl,
name: contacts[i].calcDisplayname(),
),
title: Text(contacts[i].calcDisplayname()),
),
);
}),
),
],
), ),
body: FutureBuilder<List<User>>(
future: loadContacts,
builder: (context, snapshot) {
final contacts = snapshot.data;
if (contacts == null) {
final error = snapshot.error;
if (error != null) {
return Center(child: Text(error.toLocalizedString(context)));
}
return const Center(child: CircularProgressIndicator.adaptive());
}
_undecided = contacts.map((u) => u.id).toSet();
return ListView.builder(
itemCount: contacts.length,
itemBuilder: (context, i) => SwitchListTile.adaptive(
value: _invite.contains(contacts[i].id),
onChanged: (b) => setState(() => b
? _invite.add(contacts[i].id)
: _invite.remove(contacts[i].id)),
secondary: Avatar(
mxContent: contacts[i].avatarUrl,
name: contacts[i].calcDisplayname(),
),
title: Text(contacts[i].calcDisplayname()),
),
);
}),
floatingActionButton: FloatingActionButton.extended( floatingActionButton: FloatingActionButton.extended(
onPressed: _inviteAction, onPressed: _inviteAction,
label: Text(L10n.of(context)!.publish), label: Text(L10n.of(context)!.publish),

View File

@ -28,158 +28,162 @@ class ChatEncryptionSettingsView extends StatelessWidget {
VRouter.of(context).toSegments(['rooms', controller.roomId]), VRouter.of(context).toSegments(['rooms', controller.roomId]),
), ),
title: Text(L10n.of(context).tapOnDeviceToVerify), title: Text(L10n.of(context).tapOnDeviceToVerify),
bottom: PreferredSize( elevation: 0,
preferredSize: const Size.fromHeight(56),
child: ListTile(
title: Text(L10n.of(context).deviceVerifyDescription),
leading: CircleAvatar(
backgroundColor: Theme.of(context).secondaryHeaderColor,
foregroundColor: Theme.of(context).colorScheme.secondary,
child: const Icon(Icons.lock),
),
),
),
), ),
body: MaxWidthBody( body: MaxWidthBody(
withScrolling: true, withScrolling: true,
child: StreamBuilder( child: Column(
stream: room.onUpdate.stream, mainAxisSize: MainAxisSize.min,
builder: (context, snapshot) { children: [
return FutureBuilder<List<DeviceKeys>>( ListTile(
future: room.getUserDeviceKeys(), title: Text(L10n.of(context).deviceVerifyDescription),
builder: (BuildContext context, snapshot) { leading: CircleAvatar(
if (snapshot.hasError) { backgroundColor: Theme.of(context).secondaryHeaderColor,
return Center( foregroundColor: Theme.of(context).colorScheme.secondary,
child: Text(L10n.of(context).oopsSomethingWentWrong + child: const Icon(Icons.lock),
': ' + ),
snapshot.error.toString()), ),
); const Divider(height: 1),
} StreamBuilder(
if (!snapshot.hasData) { stream: room.onUpdate.stream,
return const Center( builder: (context, snapshot) {
child: return FutureBuilder<List<DeviceKeys>>(
CircularProgressIndicator.adaptive(strokeWidth: 2)); future: room.getUserDeviceKeys(),
} builder: (BuildContext context, snapshot) {
final deviceKeys = snapshot.data; if (snapshot.hasError) {
return ListView.builder( return Center(
shrinkWrap: true, child: Text(L10n.of(context).oopsSomethingWentWrong +
physics: const NeverScrollableScrollPhysics(), ': ' +
itemCount: deviceKeys.length, snapshot.error.toString()),
itemBuilder: (BuildContext context, int i) => Column( );
mainAxisSize: MainAxisSize.min, }
children: <Widget>[ if (!snapshot.hasData) {
if (i == 0 || return const Center(
deviceKeys[i].userId != child: CircularProgressIndicator.adaptive(
deviceKeys[i - 1].userId) ...{ strokeWidth: 2));
const Divider(height: 1, thickness: 1), }
PopupMenuButton( final deviceKeys = snapshot.data;
onSelected: (action) => controller.onSelected( return ListView.builder(
context, action, deviceKeys[i]), shrinkWrap: true,
itemBuilder: (c) { physics: const NeverScrollableScrollPhysics(),
final items = <PopupMenuEntry<String>>[]; itemCount: deviceKeys.length,
if (room itemBuilder: (BuildContext context, int i) => Column(
.client mainAxisSize: MainAxisSize.min,
.userDeviceKeys[deviceKeys[i].userId] children: <Widget>[
.verified == if (i == 0 ||
UserVerifiedStatus.unknown) { deviceKeys[i].userId !=
items.add(PopupMenuItem( deviceKeys[i - 1].userId) ...{
value: 'verify_user', const Divider(height: 1, thickness: 1),
child: Text(L10n.of(context).verifyUser), PopupMenuButton(
)); onSelected: (action) => controller.onSelected(
} context, action, deviceKeys[i]),
return items; itemBuilder: (c) {
}, final items = <PopupMenuEntry<String>>[];
child: ListTile( if (room
leading: Avatar( .client
mxContent: room .userDeviceKeys[deviceKeys[i].userId]
.getUserByMXIDSync(deviceKeys[i].userId) .verified ==
.avatarUrl, UserVerifiedStatus.unknown) {
name: room items.add(PopupMenuItem(
.getUserByMXIDSync(deviceKeys[i].userId) value: 'verify_user',
.calcDisplayname(), child: Text(L10n.of(context).verifyUser),
), ));
title: Text( }
room return items;
.getUserByMXIDSync(deviceKeys[i].userId) },
.calcDisplayname(), child: ListTile(
), leading: Avatar(
subtitle: Text( mxContent: room
deviceKeys[i].userId, .getUserByMXIDSync(deviceKeys[i].userId)
style: const TextStyle( .avatarUrl,
fontWeight: FontWeight.w300), name: room
), .getUserByMXIDSync(deviceKeys[i].userId)
), .calcDisplayname(),
), ),
}, title: Text(
PopupMenuButton( room
onSelected: (action) => controller.onSelected( .getUserByMXIDSync(deviceKeys[i].userId)
context, action, deviceKeys[i]), .calcDisplayname(),
itemBuilder: (c) { ),
final items = <PopupMenuEntry<String>>[]; subtitle: Text(
if (deviceKeys[i].blocked || deviceKeys[i].userId,
!deviceKeys[i].verified) { style: const TextStyle(
items.add(PopupMenuItem( fontWeight: FontWeight.w300),
value:
deviceKeys[i].userId == room.client.userID
? 'verify'
: 'verify_user',
child: Text(L10n.of(context).verifyStart),
));
}
if (deviceKeys[i].blocked) {
items.add(PopupMenuItem(
value: 'unblock',
child: Text(L10n.of(context).unblockDevice),
));
}
if (!deviceKeys[i].blocked) {
items.add(PopupMenuItem(
value: 'block',
child: Text(L10n.of(context).blockDevice),
));
}
return items;
},
child: ListTile(
leading: CircleAvatar(
foregroundColor: Colors.white,
backgroundColor: deviceKeys[i].color,
child: Icon(deviceKeys[i].icon),
),
title: Text(
deviceKeys[i].displayname,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
subtitle: Row(
children: [
Text(
deviceKeys[i].deviceId,
style: const TextStyle(
fontWeight: FontWeight.w300),
),
const Spacer(),
Text(
deviceKeys[i].blocked
? L10n.of(context).blocked
: deviceKeys[i].verified
? L10n.of(context).verified
: L10n.of(context).unverified,
style: TextStyle(
fontSize: 14,
color: deviceKeys[i].color,
), ),
), ),
], ),
},
PopupMenuButton(
onSelected: (action) => controller.onSelected(
context, action, deviceKeys[i]),
itemBuilder: (c) {
final items = <PopupMenuEntry<String>>[];
if (deviceKeys[i].blocked ||
!deviceKeys[i].verified) {
items.add(PopupMenuItem(
value: deviceKeys[i].userId ==
room.client.userID
? 'verify'
: 'verify_user',
child: Text(L10n.of(context).verifyStart),
));
}
if (deviceKeys[i].blocked) {
items.add(PopupMenuItem(
value: 'unblock',
child: Text(L10n.of(context).unblockDevice),
));
}
if (!deviceKeys[i].blocked) {
items.add(PopupMenuItem(
value: 'block',
child: Text(L10n.of(context).blockDevice),
));
}
return items;
},
child: ListTile(
leading: CircleAvatar(
foregroundColor: Colors.white,
backgroundColor: deviceKeys[i].color,
child: Icon(deviceKeys[i].icon),
),
title: Text(
deviceKeys[i].displayname,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
subtitle: Row(
children: [
Text(
deviceKeys[i].deviceId,
style: const TextStyle(
fontWeight: FontWeight.w300),
),
const Spacer(),
Text(
deviceKeys[i].blocked
? L10n.of(context).blocked
: deviceKeys[i].verified
? L10n.of(context).verified
: L10n.of(context).unverified,
style: TextStyle(
fontSize: 14,
color: deviceKeys[i].color,
),
),
],
),
),
), ),
), ],
), ),
], );
), },
); );
}, }),
); ],
}), ),
), ),
); );
} }

View File

@ -17,9 +17,11 @@ class SettingsStoriesView extends StatelessWidget {
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
title: Text(L10n.of(context)!.whoCanSeeMyStories), title: Text(L10n.of(context)!.whoCanSeeMyStories),
bottom: PreferredSize( elevation: 0,
preferredSize: const Size.fromHeight(56), ),
child: ListTile( body: Column(
children: [
ListTile(
title: Text(L10n.of(context)!.whoCanSeeMyStoriesDesc), title: Text(L10n.of(context)!.whoCanSeeMyStoriesDesc),
leading: CircleAvatar( leading: CircleAvatar(
backgroundColor: Theme.of(context).secondaryHeaderColor, backgroundColor: Theme.of(context).secondaryHeaderColor,
@ -27,37 +29,40 @@ class SettingsStoriesView extends StatelessWidget {
child: const Icon(Icons.lock), child: const Icon(Icons.lock),
), ),
), ),
), const Divider(height: 1),
), Expanded(
body: FutureBuilder( child: FutureBuilder(
future: controller.loadUsers, future: controller.loadUsers,
builder: (context, snapshot) { builder: (context, snapshot) {
final error = snapshot.error; final error = snapshot.error;
if (error != null) { if (error != null) {
return Center(child: Text(error.toLocalizedString(context))); return Center(child: Text(error.toLocalizedString(context)));
} }
if (snapshot.connectionState != ConnectionState.done) { if (snapshot.connectionState != ConnectionState.done) {
return const Center( return const Center(
child: CircularProgressIndicator.adaptive( child: CircularProgressIndicator.adaptive(
strokeWidth: 2, strokeWidth: 2,
)); ));
} }
return ListView.builder( return ListView.builder(
itemCount: controller.users.length, itemCount: controller.users.length,
itemBuilder: (context, i) { itemBuilder: (context, i) {
final user = controller.users.keys.toList()[i]; final user = controller.users.keys.toList()[i];
return SwitchListTile.adaptive( return SwitchListTile.adaptive(
value: controller.users[user] ?? false, value: controller.users[user] ?? false,
onChanged: (_) => controller.toggleUser(user), onChanged: (_) => controller.toggleUser(user),
secondary: Avatar( secondary: Avatar(
mxContent: user.avatarUrl, mxContent: user.avatarUrl,
name: user.calcDisplayname(), name: user.calcDisplayname(),
), ),
title: Text(user.calcDisplayname()), title: Text(user.calcDisplayname()),
); );
}, },
); );
}, },
),
),
],
), ),
); );
} }