fix: Layouts

This commit is contained in:
Christian Pauly 2021-05-23 18:46:15 +02:00
parent 8ee4e3c155
commit 64596b4970
4 changed files with 203 additions and 199 deletions

View File

@ -5,6 +5,7 @@ import 'package:fluffychat/pages/settings_emotes.dart';
import 'package:fluffychat/pages/settings_multiple_emotes.dart';
import 'package:fluffychat/pages/sign_up.dart';
import 'package:fluffychat/pages/sign_up_password.dart';
import 'package:fluffychat/widgets/layouts/side_view_layout.dart';
import 'package:fluffychat/widgets/layouts/two_column_layout.dart';
import 'package:fluffychat/pages/chat.dart';
import 'package:fluffychat/pages/chat_details.dart';
@ -28,36 +29,61 @@ import 'package:flutter/material.dart';
import 'package:vrouter/vrouter.dart';
class AppRoutes {
final int columns;
final bool columnMode;
AppRoutes(this.columns);
AppRoutes(this.columnMode);
List<VRouteElement> get routes => [
VWidget(path: '/', widget: LoadingView()),
..._homeRoutes,
if (columnMode) ..._tabletRoutes,
if (!columnMode) ..._mobileRoutes,
];
List<VRouteElement> get _mobileRoutes => [
VWidget(
path: '/home',
widget: HomeserverPicker(),
buildTransition: _fadeTransition,
path: '/rooms',
widget: ChatList(),
stackedRoutes: [
VWidget(path: ':roomid', widget: Chat(), stackedRoutes: [
VWidget(
path: '/signup',
widget: SignUp(),
buildTransition: _fadeTransition,
stackedRoutes: [
VWidget(
path: 'password/:username',
widget: SignUpPassword(),
buildTransition: _fadeTransition,
path: 'encryption',
widget: ChatEncryptionSettings(),
),
VWidget(
path: '/login',
widget: Login(),
buildTransition: _fadeTransition,
path: 'invite',
widget: InvitationSelection(),
),
VWidget(
path: 'details',
widget: ChatDetails(),
stackedRoutes: _chatDetailsRoutes,
),
]),
VWidget(
path: '/settings',
widget: Settings(),
stackedRoutes: _settingsRoutes,
),
VWidget(
path: '/search',
widget: Search(),
),
VWidget(
path: '/archive',
widget: Archive(),
),
VWidget(
path: '/newprivatechat',
widget: NewPrivateChat(),
),
VWidget(
path: '/newgroup',
widget: NewGroup(),
),
],
),
if (columns > 1) ...{
];
List<VRouteElement> get _tabletRoutes => [
VNester(
path: '/rooms',
widgetBuilder: (child) => TwoColumnLayout(
@ -81,33 +107,12 @@ class AppRoutes {
widget: NewGroup(),
buildTransition: _fadeTransition,
),
if (columns == 2)
VWidget(
path: ':roomid',
widget: Chat(),
buildTransition: _fadeTransition,
stackedRoutes: [
VWidget(
path: 'encryption',
widget: ChatEncryptionSettings(),
buildTransition: _fadeTransition,
),
VWidget(
path: 'details',
widget: ChatDetails(),
buildTransition: _fadeTransition,
stackedRoutes: _chatDetailsRoutes,
),
VWidget(
path: 'invite',
widget: InvitationSelection(),
buildTransition: _fadeTransition,
),
]),
if (columns > 2)
VNester(
path: ':roomid',
widgetBuilder: (child) => Chat(sideView: child),
widgetBuilder: (child) => SideViewLayout(
mainView: Chat(),
sideView: child,
),
buildTransition: _fadeTransition,
nestedRoutes: [
VWidget(
@ -179,48 +184,31 @@ class AppRoutes {
),
],
),
},
if (columns == 1)
];
List<VRouteElement> get _homeRoutes => [
VWidget(path: '/', widget: LoadingView()),
VWidget(
path: '/rooms',
widget: ChatList(),
path: '/home',
widget: HomeserverPicker(),
buildTransition: _fadeTransition,
stackedRoutes: [
VWidget(path: ':roomid', widget: Chat(), stackedRoutes: [
VWidget(
path: 'encryption',
widget: ChatEncryptionSettings(),
path: '/signup',
widget: SignUp(),
buildTransition: _fadeTransition,
stackedRoutes: [
VWidget(
path: 'password/:username',
widget: SignUpPassword(),
buildTransition: _fadeTransition,
),
VWidget(
path: 'invite',
widget: InvitationSelection(),
),
VWidget(
path: 'details',
widget: ChatDetails(),
stackedRoutes: _chatDetailsRoutes,
path: '/login',
widget: Login(),
buildTransition: _fadeTransition,
),
]),
VWidget(
path: '/settings',
widget: Settings(),
stackedRoutes: _settingsRoutes,
),
VWidget(
path: '/search',
widget: Search(),
),
VWidget(
path: '/archive',
widget: Archive(),
),
VWidget(
path: '/newprivatechat',
widget: NewPrivateChat(),
),
VWidget(
path: '/newgroup',
widget: NewGroup(),
),
],
),
];
@ -285,5 +273,5 @@ class AppRoutes {
FadeTransition(opacity: animation1, child: child);
FadeTransition Function(dynamic, dynamic, dynamic) get _dynamicTransition =>
columns > 1 ? _fadeTransition : null;
columnMode ? _fadeTransition : null;
}

View File

@ -67,7 +67,7 @@ class FluffyChatApp extends StatefulWidget {
class _FluffyChatAppState extends State<FluffyChatApp> {
final GlobalKey<MatrixState> _matrix = GlobalKey<MatrixState>();
GlobalKey<VRouterState> _router;
int columns;
bool columnMode;
String _initialUrl = '/';
@override
Widget build(BuildContext context) {
@ -80,13 +80,13 @@ class _FluffyChatAppState extends State<FluffyChatApp> {
var newColumns =
(constraints.maxWidth / AppConfig.columnWidth).floor();
if (newColumns > 3) newColumns = 3;
columns ??= newColumns;
columnMode ??= newColumns > 1;
_router ??= GlobalKey<VRouterState>();
if (columns != newColumns) {
if (columnMode != newColumns > 1) {
WidgetsBinding.instance.addPostFrameCallback((_) {
setState(() {
_initialUrl = _router.currentState.url;
columns = newColumns;
columnMode = newColumns > 1;
_router = GlobalKey<VRouterState>();
});
});
@ -102,7 +102,7 @@ class _FluffyChatAppState extends State<FluffyChatApp> {
locale: kIsWeb
? Locale(html.window.navigator.language.split('-').first)
: null,
routes: AppRoutes(columns).routes,
routes: AppRoutes(columnMode).routes,
builder: (context, child) {
LoadingDialog.defaultTitle = L10n.of(context).loadingPleaseWait;
LoadingDialog.defaultBackLabel = L10n.of(context).close;

View File

@ -654,29 +654,5 @@ class ChatController extends State<Chat> {
});
@override
Widget build(BuildContext context) {
var currentUrl = Uri.decodeFull(VRouter.of(context).url);
if (!currentUrl.endsWith('/')) currentUrl += '/';
final hideSideView = currentUrl == '/rooms/$roomId/';
return widget.sideView == null
? ChatView(this)
: Row(
children: [
Expanded(
child: ClipRRect(child: ChatView(this)),
),
Container(
width: 1.0,
color: Theme.of(context).dividerColor,
),
AnimatedContainer(
duration: Duration(milliseconds: 300),
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(),
width: hideSideView ? 0 : 360.0,
child: hideSideView ? null : widget.sideView,
),
],
);
}
Widget build(BuildContext context) => ChatView(this);
}

View File

@ -0,0 +1,40 @@
import 'package:fluffychat/config/app_config.dart';
import 'package:flutter/material.dart';
import 'package:vrouter/vrouter.dart';
class SideViewLayout extends StatelessWidget {
final Widget mainView;
final Widget sideView;
const SideViewLayout({Key key, @required this.mainView, this.sideView})
: super(key: key);
@override
Widget build(BuildContext context) {
var currentUrl = Uri.decodeFull(VRouter.of(context).url);
if (!currentUrl.endsWith('/')) currentUrl += '/';
final hideSideView = currentUrl.split('/').length == 4;
return sideView == null
? mainView
: MediaQuery.of(context).size.width < AppConfig.columnWidth * 3 &&
!hideSideView
? sideView
: Row(
children: [
Expanded(
child: ClipRRect(child: mainView),
),
Container(
width: 1.0,
color: Theme.of(context).dividerColor,
),
AnimatedContainer(
duration: Duration(milliseconds: 300),
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(),
width: hideSideView ? 0 : 360.0,
child: hideSideView ? null : sideView,
),
],
);
}
}