mirror of
https://gitlab.com/veilid/veilidchat.git
synced 2025-05-02 06:16:16 -04:00
ui cleanup
This commit is contained in:
Christien Rioux
parent
d460a0388c
commit
77c68aa45f
57 changed files with 1158 additions and 914 deletions
|
|
@ -9,12 +9,13 @@ import 'package:go_router/go_router.dart';
|
|||
import 'package:veilid_support/veilid_support.dart';
|
||||
|
||||
import '../../../account_manager/account_manager.dart';
|
||||
import '../../../proto/proto.dart' as proto;
|
||||
import '../../../theme/theme.dart';
|
||||
import '../../../tools/tools.dart';
|
||||
import '../../../veilid_processor/veilid_processor.dart';
|
||||
import 'menu_item_widget.dart';
|
||||
|
||||
const _scaleKind = ScaleKind.secondary;
|
||||
|
||||
class DrawerMenu extends StatefulWidget {
|
||||
const DrawerMenu({super.key});
|
||||
|
||||
|
|
@ -40,7 +41,7 @@ class _DrawerMenuState extends State<DrawerMenu> {
|
|||
}
|
||||
|
||||
void _doEditClick(TypedKey superIdentityRecordKey,
|
||||
proto.Account existingAccount, OwnedDHTRecordPointer accountRecord) {
|
||||
AccountSpec existingAccount, OwnedDHTRecordPointer accountRecord) {
|
||||
singleFuture(this, () async {
|
||||
await GoRouterHelper(context).push('/edit_account',
|
||||
extra: [superIdentityRecordKey, existingAccount, accountRecord]);
|
||||
|
|
@ -58,45 +59,6 @@ class _DrawerMenuState extends State<DrawerMenu> {
|
|||
borderRadius: BorderRadius.circular(borderRadius))),
|
||||
child: child);
|
||||
|
||||
Widget _makeAvatarWidget({
|
||||
required String name,
|
||||
required double size,
|
||||
required Color borderColor,
|
||||
required Color foregroundColor,
|
||||
required Color backgroundColor,
|
||||
required ScaleConfig scaleConfig,
|
||||
required TextStyle textStyle,
|
||||
ImageProvider<Object>? imageProvider,
|
||||
}) {
|
||||
final abbrev = name.split(' ').map((s) => s.isEmpty ? '' : s[0]).join();
|
||||
late final String shortname;
|
||||
if (abbrev.length >= 3) {
|
||||
shortname = abbrev[0] + abbrev[1] + abbrev[abbrev.length - 1];
|
||||
} else {
|
||||
shortname = abbrev;
|
||||
}
|
||||
|
||||
return Container(
|
||||
height: size,
|
||||
width: size,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
border: scaleConfig.preferBorders
|
||||
? Border.all(
|
||||
color: borderColor,
|
||||
width: 2 * (size ~/ 32 + 1),
|
||||
strokeAlign: BorderSide.strokeAlignOutside)
|
||||
: null,
|
||||
color: Colors.blue,
|
||||
),
|
||||
child: AvatarImage(
|
||||
//size: 32,
|
||||
backgroundImage: imageProvider,
|
||||
backgroundColor: backgroundColor,
|
||||
foregroundColor: foregroundColor,
|
||||
child: Text(shortname, style: textStyle)));
|
||||
}
|
||||
|
||||
Widget _makeAccountWidget(
|
||||
{required String name,
|
||||
required bool selected,
|
||||
|
|
@ -173,6 +135,7 @@ class _DrawerMenuState extends State<DrawerMenu> {
|
|||
footerButtonIconColor: border,
|
||||
footerButtonIconHoverColor: hoverBackground,
|
||||
footerButtonIconFocusColor: activeBackground,
|
||||
minHeight: 48,
|
||||
));
|
||||
}
|
||||
|
||||
|
|
@ -184,6 +147,7 @@ class _DrawerMenuState extends State<DrawerMenu> {
|
|||
final theme = Theme.of(context);
|
||||
final scaleScheme = theme.extension<ScaleScheme>()!;
|
||||
final scaleConfig = theme.extension<ScaleConfig>()!;
|
||||
final scale = scaleScheme.scale(_scaleKind);
|
||||
|
||||
final loggedInAccounts = <Widget>[];
|
||||
final loggedOutAccounts = <Widget>[];
|
||||
|
|
@ -197,9 +161,6 @@ class _DrawerMenuState extends State<DrawerMenu> {
|
|||
final avAccountRecordState = perAccountState?.avAccountRecordState;
|
||||
if (perAccountState != null && avAccountRecordState != null) {
|
||||
// Account is logged in
|
||||
final scale = scaleConfig.useVisualIndicators
|
||||
? theme.extension<ScaleScheme>()!.primaryScale
|
||||
: theme.extension<ScaleScheme>()!.tertiaryScale;
|
||||
final loggedInAccount = avAccountRecordState.when(
|
||||
data: (value) => _makeAccountWidget(
|
||||
name: value.profile.name,
|
||||
|
|
@ -213,7 +174,7 @@ class _DrawerMenuState extends State<DrawerMenu> {
|
|||
footerCallback: () {
|
||||
_doEditClick(
|
||||
superIdentityRecordKey,
|
||||
value,
|
||||
AccountSpec.fromProto(value),
|
||||
perAccountState.accountInfo.userLogin!.accountRecordInfo
|
||||
.accountRecord);
|
||||
}),
|
||||
|
|
@ -311,13 +272,14 @@ class _DrawerMenuState extends State<DrawerMenu> {
|
|||
|
||||
Widget _getBottomButtons() {
|
||||
final theme = Theme.of(context);
|
||||
final scale = theme.extension<ScaleScheme>()!;
|
||||
final scaleScheme = theme.extension<ScaleScheme>()!;
|
||||
final scaleConfig = theme.extension<ScaleConfig>()!;
|
||||
final scale = scaleScheme.scale(_scaleKind);
|
||||
|
||||
final settingsButton = _getButton(
|
||||
icon: const Icon(Icons.settings),
|
||||
tooltip: translate('menu.settings_tooltip'),
|
||||
scale: scale.tertiaryScale,
|
||||
scale: scale,
|
||||
scaleConfig: scaleConfig,
|
||||
onPressed: () async {
|
||||
await GoRouterHelper(context).push('/settings');
|
||||
|
|
@ -326,7 +288,7 @@ class _DrawerMenuState extends State<DrawerMenu> {
|
|||
final addButton = _getButton(
|
||||
icon: const Icon(Icons.add),
|
||||
tooltip: translate('menu.add_account_tooltip'),
|
||||
scale: scale.tertiaryScale,
|
||||
scale: scale,
|
||||
scaleConfig: scaleConfig,
|
||||
onPressed: () async {
|
||||
await GoRouterHelper(context).push('/new_account');
|
||||
|
|
@ -340,8 +302,9 @@ class _DrawerMenuState extends State<DrawerMenu> {
|
|||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final scale = theme.extension<ScaleScheme>()!;
|
||||
final scaleScheme = theme.extension<ScaleScheme>()!;
|
||||
final scaleConfig = theme.extension<ScaleConfig>()!;
|
||||
final scale = scaleScheme.scale(_scaleKind);
|
||||
//final textTheme = theme.textTheme;
|
||||
final localAccounts = context.watch<LocalAccountsCubit>().state;
|
||||
final perAccountCollectionBlocMapState =
|
||||
|
|
@ -351,8 +314,8 @@ class _DrawerMenuState extends State<DrawerMenu> {
|
|||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [
|
||||
scale.tertiaryScale.border,
|
||||
scale.tertiaryScale.subtleBorder,
|
||||
scale.border,
|
||||
scale.subtleBorder,
|
||||
]);
|
||||
|
||||
return DecoratedBox(
|
||||
|
|
@ -360,34 +323,35 @@ class _DrawerMenuState extends State<DrawerMenu> {
|
|||
shadows: [
|
||||
if (scaleConfig.useVisualIndicators && !scaleConfig.preferBorders)
|
||||
BoxShadow(
|
||||
color: scale.tertiaryScale.primary.darken(80),
|
||||
color: scale.primary.darken(60),
|
||||
spreadRadius: 2,
|
||||
)
|
||||
else if (scaleConfig.useVisualIndicators &&
|
||||
scaleConfig.preferBorders)
|
||||
BoxShadow(
|
||||
color: scale.tertiaryScale.border,
|
||||
color: scale.border,
|
||||
spreadRadius: 2,
|
||||
)
|
||||
else
|
||||
BoxShadow(
|
||||
color: scale.tertiaryScale.primary.darken(40),
|
||||
blurRadius: 6,
|
||||
color: scale.appBackground.darken(60).withAlpha(0x3F),
|
||||
blurRadius: 16,
|
||||
spreadRadius: 2,
|
||||
offset: const Offset(
|
||||
0,
|
||||
4,
|
||||
2,
|
||||
),
|
||||
),
|
||||
],
|
||||
gradient: scaleConfig.useVisualIndicators ? null : gradient,
|
||||
color: scaleConfig.useVisualIndicators
|
||||
? (scaleConfig.preferBorders
|
||||
? scale.tertiaryScale.appBackground
|
||||
: scale.tertiaryScale.subtleBorder)
|
||||
? scale.appBackground
|
||||
: scale.subtleBorder)
|
||||
: null,
|
||||
shape: RoundedRectangleBorder(
|
||||
side: scaleConfig.preferBorders
|
||||
? BorderSide(color: scale.tertiaryScale.primary, width: 2)
|
||||
? BorderSide(color: scale.primary, width: 2)
|
||||
: BorderSide.none,
|
||||
borderRadius: BorderRadius.only(
|
||||
topRight: Radius.circular(16 * scaleConfig.borderRadiusScale),
|
||||
|
|
@ -399,31 +363,31 @@ class _DrawerMenuState extends State<DrawerMenu> {
|
|||
child: ColorFiltered(
|
||||
colorFilter: ColorFilter.mode(
|
||||
theme.brightness == Brightness.light
|
||||
? scale.tertiaryScale.primary
|
||||
: scale.tertiaryScale.border,
|
||||
? scale.primary
|
||||
: scale.border,
|
||||
scaleConfig.preferBorders
|
||||
? BlendMode.modulate
|
||||
: BlendMode.dst),
|
||||
child: Row(children: [
|
||||
SvgPicture.asset(
|
||||
height: 48,
|
||||
'assets/images/icon.svg',
|
||||
colorFilter: scaleConfig.useVisualIndicators
|
||||
? grayColorFilter
|
||||
: null)
|
||||
.paddingLTRB(0, 0, 16, 0),
|
||||
// SvgPicture.asset(
|
||||
// height: 48,
|
||||
// 'assets/images/icon.svg',
|
||||
// colorFilter: scaleConfig.useVisualIndicators
|
||||
// ? grayColorFilter
|
||||
// : null)
|
||||
// .paddingLTRB(0, 0, 16, 0),
|
||||
SvgPicture.asset(
|
||||
height: 48,
|
||||
'assets/images/title.svg',
|
||||
colorFilter: scaleConfig.useVisualIndicators
|
||||
? grayColorFilter
|
||||
: null),
|
||||
: dodgeFilter),
|
||||
]))),
|
||||
Text(translate('menu.accounts'),
|
||||
style: theme.textTheme.titleMedium!.copyWith(
|
||||
color: scaleConfig.preferBorders
|
||||
? scale.tertiaryScale.border
|
||||
: scale.tertiaryScale.borderText))
|
||||
? scale.border
|
||||
: scale.borderText))
|
||||
.paddingLTRB(0, 16, 0, 16),
|
||||
ListView(
|
||||
shrinkWrap: true,
|
||||
|
|
@ -438,16 +402,16 @@ class _DrawerMenuState extends State<DrawerMenu> {
|
|||
Text('${translate('menu.version')} $packageInfoVersion',
|
||||
style: theme.textTheme.labelMedium!.copyWith(
|
||||
color: scaleConfig.preferBorders
|
||||
? scale.tertiaryScale.hoverBorder
|
||||
: scale.tertiaryScale.subtleBackground)),
|
||||
? scale.hoverBorder
|
||||
: scale.subtleBackground)),
|
||||
const Spacer(),
|
||||
SignalStrengthMeterWidget(
|
||||
color: scaleConfig.preferBorders
|
||||
? scale.tertiaryScale.hoverBorder
|
||||
: scale.tertiaryScale.subtleBackground,
|
||||
? scale.hoverBorder
|
||||
: scale.subtleBackground,
|
||||
inactiveColor: scaleConfig.preferBorders
|
||||
? scale.tertiaryScale.border
|
||||
: scale.tertiaryScale.elementBackground,
|
||||
? scale.border
|
||||
: scale.elementBackground,
|
||||
),
|
||||
])
|
||||
]).paddingAll(16),
|
||||
|
|
|
|||
|
|
@ -22,39 +22,42 @@ class MenuItemWidget extends StatelessWidget {
|
|||
this.footerButtonIconHoverColor,
|
||||
this.footerButtonIconFocusColor,
|
||||
this.footerCallback,
|
||||
this.minHeight = 0,
|
||||
super.key,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) => TextButton(
|
||||
onPressed: callback,
|
||||
style: TextButton.styleFrom(foregroundColor: foregroundColor).copyWith(
|
||||
backgroundColor: WidgetStateProperty.resolveWith((states) {
|
||||
if (states.contains(WidgetState.hovered)) {
|
||||
return backgroundHoverColor;
|
||||
}
|
||||
if (states.contains(WidgetState.focused)) {
|
||||
return backgroundFocusColor;
|
||||
}
|
||||
return backgroundColor;
|
||||
}),
|
||||
side: WidgetStateBorderSide.resolveWith((states) {
|
||||
if (states.contains(WidgetState.hovered)) {
|
||||
return borderColor != null
|
||||
? BorderSide(width: 2, color: borderHoverColor!)
|
||||
: null;
|
||||
}
|
||||
if (states.contains(WidgetState.focused)) {
|
||||
return borderColor != null
|
||||
? BorderSide(width: 2, color: borderFocusColor!)
|
||||
: null;
|
||||
}
|
||||
onPressed: callback,
|
||||
style: TextButton.styleFrom(foregroundColor: foregroundColor).copyWith(
|
||||
backgroundColor: WidgetStateProperty.resolveWith((states) {
|
||||
if (states.contains(WidgetState.hovered)) {
|
||||
return backgroundHoverColor;
|
||||
}
|
||||
if (states.contains(WidgetState.focused)) {
|
||||
return backgroundFocusColor;
|
||||
}
|
||||
return backgroundColor;
|
||||
}),
|
||||
side: WidgetStateBorderSide.resolveWith((states) {
|
||||
if (states.contains(WidgetState.hovered)) {
|
||||
return borderColor != null
|
||||
? BorderSide(width: 2, color: borderColor!)
|
||||
? BorderSide(width: 2, color: borderHoverColor!)
|
||||
: null;
|
||||
}),
|
||||
shape: WidgetStateProperty.all(RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(borderRadius ?? 0)))),
|
||||
}
|
||||
if (states.contains(WidgetState.focused)) {
|
||||
return borderColor != null
|
||||
? BorderSide(width: 2, color: borderFocusColor!)
|
||||
: null;
|
||||
}
|
||||
return borderColor != null
|
||||
? BorderSide(width: 2, color: borderColor!)
|
||||
: null;
|
||||
}),
|
||||
shape: WidgetStateProperty.all(RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(borderRadius ?? 0)))),
|
||||
child: ConstrainedBox(
|
||||
constraints: BoxConstraints(minHeight: minHeight),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
|
|
@ -81,7 +84,7 @@ class MenuItemWidget extends StatelessWidget {
|
|||
onPressed: footerCallback),
|
||||
],
|
||||
).paddingAll(2),
|
||||
);
|
||||
));
|
||||
|
||||
@override
|
||||
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
|
||||
|
|
@ -106,7 +109,8 @@ class MenuItemWidget extends StatelessWidget {
|
|||
..add(ColorProperty('borderColor', borderColor))
|
||||
..add(DoubleProperty('borderRadius', borderRadius))
|
||||
..add(ColorProperty('borderHoverColor', borderHoverColor))
|
||||
..add(ColorProperty('borderFocusColor', borderFocusColor));
|
||||
..add(ColorProperty('borderFocusColor', borderFocusColor))
|
||||
..add(DoubleProperty('minHeight', minHeight));
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////
|
||||
|
|
@ -129,4 +133,5 @@ class MenuItemWidget extends StatelessWidget {
|
|||
final Color? footerButtonIconColor;
|
||||
final Color? footerButtonIconHoverColor;
|
||||
final Color? footerButtonIconFocusColor;
|
||||
final double minHeight;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue