✨ Better side navigation
🐛 Bug fixes and optimizations
This commit is contained in:
@ -8,7 +8,7 @@ class AppBarTitle extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (SolianTheme.isSpecializedMacOS(context)) {
|
||||
if (AppTheme.isSpecializedMacOS(context)) {
|
||||
return Text(title);
|
||||
} else {
|
||||
return Text(title);
|
||||
|
@ -98,12 +98,12 @@ class ChannelCallIndicator extends StatelessWidget {
|
||||
child: Text('callJoin'.tr),
|
||||
);
|
||||
} else if (call.channel.value?.id == channel.id &&
|
||||
!SolianTheme.isLargeScreen(context)) {
|
||||
!AppTheme.isLargeScreen(context)) {
|
||||
return TextButton(
|
||||
onPressed: () => onJoin(),
|
||||
child: Text('callResume'.tr),
|
||||
);
|
||||
} else if (!SolianTheme.isLargeScreen(context)) {
|
||||
} else if (!AppTheme.isLargeScreen(context)) {
|
||||
return TextButton(
|
||||
onPressed: null,
|
||||
child: Text('callJoin'.tr),
|
||||
|
@ -11,6 +11,7 @@ class ChannelListWidget extends StatefulWidget {
|
||||
final List<Channel> channels;
|
||||
final int selfId;
|
||||
final bool isDense;
|
||||
final bool isCollapsed;
|
||||
final bool noCategory;
|
||||
final bool useReplace;
|
||||
final Function(Channel)? onSelected;
|
||||
@ -20,6 +21,7 @@ class ChannelListWidget extends StatefulWidget {
|
||||
required this.channels,
|
||||
required this.selfId,
|
||||
this.isDense = false,
|
||||
this.isCollapsed = false,
|
||||
this.noCategory = false,
|
||||
this.useReplace = false,
|
||||
this.onSelected,
|
||||
@ -130,13 +132,25 @@ class _ChannelListWidgetState extends State<ChannelListWidget> {
|
||||
final otherside =
|
||||
item.members!.where((e) => e.account.id != widget.selfId).first;
|
||||
|
||||
final avatar = AccountAvatar(
|
||||
content: otherside.account.avatar,
|
||||
radius: widget.isDense ? 12 : 20,
|
||||
bgColor: Theme.of(context).colorScheme.primary,
|
||||
feColor: Theme.of(context).colorScheme.onPrimary,
|
||||
);
|
||||
|
||||
if (widget.isCollapsed) {
|
||||
return Tooltip(
|
||||
message: otherside.account.nick,
|
||||
child: InkWell(
|
||||
child: avatar.paddingSymmetric(vertical: 12),
|
||||
onTap: () => _gotoChannel(item),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return ListTile(
|
||||
leading: AccountAvatar(
|
||||
content: otherside.account.avatar,
|
||||
radius: widget.isDense ? 12 : 20,
|
||||
bgColor: Theme.of(context).colorScheme.primary,
|
||||
feColor: Theme.of(context).colorScheme.onPrimary,
|
||||
),
|
||||
leading: avatar,
|
||||
contentPadding: padding,
|
||||
title: Text(otherside.account.nick),
|
||||
subtitle: !widget.isDense
|
||||
@ -145,21 +159,33 @@ class _ChannelListWidgetState extends State<ChannelListWidget> {
|
||||
onTap: () => _gotoChannel(item),
|
||||
);
|
||||
} else {
|
||||
final avatar = CircleAvatar(
|
||||
backgroundColor: item.realmId == null
|
||||
? Theme.of(context).colorScheme.primary
|
||||
: Colors.transparent,
|
||||
radius: widget.isDense ? 12 : 20,
|
||||
child: FaIcon(
|
||||
FontAwesomeIcons.hashtag,
|
||||
color: item.realmId == null
|
||||
? Theme.of(context).colorScheme.onPrimary
|
||||
: Theme.of(context).colorScheme.primary,
|
||||
size: widget.isDense ? 12 : 16,
|
||||
),
|
||||
);
|
||||
|
||||
if (widget.isCollapsed) {
|
||||
return Tooltip(
|
||||
message: item.name,
|
||||
child: InkWell(
|
||||
child: avatar.paddingSymmetric(vertical: 12),
|
||||
onTap: () => _gotoChannel(item),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return ListTile(
|
||||
minTileHeight: widget.isDense ? 48 : null,
|
||||
leading: CircleAvatar(
|
||||
backgroundColor: item.realmId == null
|
||||
? Theme.of(context).colorScheme.primary
|
||||
: Colors.transparent,
|
||||
radius: widget.isDense ? 12 : 20,
|
||||
child: FaIcon(
|
||||
FontAwesomeIcons.hashtag,
|
||||
color: item.realmId == null
|
||||
? Theme.of(context).colorScheme.onPrimary
|
||||
: Theme.of(context).colorScheme.primary,
|
||||
size: widget.isDense ? 12 : 16,
|
||||
),
|
||||
),
|
||||
leading: avatar,
|
||||
contentPadding: padding,
|
||||
title: Text(item.name),
|
||||
subtitle: !widget.isDense
|
||||
|
@ -75,9 +75,6 @@ class ChatEvent extends StatelessWidget {
|
||||
key: Key('m${item.uuid}attachments-box'),
|
||||
width: MediaQuery.of(context).size.width,
|
||||
padding: EdgeInsets.only(top: isMerged ? 0 : 4, bottom: 4),
|
||||
constraints: const BoxConstraints(
|
||||
maxHeight: 720,
|
||||
),
|
||||
child: AttachmentList(
|
||||
key: Key('m${item.uuid}attachments'),
|
||||
parentId: item.uuid,
|
||||
@ -301,7 +298,10 @@ class ChatEvent extends StatelessWidget {
|
||||
],
|
||||
).paddingSymmetric(horizontal: 12),
|
||||
_buildLinkExpansion().paddingOnly(left: 52, right: 8),
|
||||
_buildAttachment(context).paddingOnly(left: 56, right: 8),
|
||||
_buildAttachment(
|
||||
context,
|
||||
isMinimal: ['messages.edit'].contains(item.type),
|
||||
).paddingOnly(left: 56, right: 8),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
@ -245,7 +245,8 @@ class _ChatMessageInputState extends State<ChatMessageInput> {
|
||||
_editTo = widget.edit!;
|
||||
_textController.text = body.text;
|
||||
_attachments.addAll(
|
||||
widget.edit!.body['attachments']?.cast<int>() ?? List.empty());
|
||||
widget.edit!.body['attachments']?.cast<String>() ?? List.empty(),
|
||||
);
|
||||
}
|
||||
if (widget.reply != null) {
|
||||
_replyTo = widget.reply!;
|
||||
|
@ -192,9 +192,9 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer>
|
||||
}
|
||||
|
||||
void _autoResize() {
|
||||
if (SolianTheme.isExtraLargeScreen(context)) {
|
||||
if (AppTheme.isExtraLargeScreen(context)) {
|
||||
_expandDrawer();
|
||||
} else if (SolianTheme.isLargeScreen(context)) {
|
||||
} else if (AppTheme.isLargeScreen(context)) {
|
||||
_collapseDrawer();
|
||||
} else {
|
||||
_drawerAnimationController.value = 1;
|
||||
@ -229,7 +229,7 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer>
|
||||
return Drawer(
|
||||
width: _drawerAnimation.value,
|
||||
backgroundColor:
|
||||
SolianTheme.isLargeScreen(context) ? Colors.transparent : null,
|
||||
AppTheme.isLargeScreen(context) ? Colors.transparent : null,
|
||||
child: child,
|
||||
);
|
||||
},
|
||||
@ -247,20 +247,20 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer>
|
||||
alignment: WrapAlignment.spaceAround,
|
||||
children: AppNavigation.destinations
|
||||
.map(
|
||||
(e) => Card(
|
||||
elevation: 0,
|
||||
margin: EdgeInsets.zero,
|
||||
child: Tooltip(
|
||||
message: e.label,
|
||||
child: InkWell(
|
||||
borderRadius:
|
||||
const BorderRadius.all(Radius.circular(8)),
|
||||
child: Icon(e.icon, size: 20).paddingAll(20),
|
||||
onTap: () {
|
||||
AppRouter.instance.goNamed(e.page);
|
||||
_closeDrawer();
|
||||
},
|
||||
),
|
||||
(e) => Tooltip(
|
||||
message: e.label,
|
||||
child: InkWell(
|
||||
borderRadius:
|
||||
const BorderRadius.all(Radius.circular(8)),
|
||||
child: Icon(
|
||||
e.icon,
|
||||
size: 22,
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
).paddingAll(16),
|
||||
onTap: () {
|
||||
AppRouter.instance.goNamed(e.page);
|
||||
_closeDrawer();
|
||||
},
|
||||
),
|
||||
),
|
||||
)
|
||||
|
@ -20,62 +20,42 @@ class AppNavigationRegion extends StatefulWidget {
|
||||
State<AppNavigationRegion> createState() => _AppNavigationRegionState();
|
||||
}
|
||||
|
||||
class _AppNavigationRegionState extends State<AppNavigationRegion>
|
||||
with SingleTickerProviderStateMixin {
|
||||
class _AppNavigationRegionState extends State<AppNavigationRegion> {
|
||||
bool _isTryingExit = false;
|
||||
|
||||
late final AnimationController _animationController = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(milliseconds: 250),
|
||||
);
|
||||
late final Animation<Offset> _animationTween = Tween<Offset>(
|
||||
begin: Offset.zero,
|
||||
end: const Offset(1.0, 0.0),
|
||||
).animate(CurvedAnimation(
|
||||
parent: _animationController,
|
||||
curve: Curves.fastOutSlowIn,
|
||||
));
|
||||
|
||||
void _focusRealm(Realm item) {
|
||||
_animationController.animateTo(1).then((_) {
|
||||
setState(
|
||||
() => Get.find<NavigationStateProvider>().focusedRealm.value = item,
|
||||
);
|
||||
_animationController.animateTo(0);
|
||||
});
|
||||
setState(
|
||||
() => Get.find<NavigationStateProvider>().focusedRealm.value = item,
|
||||
);
|
||||
}
|
||||
|
||||
void _unFocusRealm() {
|
||||
_animationController.animateTo(1).then((_) {
|
||||
setState(
|
||||
() => Get.find<NavigationStateProvider>().focusedRealm.value = null,
|
||||
);
|
||||
_animationController.animateTo(0);
|
||||
});
|
||||
setState(
|
||||
() => Get.find<NavigationStateProvider>().focusedRealm.value = null,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_animationController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
Widget _buildRealmFocusAvatar() {
|
||||
final focusedRealm = Get.find<NavigationStateProvider>().focusedRealm.value;
|
||||
return MouseRegion(
|
||||
child: AnimatedSwitcher(
|
||||
switchInCurve: Curves.fastOutSlowIn,
|
||||
switchOutCurve: Curves.fastOutSlowIn,
|
||||
duration: const Duration(milliseconds: 300),
|
||||
transitionBuilder: (child, animation) {
|
||||
return ScaleTransition(
|
||||
scale: animation,
|
||||
child: child,
|
||||
);
|
||||
},
|
||||
child: _isTryingExit
|
||||
? GestureDetector(
|
||||
child: CircleAvatar(
|
||||
return GestureDetector(
|
||||
child: MouseRegion(
|
||||
child: AnimatedSwitcher(
|
||||
switchInCurve: Curves.fastOutSlowIn,
|
||||
switchOutCurve: Curves.fastOutSlowIn,
|
||||
duration: const Duration(milliseconds: 300),
|
||||
transitionBuilder: (child, animation) {
|
||||
return ScaleTransition(
|
||||
scale: animation,
|
||||
child: child,
|
||||
);
|
||||
},
|
||||
child: _isTryingExit
|
||||
? CircleAvatar(
|
||||
backgroundColor: Theme.of(context).colorScheme.primary,
|
||||
child: const Icon(
|
||||
Icons.arrow_back,
|
||||
@ -84,13 +64,13 @@ class _AppNavigationRegionState extends State<AppNavigationRegion>
|
||||
),
|
||||
).paddingSymmetric(
|
||||
vertical: 8,
|
||||
),
|
||||
onTap: () => _unFocusRealm(),
|
||||
)
|
||||
: _buildEntryAvatar(focusedRealm!),
|
||||
)
|
||||
: _buildEntryAvatar(focusedRealm!),
|
||||
),
|
||||
onEnter: (_) => setState(() => _isTryingExit = true),
|
||||
onExit: (_) => setState(() => _isTryingExit = false),
|
||||
),
|
||||
onEnter: (_) => setState(() => _isTryingExit = true),
|
||||
onExit: (_) => setState(() => _isTryingExit = false),
|
||||
onTap: () => _unFocusRealm(),
|
||||
);
|
||||
}
|
||||
|
||||
@ -113,11 +93,11 @@ class _AppNavigationRegionState extends State<AppNavigationRegion>
|
||||
}
|
||||
|
||||
Widget _buildEntry(BuildContext context, Realm item) {
|
||||
const padding = EdgeInsets.symmetric(horizontal: 20);
|
||||
const padding = EdgeInsets.symmetric(horizontal: 20, vertical: 8);
|
||||
|
||||
if (widget.isCollapsed) {
|
||||
return InkWell(
|
||||
child: _buildEntryAvatar(item),
|
||||
child: _buildEntryAvatar(item).paddingSymmetric(vertical: 8),
|
||||
onTap: () => _focusRealm(item),
|
||||
);
|
||||
}
|
||||
@ -144,19 +124,27 @@ class _AppNavigationRegionState extends State<AppNavigationRegion>
|
||||
final NavigationStateProvider navState = Get.find();
|
||||
|
||||
return Obx(
|
||||
() => AnimatedBuilder(
|
||||
animation: _animationController,
|
||||
builder: (context, child) {
|
||||
() => AnimatedSwitcher(
|
||||
switchInCurve: Curves.fastOutSlowIn,
|
||||
switchOutCurve: Curves.fastOutSlowIn,
|
||||
duration: const Duration(milliseconds: 300),
|
||||
transitionBuilder: (child, animation) {
|
||||
return SlideTransition(
|
||||
position: _animationTween,
|
||||
child: child,
|
||||
position: Tween<Offset>(
|
||||
begin: const Offset(1.0, 0.0),
|
||||
end: Offset.zero,
|
||||
).animate(animation),
|
||||
child: Material(
|
||||
color: Theme.of(context).colorScheme.surface,
|
||||
child: child,
|
||||
),
|
||||
);
|
||||
},
|
||||
child: navState.focusedRealm.value == null
|
||||
? widget.isCollapsed
|
||||
? CustomScrollView(
|
||||
slivers: [
|
||||
const SliverPadding(padding: EdgeInsets.only(top: 8)),
|
||||
const SliverPadding(padding: EdgeInsets.only(top: 16)),
|
||||
SliverList.builder(
|
||||
itemCount: realms.availableRealms.length,
|
||||
itemBuilder: (context, index) {
|
||||
@ -171,7 +159,6 @@ class _AppNavigationRegionState extends State<AppNavigationRegion>
|
||||
)
|
||||
: CustomScrollView(
|
||||
slivers: [
|
||||
const SliverPadding(padding: EdgeInsets.only(top: 8)),
|
||||
SliverList.builder(
|
||||
itemCount: realms.availableRealms.length,
|
||||
itemBuilder: (context, index) {
|
||||
@ -179,7 +166,6 @@ class _AppNavigationRegionState extends State<AppNavigationRegion>
|
||||
return _buildEntry(context, element);
|
||||
},
|
||||
),
|
||||
const SliverPadding(padding: EdgeInsets.only(bottom: 8)),
|
||||
],
|
||||
)
|
||||
: Column(
|
||||
@ -187,8 +173,9 @@ class _AppNavigationRegionState extends State<AppNavigationRegion>
|
||||
if (widget.isCollapsed)
|
||||
Tooltip(
|
||||
message: navState.focusedRealm.value!.name,
|
||||
child: _buildRealmFocusAvatar().paddingSymmetric(
|
||||
vertical: 8,
|
||||
child: _buildRealmFocusAvatar().paddingOnly(
|
||||
top: 24,
|
||||
bottom: 8,
|
||||
),
|
||||
)
|
||||
else
|
||||
@ -209,13 +196,12 @@ class _AppNavigationRegionState extends State<AppNavigationRegion>
|
||||
Expanded(
|
||||
child: Obx(
|
||||
() => ChannelListWidget(
|
||||
useReplace: true,
|
||||
channels: channels.availableChannels
|
||||
.where(
|
||||
(x) =>
|
||||
x.realm?.id ==
|
||||
navState.focusedRealm.value?.id,
|
||||
)
|
||||
.where((x) =>
|
||||
x.realm?.id == navState.focusedRealm.value?.id)
|
||||
.toList(),
|
||||
isCollapsed: widget.isCollapsed,
|
||||
selfId: auth.userProfile.value!['id'],
|
||||
noCategory: true,
|
||||
),
|
||||
|
@ -8,6 +8,7 @@ import 'package:intl/intl.dart';
|
||||
import 'package:solian/models/post.dart';
|
||||
import 'package:solian/screens/posts/post_detail.dart';
|
||||
import 'package:solian/shells/title_shell.dart';
|
||||
import 'package:solian/theme.dart';
|
||||
import 'package:solian/widgets/account/account_avatar.dart';
|
||||
import 'package:solian/widgets/account/account_profile_popup.dart';
|
||||
import 'package:solian/widgets/attachments/attachment_list.dart';
|
||||
@ -302,7 +303,7 @@ class _PostItemState extends State<PostItem> {
|
||||
autoload: false,
|
||||
isGrid: true,
|
||||
).paddingOnly(left: 36, top: 4, bottom: 4);
|
||||
} else if (attachments.length > 1) {
|
||||
} else if (attachments.length > 1 || AppTheme.isLargeScreen(context)) {
|
||||
return AttachmentList(
|
||||
parentId: widget.item.id.toString(),
|
||||
attachmentsId: attachments,
|
||||
@ -497,7 +498,10 @@ class _PostItemState extends State<PostItem> {
|
||||
],
|
||||
).paddingOnly(
|
||||
top: 10,
|
||||
bottom: attachments.length == 1 ? 10 : 0,
|
||||
bottom:
|
||||
(attachments.length == 1 && !AppTheme.isLargeScreen(context))
|
||||
? 10
|
||||
: 0,
|
||||
right: 16,
|
||||
left: 16,
|
||||
),
|
||||
@ -514,8 +518,13 @@ class _PostItemState extends State<PostItem> {
|
||||
});
|
||||
},
|
||||
).paddingOnly(
|
||||
top: attachments.length == 1 ? 10 : 6,
|
||||
left: attachments.length == 1 ? 24 : 60,
|
||||
top: (attachments.length == 1 && !AppTheme.isLargeScreen(context))
|
||||
? 10
|
||||
: 6,
|
||||
left:
|
||||
(attachments.length == 1 && !AppTheme.isLargeScreen(context))
|
||||
? 24
|
||||
: 60,
|
||||
right: 16,
|
||||
bottom: 10,
|
||||
)
|
||||
|
Reference in New Issue
Block a user