Git-Mirrors/veilidchat
1
0
Fork 0
mirror of https://gitlab.com/veilid/veilidchat.git synced 2024-12-23 14:49:31 -05:00
Code Issues Packages Projects Releases Wiki Activity

more cleanup

Browse Source
This commit is contained in:
Christien Rioux 2023-09-24 15:30:54 -04:00
parent 03c6560e60
commit 7831deabd3
18 changed files with 157 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/i18n/en.json
View File

@ -106,7 +106,7 @@
"chat_list": {
"search": "Search",
"start_a_conversation": "Start a conversation",
"conversations": "Conversations",
"chats": "Chats",
"groups": "Groups"
},
"themes": {

2
lib/components/bottom_sheet_action_button.dart
View File

@ -47,6 +47,8 @@ class BottomSheetActionButtonState
//
return _showFab
? FloatingActionButton(
elevation: 0,
hoverElevation: 0,
shape: widget.shape,
foregroundColor: widget.foregroundColor,
backgroundColor: widget.backgroundColor,

15
lib/components/chat_component.dart
View File

@ -12,8 +12,7 @@ import '../entities/identity.dart';
import '../providers/account.dart';
import '../providers/chat.dart';
import '../providers/conversation.dart';
import '../tools/theme_service.dart';
import '../tools/widget_helpers.dart';
import '../tools/tools.dart';
import '../veilid_support/veilid_support.dart';
class ChatComponent extends ConsumerStatefulWidget {
@ -121,8 +120,8 @@ class ChatComponentState extends ConsumerState<ChatComponent> {
Widget build(BuildContext context) {
final theme = Theme.of(context);
final scale = theme.extension<ScaleScheme>()!;
final chatTheme = scale.toChatTheme();
final textTheme = Theme.of(context).textTheme;
final chatTheme = makeChatTheme(scale, textTheme);
final contactName = widget.activeChatContact.editedProfile.name;
final protoMessages =
@ -147,7 +146,7 @@ class ChatComponentState extends ConsumerState<ChatComponent> {
Container(
height: 48,
decoration: BoxDecoration(
color: scale.primaryScale.subtleBackground,
color: scale.primaryScale.subtleBorder,
),
child: Row(children: [
Align(
@ -159,7 +158,7 @@ class ChatComponentState extends ConsumerState<ChatComponent> {
textAlign: TextAlign.start,
style: textTheme.titleMedium),
)),
Spacer(),
const Spacer(),
IconButton(
icon: const Icon(Icons.close),
onPressed: () async {
@ -168,7 +167,7 @@ class ChatComponentState extends ConsumerState<ChatComponent> {
]),
),
Expanded(
child: Container(
child: DecoratedBox(
decoration: const BoxDecoration(),
child: Chat(
theme: chatTheme,
@ -180,8 +179,8 @@ class ChatComponentState extends ConsumerState<ChatComponent> {
onSendPressed: (message) {
unawaited(_handleSendPressed(message));
},
showUserAvatars: true,
showUserNames: true,
//showUserAvatars: false,
//showUserNames: true,
user: _localUser,
),
),

6
lib/components/chat_single_contact_item_widget.dart
View File

@ -28,12 +28,12 @@ class ChatSingleContactItemWidget extends ConsumerWidget {
final selected = activeChat == remoteConversationRecordKey;
return Container(
margin: const EdgeInsets.fromLTRB(4, 4, 4, 0),
margin: const EdgeInsets.fromLTRB(0, 4, 0, 0),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: scale.tertiaryScale.subtleBackground,
color: scale.tertiaryScale.subtleBorder,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
borderRadius: BorderRadius.circular(8),
)),
child: Slidable(
key: ObjectKey(contact),

97
lib/components/chat_single_contact_list_widget.dart
View File

@ -29,54 +29,57 @@ class ChatSingleContactListWidget extends ConsumerWidget {
// ignore: prefer_expression_function_bodies
Widget build(BuildContext context, WidgetRef ref) {
final theme = Theme.of(context);
final textTheme = theme.textTheme;
//final textTheme = theme.textTheme;
final scale = theme.extension<ScaleScheme>()!;
return Container(
width: double.infinity,
decoration: ShapeDecoration(
color: scale.grayScale.appBackground,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
)),
child: (chatList.isEmpty)
? const EmptyChatListWidget()
: SearchableList<proto.Chat>(
autoFocusOnSearch: false,
initialList: chatList.toList(),
builder: (l, i, c) {
final contact = contactMap[c.remoteConversationKey];
if (contact == null) {
return const Text('...');
}
return ChatSingleContactItemWidget(contact: contact);
},
filter: (value) {
final lowerValue = value.toLowerCase();
return chatList.where((c) {
final contact = contactMap[c.remoteConversationKey];
if (contact == null) {
return false;
}
return contact.editedProfile.name
.toLowerCase()
.contains(lowerValue) ||
contact.editedProfile.title
.toLowerCase()
.contains(lowerValue);
}).toList();
},
inputDecoration: InputDecoration(
labelText: translate('chat_list.search'),
fillColor: Colors.white,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Colors.blue,
),
borderRadius: BorderRadius.circular(10),
),
),
),
).paddingLTRB(8, 8, 8, 65);
return SizedBox.expand(
child: styledTitleContainer(
context: context,
title: translate('chat_list.chats'),
child: SizedBox.expand(
child: (chatList.isEmpty)
? const EmptyChatListWidget()
: SearchableList<proto.Chat>(
autoFocusOnSearch: false,
initialList: chatList.toList(),
builder: (l, i, c) {
final contact =
contactMap[c.remoteConversationKey];
if (contact == null) {
return const Text('...');
}
return ChatSingleContactItemWidget(
contact: contact);
},
filter: (value) {
final lowerValue = value.toLowerCase();
return chatList.where((c) {
final contact =
contactMap[c.remoteConversationKey];
if (contact == null) {
return false;
}
return contact.editedProfile.name
.toLowerCase()
.contains(lowerValue) ||
contact.editedProfile.title
.toLowerCase()
.contains(lowerValue);
}).toList();
},
spaceBetweenSearchAndList: 4,
inputDecoration: InputDecoration(
labelText: translate('chat_list.search'),
contentPadding: const EdgeInsets.all(2),
fillColor: scale.primaryScale.text,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: scale.primaryScale.hoverBorder,
),
borderRadius: BorderRadius.circular(8),
),
),
).paddingAll(8))))
.paddingLTRB(8, 8, 8, 65);
}
}

4
lib/components/contact_invitation_item_widget.dart
View File

@ -33,9 +33,9 @@ class ContactInvitationItemWidget extends ConsumerWidget {
margin: const EdgeInsets.fromLTRB(4, 4, 4, 0),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: scale.tertiaryScale.subtleBackground,
color: scale.tertiaryScale.subtleBorder,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
borderRadius: BorderRadius.circular(8),
)),
child: Slidable(
// Specify a key if the Slidable is dismissible.

13
lib/components/contact_invitation_list_widget.dart
View File

@ -33,11 +33,11 @@ class ContactInvitationListWidgetState
return Container(
width: double.infinity,
margin: const EdgeInsets.fromLTRB(4, 0, 4, 4),
decoration: ShapeDecoration(
color: scale.primaryScale.subtleBorder,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
)),
borderRadius: BorderRadius.circular(16),
)),
constraints: const BoxConstraints(maxHeight: 200),
child: Column(
mainAxisSize: MainAxisSize.min,
@ -47,9 +47,8 @@ class ContactInvitationListWidgetState
decoration: ShapeDecoration(
color: scale.primaryScale.subtleBackground,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
side: BorderSide(
color: scale.primaryScale.subtleBorder, width: 4))),
borderRadius: BorderRadius.circular(16),
)),
child: ListView.builder(
controller: _scrollController,
itemCount: widget.contactInvitationRecordList.length,
@ -75,7 +74,7 @@ class ContactInvitationListWidgetState
return index;
},
shrinkWrap: true,
))
).paddingLTRB(0, 0, 0, 4))
],
),
);

6
lib/components/contact_item_widget.dart
View File

@ -27,12 +27,12 @@ class ContactItemWidget extends ConsumerWidget {
proto.TypedKeyProto.fromProto(contact.remoteConversationRecordKey);
return Container(
margin: const EdgeInsets.fromLTRB(4, 4, 4, 0),
margin: const EdgeInsets.fromLTRB(0, 4, 0, 0),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: scale.tertiaryScale.subtleBackground,
color: scale.tertiaryScale.subtleBorder,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
borderRadius: BorderRadius.circular(8),
)),
child: Slidable(
key: ObjectKey(contact),

18
lib/components/contact_list_widget.dart
View File

@ -22,8 +22,11 @@ class ContactListWidget extends ConsumerWidget {
}
@override
// ignore: prefer_expression_function_bodies
Widget build(BuildContext context, WidgetRef ref) {
final theme = Theme.of(context);
//final textTheme = theme.textTheme;
final scale = theme.extension<ScaleScheme>()!;
return SizedBox.expand(
child: styledTitleContainer(
context: context,
@ -33,7 +36,6 @@ class ContactListWidget extends ConsumerWidget {
? const EmptyContactListWidget()
: SearchableList<proto.Contact>(
autoFocusOnSearch: false,
shrinkWrap: true,
initialList: contactList.toList(),
builder: (l, i, c) => ContactItemWidget(contact: c),
filter: (value) {
@ -48,17 +50,19 @@ class ContactListWidget extends ConsumerWidget {
.contains(lowerValue))
.toList();
},
spaceBetweenSearchAndList: 4,
inputDecoration: InputDecoration(
labelText: translate('contact_list.search'),
fillColor: Colors.white,
contentPadding: const EdgeInsets.all(2),
fillColor: scale.primaryScale.text,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Colors.blue,
borderSide: BorderSide(
color: scale.primaryScale.hoverBorder,
),
borderRadius: BorderRadius.circular(10),
borderRadius: BorderRadius.circular(8),
),
),
),
).paddingAll(8),
))).paddingLTRB(8, 0, 8, 8);
}
}

8
lib/components/profile_widget.dart
View File

@ -26,11 +26,9 @@ class ProfileWidget extends ConsumerWidget {
return DecoratedBox(
decoration: ShapeDecoration(
color: scale.primaryScale.subtleBorder,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
side: BorderSide(
width: 0, color: scale.primaryScale.subtleBorder))),
color: scale.primaryScale.border,
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(16))),
child: Column(children: [
Text(
name,

15
lib/pages/home.dart
View File

@ -114,8 +114,8 @@ class HomePageState extends ConsumerState<HomePage>
color: scale.secondaryScale.text,
constraints: const BoxConstraints.expand(height: 64, width: 64),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(
scale.secondaryScale.subtleBorder),
backgroundColor:
MaterialStateProperty.all(scale.secondaryScale.border),
shape: MaterialStateProperty.all(const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(16))))),
tooltip: translate('app_bar.settings_tooltip'),
@ -212,12 +212,19 @@ class HomePageState extends ConsumerState<HomePage>
// ignore: prefer_expression_function_bodies
Widget buildTablet(BuildContext context) {
final w = MediaQuery.of(context).size.width;
final theme = Theme.of(context);
final scale = theme.extension<ScaleScheme>()!;
final children = [
ConstrainedBox(
constraints: const BoxConstraints(minWidth: 300, maxWidth: 300),
child: ConstrainedBox(
constraints: BoxConstraints(maxWidth: w / 2),
child: buildTabletLeftPane(context))),
SizedBox(
width: 2,
height: double.infinity,
child: ColoredBox(color: scale.primaryScale.hoverBorder)),
Expanded(child: buildTabletRightPane(context)),
];
@ -247,8 +254,8 @@ class HomePageState extends ConsumerState<HomePage>
child: GestureDetector(
onTap: () => FocusScope.of(context).requestFocus(_unfocusNode),
child: DecoratedBox(
decoration:
BoxDecoration(color: scale.primaryScale.elementBackground),
decoration: BoxDecoration(
color: scale.primaryScale.activeElementBackground),
child: responsiveVisibility(
context: context,
phone: false,

4
lib/pages/main_pager/account_page.dart
View File

@ -62,8 +62,8 @@ class AccountPageState extends ConsumerState<AccountPage> {
if (contactInvitationRecordList.isNotEmpty)
ExpansionTile(
tilePadding: EdgeInsets.fromLTRB(8, 0, 8, 0),
backgroundColor: scale.primaryScale.subtleBorder,
collapsedBackgroundColor: scale.primaryScale.subtleBorder,
backgroundColor: scale.primaryScale.border,
collapsedBackgroundColor: scale.primaryScale.border,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),

11
lib/pages/main_pager/main_pager.dart
View File

@ -8,6 +8,7 @@ import 'package:flutter/services.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_translate/flutter_translate.dart';
import 'package:preload_page_view/preload_page_view.dart';
import 'package:stylish_bottom_bar/model/bar_items.dart';
import 'package:stylish_bottom_bar/stylish_bottom_bar.dart';
@ -47,7 +48,7 @@ class MainPagerState extends ConsumerState<MainPager>
final _unfocusNode = FocusNode();
var _currentPage = 0;
final pageController = PageController();
final pageController = PreloadPageController();
final _selectedIconList = <IconData>[Icons.person, Icons.chat];
// final _unselectedIconList = <IconData>[
@ -221,14 +222,14 @@ class MainPagerState extends ConsumerState<MainPager>
backgroundColor: Colors.transparent,
body: NotificationListener<ScrollNotification>(
onNotification: onScrollNotification,
child: PageView(
child: PreloadPageView(
controller: pageController,
preloadPagesCount: 2,
onPageChanged: (index) {
setState(() {
_currentPage = index;
});
},
//physics: const NeverScrollableScrollPhysics(),
children: [
AccountPage(
localAccounts: widget.localAccounts,
@ -244,7 +245,7 @@ class MainPagerState extends ConsumerState<MainPager>
// ),
// ),
bottomNavigationBar: StylishBottomBar(
backgroundColor: scale.primaryScale.background,
backgroundColor: scale.primaryScale.hoverBorder,
// gradient: LinearGradient(
// begin: Alignment.topCenter,
// end: Alignment.bottomCenter,
@ -275,7 +276,7 @@ class MainPagerState extends ConsumerState<MainPager>
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(14))),
//foregroundColor: scale.secondaryScale.text,
backgroundColor: scale.secondaryScale.background,
backgroundColor: scale.secondaryScale.hoverBorder,
builder: (context) => Icon(
_fabIconList[_currentPage],
color: scale.secondaryScale.text,

33
lib/tools/radix_generator.dart
View File

@ -1,5 +1,6 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_chat_ui/flutter_chat_ui.dart';
import 'package:radix_colors/radix_colors.dart';
import 'theme_service.dart';
@ -274,7 +275,7 @@ extension ToScaleColor on RadixColor {
subtleBackground: step2,
elementBackground: step3,
hoverElementBackground: step4,
activedElementBackground: step5,
activeElementBackground: step5,
subtleBorder: step6,
border: step7,
hoverBorder: step8,
@ -507,13 +508,39 @@ ColorScheme _radixColorScheme(Brightness brightness, RadixScheme radix) =>
surfaceTint: radix.primaryAlphaScale.step4,
);
ChatTheme makeChatTheme(ScaleScheme scale, TextTheme textTheme) =>
DefaultChatTheme(
primaryColor: scale.primaryScale.background,
secondaryColor: scale.secondaryScale.background,
backgroundColor: scale.grayScale.subtleBackground,
inputBackgroundColor: Colors.blue,
inputBorderRadius: BorderRadius.zero,
inputTextDecoration: InputDecoration(
filled: true,
fillColor: scale.primaryScale.elementBackground,
isDense: true,
contentPadding: const EdgeInsets.fromLTRB(8, 12, 8, 12),
border: const OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.all(Radius.circular(16))),
),
inputContainerDecoration: BoxDecoration(color: scale.primaryScale.border),
inputPadding: const EdgeInsets.all(9),
inputTextColor: scale.primaryScale.text,
attachmentButtonIcon: Icon(Icons.attach_file),
);
ThemeData radixGenerator(Brightness brightness, RadixThemeColor themeColor) {
TextTheme? textTheme;
final textTheme = (brightness == Brightness.light)
? Typography.blackCupertino
: Typography.whiteCupertino;
final radix = _radixScheme(brightness, themeColor);
final colorScheme = _radixColorScheme(brightness, radix);
final scaleScheme = radix.toScale();
return ThemeData.from(
colorScheme: colorScheme, textTheme: textTheme, useMaterial3: true)
.copyWith(extensions: <ThemeExtension<dynamic>>[
radix.toScale(),
scaleScheme,
]);
}

36
lib/tools/theme_service.dart
View File

@ -18,7 +18,7 @@ class ScaleColor {
required this.subtleBackground,
required this.elementBackground,
required this.hoverElementBackground,
required this.activedElementBackground,
required this.activeElementBackground,
required this.subtleBorder,
required this.border,
required this.hoverBorder,
@ -32,7 +32,7 @@ class ScaleColor {
Color subtleBackground;
Color elementBackground;
Color hoverElementBackground;
Color activedElementBackground;
Color activeElementBackground;
Color subtleBorder;
Color border;
Color hoverBorder;
@ -46,7 +46,7 @@ class ScaleColor {
Color? subtleBackground,
Color? elementBackground,
Color? hoverElementBackground,
Color? activedElementBackground,
Color? activeElementBackground,
Color? subtleBorder,
Color? border,
Color? hoverBorder,
@ -60,8 +60,8 @@ class ScaleColor {
elementBackground: elementBackground ?? this.elementBackground,
hoverElementBackground:
hoverElementBackground ?? this.hoverElementBackground,
activedElementBackground:
activedElementBackground ?? this.activedElementBackground,
activeElementBackground:
activeElementBackground ?? this.activeElementBackground,
subtleBorder: subtleBorder ?? this.subtleBorder,
border: border ?? this.border,
hoverBorder: hoverBorder ?? this.hoverBorder,
@ -84,8 +84,8 @@ class ScaleColor {
hoverElementBackground:
Color.lerp(a.hoverElementBackground, b.hoverElementBackground, t) ??
const Color(0x00000000),
activedElementBackground: Color.lerp(
a.activedElementBackground, b.activedElementBackground, t) ??
activeElementBackground: Color.lerp(
a.activeElementBackground, b.activeElementBackground, t) ??
const Color(0x00000000),
subtleBorder: Color.lerp(a.subtleBorder, b.subtleBorder, t) ??
const Color(0x00000000),
@ -150,28 +150,6 @@ class ScaleScheme extends ThemeExtension<ScaleScheme> {
errorScale: ScaleColor.lerp(errorScale, other.errorScale, t),
);
}
ChatTheme toChatTheme() => DefaultChatTheme(
primaryColor: primaryScale.background,
secondaryColor: secondaryScale.background,
backgroundColor: grayScale.appBackground,
inputBackgroundColor: grayScale.subtleBackground,
inputBorderRadius: BorderRadius.zero,
inputTextDecoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(color: primaryScale.subtleBorder),
borderRadius: const BorderRadius.all(Radius.circular(16))),
),
inputContainerDecoration:
BoxDecoration(color: primaryScale.appBackground),
inputPadding: EdgeInsets.all(5),
inputTextStyle: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
height: 1,
),
attachmentButtonIcon: Icon(Icons.attach_file),
);
}
////////////////////////////////////////////////////////////////////////

8
lib/tools/widget_helpers.dart
View File

@ -76,9 +76,9 @@ Widget styledTitleContainer(
final scale = theme.extension<ScaleScheme>()!;
final textTheme = theme.textTheme;
return Container(
return DecoratedBox(
decoration: ShapeDecoration(
color: scale.primaryScale.subtleBorder,
color: scale.primaryScale.border,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
)),
@ -87,7 +87,7 @@ Widget styledTitleContainer(
title,
style: textTheme.titleMedium!
.copyWith(color: scale.primaryScale.subtleText),
).paddingLTRB(4, 4, 4, 0),
).paddingLTRB(8, 8, 8, 8),
DecoratedBox(
decoration: ShapeDecoration(
color: scale.primaryScale.subtleBackground,
@ -130,7 +130,7 @@ Future<T?> showStyledDialog<T>(
borderRadius: BorderRadius.circular(16))),
child: DecoratedBox(
decoration: ShapeDecoration(
color: scale.primaryScale.subtleBackground,
color: scale.primaryScale.appBackground,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12))),
child: child.paddingAll(0)))));

8
pubspec.lock
View File

@ -925,6 +925,14 @@ packages:
url: "https://pub.dev"
source: hosted
version: "1.5.1"
preload_page_view:
dependency: "direct main"
description:
name: preload_page_view
sha256: "488a10c158c5c2e9ba9d77e5dbc09b1e49e37a20df2301e5ba02992eac802b7a"
url: "https://pub.dev"
source: hosted
version: "0.2.0"
protobuf:
dependency: "direct main"
description:

1
pubspec.yaml
View File

@ -48,6 +48,7 @@ dependencies:
path: ^1.8.2
path_provider: ^2.0.11
pinput: ^3.0.1
preload_page_view: ^0.2.0
protobuf: ^3.0.0
qr_flutter: ^4.1.0
quickalert: ^1.0.1