fix: Layouts

lib/config/routes.dart

@@ -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',
+          path: '/rooms',
-          widget: HomeserverPicker(),
+          widget: ChatList(),
-          buildTransition: _fadeTransition,
           stackedRoutes: [
+            VWidget(path: ':roomid', widget: Chat(), stackedRoutes: [
               VWidget(
-                path: '/signup',
+                path: 'encryption',
-                widget: SignUp(),
+                widget: ChatEncryptionSettings(),
-                buildTransition: _fadeTransition,
+              ),
-                stackedRoutes: [
               VWidget(
-                    path: 'password/:username',
+                path: 'invite',
-                    widget: SignUpPassword(),
+                widget: InvitationSelection(),
-                    buildTransition: _fadeTransition,
               ),
               VWidget(
-                    path: '/login',
+                path: 'details',
-                    widget: Login(),
+                widget: ChatDetails(),
-                    buildTransition: _fadeTransition,
+                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',
+          path: '/home',
-            widget: ChatList(),
+          widget: HomeserverPicker(),
+          buildTransition: _fadeTransition,
           stackedRoutes: [
-              VWidget(path: ':roomid', widget: Chat(), stackedRoutes: [
             VWidget(
-                  path: 'encryption',
+                path: '/signup',
-                  widget: ChatEncryptionSettings(),
+                widget: SignUp(),
-                ),
+                buildTransition: _fadeTransition,
+                stackedRoutes: [
                   VWidget(
-                  path: 'invite',
+                    path: 'password/:username',
-                  widget: InvitationSelection(),
+                    widget: SignUpPassword(),
+                    buildTransition: _fadeTransition,
                   ),
                   VWidget(
-                  path: 'details',
+                    path: '/login',
-                  widget: ChatDetails(),
+                    widget: Login(),
-                  stackedRoutes: _chatDetailsRoutes,
+                    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;
 }

lib/main.dart

@@ -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;

lib/pages/chat.dart

@@ -654,29 +654,5 @@ class ChatController extends State<Chat> {
       });
 
   @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,
-              ),
-            ],
-          );
-  }
 }

lib/widgets/layouts/side_view_layout.dart

@@ -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,
+                  ),
+                ],
+              );
+  }
+}