Git-Mirrors/veilidchat
1
0
Fork 0
mirror of https://gitlab.com/veilid/veilidchat.git synced 2025-04-05 05:45:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

ui cleanup

Browse Source
This commit is contained in:
Christien Rioux 2025-03-20 17:31:02 -04:00
parent e4358586aa
commit 23867a1784
17 changed files with 135 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/handshake.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 43 KiB

BIN
assets/images/toilet.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 28 KiB

9
assets/images/toilet.svg Normal file
View File

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 683 591" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-258.886,-304.79)">
<path d="M863.18,714.04C889.629,689.649 905.735,659.528 906.84,627.009L479.4,627.009C471.935,627.009 465.896,620.954 465.896,613.505L465.896,383.995L258.886,383.995L258.886,644.605C317.804,660.73 358.554,675.578 386.046,711.378C413.191,746.722 425.198,800.858 426.222,895.218L734.112,895.218L734.112,782.788L734.147,782.788C734.147,776.409 738.69,770.745 745.186,769.554C792.893,760.691 834.159,740.827 863.186,714.038L863.18,714.04Z" style="fill-rule:nonzero;"/>
<path d="M921.09,600.04L922.367,599.989C927.383,600.161 932.25,597.794 935.601,594.427C942.949,587.044 942.965,575.173 935.551,567.759C932.113,564.321 927.386,562.196 922.199,562.196L492.889,562.196L492.889,599.989L919.989,599.989C920.364,599.989 920.719,600.005 921.094,600.04L921.09,600.04Z" style="fill-rule:nonzero;"/>
<rect x="258.89" y="304.79" width="207.01" height="52.199" style="fill-rule:nonzero;"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

6
lib/account_manager/views/profile_widget.dart
View File

@ -43,7 +43,7 @@ class ProfileWidget extends StatelessWidget {
: scale.primaryScale.borderText,
width: 2),
borderRadius: BorderRadius.all(
Radius.circular(12 * scaleConfig.borderRadiusScale))),
Radius.circular(8 * scaleConfig.borderRadiusScale))),
),
child: Row(children: [
const Spacer(),
@ -54,7 +54,7 @@ class ProfileWidget extends StatelessWidget {
? scale.primaryScale.border
: scale.primaryScale.borderText),
textAlign: TextAlign.left,
).paddingAll(12),
).paddingAll(8),
if (_profile.pronouns.isNotEmpty && _showPronouns)
Text('(${_profile.pronouns})',
textAlign: TextAlign.right,
@ -62,7 +62,7 @@ class ProfileWidget extends StatelessWidget {
color: scaleConfig.preferBorders
? scale.primaryScale.border
: scale.primaryScale.primary))
.paddingAll(12),
.paddingAll(8),
const Spacer()
]),
);

3
lib/chat_list/views/chat_list_widget.dart
View File

@ -83,7 +83,8 @@ class ChatListWidget extends StatelessWidget {
},
filter: (value) =>
_itemFilter(contactMap, chatList, value),
spaceBetweenSearchAndList: 4,
searchFieldPadding:
const EdgeInsets.fromLTRB(0, 0, 0, 4),
inputDecoration: InputDecoration(
labelText: translate('chat_list.search'),
),

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

@ -50,7 +50,7 @@ class ChatSingleContactItemWidget extends StatelessWidget {
final avatar = AvatarWidget(
name: name,
size: 34,
size: 32,
borderColor: scaleTheme.config.useVisualIndicators
? scaleTheme.scheme.primaryScale.primaryText
: scaleTheme.scheme.primaryScale.subtleBorder,
@ -75,7 +75,7 @@ class ChatSingleContactItemWidget extends StatelessWidget {
trailing: AvailabilityWidget(
availability: availability,
color: scaleTileTheme.textColor,
),
).fit(fit: BoxFit.scaleDown),
onTap: () {
singleFuture(activeChatCubit, () async {
activeChatCubit.setActiveChat(_localConversationRecordKey);

57
lib/contacts/views/availability_widget.dart
View File

@ -1,35 +1,39 @@
import 'package:awesome_extensions/awesome_extensions.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_translate/flutter_translate.dart';
import '../../proto/proto.dart' as proto;
import '../../theme/theme.dart';
class AvailabilityWidget extends StatelessWidget {
const AvailabilityWidget(
{required this.availability,
required this.color,
this.vertical = true,
this.iconSize = 24,
this.size = 32,
super.key});
static Widget availabilityIcon(proto.Availability availability, Color color,
{double size = 24}) {
late final Widget iconData;
late final Widget icon;
switch (availability) {
case proto.Availability.AVAILABILITY_AWAY:
iconData = ImageIcon(const AssetImage('assets/images/toilet.png'),
size: size, color: color);
icon = SvgPicture.asset('assets/images/toilet.svg',
width: size,
height: size,
colorFilter: ColorFilter.mode(color, BlendMode.srcATop));
case proto.Availability.AVAILABILITY_BUSY:
iconData = Icon(Icons.event_busy, size: size);
icon = Icon(Icons.event_busy, size: size);
case proto.Availability.AVAILABILITY_FREE:
iconData = Icon(Icons.event_available, size: size);
icon = Icon(Icons.event_available, size: size);
case proto.Availability.AVAILABILITY_OFFLINE:
iconData = Icon(Icons.cloud_off, size: size);
icon = Icon(Icons.cloud_off, size: size);
case proto.Availability.AVAILABILITY_UNSPECIFIED:
iconData = Icon(Icons.question_mark, size: size);
icon = Icon(Icons.question_mark, size: size);
}
return iconData;
return icon;
}
static String availabilityName(proto.Availability availability) {
@ -53,26 +57,25 @@ class AvailabilityWidget extends StatelessWidget {
Widget build(BuildContext context) {
final theme = Theme.of(context);
final textTheme = theme.textTheme;
// final scale = theme.extension<ScaleScheme>()!;
// final scaleConfig = theme.extension<ScaleConfig>()!;
final name = availabilityName(availability);
final icon = availabilityIcon(availability, color, size: iconSize);
final icon = availabilityIcon(availability, color, size: size * 2 / 3);
return vertical
? Column(
mainAxisSize: MainAxisSize.min,
//mainAxisAlignment: MainAxisAlignment.center,
children: [
icon,
Text(name, style: textTheme.labelSmall!.copyWith(color: color))
.paddingLTRB(0, 0, 0, 0)
])
: Row(mainAxisSize: MainAxisSize.min, children: [
icon,
Text(name, style: textTheme.labelLarge!.copyWith(color: color))
.paddingLTRB(8, 0, 0, 0)
]);
? ConstrainedBox(
constraints: BoxConstraints.tightFor(width: size),
child: Column(mainAxisSize: MainAxisSize.min, children: [
icon,
Text(name, style: textTheme.labelSmall!.copyWith(color: color))
.fit(fit: BoxFit.scaleDown)
]))
: ConstrainedBox(
constraints: BoxConstraints.tightFor(height: size),
child: Row(mainAxisSize: MainAxisSize.min, children: [
icon,
Text(name, style: textTheme.labelLarge!.copyWith(color: color))
.paddingLTRB(size / 4, 0, 0, 0)
]));
}
////////////////////////////////////////////////////////////////////////////
@ -80,7 +83,7 @@ class AvailabilityWidget extends StatelessWidget {
final proto.Availability availability;
final Color color;
final bool vertical;
final double iconSize;
final double size;
@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
@ -89,7 +92,7 @@ class AvailabilityWidget extends StatelessWidget {
..add(
DiagnosticsProperty<proto.Availability>('availability', availability))
..add(DiagnosticsProperty<bool>('vertical', vertical))
..add(DoubleProperty('iconSize', iconSize))
..add(DoubleProperty('size', size))
..add(ColorProperty('color', color));
}
}

69
lib/contacts/views/contacts_page.dart
View File

@ -1,6 +1,5 @@
import 'package:async_tools/async_tools.dart';
import 'package:awesome_extensions/awesome_extensions.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_translate/flutter_translate.dart';
import 'package:provider/provider.dart';
@ -30,8 +29,10 @@ class _ContactsPageState extends State<ContactsPage> {
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final scale = theme.extension<ScaleScheme>()!;
final appBarIconColor = scale.primaryScale.borderText;
final scaleTheme = theme.extension<ScaleTheme>()!;
final appBarTheme = scaleTheme.appBarTheme();
final scaleScheme = theme.extension<ScaleScheme>()!;
final scale = scaleScheme.scale(ScaleKind.primary);
final enableSplit = !isMobileSize(context);
final enableLeft = enableSplit || _selectedContact == null;
@ -39,9 +40,11 @@ class _ContactsPageState extends State<ContactsPage> {
return StyledScaffold(
appBar: DefaultAppBar(
title: Text(!enableSplit && enableRight
? translate('contacts_dialog.edit_contact')
: translate('contacts_dialog.contacts')),
title: Text(
!enableSplit && enableRight
? translate('contacts_dialog.edit_contact')
: translate('contacts_dialog.contacts'),
),
leading: IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: () {
@ -60,41 +63,29 @@ class _ContactsPageState extends State<ContactsPage> {
),
actions: [
if (_selectedContact != null)
FittedBox(
fit: BoxFit.scaleDown,
child: Column(mainAxisSize: MainAxisSize.min, children: [
IconButton(
icon: const Icon(Icons.chat_bubble),
color: appBarIconColor,
tooltip: translate('contacts_dialog.new_chat'),
onPressed: () async {
await _onChatStarted(_selectedContact!);
}),
Text(translate('contacts_dialog.new_chat'),
style: theme.textTheme.labelSmall!
.copyWith(color: appBarIconColor)),
])).paddingLTRB(8, 0, 8, 0),
IconButton(
icon: const Icon(Icons.chat_bubble),
iconSize: 24,
color: appBarTheme.iconColor,
tooltip: translate('contacts_dialog.new_chat'),
onPressed: () async {
await _onChatStarted(_selectedContact!);
}).paddingLTRB(8, 0, 8, 0),
if (enableSplit && _selectedContact != null)
FittedBox(
fit: BoxFit.scaleDown,
child: Column(mainAxisSize: MainAxisSize.min, children: [
IconButton(
icon: const Icon(Icons.close),
color: appBarIconColor,
tooltip: translate('contacts_dialog.close_contact'),
onPressed: () async {
await _onContactSelected(null);
}),
Text(translate('contacts_dialog.close_contact'),
style: theme.textTheme.labelSmall!
.copyWith(color: appBarIconColor)),
])).paddingLTRB(8, 0, 8, 0),
IconButton(
icon: const Icon(Icons.close),
iconSize: 24,
color: appBarTheme.iconColor,
tooltip: translate('contacts_dialog.close_contact'),
onPressed: () async {
await _onContactSelected(null);
}).paddingLTRB(8, 0, 8, 0),
]),
body: LayoutBuilder(builder: (context, constraint) {
final maxWidth = constraint.maxWidth;
return ColoredBox(
color: scale.primaryScale.appBackground,
color: scale.appBackground,
child:
Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
Offstage(
@ -104,20 +95,20 @@ class _ContactsPageState extends State<ContactsPage> {
? maxWidth
: (maxWidth / 3).clamp(200, 500),
child: DecoratedBox(
decoration: BoxDecoration(
color: scale.primaryScale.subtleBackground),
decoration:
BoxDecoration(color: scale.subtleBackground),
child: ContactsBrowser(
selectedContactRecordKey: _selectedContact
?.localConversationRecordKey
.toVeilid(),
onContactSelected: _onContactSelected,
onStartChat: _onChatStarted,
).paddingLTRB(8, 0, 8, 8)))),
).paddingLTRB(4, 0, 4, 8)))),
if (enableRight && enableLeft)
Container(
constraints:
const BoxConstraints(minWidth: 1, maxWidth: 1),
color: scale.primaryScale.subtleBorder),
color: scale.subtleBorder),
if (enableRight)
if (_selectedContact == null)
const NoContactWidget().expanded()

9
lib/layout/default_app_bar.dart
View File

@ -4,9 +4,12 @@ import 'package:flutter_svg/flutter_svg.dart';
class DefaultAppBar extends AppBar {
DefaultAppBar(
{required super.title, super.key, Widget? leading, super.actions})
{super.title,
super.flexibleSpace,
super.key,
Widget? leading,
super.actions})
: super(
titleSpacing: 0,
leading: leading ??
Container(
margin: const EdgeInsets.all(4),
@ -14,6 +17,6 @@ class DefaultAppBar extends AppBar {
color: Colors.black.withAlpha(32),
shape: BoxShape.circle),
child:
SvgPicture.asset('assets/images/vlogo.svg', height: 32)
SvgPicture.asset('assets/images/vlogo.svg', height: 24)
.paddingAll(4)));
}

8
lib/layout/home/home_account_ready.dart
View File

@ -33,7 +33,7 @@ class _HomeAccountReadyState extends State<HomeAccountReady> {
color: scaleConfig.preferBorders
? scale.primaryScale.border
: scale.primaryScale.borderText,
constraints: const BoxConstraints.expand(height: 48, width: 48),
constraints: const BoxConstraints.expand(height: 40, width: 40),
style: ButtonStyle(
backgroundColor: WidgetStateProperty.all(
scaleConfig.preferBorders
@ -50,7 +50,7 @@ class _HomeAccountReadyState extends State<HomeAccountReady> {
: scale.primaryScale.borderText,
width: 2),
borderRadius: BorderRadius.all(
Radius.circular(12 * scaleConfig.borderRadiusScale))),
Radius.circular(8 * scaleConfig.borderRadiusScale))),
)),
tooltip: translate('menu.accounts_menu_tooltip'),
onPressed: () async {
@ -68,7 +68,7 @@ class _HomeAccountReadyState extends State<HomeAccountReady> {
color: scaleConfig.preferBorders
? scale.primaryScale.border
: scale.primaryScale.borderText,
constraints: const BoxConstraints.expand(height: 48, width: 48),
constraints: const BoxConstraints.expand(height: 40, width: 40),
style: ButtonStyle(
backgroundColor: WidgetStateProperty.all(
scaleConfig.preferBorders
@ -85,7 +85,7 @@ class _HomeAccountReadyState extends State<HomeAccountReady> {
: scale.primaryScale.borderText,
width: 2),
borderRadius: BorderRadius.all(
Radius.circular(12 * scaleConfig.borderRadiusScale))),
Radius.circular(8 * scaleConfig.borderRadiusScale))),
)),
tooltip: translate('menu.contacts_tooltip'),
onPressed: () async {

31
lib/theme/models/scale_theme/scale_app_bar_theme.dart Normal file
View File

@ -0,0 +1,31 @@
import 'package:flutter/material.dart';
import 'scale_theme.dart';
class ScaleAppBarTheme {
ScaleAppBarTheme({
required this.textStyle,
required this.iconColor,
required this.backgroundColor,
});
final TextStyle textStyle;
final Color iconColor;
final Color backgroundColor;
}
extension ScaleAppBarThemeExt on ScaleTheme {
ScaleAppBarTheme appBarTheme({ScaleKind scaleKind = ScaleKind.primary}) {
final scale = scheme.scale(scaleKind);
final textStyle = textTheme.titleLarge!.copyWith(color: scale.borderText);
final iconColor = scale.borderText;
final backgroundColor = scale.border;
return ScaleAppBarTheme(
textStyle: textStyle,
iconColor: iconColor,
backgroundColor: backgroundColor,
);
}
}

7
lib/theme/models/scale_theme/scale_theme.dart
View File

@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
import 'scale_input_decorator_theme.dart';
import 'scale_scheme.dart';
export 'scale_app_bar_theme.dart';
export 'scale_color.dart';
export 'scale_input_decorator_theme.dart';
export 'scale_scheme.dart';
@ -137,8 +138,10 @@ class ScaleTheme extends ThemeExtension<ScaleTheme> {
return scheme.primaryScale.subtleBorder;
})),
appBarTheme: baseThemeData.appBarTheme.copyWith(
backgroundColor: scheme.primaryScale.border,
foregroundColor: scheme.primaryScale.borderText),
backgroundColor: scheme.primaryScale.border,
foregroundColor: scheme.primaryScale.borderText,
toolbarHeight: 40,
),
bottomSheetTheme: baseThemeData.bottomSheetTheme.copyWith(
elevation: 0,
modalElevation: 0,

1
lib/theme/models/scale_theme/scale_tile_theme.dart
View File

@ -1,6 +1,5 @@
import 'package:flutter/material.dart';
import 'scale_scheme.dart';
import 'scale_theme.dart';
class ScaleTileTheme {

4
lib/theme/views/slider_tile.dart
View File

@ -125,15 +125,13 @@ class SliderTile extends StatelessWidget {
child: ListTile(
onTap: onTap,
dense: true,
visualDensity:
const VisualDensity(horizontal: -4, vertical: -4),
title: Text(
title,
overflow: TextOverflow.fade,
softWrap: false,
),
subtitle: subtitle.isNotEmpty ? Text(subtitle) : null,
minTileHeight: 48,
minTileHeight: 52,
iconColor: scaleTileTheme.textColor,
textColor: scaleTileTheme.textColor,
leading:

10
lib/theme/views/wallpaper_preferences.dart
View File

@ -14,10 +14,18 @@ Widget buildSettingsPageWallpaperPreferences(
required ThemeSwitcherState switcher}) {
final preferencesRepository = PreferencesRepository.instance;
final themePreferences = preferencesRepository.value.themePreference;
final theme = Theme.of(context);
final scale = theme.extension<ScaleScheme>()!;
final textTheme = theme.textTheme;
return FormBuilderCheckbox(
name: formFieldEnableWallpaper,
title: Text(translate('settings_page.enable_wallpaper')),
title: Text(translate('settings_page.enable_wallpaper'),
style: textTheme.labelMedium),
initialValue: themePreferences.enableWallpaper,
side: BorderSide(color: scale.primaryScale.border, width: 2),
checkColor: scale.primaryScale.borderText,
activeColor: scale.primaryScale.border,
onChanged: (value) async {
if (value != null) {
final newThemePrefs =

4
lib/theme/views/widget_helpers.dart
View File

@ -442,7 +442,7 @@ Widget styledTitleContainer({
color: borderColor ?? scale.primaryScale.border,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(12 * scaleConfig.borderRadiusScale),
BorderRadius.circular(8 * scaleConfig.borderRadiusScale),
)),
child: Column(children: [
Text(
@ -456,7 +456,7 @@ Widget styledTitleContainer({
backgroundColor ?? scale.primaryScale.subtleBackground,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
12 * scaleConfig.borderRadiusScale),
8 * scaleConfig.borderRadiusScale),
)),
child: child)
.paddingAll(4)

3
pubspec.yaml
View File

@ -176,10 +176,9 @@ flutter:
- assets/images/splash.svg
- assets/images/title.svg
- assets/images/vlogo.svg
- assets/images/toilet.svg
# Raster Images
- assets/images/ellet.png
- assets/images/handshake.png
- assets/images/toilet.png
# Printing
- assets/js/pdf/3.2.146/pdf.min.js
# Sounds