From 7deccb421cb1c4d8f7fd1b46bdf96f84ccbc3e07 Mon Sep 17 00:00:00 2001 From: Abhishek Shroff Date: Wed, 13 Nov 2024 12:58:43 +0530 Subject: [PATCH] [client] streamline layouts --- client/lib/ui/app/app_layout.dart | 55 ++++++++++-------- client/lib/ui/app/app_layout_manager.dart | 41 -------------- client/lib/ui/app/nav_list.dart | 69 ++++++++++------------- client/lib/ui/explorer/explorer_view.dart | 19 +------ 4 files changed, 63 insertions(+), 121 deletions(-) delete mode 100644 client/lib/ui/app/app_layout_manager.dart diff --git a/client/lib/ui/app/app_layout.dart b/client/lib/ui/app/app_layout.dart index 3ba17d7d..318cc77f 100644 --- a/client/lib/ui/app/app_layout.dart +++ b/client/lib/ui/app/app_layout.dart @@ -3,41 +3,31 @@ import 'package:flutter_state_notifier/flutter_state_notifier.dart'; import 'package:phylum/libphylum/phylum_account.dart'; import 'package:phylum/ui/app/app_actions.dart'; import 'package:phylum/ui/app/fab_action.dart'; -import 'package:phylum/ui/app/app_layout_manager.dart'; import 'package:phylum/ui/app/nav_list.dart'; import 'package:phylum/ui/explorer/explorer_view.dart'; import 'package:phylum/ui/explorer/explorer_view_controller.dart'; import 'package:phylum/ui/explorer/path_view.dart'; +import 'package:phylum/ui/explorer/resource_info_view.dart'; import 'package:provider/provider.dart'; -class AppLayout extends StatelessWidget { - const AppLayout({super.key}); +class AppLayout { + const AppLayout(); static Widget create(String folderId) { return MultiProvider( providers: [ - StateNotifierProvider(create: (context) => AppLayoutManager()), StateNotifierProvider( create: (context) => ExplorerViewController(account: context.read(), folderId: folderId), ), ], builder: (context, child) { - final manager = context.read(); - final platform = Theme.of(context).platform; + // final platform = Theme.of(context).platform; final size = MediaQuery.sizeOf(context); - Future.microtask(() => manager.update(platform, size)); - return child!; - }, - child: AppActions(child: AppLayout()), - ); - } - @override - Widget build(BuildContext context) { - return Builder(builder: (context) { - final layout = context.watch(); - return layout.type.isExpanded ? ExpandedAppLayout() : CollapsedAppLayout(); - }); + final layout = size.width <= 600 ? CollapsedAppLayout() : ExpandedAppLayout(large: size.width > 1200); + return AppActions(child: layout); + }, + ); } } @@ -82,12 +72,13 @@ class CollapsedAppLayout extends StatelessWidget { } class ExpandedAppLayout extends StatelessWidget { - const ExpandedAppLayout({super.key}); + final bool large; + const ExpandedAppLayout({super.key, required this.large}); @override Widget build(BuildContext context) { - final layout = context.watch(); - final sidebarWidth = layout.type == LayoutType.expandedLarge ? 300.0 : 240.0; + final sidebarWidth = large ? 288.0 : 216.0; + final infoWidth = large ? 360.0 : 264.0; return Scaffold( appBar: AppBar( @@ -100,13 +91,29 @@ class ExpandedAppLayout extends StatelessWidget { ), body: Row( children: [ - SizedBox(width: sidebarWidth, child: NavList(showFab: true)), + SizedBox( + width: sidebarWidth, + child: Card( + elevation: 0, + margin: const EdgeInsets.only(left: 16, bottom: 16), + child: NavList(showFab: true), + ), + ), Expanded( - child: Padding( - padding: const EdgeInsets.only(left: 16, right: 16, bottom: 16), + child: Card( + elevation: 0, + margin: const EdgeInsets.only(left: 16, right: 16, bottom: 16), child: const ExplorerView(), ), ), + SizedBox( + width: infoWidth, + child: Card( + elevation: 0, + margin: const EdgeInsets.only(right: 16, bottom: 16), + child: ResourceInfoView(), + ), + ), ], ), ); diff --git a/client/lib/ui/app/app_layout_manager.dart b/client/lib/ui/app/app_layout_manager.dart deleted file mode 100644 index b08e8dd8..00000000 --- a/client/lib/ui/app/app_layout_manager.dart +++ /dev/null @@ -1,41 +0,0 @@ -import 'dart:ui'; - -import 'package:flutter/foundation.dart'; -import 'package:state_notifier/state_notifier.dart'; - -enum LayoutType { - collapsed, - expandedSmall, - expandedLarge; - - bool get isExpanded => this == LayoutType.expandedSmall || this == LayoutType.expandedLarge; -} - -class AppLayoutState { - final LayoutType type; - final bool touchUi; - - AppLayoutState({required this.type, required this.touchUi}); - - @override - bool operator ==(Object other) { - return other is AppLayoutState && other.type == type && other.touchUi == touchUi; - } - - @override - int get hashCode => type.hashCode ^ touchUi.hashCode; -} - -class AppLayoutManager extends StateNotifier { - AppLayoutManager() : super(AppLayoutState(type: LayoutType.collapsed, touchUi: true)); - - void update(TargetPlatform platform, Size size) { - final type = size.width < 600 - ? LayoutType.collapsed - : size.width <= 1200 - ? LayoutType.expandedSmall - : LayoutType.expandedLarge; - final touchUi = platform == TargetPlatform.android || platform == TargetPlatform.iOS; - state = AppLayoutState(type: type, touchUi: touchUi); - } -} diff --git a/client/lib/ui/app/nav_list.dart b/client/lib/ui/app/nav_list.dart index 262da6ef..e91fcab2 100644 --- a/client/lib/ui/app/nav_list.dart +++ b/client/lib/ui/app/nav_list.dart @@ -11,46 +11,39 @@ class NavList extends StatelessWidget { @override Widget build(BuildContext context) { return ExcludeFocusTraversal( - child: Card( - elevation: 0, - margin: const EdgeInsets.only(left: 16, bottom: 16), - child: Padding( - padding: const EdgeInsets.all(12.0), - child: ListView( - children: [ - if (showFab) - Padding( - padding: const EdgeInsets.only(bottom: 16), - child: PopupMenuButton( - tooltip: 'Create', - position: PopupMenuPosition.under, - itemBuilder: (context) => [ - for (final action in popupMenuActions) - if (action == null) - const PopupMenuItem(enabled: false, height: 16, child: Divider()) - else - PopupMenuItem(child: Text(action.descripiton), onTap: () => Actions.maybeInvoke(context, action.intent)), - ], - child: FloatingActionButton.extended( - icon: const Icon(Icons.add), label: const Text('New'), elevation: 0, enableFeedback: false, onPressed: null), - ), - ), - ListTile( - leading: const Icon(Icons.home), - title: const Text('Home'), - onTap: () => Actions.maybeInvoke(context, const NavHomeIntent()), + child: ListView( + children: [ + if (showFab) + Padding( + padding: const EdgeInsets.all(16), + child: PopupMenuButton( + tooltip: 'Create', + position: PopupMenuPosition.under, + itemBuilder: (context) => [ + for (final action in popupMenuActions) + if (action == null) + const PopupMenuItem(enabled: false, height: 16, child: Divider()) + else + PopupMenuItem(child: Text(action.descripiton), onTap: () => Actions.maybeInvoke(context, action.intent)), + ], + child: FloatingActionButton.extended( + icon: const Icon(Icons.add), label: const Text('New'), elevation: 0, enableFeedback: false, onPressed: null), ), - const Divider(), - const DownloadButton(), - const ServerStatusButton(), - ListTile( - leading: const Icon(Icons.settings), - title: const Text('Settings'), - onTap: () {}, - ), - ], + ), + ListTile( + leading: const Icon(Icons.home), + title: const Text('Home'), + onTap: () => Actions.maybeInvoke(context, const NavHomeIntent()), ), - ), + const Divider(), + const DownloadButton(), + const ServerStatusButton(), + ListTile( + leading: const Icon(Icons.settings), + title: const Text('Settings'), + onTap: () {}, + ), + ], ), ); } diff --git a/client/lib/ui/explorer/explorer_view.dart b/client/lib/ui/explorer/explorer_view.dart index 3af4b5d4..5840f5ba 100644 --- a/client/lib/ui/explorer/explorer_view.dart +++ b/client/lib/ui/explorer/explorer_view.dart @@ -1,8 +1,6 @@ import 'package:flutter/material.dart'; import 'package:phylum/app_shortcuts.dart'; -import 'package:phylum/ui/app/app_layout_manager.dart'; import 'package:phylum/ui/explorer/paste_action_handler.dart'; -import 'package:phylum/ui/explorer/resource_info_view.dart'; import 'package:provider/provider.dart'; import 'explorer_view_controller.dart'; @@ -14,28 +12,13 @@ class ExplorerView extends StatelessWidget { @override Widget build(BuildContext context) { - final layout = context.watch(); return Actions( actions: { NextFocusIntent: CallbackAction(onInvoke: (i) => null), PreviousFocusIntent: CallbackAction(onInvoke: (i) => null), PasteFromClipboardIntent: CallbackAction(onInvoke: (PasteFromClipboardIntent i) => handlePasteAction(i, context)), }, - child: layout.type.isExpanded - ? Row( - children: [ - Expanded(child: Card(elevation: 0, child: buildPage(context))), - SizedBox( - width: layout.type == LayoutType.expandedLarge ? 360 : 300, - child: Card( - elevation: 0, - margin: EdgeInsets.only(left: 16), - child: ResourceInfoView(), - ), - ) - ], - ) - : buildPage(context), + child: buildPage(context), ); }