diff --git a/app_flowy/.vscode/settings.json b/app_flowy/.vscode/settings.json index 6f00a92abd..3af73866a3 100644 --- a/app_flowy/.vscode/settings.json +++ b/app_flowy/.vscode/settings.json @@ -17,5 +17,6 @@ "editor.wordWrapColumn": 120, "editor.minimap.maxColumn": 140, "prettier.printWidth": 140, - "editor.wordWrap": "wordWrapColumn" + "editor.wordWrap": "wordWrapColumn", + "dart.lineLength": 120 } \ No newline at end of file diff --git a/app_flowy/assets/images/editor/Hide menu.svg b/app_flowy/assets/images/editor/Hide menu.svg deleted file mode 100755 index ce88af8ea7..0000000000 --- a/app_flowy/assets/images/editor/Hide menu.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/app_flowy/assets/images/editor/Clock Alarm.svg b/app_flowy/assets/images/editor/clock_alarm.svg similarity index 100% rename from app_flowy/assets/images/editor/Clock Alarm.svg rename to app_flowy/assets/images/editor/clock_alarm.svg diff --git a/app_flowy/assets/images/editor/Drag Element.svg b/app_flowy/assets/images/editor/drag_element.svg similarity index 100% rename from app_flowy/assets/images/editor/Drag Element.svg rename to app_flowy/assets/images/editor/drag_element.svg diff --git a/app_flowy/assets/images/editor/Embed link.svg b/app_flowy/assets/images/editor/embed_link.svg similarity index 100% rename from app_flowy/assets/images/editor/Embed link.svg rename to app_flowy/assets/images/editor/embed_link.svg diff --git a/app_flowy/assets/images/editor/Full view.svg b/app_flowy/assets/images/editor/full_view.svg similarity index 100% rename from app_flowy/assets/images/editor/Full view.svg rename to app_flowy/assets/images/editor/full_view.svg diff --git a/app_flowy/assets/images/editor/list dropdown.svg b/app_flowy/assets/images/editor/list_dropdown.svg similarity index 100% rename from app_flowy/assets/images/editor/list dropdown.svg rename to app_flowy/assets/images/editor/list_dropdown.svg diff --git a/app_flowy/assets/images/editor/Multiselect.svg b/app_flowy/assets/images/editor/multi_select.svg similarity index 100% rename from app_flowy/assets/images/editor/Multiselect.svg rename to app_flowy/assets/images/editor/multi_select.svg diff --git a/app_flowy/assets/images/editor/Person-1.svg b/app_flowy/assets/images/editor/persoin_1.svg similarity index 100% rename from app_flowy/assets/images/editor/Person-1.svg rename to app_flowy/assets/images/editor/persoin_1.svg diff --git a/app_flowy/assets/images/editor/Show menu.svg b/app_flowy/assets/images/editor/show_menu.svg similarity index 100% rename from app_flowy/assets/images/editor/Show menu.svg rename to app_flowy/assets/images/editor/show_menu.svg diff --git a/app_flowy/assets/images/editor/Tag block.svg b/app_flowy/assets/images/editor/tag_block.svg similarity index 100% rename from app_flowy/assets/images/editor/Tag block.svg rename to app_flowy/assets/images/editor/tag_block.svg diff --git a/app_flowy/assets/images/editor/Timer Finish.svg b/app_flowy/assets/images/editor/timer_finish.svg similarity index 100% rename from app_flowy/assets/images/editor/Timer Finish.svg rename to app_flowy/assets/images/editor/timer_finish.svg diff --git a/app_flowy/assets/images/editor/Timer Start.svg b/app_flowy/assets/images/editor/timer_start.svg similarity index 100% rename from app_flowy/assets/images/editor/Timer Start.svg rename to app_flowy/assets/images/editor/timer_start.svg diff --git a/app_flowy/assets/images/editor/Toggle list.svg b/app_flowy/assets/images/editor/toggle_list.svg similarity index 100% rename from app_flowy/assets/images/editor/Toggle list.svg rename to app_flowy/assets/images/editor/toggle_list.svg diff --git a/app_flowy/lib/workspace/presentation/app/app_header.dart b/app_flowy/lib/workspace/presentation/app/app_header.dart index e38005b0c1..cd5db66e40 100644 --- a/app_flowy/lib/workspace/presentation/app/app_header.dart +++ b/app_flowy/lib/workspace/presentation/app/app_header.dart @@ -4,7 +4,6 @@ import 'package:flowy_infra/image.dart'; import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra_ui/style_widget/text.dart'; import 'package:flowy_infra_ui/widget/spacing.dart'; -import 'package:flowy_infra_ui/style_widget/text_button.dart'; import 'package:flowy_infra/flowy_icon_data_icons.dart'; import 'package:flowy_sdk/protobuf/flowy-workspace/app_create.pb.dart'; import 'package:flowy_sdk/protobuf/flowy-workspace/view_create.pb.dart'; @@ -23,65 +22,61 @@ class AppHeader extends StatelessWidget { @override Widget build(BuildContext context) { final theme = context.watch(); - return Row( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - InkWell( - onTap: () { - ExpandableController.of(context, - rebuildOnChange: false, required: true) - ?.toggle(); - }, - child: ExpandableIcon( - theme: ExpandableThemeData( - expandIcon: FlowyIconData.drop_down_show, - collapseIcon: FlowyIconData.drop_down_hide, - iconColor: theme.shader1, - iconSize: AppPageSize.expandedIconSize, - iconPadding: EdgeInsets.zero, - hasIcon: false, + return SizedBox( + height: 20, + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + InkWell( + onTap: () { + ExpandableController.of(context, rebuildOnChange: false, required: true)?.toggle(); + }, + child: ExpandableIcon( + theme: ExpandableThemeData( + expandIcon: FlowyIconData.drop_down_show, + collapseIcon: FlowyIconData.drop_down_hide, + iconColor: theme.shader1, + iconSize: AppPageSize.expandedIconSize, + iconPadding: EdgeInsets.zero, + hasIcon: false, + ), ), ), - ), - HSpace(AppPageSize.expandedIconRightSpace), - Expanded( - child: GestureDetector( - onTapDown: (_) { - ExpandableController.of(context, - rebuildOnChange: false, required: true) - ?.toggle(); - }, - child: FlowyText( - app.name, - fontSize: 12, - ), - )), + HSpace(AppPageSize.expandedIconRightSpace), + Expanded( + child: GestureDetector( + onTapDown: (_) { + ExpandableController.of(context, rebuildOnChange: false, required: true)?.toggle(); + }, + child: FlowyText.medium( + app.name, + fontSize: 12, + ), + )), - // FlowyIconButton( - // icon: const Icon(Icons.add), - // onPressed: () { - // debugPrint('add view'); - // FlowyOverlay.of(context) - // .insert(widget: Text('test'), identifier: 'identifier'); - // }, - // ), - PopupMenuButton( - iconSize: 16, - tooltip: 'create new view', - icon: svg("home/add"), - padding: EdgeInsets.zero, - onSelected: (viewType) => - _createView(viewType as ViewType, context), - itemBuilder: (context) => menuItemBuilder()) - ], + // FlowyIconButton( + // icon: const Icon(Icons.add), + // onPressed: () { + // debugPrint('add view'); + // FlowyOverlay.of(context) + // .insert(widget: Text('test'), identifier: 'identifier'); + // }, + // ), + PopupMenuButton( + iconSize: 16, + tooltip: 'create new view', + icon: svg("home/add"), + padding: EdgeInsets.zero, + onSelected: (viewType) => _createView(viewType as ViewType, context), + itemBuilder: (context) => menuItemBuilder()) + ], + ), ); } List menuItemBuilder() { - return ViewType.values - .where((element) => element != ViewType.Blank) - .map((ty) { + return ViewType.values.where((element) => element != ViewType.Blank).map((ty) { return PopupMenuItem( value: ty, child: Row( diff --git a/app_flowy/lib/workspace/presentation/app/app_page.dart b/app_flowy/lib/workspace/presentation/app/app_page.dart index 5c59c71ec3..7660ae0792 100644 --- a/app_flowy/lib/workspace/presentation/app/app_page.dart +++ b/app_flowy/lib/workspace/presentation/app/app_page.dart @@ -15,11 +15,10 @@ import 'package:styled_widget/styled_widget.dart'; import 'app_header.dart'; class AppPageSize { - static double expandedIconSize = 20; + static double expandedIconSize = 16; static double expandedIconRightSpace = 6; static double scale = 1; - static double get expandedPadding => - expandedIconSize * scale + expandedIconRightSpace; + static double get expandedPadding => expandedIconSize * scale + expandedIconRightSpace; } class ViewListData extends ChangeNotifier { diff --git a/app_flowy/lib/workspace/presentation/app/view_list_page.dart b/app_flowy/lib/workspace/presentation/app/view_list_page.dart index 2cd96d0d21..d793eeffc2 100644 --- a/app_flowy/lib/workspace/presentation/app/view_list_page.dart +++ b/app_flowy/lib/workspace/presentation/app/view_list_page.dart @@ -67,7 +67,7 @@ class ViewListPage extends StatelessWidget { ); return Padding( - padding: const EdgeInsets.symmetric(vertical: 2), + padding: const EdgeInsets.symmetric(vertical: 4), child: viewWidget, ); }).toList(growable: false); diff --git a/app_flowy/lib/workspace/presentation/home/home_sizes.dart b/app_flowy/lib/workspace/presentation/home/home_sizes.dart index b8ff68e038..395ede4347 100644 --- a/app_flowy/lib/workspace/presentation/home/home_sizes.dart +++ b/app_flowy/lib/workspace/presentation/home/home_sizes.dart @@ -1,5 +1,5 @@ class HomeSizes { - static double get menuTopBarHeight => 60; + static double get menuTopBarHeight => 48; static double get menuAddButtonHeight => 60; static double get topBarHeight => 60; static double get editPannelTopBarHeight => 60; diff --git a/app_flowy/lib/workspace/presentation/view/view_page.dart b/app_flowy/lib/workspace/presentation/view/view_page.dart index f225d99ebd..1c29a58061 100644 --- a/app_flowy/lib/workspace/presentation/view/view_page.dart +++ b/app_flowy/lib/workspace/presentation/view/view_page.dart @@ -1,10 +1,13 @@ +import 'package:flowy_infra/theme.dart'; import 'package:flowy_infra_ui/style_widget/hover.dart'; import 'package:flowy_infra_ui/style_widget/icon_button.dart'; +import 'package:flowy_infra_ui/style_widget/text.dart'; import 'package:flowy_infra_ui/widget/spacing.dart'; import 'package:flowy_sdk/protobuf/flowy-workspace/view_create.pb.dart'; import 'package:flutter/material.dart'; import 'package:app_flowy/workspace/domain/image.dart'; import 'package:app_flowy/workspace/presentation/app/app_page.dart'; +import 'package:provider/provider.dart'; import 'package:styled_widget/styled_widget.dart'; class ViewWidgetContext { @@ -21,16 +24,13 @@ class ViewPage extends StatelessWidget { final ViewWidgetContext viewCtx; final bool isSelected; final OpenViewCallback onOpen; - ViewPage( - {Key? key, - required this.viewCtx, - required this.onOpen, - required this.isSelected}) + ViewPage({Key? key, required this.viewCtx, required this.onOpen, required this.isSelected}) : super(key: viewCtx.valueKey()); @override Widget build(BuildContext context) { - final config = HoverDisplayConfig(hoverColor: Colors.grey.shade200); + final theme = context.watch(); + final config = HoverDisplayConfig(hoverColor: theme.bg3); return InkWell( onTap: _openView(context), child: FlowyHover( @@ -40,30 +40,37 @@ class ViewPage extends StatelessWidget { ); } - Widget _render( - BuildContext context, bool onHover, HoverDisplayConfig config) { - const double width = 22; + Widget _render(BuildContext context, bool onHover, HoverDisplayConfig config) { List children = [ SizedBox( - width: width, - height: width, - child: svgForViewType(viewCtx.view.viewType)), + width: 16, + height: 16, + child: svgForViewType(viewCtx.view.viewType), + ), const HSpace(6), - Text( + FlowyText.regular( viewCtx.view.name, - textAlign: TextAlign.start, - style: const TextStyle(fontSize: 15), + fontSize: 12, ), ]; if (onHover) { - _addedHover(children, width); + children.add(const Spacer()); + children.add(ViewMoreButton( + width: 16, + onPressed: () { + debugPrint('show view setting'); + }, + )); } - Widget widget = Row(children: children).padding( - vertical: 5, - left: AppPageSize.expandedPadding, - right: 5, + Widget widget = Container( + child: Row(children: children).padding( + left: AppPageSize.expandedPadding, + right: 12, + ), + height: 24, + alignment: Alignment.centerLeft, ); if (isSelected) { @@ -76,17 +83,4 @@ class ViewPage extends StatelessWidget { Function() _openView(BuildContext context) { return () => onOpen(viewCtx.view); } - - void _addedHover(List children, double hoverWidth) { - children.add(const Spacer()); - children.add(Align( - alignment: Alignment.center, - child: FlowyMoreButton( - width: hoverWidth, - onPressed: () { - debugPrint('show view setting'); - }, - ), - )); - } } diff --git a/app_flowy/lib/workspace/presentation/widgets/home_top_bar.dart b/app_flowy/lib/workspace/presentation/widgets/home_top_bar.dart index 9ef7773c7c..5faa589456 100644 --- a/app_flowy/lib/workspace/presentation/widgets/home_top_bar.dart +++ b/app_flowy/lib/workspace/presentation/widgets/home_top_bar.dart @@ -51,7 +51,7 @@ class HomeTopBar extends StatelessWidget { } Widget _renderMoreButton() { - return FlowyMoreButton( + return ViewMoreButton( width: 24, onPressed: () { debugPrint('show more'); @@ -79,11 +79,7 @@ class HomeTitle extends StatelessWidget { return Flexible( child: Row( children: [ - Image( - fit: BoxFit.scaleDown, - width: 15, - height: 15, - image: assetImageForViewType(type)), + Image(fit: BoxFit.scaleDown, width: 15, height: 15, image: assetImageForViewType(type)), const HSpace(6), FlowyText(title, fontSize: 16), ], diff --git a/app_flowy/lib/workspace/presentation/widgets/menu/menu_fav.dart b/app_flowy/lib/workspace/presentation/widgets/menu/menu_fav.dart new file mode 100644 index 0000000000..e69de29bb2 diff --git a/app_flowy/lib/workspace/presentation/widgets/menu/menu_list.dart b/app_flowy/lib/workspace/presentation/widgets/menu/menu_list.dart index 2d047d71a3..32c9475d16 100644 --- a/app_flowy/lib/workspace/presentation/widgets/menu/menu_list.dart +++ b/app_flowy/lib/workspace/presentation/widgets/menu/menu_list.dart @@ -23,8 +23,7 @@ class MenuList extends StatelessWidget { @override Widget build(BuildContext context) { return ExpandableTheme( - data: ExpandableThemeData( - useInkWell: true, animationDuration: Durations.medium), + data: ExpandableThemeData(useInkWell: true, animationDuration: Durations.medium), child: Expanded( child: ListView.separated( itemCount: menuItems.length, @@ -32,7 +31,7 @@ class MenuList extends StatelessWidget { if (index == 0) { return const VSpace(29); } else { - return const VSpace(9); + return const VSpace(24); } }, physics: const BouncingScrollPhysics(), diff --git a/app_flowy/lib/workspace/presentation/widgets/menu/menu_page.dart b/app_flowy/lib/workspace/presentation/widgets/menu/menu_page.dart index 126cacdbe3..2453391d88 100644 --- a/app_flowy/lib/workspace/presentation/widgets/menu/menu_page.dart +++ b/app_flowy/lib/workspace/presentation/widgets/menu/menu_page.dart @@ -3,6 +3,7 @@ import 'package:app_flowy/workspace/presentation/widgets/menu/menu_top_bar.dart' import 'package:dartz/dartz.dart'; import 'package:flowy_infra/size.dart'; import 'package:flowy_infra_ui/widget/error_page.dart'; +import 'package:flowy_infra_ui/widget/spacing.dart'; import 'package:flowy_sdk/protobuf/flowy-user/user_profile.pb.dart'; import 'package:flowy_sdk/protobuf/flowy-workspace/app_create.pb.dart'; import 'package:flutter/material.dart'; @@ -38,13 +39,10 @@ class HomeMenu extends StatelessWidget { return MultiBlocProvider( providers: [ BlocProvider( - create: (context) => - getIt(param1: user, param2: workspaceId) - ..add(const MenuEvent.initial())), + create: (context) => getIt(param1: user, param2: workspaceId)..add(const MenuEvent.initial())), BlocProvider( create: (context) => - getIt(param1: user, param2: workspaceId) - ..add(const MenuWatchEvent.started())), + getIt(param1: user, param2: workspaceId)..add(const MenuWatchEvent.started())), ], child: MultiBlocListener( listeners: [ @@ -76,6 +74,7 @@ class HomeMenu extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.start, children: [ _renderTopBar(context), + const VSpace(32), _renderMenuList(context), ], ).padding(horizontal: Insets.l), @@ -104,16 +103,12 @@ class HomeMenu extends StatelessWidget { Widget _renderNewAppButton(BuildContext context) { return NewAppButton( - press: (appName) => - context.read().add(MenuEvent.createApp(appName, desc: "")), + press: (appName) => context.read().add(MenuEvent.createApp(appName, desc: "")), ); } Widget _renderTopBar(BuildContext context) { - return SizedBox( - height: HomeSizes.menuTopBarHeight, - child: const MenuTopBar(), - ); + return const MenuTopBar(); } List menuItemsWithApps(Option> someApps) { diff --git a/app_flowy/lib/workspace/presentation/widgets/menu/menu_top_bar.dart b/app_flowy/lib/workspace/presentation/widgets/menu/menu_top_bar.dart index 1579b4ac17..b39159930f 100644 --- a/app_flowy/lib/workspace/presentation/widgets/menu/menu_top_bar.dart +++ b/app_flowy/lib/workspace/presentation/widgets/menu/menu_top_bar.dart @@ -9,19 +9,21 @@ class MenuTopBar extends StatelessWidget { Widget build(BuildContext context) { return BlocBuilder( builder: (context, state) { - return Row( - children: [ - svgWithSize("flowy_logo_with_text", const Size(92, 17)), - const Spacer(), - IconButton( - iconSize: 16, - icon: svg("home/hide_menu"), - alignment: Alignment.centerRight, - padding: EdgeInsets.zero, - onPressed: () => - context.read().add(const MenuEvent.collapse()), - ), - ], + return SizedBox( + height: 48, + child: Row( + children: [ + svgWithSize("flowy_logo_with_text", const Size(92, 17)), + const Spacer(), + IconButton( + iconSize: 16, + icon: svg("home/hide_menu"), + alignment: Alignment.centerRight, + padding: EdgeInsets.zero, + onPressed: () => context.read().add(const MenuEvent.collapse()), + ), + ], + ), ); }, ); diff --git a/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart b/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart index f3cc450fee..49276bdd77 100644 --- a/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart +++ b/app_flowy/packages/flowy_infra_ui/lib/style_widget/hover.dart @@ -23,17 +23,14 @@ class _FlowyHoverState extends State { @override Widget build(BuildContext context) { - final hoverColor = _onHover - ? widget.config.hoverColor - : Theme.of(context).colorScheme.background; + final hoverColor = _onHover ? widget.config.hoverColor : Theme.of(context).colorScheme.background; final config = widget.config.copyWith(hoverColor: hoverColor); return MouseRegion( cursor: SystemMouseCursors.click, onEnter: (p) => setOnHover(true), onExit: (p) => setOnHover(false), - child: FlowyHoverBackground( - config: config, child: widget.builder(context, _onHover)), + child: FlowyHoverBackground(config: config, child: widget.builder(context, _onHover)), ); } @@ -49,15 +46,16 @@ class HoverDisplayConfig { const HoverDisplayConfig( {this.borderColor = Colors.transparent, this.borderWidth = 0, - this.borderRadius = const BorderRadius.all(Radius.circular(8)), + this.borderRadius = const BorderRadius.all(Radius.circular(6)), this.hoverColor}); HoverDisplayConfig copyWith({Color? hoverColor}) { return HoverDisplayConfig( - borderColor: borderColor, - borderWidth: borderWidth, - borderRadius: borderRadius, - hoverColor: hoverColor); + borderColor: borderColor, + borderWidth: borderWidth, + borderRadius: borderRadius, + hoverColor: hoverColor, + ); } } diff --git a/app_flowy/packages/flowy_infra_ui/lib/style_widget/icon_button.dart b/app_flowy/packages/flowy_infra_ui/lib/style_widget/icon_button.dart index cbc4ebe9d2..64059a8f18 100644 --- a/app_flowy/packages/flowy_infra_ui/lib/style_widget/icon_button.dart +++ b/app_flowy/packages/flowy_infra_ui/lib/style_widget/icon_button.dart @@ -1,3 +1,4 @@ +import 'package:flowy_infra/image.dart'; import 'package:flutter/material.dart'; class FlowyIconButton extends StatelessWidget { @@ -32,12 +33,12 @@ class FlowyIconButton extends StatelessWidget { } } -class FlowyMoreButton extends StatelessWidget { +class ViewMoreButton extends StatelessWidget { final double width; final double? height; final VoidCallback? onPressed; - const FlowyMoreButton({ + const ViewMoreButton({ Key? key, this.height, this.onPressed, @@ -49,7 +50,7 @@ class FlowyMoreButton extends StatelessWidget { return FlowyIconButton( width: width, height: height, - icon: const Icon(Icons.more_vert), + icon: svg("editor/details"), onPressed: onPressed, ); } diff --git a/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart b/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart index b705c0f6ac..3dd93c73c8 100644 --- a/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart +++ b/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart @@ -6,13 +6,25 @@ class FlowyText extends StatelessWidget { final String title; final TextOverflow overflow; final double fontSize; + final FontWeight fontWeight; const FlowyText( this.title, { Key? key, this.overflow = TextOverflow.ellipsis, this.fontSize = 16, + this.fontWeight = FontWeight.w500, }) : super(key: key); + const FlowyText.medium(this.title, {Key? key, this.fontSize = 16, TextOverflow? overflow}) + : fontWeight = FontWeight.w500, + overflow = overflow ?? TextOverflow.ellipsis, + super(key: key); + + const FlowyText.regular(this.title, {Key? key, this.fontSize = 16, TextOverflow? overflow}) + : fontWeight = FontWeight.w400, + overflow = overflow ?? TextOverflow.ellipsis, + super(key: key); + @override Widget build(BuildContext context) { final theme = context.watch(); @@ -21,7 +33,7 @@ class FlowyText extends StatelessWidget { softWrap: false, style: TextStyle( color: theme.shader1, - fontWeight: FontWeight.w500, + fontWeight: fontWeight, fontSize: fontSize + 2, )); } diff --git a/app_flowy/pubspec.yaml b/app_flowy/pubspec.yaml index ad6cf7ad7b..f670162ae8 100644 --- a/app_flowy/pubspec.yaml +++ b/app_flowy/pubspec.yaml @@ -98,6 +98,7 @@ flutter: assets: - assets/images/ - assets/images/home/ + - assets/images/editor/ # - images/a_dot_ham.jpeg # An image asset can refer to one or more resolution-specific "variants", see