From d1fb443aa75c49b624c0669a4b964d9c9248fea9 Mon Sep 17 00:00:00 2001 From: mhead Date: Wed, 20 Jul 2022 19:53:00 +0530 Subject: [PATCH] feat: resize the left-hand sidebar --- .../workspace/application/home/home_bloc.dart | 81 ++++++++++--------- .../presentation/home/home_layout.dart | 2 + .../presentation/home/home_screen.dart | 23 ++++++ 3 files changed, 70 insertions(+), 36 deletions(-) diff --git a/frontend/app_flowy/lib/workspace/application/home/home_bloc.dart b/frontend/app_flowy/lib/workspace/application/home/home_bloc.dart index a4ddef0945..af637ea1c7 100644 --- a/frontend/app_flowy/lib/workspace/application/home/home_bloc.dart +++ b/frontend/app_flowy/lib/workspace/application/home/home_bloc.dart @@ -16,42 +16,48 @@ class HomeBloc extends Bloc { HomeBloc(UserProfilePB user, CurrentWorkspaceSettingPB workspaceSetting) : _listener = UserWorkspaceListener(userProfile: user), super(HomeState.initial(workspaceSetting)) { - on((event, emit) async { - await event.map( - initial: (_Initial value) { - _listener.start( - onAuthChanged: (result) => _authDidChanged(result), - onSettingUpdated: (result) { - result.fold( - (setting) => add(HomeEvent.didReceiveWorkspaceSetting(setting)), - (r) => Log.error(r), - ); - }, - ); - }, - showLoading: (e) async { - emit(state.copyWith(isLoading: e.isLoading)); - }, - setEditPannel: (e) async { - emit(state.copyWith(pannelContext: some(e.editContext))); - }, - dismissEditPannel: (value) async { - emit(state.copyWith(pannelContext: none())); - }, - forceCollapse: (e) async { - emit(state.copyWith(forceCollapse: e.forceCollapse)); - }, - didReceiveWorkspaceSetting: (_DidReceiveWorkspaceSetting value) { - emit(state.copyWith(workspaceSetting: value.setting)); - }, - unauthorized: (_Unauthorized value) { - emit(state.copyWith(unauthorized: true)); - }, - collapseMenu: (e) { - emit(state.copyWith(isMenuCollapsed: !state.isMenuCollapsed)); - }, - ); - }); + on( + (event, emit) async { + await event.map( + initial: (_Initial value) { + _listener.start( + onAuthChanged: (result) => _authDidChanged(result), + onSettingUpdated: (result) { + result.fold( + (setting) => add(HomeEvent.didReceiveWorkspaceSetting(setting)), + (r) => Log.error(r), + ); + }, + ); + }, + showLoading: (e) async { + emit(state.copyWith(isLoading: e.isLoading)); + }, + setEditPannel: (e) async { + emit(state.copyWith(pannelContext: some(e.editContext))); + }, + dismissEditPannel: (value) async { + emit(state.copyWith(pannelContext: none())); + }, + forceCollapse: (e) async { + emit(state.copyWith(forceCollapse: e.forceCollapse)); + }, + didReceiveWorkspaceSetting: (_DidReceiveWorkspaceSetting value) { + emit(state.copyWith(workspaceSetting: value.setting)); + }, + unauthorized: (_Unauthorized value) { + emit(state.copyWith(unauthorized: true)); + }, + collapseMenu: (e) { + emit(state.copyWith(isMenuCollapsed: !state.isMenuCollapsed)); + }, + editPannelResized: (e) { + final newOffset = (state.resizeOffset + e.offset).clamp(-50, 200).toDouble(); + emit(state.copyWith(resizeOffset: newOffset)); + }, + ); + }, + ); } @override @@ -79,6 +85,7 @@ class HomeEvent with _$HomeEvent { const factory HomeEvent.didReceiveWorkspaceSetting(CurrentWorkspaceSettingPB setting) = _DidReceiveWorkspaceSetting; const factory HomeEvent.unauthorized(String msg) = _Unauthorized; const factory HomeEvent.collapseMenu() = _CollapseMenu; + const factory HomeEvent.editPannelResized(double offset) = _EditPannelResized; } @freezed @@ -90,6 +97,7 @@ class HomeState with _$HomeState { required CurrentWorkspaceSettingPB workspaceSetting, required bool unauthorized, required bool isMenuCollapsed, + required double resizeOffset, }) = _HomeState; factory HomeState.initial(CurrentWorkspaceSettingPB workspaceSetting) => HomeState( @@ -99,5 +107,6 @@ class HomeState with _$HomeState { workspaceSetting: workspaceSetting, unauthorized: false, isMenuCollapsed: false, + resizeOffset: 0, ); } diff --git a/frontend/app_flowy/lib/workspace/presentation/home/home_layout.dart b/frontend/app_flowy/lib/workspace/presentation/home/home_layout.dart index 0405279851..e7e02b9767 100644 --- a/frontend/app_flowy/lib/workspace/presentation/home/home_layout.dart +++ b/frontend/app_flowy/lib/workspace/presentation/home/home_layout.dart @@ -27,6 +27,8 @@ class HomeLayout { menuWidth = Sizes.sideBarLg; } + menuWidth += homeBlocState.resizeOffset; + if (forceCollapse) { showMenu = false; } else { diff --git a/frontend/app_flowy/lib/workspace/presentation/home/home_screen.dart b/frontend/app_flowy/lib/workspace/presentation/home/home_screen.dart index f3a9f6773a..a084feca47 100644 --- a/frontend/app_flowy/lib/workspace/presentation/home/home_screen.dart +++ b/frontend/app_flowy/lib/workspace/presentation/home/home_screen.dart @@ -7,6 +7,7 @@ import 'package:flowy_sdk/log.dart'; import 'package:flowy_infra_ui/style_widget/container.dart'; import 'package:flowy_sdk/protobuf/flowy-user/protobuf.dart' show UserProfilePB; import 'package:flowy_sdk/protobuf/flowy-folder/protobuf.dart'; +import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:styled_widget/styled_widget.dart'; @@ -87,6 +88,7 @@ class _HomeScreenState extends State { context: context, state: state, ); + final homeMenuResizer = _buildHomeMenuResizer(context: context); final editPannel = _buildEditPannel( homeState: state, layout: layout, @@ -99,6 +101,7 @@ class _HomeScreenState extends State { homeMenu: menu, editPannel: editPannel, bubble: bubble, + homeMenuResizer: homeMenuResizer, ); }, ); @@ -147,12 +150,31 @@ class _HomeScreenState extends State { ); } + Widget _buildHomeMenuResizer({ + required BuildContext context, + }) { + return MouseRegion( + cursor: SystemMouseCursors.resizeLeftRight, + child: GestureDetector( + dragStartBehavior: DragStartBehavior.down, + onPanUpdate: ((details) { + context.read().add(HomeEvent.editPannelResized(details.delta.dx)); + }), + behavior: HitTestBehavior.translucent, + child: SizedBox( + width: 10, + height: MediaQuery.of(context).size.height, + )), + ); + } + Widget _layoutWidgets({ required HomeLayout layout, required Widget homeMenu, required Widget homeStack, required Widget editPannel, required Widget bubble, + required Widget homeMenuResizer, }) { return Stack( children: [ @@ -167,6 +189,7 @@ class _HomeScreenState extends State { .constrained(minWidth: 500) .positioned(left: layout.homePageLOffset, right: layout.homePageROffset, bottom: 0, top: 0, animate: true) .animate(layout.animDuration, Curves.easeOut), + homeMenuResizer.positioned(left: layout.homePageLOffset - 5), bubble .positioned( right: 20,