chore: Design follow up
This commit is contained in:
krille-chan
parent
dd7330ecd3
commit
038cd9cb73
6 changed files with 172 additions and 139 deletions
|
|
@ -47,7 +47,22 @@ class DevicesSettingsView extends StatelessWidget {
|
|||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (controller.thisDevice != null)
|
||||
if (controller.thisDevice != null) ...[
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 16.0,
|
||||
vertical: 8.0,
|
||||
),
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Text(
|
||||
L10n.of(context)!.thisDevice,
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
textAlign: TextAlign.left,
|
||||
),
|
||||
),
|
||||
UserDeviceListItem(
|
||||
controller.thisDevice!,
|
||||
rename: controller.renameDeviceAction,
|
||||
|
|
@ -56,24 +71,44 @@ class DevicesSettingsView extends StatelessWidget {
|
|||
block: controller.blockDeviceAction,
|
||||
unblock: controller.unblockDeviceAction,
|
||||
),
|
||||
const Divider(height: 1),
|
||||
const Divider(
|
||||
height: 16.0,
|
||||
indent: 16,
|
||||
endIndent: 16,
|
||||
),
|
||||
],
|
||||
if (controller.notThisDevice.isNotEmpty)
|
||||
ListTile(
|
||||
title: Text(
|
||||
controller.errorDeletingDevices ??
|
||||
L10n.of(context)!.removeAllOtherDevices,
|
||||
style: const TextStyle(color: Colors.red),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 16.0,
|
||||
vertical: 8.0,
|
||||
),
|
||||
child: SizedBox(
|
||||
width: double.infinity,
|
||||
child: OutlinedButton.icon(
|
||||
label: Text(
|
||||
controller.errorDeletingDevices ??
|
||||
L10n.of(context)!.removeAllOtherDevices,
|
||||
),
|
||||
style: OutlinedButton.styleFrom(
|
||||
foregroundColor:
|
||||
Theme.of(context).colorScheme.error,
|
||||
side: BorderSide(
|
||||
color: Theme.of(context).colorScheme.error,
|
||||
),
|
||||
),
|
||||
icon: controller.loadingDeletingDevices
|
||||
? const CircularProgressIndicator.adaptive(
|
||||
strokeWidth: 2,
|
||||
)
|
||||
: const Icon(Icons.delete_outline),
|
||||
onPressed: controller.loadingDeletingDevices
|
||||
? null
|
||||
: () => controller.removeDevicesAction(
|
||||
controller.notThisDevice,
|
||||
),
|
||||
),
|
||||
),
|
||||
trailing: controller.loadingDeletingDevices
|
||||
? const CircularProgressIndicator.adaptive(
|
||||
strokeWidth: 2,
|
||||
)
|
||||
: const Icon(Icons.delete_outline),
|
||||
onTap: controller.loadingDeletingDevices
|
||||
? null
|
||||
: () => controller.removeDevicesAction(
|
||||
controller.notThisDevice,
|
||||
),
|
||||
)
|
||||
else
|
||||
Center(
|
||||
|
|
@ -82,7 +117,6 @@ class DevicesSettingsView extends StatelessWidget {
|
|||
child: Text(L10n.of(context)!.noOtherDevicesFound),
|
||||
),
|
||||
),
|
||||
const Divider(height: 1),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import 'package:adaptive_dialog/adaptive_dialog.dart';
|
|||
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
||||
import 'package:matrix/matrix.dart';
|
||||
|
||||
import 'package:fluffychat/config/app_config.dart';
|
||||
import '../../utils/date_time_extension.dart';
|
||||
import '../../utils/matrix_sdk_extensions/device_extension.dart';
|
||||
import '../../widgets/matrix.dart';
|
||||
|
|
@ -41,104 +42,106 @@ class UserDeviceListItem extends StatelessWidget {
|
|||
?.deviceKeys[userDevice.deviceId];
|
||||
final isOwnDevice = userDevice.deviceId == client.deviceID;
|
||||
|
||||
return ListTile(
|
||||
onTap: () async {
|
||||
final action = await showModalActionSheet<UserDeviceListItemAction>(
|
||||
context: context,
|
||||
title: '${userDevice.displayName} (${userDevice.deviceId})',
|
||||
actions: [
|
||||
SheetAction(
|
||||
key: UserDeviceListItemAction.rename,
|
||||
label: L10n.of(context)!.changeDeviceName,
|
||||
),
|
||||
if (!isOwnDevice && keys != null) ...{
|
||||
SheetAction(
|
||||
key: UserDeviceListItemAction.verify,
|
||||
label: L10n.of(context)!.verifyStart,
|
||||
),
|
||||
if (!keys.blocked)
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8.0),
|
||||
child: Material(
|
||||
borderRadius: BorderRadius.circular(AppConfig.borderRadius),
|
||||
clipBehavior: Clip.hardEdge,
|
||||
child: ListTile(
|
||||
onTap: () async {
|
||||
final action = await showModalActionSheet<UserDeviceListItemAction>(
|
||||
context: context,
|
||||
title: '${userDevice.displayName} (${userDevice.deviceId})',
|
||||
actions: [
|
||||
SheetAction(
|
||||
key: UserDeviceListItemAction.block,
|
||||
label: L10n.of(context)!.blockDevice,
|
||||
isDestructiveAction: true,
|
||||
key: UserDeviceListItemAction.rename,
|
||||
label: L10n.of(context)!.changeDeviceName,
|
||||
),
|
||||
if (keys.blocked)
|
||||
SheetAction(
|
||||
key: UserDeviceListItemAction.unblock,
|
||||
label: L10n.of(context)!.unblockDevice,
|
||||
isDestructiveAction: true,
|
||||
),
|
||||
},
|
||||
if (!isOwnDevice)
|
||||
SheetAction(
|
||||
key: UserDeviceListItemAction.remove,
|
||||
label: L10n.of(context)!.delete,
|
||||
isDestructiveAction: true,
|
||||
),
|
||||
],
|
||||
);
|
||||
if (action == null) return;
|
||||
switch (action) {
|
||||
case UserDeviceListItemAction.rename:
|
||||
rename(userDevice);
|
||||
break;
|
||||
case UserDeviceListItemAction.remove:
|
||||
remove(userDevice);
|
||||
break;
|
||||
case UserDeviceListItemAction.verify:
|
||||
verify(userDevice);
|
||||
break;
|
||||
case UserDeviceListItemAction.block:
|
||||
block(userDevice);
|
||||
break;
|
||||
case UserDeviceListItemAction.unblock:
|
||||
unblock(userDevice);
|
||||
break;
|
||||
}
|
||||
},
|
||||
leading: CircleAvatar(
|
||||
foregroundColor: Colors.white,
|
||||
backgroundColor: keys == null
|
||||
? Colors.grey[700]
|
||||
: keys.blocked
|
||||
? Colors.red
|
||||
: keys.verified
|
||||
? Colors.green
|
||||
: Colors.orange,
|
||||
child: Icon(userDevice.icon),
|
||||
),
|
||||
title: Row(
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
child: Text(
|
||||
userDevice.displayname,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
if (keys != null)
|
||||
Text(
|
||||
keys.blocked
|
||||
? L10n.of(context)!.blocked
|
||||
: keys.verified
|
||||
? L10n.of(context)!.verified
|
||||
: L10n.of(context)!.unverified,
|
||||
style: TextStyle(
|
||||
color: keys.blocked
|
||||
if (!isOwnDevice && keys != null) ...{
|
||||
SheetAction(
|
||||
key: UserDeviceListItemAction.verify,
|
||||
label: L10n.of(context)!.verifyStart,
|
||||
),
|
||||
if (!keys.blocked)
|
||||
SheetAction(
|
||||
key: UserDeviceListItemAction.block,
|
||||
label: L10n.of(context)!.blockDevice,
|
||||
isDestructiveAction: true,
|
||||
),
|
||||
if (keys.blocked)
|
||||
SheetAction(
|
||||
key: UserDeviceListItemAction.unblock,
|
||||
label: L10n.of(context)!.unblockDevice,
|
||||
isDestructiveAction: true,
|
||||
),
|
||||
},
|
||||
if (!isOwnDevice)
|
||||
SheetAction(
|
||||
key: UserDeviceListItemAction.remove,
|
||||
label: L10n.of(context)!.delete,
|
||||
isDestructiveAction: true,
|
||||
),
|
||||
],
|
||||
);
|
||||
if (action == null) return;
|
||||
switch (action) {
|
||||
case UserDeviceListItemAction.rename:
|
||||
rename(userDevice);
|
||||
break;
|
||||
case UserDeviceListItemAction.remove:
|
||||
remove(userDevice);
|
||||
break;
|
||||
case UserDeviceListItemAction.verify:
|
||||
verify(userDevice);
|
||||
break;
|
||||
case UserDeviceListItemAction.block:
|
||||
block(userDevice);
|
||||
break;
|
||||
case UserDeviceListItemAction.unblock:
|
||||
unblock(userDevice);
|
||||
break;
|
||||
}
|
||||
},
|
||||
leading: CircleAvatar(
|
||||
foregroundColor: Colors.white,
|
||||
backgroundColor: keys == null
|
||||
? Colors.grey[700]
|
||||
: keys.blocked
|
||||
? Colors.red
|
||||
: keys.verified
|
||||
? Colors.green
|
||||
: Colors.orange,
|
||||
),
|
||||
child: Icon(userDevice.icon),
|
||||
),
|
||||
title: Text(
|
||||
userDevice.displayname,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
subtitle: Text(
|
||||
L10n.of(context)!.lastActiveAgo(
|
||||
DateTime.fromMillisecondsSinceEpoch(userDevice.lastSeenTs ?? 0)
|
||||
.localizedTimeShort(context),
|
||||
),
|
||||
],
|
||||
),
|
||||
subtitle: Text(
|
||||
L10n.of(context)!.lastActiveAgo(
|
||||
DateTime.fromMillisecondsSinceEpoch(userDevice.lastSeenTs ?? 0)
|
||||
.localizedTimeShort(context),
|
||||
style: const TextStyle(fontWeight: FontWeight.w300),
|
||||
),
|
||||
trailing: keys == null
|
||||
? null
|
||||
: Text(
|
||||
keys.blocked
|
||||
? L10n.of(context)!.blocked
|
||||
: keys.verified
|
||||
? L10n.of(context)!.verified
|
||||
: L10n.of(context)!.unverified,
|
||||
style: TextStyle(
|
||||
color: keys.blocked
|
||||
? Colors.red
|
||||
: keys.verified
|
||||
? Colors.green
|
||||
: Colors.orange,
|
||||
),
|
||||
),
|
||||
),
|
||||
style: const TextStyle(fontWeight: FontWeight.w300),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue