fix: Layouts
This commit is contained in:
parent
8ee4e3c155
commit
64596b4970
|
@ -5,6 +5,7 @@ import 'package:fluffychat/pages/settings_emotes.dart';
|
||||||
import 'package:fluffychat/pages/settings_multiple_emotes.dart';
|
import 'package:fluffychat/pages/settings_multiple_emotes.dart';
|
||||||
import 'package:fluffychat/pages/sign_up.dart';
|
import 'package:fluffychat/pages/sign_up.dart';
|
||||||
import 'package:fluffychat/pages/sign_up_password.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/widgets/layouts/two_column_layout.dart';
|
||||||
import 'package:fluffychat/pages/chat.dart';
|
import 'package:fluffychat/pages/chat.dart';
|
||||||
import 'package:fluffychat/pages/chat_details.dart';
|
import 'package:fluffychat/pages/chat_details.dart';
|
||||||
|
@ -28,36 +29,61 @@ import 'package:flutter/material.dart';
|
||||||
import 'package:vrouter/vrouter.dart';
|
import 'package:vrouter/vrouter.dart';
|
||||||
|
|
||||||
class AppRoutes {
|
class AppRoutes {
|
||||||
final int columns;
|
final bool columnMode;
|
||||||
|
|
||||||
AppRoutes(this.columns);
|
AppRoutes(this.columnMode);
|
||||||
|
|
||||||
List<VRouteElement> get routes => [
|
List<VRouteElement> get routes => [
|
||||||
VWidget(path: '/', widget: LoadingView()),
|
..._homeRoutes,
|
||||||
|
if (columnMode) ..._tabletRoutes,
|
||||||
|
if (!columnMode) ..._mobileRoutes,
|
||||||
|
];
|
||||||
|
|
||||||
|
List<VRouteElement> get _mobileRoutes => [
|
||||||
VWidget(
|
VWidget(
|
||||||
path: '/home',
|
path: '/rooms',
|
||||||
widget: HomeserverPicker(),
|
widget: ChatList(),
|
||||||
buildTransition: _fadeTransition,
|
|
||||||
stackedRoutes: [
|
stackedRoutes: [
|
||||||
|
VWidget(path: ':roomid', widget: Chat(), stackedRoutes: [
|
||||||
VWidget(
|
VWidget(
|
||||||
path: '/signup',
|
path: 'encryption',
|
||||||
widget: SignUp(),
|
widget: ChatEncryptionSettings(),
|
||||||
buildTransition: _fadeTransition,
|
|
||||||
stackedRoutes: [
|
|
||||||
VWidget(
|
|
||||||
path: 'password/:username',
|
|
||||||
widget: SignUpPassword(),
|
|
||||||
buildTransition: _fadeTransition,
|
|
||||||
),
|
),
|
||||||
VWidget(
|
VWidget(
|
||||||
path: '/login',
|
path: 'invite',
|
||||||
widget: Login(),
|
widget: InvitationSelection(),
|
||||||
buildTransition: _fadeTransition,
|
),
|
||||||
|
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(
|
VNester(
|
||||||
path: '/rooms',
|
path: '/rooms',
|
||||||
widgetBuilder: (child) => TwoColumnLayout(
|
widgetBuilder: (child) => TwoColumnLayout(
|
||||||
|
@ -81,33 +107,12 @@ class AppRoutes {
|
||||||
widget: NewGroup(),
|
widget: NewGroup(),
|
||||||
buildTransition: _fadeTransition,
|
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(
|
VNester(
|
||||||
path: ':roomid',
|
path: ':roomid',
|
||||||
widgetBuilder: (child) => Chat(sideView: child),
|
widgetBuilder: (child) => SideViewLayout(
|
||||||
|
mainView: Chat(),
|
||||||
|
sideView: child,
|
||||||
|
),
|
||||||
buildTransition: _fadeTransition,
|
buildTransition: _fadeTransition,
|
||||||
nestedRoutes: [
|
nestedRoutes: [
|
||||||
VWidget(
|
VWidget(
|
||||||
|
@ -179,48 +184,31 @@ class AppRoutes {
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
},
|
];
|
||||||
if (columns == 1)
|
|
||||||
|
List<VRouteElement> get _homeRoutes => [
|
||||||
|
VWidget(path: '/', widget: LoadingView()),
|
||||||
VWidget(
|
VWidget(
|
||||||
path: '/rooms',
|
path: '/home',
|
||||||
widget: ChatList(),
|
widget: HomeserverPicker(),
|
||||||
|
buildTransition: _fadeTransition,
|
||||||
stackedRoutes: [
|
stackedRoutes: [
|
||||||
VWidget(path: ':roomid', widget: Chat(), stackedRoutes: [
|
|
||||||
VWidget(
|
VWidget(
|
||||||
path: 'encryption',
|
path: '/signup',
|
||||||
widget: ChatEncryptionSettings(),
|
widget: SignUp(),
|
||||||
|
buildTransition: _fadeTransition,
|
||||||
|
stackedRoutes: [
|
||||||
|
VWidget(
|
||||||
|
path: 'password/:username',
|
||||||
|
widget: SignUpPassword(),
|
||||||
|
buildTransition: _fadeTransition,
|
||||||
),
|
),
|
||||||
VWidget(
|
VWidget(
|
||||||
path: 'invite',
|
path: '/login',
|
||||||
widget: InvitationSelection(),
|
widget: Login(),
|
||||||
),
|
buildTransition: _fadeTransition,
|
||||||
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(),
|
|
||||||
),
|
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
];
|
];
|
||||||
|
@ -285,5 +273,5 @@ class AppRoutes {
|
||||||
FadeTransition(opacity: animation1, child: child);
|
FadeTransition(opacity: animation1, child: child);
|
||||||
|
|
||||||
FadeTransition Function(dynamic, dynamic, dynamic) get _dynamicTransition =>
|
FadeTransition Function(dynamic, dynamic, dynamic) get _dynamicTransition =>
|
||||||
columns > 1 ? _fadeTransition : null;
|
columnMode ? _fadeTransition : null;
|
||||||
}
|
}
|
||||||
|
|
|
@ -67,7 +67,7 @@ class FluffyChatApp extends StatefulWidget {
|
||||||
class _FluffyChatAppState extends State<FluffyChatApp> {
|
class _FluffyChatAppState extends State<FluffyChatApp> {
|
||||||
final GlobalKey<MatrixState> _matrix = GlobalKey<MatrixState>();
|
final GlobalKey<MatrixState> _matrix = GlobalKey<MatrixState>();
|
||||||
GlobalKey<VRouterState> _router;
|
GlobalKey<VRouterState> _router;
|
||||||
int columns;
|
bool columnMode;
|
||||||
String _initialUrl = '/';
|
String _initialUrl = '/';
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
|
@ -80,13 +80,13 @@ class _FluffyChatAppState extends State<FluffyChatApp> {
|
||||||
var newColumns =
|
var newColumns =
|
||||||
(constraints.maxWidth / AppConfig.columnWidth).floor();
|
(constraints.maxWidth / AppConfig.columnWidth).floor();
|
||||||
if (newColumns > 3) newColumns = 3;
|
if (newColumns > 3) newColumns = 3;
|
||||||
columns ??= newColumns;
|
columnMode ??= newColumns > 1;
|
||||||
_router ??= GlobalKey<VRouterState>();
|
_router ??= GlobalKey<VRouterState>();
|
||||||
if (columns != newColumns) {
|
if (columnMode != newColumns > 1) {
|
||||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||||
setState(() {
|
setState(() {
|
||||||
_initialUrl = _router.currentState.url;
|
_initialUrl = _router.currentState.url;
|
||||||
columns = newColumns;
|
columnMode = newColumns > 1;
|
||||||
_router = GlobalKey<VRouterState>();
|
_router = GlobalKey<VRouterState>();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -102,7 +102,7 @@ class _FluffyChatAppState extends State<FluffyChatApp> {
|
||||||
locale: kIsWeb
|
locale: kIsWeb
|
||||||
? Locale(html.window.navigator.language.split('-').first)
|
? Locale(html.window.navigator.language.split('-').first)
|
||||||
: null,
|
: null,
|
||||||
routes: AppRoutes(columns).routes,
|
routes: AppRoutes(columnMode).routes,
|
||||||
builder: (context, child) {
|
builder: (context, child) {
|
||||||
LoadingDialog.defaultTitle = L10n.of(context).loadingPleaseWait;
|
LoadingDialog.defaultTitle = L10n.of(context).loadingPleaseWait;
|
||||||
LoadingDialog.defaultBackLabel = L10n.of(context).close;
|
LoadingDialog.defaultBackLabel = L10n.of(context).close;
|
||||||
|
|
|
@ -654,29 +654,5 @@ class ChatController extends State<Chat> {
|
||||||
});
|
});
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) => ChatView(this);
|
||||||
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,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue