contacts ui cleanup

This commit is contained in:
Christien Rioux 2024-08-06 10:29:03 -07:00
parent 103975bb56
commit 19a366dcab
9 changed files with 84 additions and 39 deletions

View File

@ -86,10 +86,12 @@
"button": { "button": {
"ok": "Ok", "ok": "Ok",
"cancel": "Cancel", "cancel": "Cancel",
"edit": "Edit",
"delete": "Delete", "delete": "Delete",
"accept": "Accept", "accept": "Accept",
"reject": "Reject", "reject": "Reject",
"finish": "Finish", "finish": "Finish",
"close": "Close",
"yes": "Yes", "yes": "Yes",
"no": "No", "no": "No",
"waiting_for_network": "Waiting For Network" "waiting_for_network": "Waiting For Network"
@ -120,12 +122,13 @@
"contacts": "Contacts", "contacts": "Contacts",
"edit_contact": "Edit Contact", "edit_contact": "Edit Contact",
"invitations": "Invitations", "invitations": "Invitations",
"no_contact_selected": "No contact selected", "no_contact_selected": "Double-click a contact to edit it",
"new_chat": "New Chat" "new_chat": "Open Chat",
"close_contact": "Close Contact"
}, },
"contact_list": { "contact_list": {
"contacts": "Contacts", "contacts": "Contacts",
"invite_people": "Invite people to VeilidChat", "invite_people": "No contacts\n\nPress 'Create Invitation' to invite a contact to VeilidChat",
"search": "Search contacts", "search": "Search contacts",
"invitation": "Invitation", "invitation": "Invitation",
"loading_contacts": "Loading contacts..." "loading_contacts": "Loading contacts..."
@ -134,7 +137,7 @@
"form_name": "Name", "form_name": "Name",
"form_pronouns": "Pronouns", "form_pronouns": "Pronouns",
"form_about": "About", "form_about": "About",
"form_status": "Current Status", "form_status": "Status",
"form_nickname": "Nickname", "form_nickname": "Nickname",
"form_notes": "Notes", "form_notes": "Notes",
"form_fingerprint": "Fingerprint", "form_fingerprint": "Fingerprint",

View File

@ -2,7 +2,6 @@ import 'dart:async';
import 'package:async_tools/async_tools.dart'; import 'package:async_tools/async_tools.dart';
import 'package:fast_immutable_collections/fast_immutable_collections.dart'; import 'package:fast_immutable_collections/fast_immutable_collections.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:veilid_support/veilid_support.dart'; import 'package:veilid_support/veilid_support.dart';

View File

@ -5,7 +5,6 @@ import '../../proto/proto.dart' as proto;
import '../../theme/theme.dart'; import '../../theme/theme.dart';
const _kOnTap = 'onTap'; const _kOnTap = 'onTap';
const _kOnDelete = 'onDelete';
class ContactItemWidget extends StatelessWidget { class ContactItemWidget extends StatelessWidget {
const ContactItemWidget( const ContactItemWidget(
@ -70,13 +69,23 @@ class ContactItemWidget extends StatelessWidget {
await _onTap(_contact); await _onTap(_contact);
}), }),
endActions: [ endActions: [
if (_onDoubleTap != null)
SliderTileAction(
icon: Icons.edit,
label: translate('button.edit'),
actionScale: ScaleKind.secondary,
onPressed: (_context) =>
singleFuture<void>((this, _kOnTap), () async {
await _onDoubleTap(_contact);
}),
),
if (_onDelete != null) if (_onDelete != null)
SliderTileAction( SliderTileAction(
icon: Icons.delete, icon: Icons.delete,
label: translate('button.delete'), label: translate('button.delete'),
actionScale: ScaleKind.tertiary, actionScale: ScaleKind.tertiary,
onPressed: (_context) => onPressed: (_context) =>
singleFuture<void>((this, _kOnDelete), () async { singleFuture<void>((this, _kOnTap), () async {
await _onDelete(_contact); await _onDelete(_contact);
}), }),
), ),

View File

@ -191,13 +191,13 @@ class _ContactsBrowserState extends State<ContactsBrowser>
//final scaleConfig = theme.extension<ScaleConfig>()!; //final scaleConfig = theme.extension<ScaleConfig>()!;
final cilState = context.watch<ContactInvitationListCubit>().state; final cilState = context.watch<ContactInvitationListCubit>().state;
final cilBusy = cilState.busy; //final cilBusy = cilState.busy;
final contactInvitationRecordList = final contactInvitationRecordList =
cilState.state.asData?.value.map((x) => x.value).toIList() ?? cilState.state.asData?.value.map((x) => x.value).toIList() ??
const IListConst([]); const IListConst([]);
final ciState = context.watch<ContactListCubit>().state; final ciState = context.watch<ContactListCubit>().state;
final ciBusy = ciState.busy; //final ciBusy = ciState.busy;
final contactList = final contactList =
ciState.state.asData?.value.map((x) => x.value).toIList(); ciState.state.asData?.value.map((x) => x.value).toIList();
@ -243,8 +243,8 @@ class _ContactsBrowserState extends State<ContactsBrowser>
selected: widget.selectedContactRecordKey == selected: widget.selectedContactRecordKey ==
contact.localConversationRecordKey.toVeilid(), contact.localConversationRecordKey.toVeilid(),
disabled: false, disabled: false,
onTap: _onTapContact, onDoubleTap: _onTapContact,
onDoubleTap: _onStartChat, onTap: _onStartChat,
onDelete: _onDeleteContact) onDelete: _onDeleteContact)
.paddingLTRB(0, 4, 0, 0); .paddingLTRB(0, 4, 0, 0);
case ContactsBrowserElementKind.invitation: case ContactsBrowserElementKind.invitation:

View File

@ -75,12 +75,29 @@ class _ContactsDialogState extends State<ContactsDialog> {
: null, : null,
actions: [ actions: [
if (_selectedContact != null) if (_selectedContact != null)
Column(mainAxisSize: MainAxisSize.min, children: [
IconButton( IconButton(
icon: const Icon(Icons.chat_bubble), icon: const Icon(Icons.chat_bubble),
tooltip: translate('contacts_dialog.new_chat'), tooltip: translate('contacts_dialog.new_chat'),
onPressed: () async { onPressed: () async {
await onChatStarted(_selectedContact!); await onChatStarted(_selectedContact!);
}) }),
Text(translate('contacts_dialog.new_chat'),
style: theme.textTheme.labelSmall!
.copyWith(color: scale.primaryScale.borderText)),
]).paddingLTRB(8, 0, 8, 0),
if (enableSplit && _selectedContact != null)
Column(mainAxisSize: MainAxisSize.min, children: [
IconButton(
icon: const Icon(Icons.close),
tooltip: translate('contacts_dialog.close_contact'),
onPressed: () async {
await onContactSelected(null);
}),
Text(translate('contacts_dialog.close_contact'),
style: theme.textTheme.labelSmall!
.copyWith(color: scale.primaryScale.borderText)),
]).paddingLTRB(8, 0, 8, 0),
]), ]),
body: LayoutBuilder(builder: (context, constraint) { body: LayoutBuilder(builder: (context, constraint) {
final maxWidth = constraint.maxWidth; final maxWidth = constraint.maxWidth;

View File

@ -67,6 +67,7 @@ class _EditContactFormState extends State<EditContactForm> {
return FormBuilder( return FormBuilder(
key: widget.formKey, key: widget.formKey,
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [ children: [
AvatarWidget( AvatarWidget(
name: widget.contact.profile.name, name: widget.contact.profile.name,
@ -79,53 +80,53 @@ class _EditContactFormState extends State<EditContactForm> {
).paddingLTRB(0, 0, 0, 16), ).paddingLTRB(0, 0, 0, 16),
SelectableText(widget.contact.profile.name, SelectableText(widget.contact.profile.name,
style: textTheme.headlineMedium) style: textTheme.headlineMedium)
.decoratorLabel( .noEditDecoratorLabel(
context, context,
translate('contact_form.form_name'), translate('contact_form.form_name'),
scale: scale.secondaryScale, scale: scale.secondaryScale,
) )
.paddingSymmetric(vertical: 8), .paddingSymmetric(vertical: 4),
SelectableText(widget.contact.profile.pronouns, SelectableText(widget.contact.profile.pronouns,
style: textTheme.headlineSmall) style: textTheme.headlineSmall)
.decoratorLabel( .noEditDecoratorLabel(
context, context,
translate('contact_form.form_pronouns'), translate('contact_form.form_pronouns'),
scale: scale.secondaryScale, scale: scale.secondaryScale,
) )
.paddingSymmetric(vertical: 8), .paddingSymmetric(vertical: 4),
Row(children: [ Row(mainAxisSize: MainAxisSize.min, children: [
_availabilityWidget(context, widget.contact.profile.availability), _availabilityWidget(context, widget.contact.profile.availability),
SelectableText(widget.contact.profile.status, SelectableText(widget.contact.profile.status,
style: textTheme.bodyMedium) style: textTheme.bodyMedium)
.paddingSymmetric(horizontal: 8) .paddingSymmetric(horizontal: 8)
]) ])
.decoratorLabel( .noEditDecoratorLabel(
context, context,
translate('contact_form.form_status'), translate('contact_form.form_status'),
scale: scale.secondaryScale, scale: scale.secondaryScale,
) )
.paddingSymmetric(vertical: 8), .paddingSymmetric(vertical: 4),
SelectableText(widget.contact.profile.about, SelectableText(widget.contact.profile.about,
minLines: 1, maxLines: 8, style: textTheme.bodyMedium) minLines: 1, maxLines: 8, style: textTheme.bodyMedium)
.decoratorLabel( .noEditDecoratorLabel(
context, context,
translate('contact_form.form_about'), translate('contact_form.form_about'),
scale: scale.secondaryScale, scale: scale.secondaryScale,
) )
.paddingSymmetric(vertical: 8), .paddingSymmetric(vertical: 4),
SelectableText( SelectableText(
widget.contact.identityPublicKey.value.toVeilid().toString(), widget.contact.identityPublicKey.value.toVeilid().toString(),
style: textTheme.labelMedium! style: textTheme.labelMedium!
.copyWith(fontFamily: 'Source Code Pro')) .copyWith(fontFamily: 'Source Code Pro'))
.decoratorLabel( .noEditDecoratorLabel(
context, context,
translate('contact_form.form_fingerprint'), translate('contact_form.form_fingerprint'),
scale: scale.secondaryScale, scale: scale.secondaryScale,
) )
.paddingSymmetric(vertical: 8), .paddingSymmetric(vertical: 4),
Divider(color: border).paddingLTRB(8, 0, 8, 8), Divider(color: border).paddingLTRB(8, 0, 8, 8),
FormBuilderTextField( FormBuilderTextField(
autofocus: true, //autofocus: true,
name: EditContactForm.formFieldNickname, name: EditContactForm.formFieldNickname,
initialValue: widget.contact.nickname, initialValue: widget.contact.nickname,
decoration: InputDecoration( decoration: InputDecoration(

View File

@ -1,4 +1,3 @@
import 'package:awesome_extensions/awesome_extensions.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_translate/flutter_translate.dart'; import 'package:flutter_translate/flutter_translate.dart';
@ -22,14 +21,15 @@ class EmptyContactListWidget extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.stretch, crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Icon( // Icon(
Icons.person_add_sharp, // Icons.person_add_sharp,
color: scale.primaryScale.subtleBorder, // color: scale.primaryScale.subtleBorder,
size: 48, // size: 48,
), // ),
Text( Text(
textAlign: TextAlign.center, textAlign: TextAlign.center,
translate('contact_list.invite_people'), translate('contact_list.invite_people'),
//maxLines: 3,
style: textTheme.bodyMedium?.copyWith( style: textTheme.bodyMedium?.copyWith(
color: scale.primaryScale.subtleBorder, color: scale.primaryScale.subtleBorder,
), ),

View File

@ -94,7 +94,7 @@ Future<void> showErrorModal(
{required BuildContext context, {required BuildContext context,
required String title, required String title,
required String text}) async { required String text}) async {
final theme = Theme.of(context); // final theme = Theme.of(context);
// final scale = theme.extension<ScaleScheme>()!; // final scale = theme.extension<ScaleScheme>()!;
// final scaleConfig = theme.extension<ScaleConfig>()!; // final scaleConfig = theme.extension<ScaleConfig>()!;
@ -144,7 +144,7 @@ Future<void> showWarningModal(
{required BuildContext context, {required BuildContext context,
required String title, required String title,
required String text}) async { required String text}) async {
final theme = Theme.of(context); // final theme = Theme.of(context);
// final scale = theme.extension<ScaleScheme>()!; // final scale = theme.extension<ScaleScheme>()!;
// final scaleConfig = theme.extension<ScaleConfig>()!; // final scaleConfig = theme.extension<ScaleConfig>()!;
@ -183,7 +183,7 @@ Future<void> showWarningWidgetModal(
{required BuildContext context, {required BuildContext context,
required String title, required String title,
required Widget child}) async { required Widget child}) async {
final theme = Theme.of(context); // final theme = Theme.of(context);
// final scale = theme.extension<ScaleScheme>()!; // final scale = theme.extension<ScaleScheme>()!;
// final scaleConfig = theme.extension<ScaleConfig>()!; // final scaleConfig = theme.extension<ScaleConfig>()!;
@ -222,7 +222,7 @@ Future<bool> showConfirmModal(
{required BuildContext context, {required BuildContext context,
required String title, required String title,
required String text}) async { required String text}) async {
final theme = Theme.of(context); // final theme = Theme.of(context);
// final scale = theme.extension<ScaleScheme>()!; // final scale = theme.extension<ScaleScheme>()!;
// final scaleConfig = theme.extension<ScaleConfig>()!; // final scaleConfig = theme.extension<ScaleConfig>()!;

View File

@ -109,6 +109,22 @@ extension LabelExt on Widget {
), ),
child: this); child: this);
} }
Widget noEditDecoratorLabel(BuildContext context, String label,
{ScaleColor? scale}) {
final theme = Theme.of(context);
final scaleScheme = theme.extension<ScaleScheme>()!;
// final scaleConfig = theme.extension<ScaleConfig>()!;
scale = scale ?? scaleScheme.primaryScale;
return Wrap(crossAxisAlignment: WrapCrossAlignment.center, children: [
Text(
'$label:',
style: theme.textTheme.titleLarge!.copyWith(color: scale.border),
).paddingLTRB(0, 0, 8, 8),
this
]);
}
} }
Widget buildProgressIndicator() => Builder(builder: (context) { Widget buildProgressIndicator() => Builder(builder: (context) {