From ce9a218df8d91e2891789cfe8ad3b402dbb01823 Mon Sep 17 00:00:00 2001 From: appflowy Date: Sun, 25 Jul 2021 23:12:58 +0800 Subject: [PATCH] config menu by nested column --- .../presentation/home/home_layout.dart | 2 +- .../widgets/menu/create_app_dialog.dart | 65 +++++++ .../presentation/widgets/menu/menu.dart | 163 +++++++----------- app_flowy/packages/flowy_infra/lib/size.dart | 2 +- 4 files changed, 131 insertions(+), 101 deletions(-) create mode 100644 app_flowy/lib/workspace/presentation/widgets/menu/create_app_dialog.dart diff --git a/app_flowy/lib/workspace/presentation/home/home_layout.dart b/app_flowy/lib/workspace/presentation/home/home_layout.dart index 5b72593c9b..45a6806255 100644 --- a/app_flowy/lib/workspace/presentation/home/home_layout.dart +++ b/app_flowy/lib/workspace/presentation/home/home_layout.dart @@ -23,7 +23,7 @@ class HomeLayout { showEditPannel = homeBlocState.editContext.isSome(); - menuWidth = Sizes.sideBarSm; + menuWidth = Sizes.sideBarMed; if (context.widthPx >= PageBreaks.desktop) { menuWidth = Sizes.sideBarLg; } diff --git a/app_flowy/lib/workspace/presentation/widgets/menu/create_app_dialog.dart b/app_flowy/lib/workspace/presentation/widgets/menu/create_app_dialog.dart new file mode 100644 index 0000000000..ad68fdc0b9 --- /dev/null +++ b/app_flowy/lib/workspace/presentation/widgets/menu/create_app_dialog.dart @@ -0,0 +1,65 @@ +import 'package:app_flowy/startup/tasks/application_task.dart'; +import 'package:flowy_infra/size.dart'; +import 'package:flowy_infra/text_style.dart'; +import 'package:flowy_infra/theme.dart'; +import 'package:flowy_infra_ui/style_widget/styled_text_input.dart'; +import 'package:flowy_infra_ui/widget/buttons/ok_cancel_button.dart'; +import 'package:flowy_infra_ui/widget/dialog/dialog_context.dart'; +import 'package:flowy_infra_ui/widget/dialog/styled_dialogs.dart'; +import 'package:flowy_infra_ui/widget/spacing.dart'; +import 'package:flutter/material.dart'; +// ignore: implementation_imports +import 'package:provider/src/provider.dart'; +import 'package:textstyle_extensions/textstyle_extensions.dart'; + +// ignore: must_be_immutable +class CreateAppDialogContext extends DialogContext { + String appName; + final Function(String)? confirm; + + CreateAppDialogContext({this.appName = "", this.confirm}) + : super(identifier: 'CreateAppDialogContext'); + + @override + Widget buildWiget(BuildContext context) { + final theme = context.watch(); + return StyledDialog( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + ...[ + Text('Create App'.toUpperCase(), + style: TextStyles.T1.textColor(theme.bg1)), + VSpace(Insets.sm * 1.5), + // Container(color: theme.greyWeak.withOpacity(.35), height: 1), + VSpace(Insets.m * 1.5), + ], + StyledFormTextInput( + hintText: "App name", + onChanged: (text) { + appName = text; + }, + ), + SizedBox(height: Insets.l), + OkCancelButton( + onOkPressed: () { + if (confirm != null) { + confirm!(appName); + AppGlobals.nav.pop(); + } + }, + onCancelPressed: () { + AppGlobals.nav.pop(); + }, + ) + ], + ), + ); + } + + @override + List get props => [identifier]; + + @override + bool get barrierDismissable => false; +} diff --git a/app_flowy/lib/workspace/presentation/widgets/menu/menu.dart b/app_flowy/lib/workspace/presentation/widgets/menu/menu.dart index 6b211a968c..1712e32d0b 100644 --- a/app_flowy/lib/workspace/presentation/widgets/menu/menu.dart +++ b/app_flowy/lib/workspace/presentation/widgets/menu/menu.dart @@ -2,21 +2,16 @@ import 'package:app_flowy/workspace/application/menu/menu_bloc.dart'; import 'package:app_flowy/workspace/application/menu/menu_watch.dart'; import 'package:app_flowy/workspace/domain/page_stack/page_stack.dart'; import 'package:app_flowy/startup/startup.dart'; -import 'package:app_flowy/startup/tasks/application_task.dart'; import 'package:app_flowy/workspace/presentation/home/home_sizes.dart'; +import 'package:app_flowy/workspace/presentation/widgets/menu/create_app_dialog.dart'; import 'package:dartz/dartz.dart'; import 'package:flowy_infra/size.dart'; -import 'package:flowy_infra/text_style.dart'; -import 'package:flowy_infra/theme.dart'; -import 'package:flowy_infra_ui/style_widget/styled_text_input.dart'; -import 'package:flowy_infra_ui/widget/buttons/ok_cancel_button.dart'; import 'package:flowy_infra_ui/widget/dialog/styled_dialogs.dart'; import 'package:flowy_infra_ui/widget/error_page.dart'; import 'package:flowy_infra_ui/widget/spacing.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:styled_widget/styled_widget.dart'; -import 'package:textstyle_extensions/textstyle_extensions.dart'; import 'app_list.dart'; class HomeMenu extends StatelessWidget { @@ -61,16 +56,24 @@ class HomeMenu extends StatelessWidget { } Widget _renderBody(BuildContext context) { + // nested cloumn: https://siddharthmolleti.com/flutter-box-constraints-nested-column-s-row-s-3dfacada7361 return Container( - color: Theme.of(context).colorScheme.primaryVariant, + color: Theme.of(context).colorScheme.background, child: Column( mainAxisAlignment: MainAxisAlignment.start, children: [ - const MenuTopBar(), - _renderAppList(context), - _renderNewButton(context), + Expanded( + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + _renderTopBar(context), + _renderAppList(context), + ], + ).padding(horizontal: Insets.l), + ), + _renderNewAppButton(context), ], - ).padding(horizontal: Insets.sm), + ), ); } @@ -88,12 +91,19 @@ class HomeMenu extends StatelessWidget { ); } - Widget _renderNewButton(BuildContext context) { + Widget _renderNewAppButton(BuildContext context) { return NewAppButton( - createAppCallback: (appName) => + press: (appName) => context.read().add(MenuEvent.createApp(appName, desc: "")), ); } + + Widget _renderTopBar(BuildContext context) { + return SizedBox( + height: HomeSizes.menuTopBarHeight, + child: const MenuTopBar(), + ); + } } class MenuTopBar extends StatelessWidget { @@ -102,22 +112,27 @@ class MenuTopBar extends StatelessWidget { Widget build(BuildContext context) { return BlocBuilder( builder: (context, state) { - return SizedBox( - height: HomeSizes.menuTopBarHeight, - child: Row( - children: [ - const Text( - 'AppFlowy', - style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), - ).constrained(minWidth: 100), - const Spacer(), - IconButton( - icon: const Icon(Icons.arrow_left), - onPressed: () => - context.read().add(const MenuEvent.collapse()), - ), - ], - ), + return Row( + children: [ + const Image( + fit: BoxFit.cover, + width: 25, + height: 25, + image: AssetImage('assets/images/app_flowy_logo.jpg')), + const HSpace(8), + const Text( + 'AppFlowy', + style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), + ), + const Spacer(), + IconButton( + icon: const Icon(Icons.arrow_left), + alignment: Alignment.centerRight, + padding: EdgeInsets.zero, + onPressed: () => + context.read().add(const MenuEvent.collapse()), + ), + ], ); }, ); @@ -125,43 +140,43 @@ class MenuTopBar extends StatelessWidget { } class NewAppButton extends StatelessWidget { - final Function(String)? createAppCallback; + final Function(String)? press; - const NewAppButton({this.createAppCallback, Key? key}) : super(key: key); + const NewAppButton({this.press, Key? key}) : super(key: key); @override Widget build(BuildContext context) { - return SizedBox( + return Container( + decoration: BoxDecoration( + border: Border( + top: BorderSide(width: 1, color: Colors.grey.shade300), + ), + ), height: HomeSizes.menuAddButtonHeight, child: Row( mainAxisAlignment: MainAxisAlignment.start, children: [ - const Icon(Icons.add), - const SizedBox( - width: 10, - ), + const Icon(Icons.add_circle_rounded, size: 30), TextButton( onPressed: () async => await _showCreateAppDialog(context), - child: _buttonTitle(), + child: const Text( + 'New App', + style: TextStyle( + color: Colors.black, + fontWeight: FontWeight.bold, + fontSize: 20, + ), + ), ) ], - ), + ).padding(horizontal: Insets.l), ); } - Widget _buttonTitle() { - return const Text('New App', - style: TextStyle( - color: Colors.black, - fontWeight: FontWeight.bold, - fontSize: 20, - )); - } - Future _showCreateAppDialog(BuildContext context) async { await Dialogs.showWithContext(CreateAppDialogContext( confirm: (appName) { - if (appName.isNotEmpty && createAppCallback != null) { - createAppCallback!(appName); + if (appName.isNotEmpty && press != null) { + press!(appName); } }, ), context); @@ -169,53 +184,3 @@ class NewAppButton extends StatelessWidget { } //ignore: must_be_immutable -class CreateAppDialogContext extends DialogContext { - String appName; - final Function(String)? confirm; - - CreateAppDialogContext({this.appName = "", this.confirm}) - : super(identifier: 'CreateAppDialogContext'); - - @override - Widget buildWiget(BuildContext context) { - final theme = context.watch(); - return StyledDialog( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - ...[ - Text('Create App'.toUpperCase(), - style: TextStyles.T1.textColor(theme.accent1Darker)), - VSpace(Insets.sm * 1.5), - // Container(color: theme.greyWeak.withOpacity(.35), height: 1), - VSpace(Insets.m * 1.5), - ], - StyledFormTextInput( - hintText: "App name", - onChanged: (text) { - appName = text; - }, - ), - SizedBox(height: Insets.l), - OkCancelButton( - onOkPressed: () { - if (confirm != null) { - confirm!(appName); - AppGlobals.nav.pop(); - } - }, - onCancelPressed: () { - AppGlobals.nav.pop(); - }, - ) - ], - ), - ); - } - - @override - List get props => [identifier]; - - @override - bool get barrierDismissable => false; -} diff --git a/app_flowy/packages/flowy_infra/lib/size.dart b/app_flowy/packages/flowy_infra/lib/size.dart index 3ba4e066f9..0e688f9517 100644 --- a/app_flowy/packages/flowy_infra/lib/size.dart +++ b/app_flowy/packages/flowy_infra/lib/size.dart @@ -54,7 +54,7 @@ class Sizes { static double get sideBarSm => 200 * hitScale; - static double get sideBarMed => 220 * hitScale; + static double get sideBarMed => 240 * hitScale; static double get sideBarLg => 290 * hitScale; }