Git-Mirrors/veilidchat
1
0
Fork 0
mirror of https://gitlab.com/veilid/veilidchat.git synced 2024-10-01 06:55:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

ui cleanup

Browse Source
This commit is contained in:
Christien Rioux 2024-04-07 23:16:06 -04:00
parent b7f7258c70
commit 1f99279cd2
23 changed files with 358 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/i18n/en.json
View File

@ -125,13 +125,13 @@
"password_does_not_match": "Password does not match"
},
"contact_list": {
"title": "Contact List",
"title": "Contacts",
"invite_people": "Invite people to VeilidChat",
"search": "Search contacts",
"invitation": "Invitation"
},
"chat_list": {
"search": "Search",
"search": "Search chats",
"start_a_conversation": "Start a conversation",
"chats": "Chats",
"groups": "Groups"

2
lib/chat/views/chat_component.dart
View File

@ -188,6 +188,8 @@ class ChatComponent extends StatelessWidget {
decoration: const BoxDecoration(),
child: Chat(
theme: chatTheme,
// emojiEnlargementBehavior:
// EmojiEnlargementBehavior.multi,
messages: chatMessages,
//onAttachmentPressed: _handleAttachmentPressed,
//onMessageTap: _handleMessageTap,

16
lib/chat_list/views/chat_single_contact_item_widget.dart
View File

@ -38,7 +38,9 @@ class ChatSingleContactItemWidget extends StatelessWidget {
margin: const EdgeInsets.fromLTRB(0, 4, 0, 0),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: scale.tertiaryScale.subtleBorder,
color: selected
? scale.primaryScale.activeElementBackground
: scale.primaryScale.hoverElementBackground,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
)),
@ -57,7 +59,7 @@ class ChatSingleContactItemWidget extends StatelessWidget {
remoteConversationRecordKey);
},
backgroundColor: scale.tertiaryScale.background,
foregroundColor: scale.tertiaryScale.text,
foregroundColor: scale.tertiaryScale.foregroundText,
icon: Icons.delete,
label: translate('button.delete'),
padding: const EdgeInsets.all(2)),
@ -88,9 +90,13 @@ class ChatSingleContactItemWidget extends StatelessWidget {
subtitle: (_contact.editedProfile.pronouns.isNotEmpty)
? Text(_contact.editedProfile.pronouns)
: null,
iconColor: scale.tertiaryScale.background,
textColor: scale.tertiaryScale.text,
selected: selected,
iconColor: selected
? scale.primaryScale.appText
: scale.primaryScale.subtleText,
textColor: selected
? scale.primaryScale.appText
: scale.primaryScale.subtleText,
selectedColor: scale.primaryScale.appText,
//Text(Timestamp.fromInt64(contactInvitationRecord.expiration) / ),
leading: const Icon(Icons.chat))));
}

4
lib/chat_list/views/chat_single_contact_list_widget.dart
View File

@ -68,7 +68,7 @@ class ChatSingleContactListWidget extends StatelessWidget {
inputDecoration: InputDecoration(
labelText: translate('chat_list.search'),
contentPadding: const EdgeInsets.all(2),
fillColor: scale.primaryScale.text,
fillColor: scale.primaryScale.elementBackground,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: scale.primaryScale.hoverBorder,
@ -77,7 +77,7 @@ class ChatSingleContactListWidget extends StatelessWidget {
),
),
).paddingAll(8))))
.paddingLTRB(8, 8, 8, 65));
.paddingLTRB(8, 0, 8, 8));
});
}
}

4
lib/contact_invitation/views/contact_invitation_item_widget.dart
View File

@ -66,7 +66,7 @@ class ContactInvitationItemWidget extends StatelessWidget {
.toVeilid());
},
backgroundColor: scale.tertiaryScale.background,
foregroundColor: scale.tertiaryScale.text,
foregroundColor: scale.tertiaryScale.appText,
icon: Icons.delete,
label: translate('button.delete'),
padding: const EdgeInsets.all(2)),
@ -119,7 +119,7 @@ class ContactInvitationItemWidget extends StatelessWidget {
softWrap: true,
),
iconColor: scale.tertiaryScale.background,
textColor: scale.tertiaryScale.text,
textColor: scale.tertiaryScale.appText,
//Text(Timestamp.fromInt64(contactInvitationRecord.expiration) / ),
leading: const Icon(Icons.person_add))));
}

2
lib/contact_invitation/views/paste_invitation_dialog.dart
View File

@ -107,7 +107,7 @@ class PasteInvitationDialogState extends State<PasteInvitationDialog> {
final monoStyle = TextStyle(
fontFamily: 'Source Code Pro',
fontSize: 11,
color: scale.primaryScale.text,
color: scale.primaryScale.appText,
);
return Column(mainAxisSize: MainAxisSize.min, children: [

18
lib/contacts/views/contact_item_widget.dart
View File

@ -29,11 +29,16 @@ class ContactItemWidget extends StatelessWidget {
final remoteConversationKey =
contact.remoteConversationRecordKey.toVeilid();
const selected =
false; // xxx: eventually when we have selectable contacts: activeContactCubit.state == remoteConversationRecordKey;
return Container(
margin: const EdgeInsets.fromLTRB(0, 4, 0, 0),
clipBehavior: Clip.antiAlias,
decoration: ShapeDecoration(
color: scale.tertiaryScale.subtleBorder,
color: selected
? scale.primaryScale.activeElementBackground
: scale.primaryScale.hoverElementBackground,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
)),
@ -60,7 +65,7 @@ class ContactItemWidget extends StatelessWidget {
contact: contact);
},
backgroundColor: scale.tertiaryScale.background,
foregroundColor: scale.tertiaryScale.text,
foregroundColor: scale.tertiaryScale.appText,
icon: Icons.delete,
label: translate('button.delete'),
padding: const EdgeInsets.all(2)),
@ -96,8 +101,13 @@ class ContactItemWidget extends StatelessWidget {
subtitle: (contact.editedProfile.pronouns.isNotEmpty)
? Text(contact.editedProfile.pronouns)
: null,
iconColor: scale.tertiaryScale.background,
textColor: scale.tertiaryScale.text,
iconColor: selected
? scale.primaryScale.appText
: scale.primaryScale.subtleText,
textColor: selected
? scale.primaryScale.appText
: scale.primaryScale.subtleText,
selectedColor: scale.primaryScale.appText,
leading: const Icon(Icons.person))));
}

2
lib/contacts/views/contact_list_widget.dart
View File

@ -58,7 +58,7 @@ class ContactListWidget extends StatelessWidget {
inputDecoration: InputDecoration(
labelText: translate('contact_list.search'),
contentPadding: const EdgeInsets.all(2),
fillColor: scale.primaryScale.text,
fillColor: scale.primaryScale.appText,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: scale.primaryScale.hoverBorder,

2
lib/layout/home/home_account_ready/home_account_ready_main.dart
View File

@ -37,7 +37,7 @@ class _HomeAccountReadyMainState extends State<HomeAccountReadyMain> {
Row(children: [
IconButton(
icon: const Icon(Icons.settings),
color: scale.secondaryScale.text,
color: scale.secondaryScale.appText,
constraints: const BoxConstraints.expand(height: 64, width: 64),
style: ButtonStyle(
backgroundColor:

10
lib/layout/home/home_account_ready/main_pager/main_pager.dart
View File

@ -85,10 +85,10 @@ class MainPagerState extends State<MainPager> with TickerProviderStateMixin {
final scale = theme.extension<ScaleScheme>()!;
return BottomBarItem(
title: Text(_bottomLabelList[index]),
icon: Icon(_selectedIconList[index], color: scale.primaryScale.text),
icon: Icon(_selectedIconList[index], color: scale.primaryScale.appText),
selectedIcon:
Icon(_selectedIconList[index], color: scale.primaryScale.text),
backgroundColor: scale.primaryScale.text,
Icon(_selectedIconList[index], color: scale.primaryScale.appText),
backgroundColor: scale.primaryScale.appText,
//unSelectedColor: theme.colorScheme.primaryContainer,
//selectedColor: theme.colorScheme.primary,
//badge: const Text('9+'),
@ -209,11 +209,11 @@ class MainPagerState extends State<MainPager> with TickerProviderStateMixin {
floatingActionButton: BottomSheetActionButton(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(14))),
foregroundColor: scale.secondaryScale.text,
foregroundColor: scale.secondaryScale.appText,
backgroundColor: scale.secondaryScale.hoverBorder,
builder: (context) => Icon(
_fabIconList[_currentPage],
color: scale.secondaryScale.text,
color: scale.secondaryScale.appText,
),
bottomSheetBuilder: (sheetContext) =>
_bottomSheetBuilder(sheetContext, context)),

5
lib/settings/settings_page.dart
View File

@ -3,6 +3,7 @@ import 'package:awesome_extensions/awesome_extensions.dart';
import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:flutter_translate/flutter_translate.dart';
import 'package:go_router/go_router.dart';
import '../layout/default_app_bar.dart';
import '../theme/theme.dart';
@ -37,18 +38,16 @@ class SettingsPageState extends State<SettingsPage> {
AsyncBlocBuilder<PreferencesCubit, Preferences>(
builder: (context, state) => ThemeSwitchingArea(
child: Scaffold(
// resizeToAvoidBottomInset: false,
appBar: DefaultAppBar(
title: Text(translate('settings_page.titlebar')),
leading: IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: () => context.pop<void>(),
onPressed: () => GoRouterHelper(context).pop(),
),
actions: <Widget>[
const SignalStrengthMeterWidget()
.paddingLTRB(16, 0, 16, 0),
]),
body: FormBuilder(
key: _formKey,
child: ListView(

383
lib/theme/models/radix_generator.dart
View File

@ -270,7 +270,7 @@ RadixColor _radixColorSteps(
}
extension ToScaleColor on RadixColor {
ScaleColor toScale() => ScaleColor(
ScaleColor toScale(RadixScaleExtra scaleExtra) => ScaleColor(
appBackground: step1,
subtleBackground: step2,
elementBackground: step3,
@ -282,33 +282,53 @@ extension ToScaleColor on RadixColor {
background: step9,
hoverBackground: step10,
subtleText: step11,
text: step12,
appText: step12,
foregroundText: scaleExtra.foregroundText,
);
}
class RadixScheme {
RadixScheme(
{required this.primaryScale,
required this.primaryAlphaScale,
required this.secondaryScale,
required this.tertiaryScale,
required this.grayScale,
required this.errorScale});
class RadixScaleExtra {
RadixScaleExtra({required this.foregroundText});
RadixColor primaryScale;
RadixColor primaryAlphaScale;
RadixColor secondaryScale;
RadixColor tertiaryScale;
RadixColor grayScale;
RadixColor errorScale;
final Color foregroundText;
}
class RadixScheme {
const RadixScheme({
required this.primaryScale,
required this.primaryExtra,
required this.primaryAlphaScale,
required this.primaryAlphaExtra,
required this.secondaryScale,
required this.secondaryExtra,
required this.tertiaryScale,
required this.tertiaryExtra,
required this.grayScale,
required this.grayExtra,
required this.errorScale,
required this.errorExtra,
});
final RadixColor primaryScale;
final RadixScaleExtra primaryExtra;
final RadixColor primaryAlphaScale;
final RadixScaleExtra primaryAlphaExtra;
final RadixColor secondaryScale;
final RadixScaleExtra secondaryExtra;
final RadixColor tertiaryScale;
final RadixScaleExtra tertiaryExtra;
final RadixColor grayScale;
final RadixScaleExtra grayExtra;
final RadixColor errorScale;
final RadixScaleExtra errorExtra;
ScaleScheme toScale() => ScaleScheme(
primaryScale: primaryScale.toScale(),
primaryAlphaScale: primaryAlphaScale.toScale(),
secondaryScale: secondaryScale.toScale(),
tertiaryScale: tertiaryScale.toScale(),
grayScale: grayScale.toScale(),
errorScale: errorScale.toScale(),
primaryScale: primaryScale.toScale(primaryExtra),
primaryAlphaScale: primaryAlphaScale.toScale(primaryAlphaExtra),
secondaryScale: secondaryScale.toScale(secondaryExtra),
tertiaryScale: tertiaryScale.toScale(tertiaryExtra),
grayScale: grayScale.toScale(grayExtra),
errorScale: errorScale.toScale(errorExtra),
);
}
@ -318,231 +338,316 @@ RadixScheme _radixScheme(Brightness brightness, RadixThemeColor themeColor) {
// tomato + red + violet
case RadixThemeColor.scarlet:
radixScheme = RadixScheme(
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.tomato),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.tomato),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.red),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.violet),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.tomato),
errorScale:
_radixColorSteps(brightness, false, _RadixBaseColor.yellow));
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.tomato),
primaryExtra: RadixScaleExtra(foregroundText: Colors.white),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.tomato),
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.white),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.red),
secondaryExtra: RadixScaleExtra(foregroundText: Colors.white),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.violet),
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.white),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.tomato),
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.yellow),
errorExtra: RadixScaleExtra(foregroundText: Colors.black),
);
// crimson + purple + pink
case RadixThemeColor.babydoll:
radixScheme = RadixScheme(
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.crimson),
primaryExtra: RadixScaleExtra(foregroundText: Colors.white),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.crimson),
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.white),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.purple),
secondaryExtra: RadixScaleExtra(foregroundText: Colors.white),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.pink),
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.white),
grayScale:
_radixGraySteps(brightness, false, _RadixBaseColor.crimson),
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
errorScale:
_radixColorSteps(brightness, false, _RadixBaseColor.orange));
_radixColorSteps(brightness, false, _RadixBaseColor.orange),
errorExtra: RadixScaleExtra(foregroundText: Colors.white));
// pink + cyan + plum
case RadixThemeColor.vapor:
radixScheme = RadixScheme(
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.pink),
primaryExtra: RadixScaleExtra(foregroundText: Colors.white),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.pink),
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.white),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.cyan),
secondaryExtra: RadixScaleExtra(foregroundText: Colors.white),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.plum),
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.white),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.pink),
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red));
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red),
errorExtra: RadixScaleExtra(foregroundText: Colors.white));
// yellow + amber + orange
case RadixThemeColor.gold:
radixScheme = RadixScheme(
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.yellow),
primaryExtra: RadixScaleExtra(foregroundText: Colors.black),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.yellow),
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.black),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.amber),
secondaryExtra: RadixScaleExtra(foregroundText: Colors.black),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.orange),
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.black),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.yellow),
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red));
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red),
errorExtra: RadixScaleExtra(foregroundText: Colors.white));
// grass + orange + brown
case RadixThemeColor.garden:
radixScheme = RadixScheme(
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.grass),
primaryExtra: RadixScaleExtra(foregroundText: Colors.white),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.grass),
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.white),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.orange),
secondaryExtra: RadixScaleExtra(foregroundText: Colors.white),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.brown),
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.white),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.grass),
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
errorScale:
_radixColorSteps(brightness, false, _RadixBaseColor.tomato));
_radixColorSteps(brightness, false, _RadixBaseColor.tomato),
errorExtra: RadixScaleExtra(foregroundText: Colors.white));
// green + brown + amber
case RadixThemeColor.forest:
radixScheme = RadixScheme(
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.green),
primaryExtra: RadixScaleExtra(foregroundText: Colors.white),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.green),
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.white),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.brown),
secondaryExtra: RadixScaleExtra(foregroundText: Colors.white),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.amber),
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.black),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.green),
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
errorScale:
_radixColorSteps(brightness, false, _RadixBaseColor.tomato));
_radixColorSteps(brightness, false, _RadixBaseColor.tomato),
errorExtra: RadixScaleExtra(foregroundText: Colors.white));
// sky + teal + violet
case RadixThemeColor.arctic:
radixScheme = RadixScheme(
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.sky),
primaryExtra: RadixScaleExtra(foregroundText: Colors.black),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.sky),
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.black),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.teal),
secondaryExtra: RadixScaleExtra(foregroundText: Colors.white),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.violet),
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.white),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.sky),
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
errorScale:
_radixColorSteps(brightness, false, _RadixBaseColor.crimson));
_radixColorSteps(brightness, false, _RadixBaseColor.crimson),
errorExtra: RadixScaleExtra(foregroundText: Colors.white));
// blue + indigo + mint
case RadixThemeColor.lapis:
radixScheme = RadixScheme(
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.blue),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.blue),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.indigo),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.mint),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.blue),
errorScale:
_radixColorSteps(brightness, false, _RadixBaseColor.crimson));
primaryScale: _radixColorSteps(brightness, false, _RadixBaseColor.blue),
primaryExtra: RadixScaleExtra(foregroundText: Colors.white),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.blue),
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.white),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.indigo),
secondaryExtra: RadixScaleExtra(foregroundText: Colors.white),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.mint),
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.black),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.blue),
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
errorScale:
_radixColorSteps(brightness, false, _RadixBaseColor.crimson),
errorExtra: RadixScaleExtra(foregroundText: Colors.white),
);
// violet + purple + indigo
case RadixThemeColor.eggplant:
radixScheme = RadixScheme(
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.violet),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.violet),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.purple),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.indigo),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.violet),
errorScale:
_radixColorSteps(brightness, false, _RadixBaseColor.crimson));
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.violet),
primaryExtra: RadixScaleExtra(foregroundText: Colors.white),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.violet),
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.white),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.purple),
secondaryExtra: RadixScaleExtra(foregroundText: Colors.white),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.indigo),
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.white),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.violet),
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
errorScale:
_radixColorSteps(brightness, false, _RadixBaseColor.crimson),
errorExtra: RadixScaleExtra(foregroundText: Colors.white),
);
// lime + yellow + orange
case RadixThemeColor.lime:
radixScheme = RadixScheme(
primaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.lime),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.lime),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.yellow),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.orange),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.lime),
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red));
primaryScale: _radixColorSteps(brightness, false, _RadixBaseColor.lime),
primaryExtra: RadixScaleExtra(foregroundText: Colors.black),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.lime),
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.black),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.yellow),
secondaryExtra: RadixScaleExtra(foregroundText: Colors.black),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.orange),
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.white),
grayScale: _radixGraySteps(brightness, false, _RadixBaseColor.lime),
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red),
errorExtra: RadixScaleExtra(foregroundText: Colors.white),
);
// mauve + slate + sage
case RadixThemeColor.grim:
radixScheme = RadixScheme(
primaryScale:
_radixGraySteps(brightness, false, _RadixBaseColor.tomato),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.tomato),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.indigo),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.teal),
grayScale: brightness == Brightness.dark
? RadixColors.dark.gray
: RadixColors.gray,
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red));
primaryScale:
_radixGraySteps(brightness, false, _RadixBaseColor.tomato),
primaryExtra: RadixScaleExtra(foregroundText: Colors.white),
primaryAlphaScale:
_radixColorSteps(brightness, true, _RadixBaseColor.tomato),
primaryAlphaExtra: RadixScaleExtra(foregroundText: Colors.white),
secondaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.indigo),
secondaryExtra: RadixScaleExtra(foregroundText: Colors.white),
tertiaryScale:
_radixColorSteps(brightness, false, _RadixBaseColor.teal),
tertiaryExtra: RadixScaleExtra(foregroundText: Colors.white),
grayScale: brightness == Brightness.dark
? RadixColors.dark.gray
: RadixColors.gray,
grayExtra: RadixScaleExtra(foregroundText: Colors.white),
errorScale: _radixColorSteps(brightness, false, _RadixBaseColor.red),
errorExtra: RadixScaleExtra(foregroundText: Colors.white),
);
}
return radixScheme;
}
ColorScheme _radixColorScheme(Brightness brightness, RadixScheme radix) =>
ColorScheme _scaleToColorScheme(Brightness brightness, ScaleScheme scale) =>
ColorScheme(
brightness: brightness,
primary: radix.primaryScale.step9,
onPrimary: radix.primaryScale.step12,
primaryContainer: radix.primaryScale.step4,
onPrimaryContainer: radix.primaryScale.step11,
secondary: radix.secondaryScale.step9,
onSecondary: radix.secondaryScale.step12,
secondaryContainer: radix.secondaryScale.step3,
onSecondaryContainer: radix.secondaryScale.step11,
tertiary: radix.tertiaryScale.step9,
onTertiary: radix.tertiaryScale.step12,
tertiaryContainer: radix.tertiaryScale.step3,
onTertiaryContainer: radix.tertiaryScale.step11,
error: radix.errorScale.step9,
onError: radix.errorScale.step12,
errorContainer: radix.errorScale.step3,
onErrorContainer: radix.errorScale.step11,
background: radix.grayScale.step1,
onBackground: radix.grayScale.step11,
surface: radix.primaryScale.step1,
onSurface: radix.primaryScale.step12,
surfaceVariant: radix.secondaryScale.step2,
onSurfaceVariant: radix.secondaryScale.step11,
outline: radix.primaryScale.step7,
outlineVariant: radix.primaryScale.step6,
primary: scale.primaryScale.background, // reviewed
onPrimary: scale.primaryScale.foregroundText, // reviewed
primaryContainer:
Colors.red, // scale.primaryScale.hoverElementBackground,
onPrimaryContainer: Colors.green, //scale.primaryScale.subtleText,
secondary: scale.secondaryScale.background,
onSecondary: scale.secondaryScale.appText,
secondaryContainer: scale.secondaryScale.hoverElementBackground,
onSecondaryContainer: scale.secondaryScale.subtleText,
tertiary: scale.tertiaryScale.background,
onTertiary: scale.tertiaryScale.appText,
tertiaryContainer: scale.tertiaryScale.hoverElementBackground,
onTertiaryContainer: scale.tertiaryScale.subtleText,
error: scale.errorScale.background,
onError: scale.errorScale.appText,
errorContainer: scale.errorScale.hoverElementBackground,
onErrorContainer: scale.errorScale.subtleText,
background: scale.grayScale.appBackground, // reviewed
onBackground: scale.grayScale.appText, // reviewed
surface: scale.primaryScale.activeElementBackground, // reviewed
onSurface: scale.primaryScale.subtleText, // reviewed
surfaceVariant: scale.primaryScale.elementBackground,
onSurfaceVariant: scale.primaryScale.subtleText, // ?? reviewed a little
outline: scale.primaryScale.border,
outlineVariant: scale.primaryScale.subtleBorder,
shadow: RadixColors.dark.gray.step1,
scrim: radix.primaryScale.step9,
inverseSurface: radix.primaryScale.step11,
onInverseSurface: radix.primaryScale.step2,
inversePrimary: radix.primaryScale.step10,
surfaceTint: radix.primaryAlphaScale.step4,
scrim: scale.primaryScale.background,
inverseSurface: scale.primaryScale.subtleText,
onInverseSurface: scale.primaryScale.subtleBackground,
inversePrimary: scale.primaryScale.hoverBackground,
surfaceTint: scale.primaryAlphaScale.hoverElementBackground,
);
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: const Icon(Icons.attach_file),
receivedMessageBodyTextStyle: const TextStyle(
color: neutral0,
fontSize: 16,
fontWeight: FontWeight.w500,
height: 1.5,
),
);
primaryColor: scale.primaryScale.background,
secondaryColor: scale.secondaryScale.background,
backgroundColor: scale.grayScale.appBackground,
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.appText,
attachmentButtonIcon: const Icon(Icons.attach_file),
sentMessageBodyTextStyle: TextStyle(
color: scale.primaryScale.foregroundText,
decorationColor: Colors.red,
fontSize: 16,
fontWeight: FontWeight.w500,
height: 1.5,
),
sentEmojiMessageTextStyle: const TextStyle(
color: Colors.white,
fontSize: 64,
),
receivedMessageBodyTextStyle: TextStyle(
color: scale.primaryScale.foregroundText,
fontSize: 16,
fontWeight: FontWeight.w500,
height: 1.5,
),
receivedEmojiMessageTextStyle: const TextStyle(
color: Colors.white,
fontSize: 64,
));
ThemeData radixGenerator(Brightness brightness, RadixThemeColor themeColor) {
final textTheme = (brightness == Brightness.light)
? Typography.blackCupertino
: Typography.whiteCupertino;
final radix = _radixScheme(brightness, themeColor);
final colorScheme = _radixColorScheme(brightness, radix);
final scaleScheme = radix.toScale();
final colorScheme = _scaleToColorScheme(brightness, scaleScheme);
final themeData = ThemeData.from(
colorScheme: colorScheme, textTheme: textTheme, useMaterial3: true);

41
lib/theme/models/scale_color.dart
View File

@ -13,7 +13,8 @@ class ScaleColor {
required this.background,
required this.hoverBackground,
required this.subtleText,
required this.text,
required this.appText,
required this.foregroundText,
});
Color appBackground;
@ -27,21 +28,24 @@ class ScaleColor {
Color background;
Color hoverBackground;
Color subtleText;
Color text;
Color appText;
Color foregroundText;
ScaleColor copyWith(
{Color? appBackground,
Color? subtleBackground,
Color? elementBackground,
Color? hoverElementBackground,
Color? activeElementBackground,
Color? subtleBorder,
Color? border,
Color? hoverBorder,
Color? background,
Color? hoverBackground,
Color? subtleText,
Color? text}) =>
ScaleColor copyWith({
Color? appBackground,
Color? subtleBackground,
Color? elementBackground,
Color? hoverElementBackground,
Color? activeElementBackground,
Color? subtleBorder,
Color? border,
Color? hoverBorder,
Color? background,
Color? hoverBackground,
Color? subtleText,
Color? appText,
Color? foregroundText,
}) =>
ScaleColor(
appBackground: appBackground ?? this.appBackground,
subtleBackground: subtleBackground ?? this.subtleBackground,
@ -56,7 +60,8 @@ class ScaleColor {
background: background ?? this.background,
hoverBackground: hoverBackground ?? this.hoverBackground,
subtleText: subtleText ?? this.subtleText,
text: text ?? this.text,
appText: appText ?? this.appText,
foregroundText: foregroundText ?? this.foregroundText,
);
// ignore: prefer_constructors_over_static_methods
@ -86,6 +91,8 @@ class ScaleColor {
const Color(0x00000000),
subtleText: Color.lerp(a.subtleText, b.subtleText, t) ??
const Color(0x00000000),
text: Color.lerp(a.text, b.text, t) ?? const Color(0x00000000),
appText: Color.lerp(a.appText, b.appText, t) ?? const Color(0x00000000),
foregroundText: Color.lerp(a.foregroundText, b.foregroundText, t) ??
const Color(0x00000000),
);
}

2
lib/tools/enter_password.dart
View File

@ -94,7 +94,7 @@ class _EnterPasswordDialogState extends State<EnterPasswordDialog> {
_passwordVisible
? Icons.visibility
: Icons.visibility_off,
color: scale.primaryScale.text,
color: scale.primaryScale.appText,
),
onPressed: () {
setState(() {

2
lib/tools/enter_pin.dart
View File

@ -58,7 +58,7 @@ class _EnterPinDialogState extends State<EnterPinDialog> {
final defaultPinTheme = PinTheme(
width: 56,
height: 60,
textStyle: TextStyle(fontSize: 22, color: scale.primaryScale.text),
textStyle: TextStyle(fontSize: 22, color: scale.primaryScale.appText),
decoration: BoxDecoration(
color: fillColor,
borderRadius: BorderRadius.circular(8),

3
lib/tools/state_logger.dart
View File

@ -4,7 +4,8 @@ import 'loggy.dart';
const Map<String, LogLevel> _blocChangeLogLevels = {
'ConnectionStateCubit': LogLevel.off,
'ActiveConversationMessagesBlocMapCubit': LogLevel.off
'ActiveConversationMessagesBlocMapCubit': LogLevel.off,
'DHTShortArrayCubit<Message>': LogLevel.off,
};
const Map<String, LogLevel> _blocCreateCloseLogLevels = {};
const Map<String, LogLevel> _blocErrorLogLevels = {};

16
lib/tools/widget_helpers.dart
View File

@ -132,17 +132,20 @@ void showInfoToast(BuildContext context, String message) {
).show(context);
}
Widget styledTitleContainer(
{required BuildContext context,
required String title,
required Widget child}) {
Widget styledTitleContainer({
required BuildContext context,
required String title,
required Widget child,
Color? borderColor,
Color? backgroundColor,
}) {
final theme = Theme.of(context);
final scale = theme.extension<ScaleScheme>()!;
final textTheme = theme.textTheme;
return DecoratedBox(
decoration: ShapeDecoration(
color: scale.primaryScale.border,
color: borderColor ?? scale.primaryScale.border,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
)),
@ -154,7 +157,8 @@ Widget styledTitleContainer(
).paddingLTRB(8, 8, 8, 8),
DecoratedBox(
decoration: ShapeDecoration(
color: scale.primaryScale.subtleBackground,
color:
backgroundColor ?? scale.primaryScale.subtleBackground,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
)),

22
lib/veilid_processor/views/developer.dart
View File

@ -13,6 +13,7 @@ import 'package:quickalert/quickalert.dart';
import 'package:veilid_support/veilid_support.dart';
import 'package:xterm/xterm.dart';
import '../../layout/layout.dart';
import '../../theme/theme.dart';
import '../../tools/tools.dart';
@ -127,15 +128,16 @@ class _DeveloperPageState extends State<DeveloperPage> {
// });
return Scaffold(
appBar: AppBar(
appBar: DefaultAppBar(
title: Text(translate('developer.title')),
leading: IconButton(
icon: Icon(Icons.arrow_back, color: scale.primaryScale.text),
icon: Icon(Icons.arrow_back, color: scale.primaryScale.appText),
onPressed: () => GoRouterHelper(context).pop(),
),
actions: [
IconButton(
icon: const Icon(Icons.copy),
color: scale.primaryScale.text,
color: scale.primaryScale.appText,
disabledColor: scale.grayScale.subtleText,
onPressed: _terminalController.selection == null
? null
@ -144,14 +146,14 @@ class _DeveloperPageState extends State<DeveloperPage> {
}),
IconButton(
icon: const Icon(Icons.clear_all),
color: scale.primaryScale.text,
color: scale.primaryScale.appText,
disabledColor: scale.grayScale.subtleText,
onPressed: () async {
await QuickAlert.show(
context: context,
type: QuickAlertType.confirm,
title: translate('developer.are_you_sure_clear'),
textColor: scale.primaryScale.text,
textColor: scale.primaryScale.appText,
confirmBtnColor: scale.primaryScale.elementBackground,
backgroundColor: scale.primaryScale.subtleBackground,
headerBackgroundColor: scale.primaryScale.background,
@ -181,7 +183,7 @@ class _DeveloperPageState extends State<DeveloperPage> {
height: 40,
render: ResultRender.icon,
textStyle: textTheme.labelMedium!
.copyWith(color: scale.primaryScale.text),
.copyWith(color: scale.primaryScale.appText),
padding: const EdgeInsets.fromLTRB(8, 4, 8, 4),
openBoxDecoration: BoxDecoration(
color: scale.primaryScale.activeElementBackground),
@ -201,9 +203,9 @@ class _DeveloperPageState extends State<DeveloperPage> {
align: DropdownTriangleAlign.right),
dropdownItemOptions: DropdownItemOptions(
selectedTextStyle: textTheme.labelMedium!
.copyWith(color: scale.primaryScale.text),
.copyWith(color: scale.primaryScale.appText),
textStyle: textTheme.labelMedium!
.copyWith(color: scale.primaryScale.text),
.copyWith(color: scale.primaryScale.appText),
selectedBoxDecoration: BoxDecoration(
color: scale.primaryScale.activeElementBackground),
mainAxisAlignment: MainAxisAlignment.spaceBetween,
@ -212,10 +214,6 @@ class _DeveloperPageState extends State<DeveloperPage> {
dropdownList: _logLevelDropdownItems,
)
],
title: Text(translate('developer.title'),
style:
textTheme.bodyLarge!.copyWith(fontWeight: FontWeight.bold)),
centerTitle: true,
),
body: SafeArea(
child: Column(children: [

14
lib/veilid_processor/views/signal_strength_meter.dart
View File

@ -33,27 +33,27 @@ class SignalStrengthMeterWidget extends StatelessWidget {
switch (connectionState.attachment.state) {
case AttachmentState.detached:
iconWidget = Icon(Icons.signal_cellular_nodata,
size: iconSize, color: scale.grayScale.text);
size: iconSize, color: scale.grayScale.appText);
return;
case AttachmentState.detaching:
iconWidget = Icon(Icons.signal_cellular_off,
size: iconSize, color: scale.grayScale.text);
size: iconSize, color: scale.grayScale.appText);
return;
case AttachmentState.attaching:
value = 0;
color = scale.primaryScale.text;
color = scale.primaryScale.appText;
case AttachmentState.attachedWeak:
value = 1;
color = scale.primaryScale.text;
color = scale.primaryScale.appText;
case AttachmentState.attachedStrong:
value = 2;
color = scale.primaryScale.text;
color = scale.primaryScale.appText;
case AttachmentState.attachedGood:
value = 3;
color = scale.primaryScale.text;
color = scale.primaryScale.appText;
case AttachmentState.fullyAttached:
value = 4;
color = scale.primaryScale.text;
color = scale.primaryScale.appText;
case AttachmentState.overAttached:
value = 4;
color = scale.secondaryScale.subtleText;

6
macos/Runner.xcodeproj/project.pbxproj
View File

@ -424,7 +424,7 @@
ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = NO;
CLANG_ENABLE_MODULES = YES;
CODE_SIGN_ENTITLEMENTS = Runner/DebugProfile.entitlements;
"CODE_SIGN_IDENTITY[sdk=macosx*]" = "-";
"CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development";
CODE_SIGN_STYLE = Automatic;
COMBINE_HIDPI_IMAGES = YES;
DEVELOPMENT_TEAM = XP5LBLT7M7;
@ -562,7 +562,7 @@
ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = NO;
CLANG_ENABLE_MODULES = YES;
CODE_SIGN_ENTITLEMENTS = Runner/DebugProfile.entitlements;
"CODE_SIGN_IDENTITY[sdk=macosx*]" = "-";
"CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development";
CODE_SIGN_STYLE = Automatic;
COMBINE_HIDPI_IMAGES = YES;
DEVELOPMENT_TEAM = XP5LBLT7M7;
@ -594,7 +594,7 @@
ASSETCATALOG_COMPILER_INCLUDE_ALL_APPICON_ASSETS = NO;
CLANG_ENABLE_MODULES = YES;
CODE_SIGN_ENTITLEMENTS = Runner/Release.entitlements;
"CODE_SIGN_IDENTITY[sdk=macosx*]" = "-";
"CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development";
CODE_SIGN_STYLE = Automatic;
COMBINE_HIDPI_IMAGES = YES;
DEVELOPMENT_TEAM = XP5LBLT7M7;

8
macos/Runner/DebugProfile.entitlements
View File

@ -6,11 +6,15 @@
<true/>
<key>com.apple.security.cs.allow-jit</key>
<true/>
<key>com.apple.security.network.server</key>
<key>com.apple.security.files.user-selected.read-write</key>
<true/>
<key>com.apple.security.network.client</key>
<true/>
<key>com.apple.security.files.user-selected.read-write</key>
<key>com.apple.security.network.server</key>
<true/>
<key>keychain-access-groups</key>
<array>
<string>$(AppIdentifierPrefix)com.veilid.veilidchat</string>
</array>
</dict>
</plist>

8
macos/Runner/Release.entitlements
View File

@ -4,11 +4,15 @@
<dict>
<key>com.apple.security.app-sandbox</key>
<true/>
<key>com.apple.security.network.server</key>
<key>com.apple.security.files.user-selected.read-write</key>
<true/>
<key>com.apple.security.network.client</key>
<true/>
<key>com.apple.security.files.user-selected.read-write</key>
<key>com.apple.security.network.server</key>
<true/>
<key>keychain-access-groups</key>
<array>
<string>$(AppIdentifierPrefix)com.veilid.veilidchat</string>
</array>
</dict>
</plist>

2
packages/veilid_support/pubspec.lock
View File

@ -723,7 +723,7 @@ packages:
path: "../../../veilid/veilid-flutter"
relative: true
source: path
version: "0.3.0"
version: "0.3.1"
vm_service:
dependency: transitive
description: