Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: make sidebar resizing follow cursor more closely (#1202)

Browse Source 
* fix: make sidebar resizing follow cursor more closely

* fix: don't animate sidebar size changes when dragging
This commit is contained in:
Richard Shiue 2022-10-06 21:31:52 +08:00 committed by GitHub
parent 5a5f5eceb5
commit a4a88959fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 55 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/app_flowy/lib/workspace/application/home/home_bloc.dart
View File

@ -1,5 +1,6 @@
import 'package:app_flowy/user/application/user_listener.dart';
import 'package:app_flowy/workspace/application/edit_panel/edit_context.dart';
import 'package:flowy_infra/time/duration.dart';
import 'package:flowy_sdk/log.dart';
import 'package:flowy_sdk/protobuf/flowy-error-code/code.pb.dart';
import 'package:flowy_sdk/protobuf/flowy-error/errors.pb.dart';
@ -50,13 +51,24 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
unauthorized: (_Unauthorized value) {
emit(state.copyWith(unauthorized: true));
},
collapseMenu: (e) {
collapseMenu: (_CollapseMenu e) {
emit(state.copyWith(isMenuCollapsed: !state.isMenuCollapsed));
},
editPanelResized: (e) {
final newOffset =
(state.resizeOffset + e.offset).clamp(-50, 200).toDouble();
emit(state.copyWith(resizeOffset: newOffset));
editPanelResizeStart: (_EditPanelResizeStart e) {
emit(state.copyWith(
resizeType: MenuResizeType.drag,
resizeStart: state.resizeOffset,
));
},
editPanelResized: (_EditPanelResized e) {
final newPosition =
(e.offset + state.resizeStart).clamp(-50, 200).toDouble();
if (state.resizeOffset != newPosition) {
emit(state.copyWith(resizeOffset: newPosition));
}
},
editPanelResizeEnd: (_EditPanelResizeEnd e) {
emit(state.copyWith(resizeType: MenuResizeType.slide));
},
);
},
@ -78,6 +90,22 @@ class HomeBloc extends Bloc<HomeEvent, HomeState> {
}
}
enum MenuResizeType {
slide,
drag,
}
extension MenuResizeTypeExtension on MenuResizeType {
Duration duration() {
switch (this) {
case MenuResizeType.drag:
return 30.milliseconds;
case MenuResizeType.slide:
return 350.milliseconds;
}
}
}
@freezed
class HomeEvent with _$HomeEvent {
const factory HomeEvent.initial() = _Initial;
@ -91,6 +119,8 @@ class HomeEvent with _$HomeEvent {
const factory HomeEvent.unauthorized(String msg) = _Unauthorized;
const factory HomeEvent.collapseMenu() = _CollapseMenu;
const factory HomeEvent.editPanelResized(double offset) = _EditPanelResized;
const factory HomeEvent.editPanelResizeStart() = _EditPanelResizeStart;
const factory HomeEvent.editPanelResizeEnd() = _EditPanelResizeEnd;
}
@freezed
@ -103,6 +133,8 @@ class HomeState with _$HomeState {
required bool unauthorized,
required bool isMenuCollapsed,
required double resizeOffset,
required double resizeStart,
required MenuResizeType resizeType,
}) = _HomeState;
factory HomeState.initial(CurrentWorkspaceSettingPB workspaceSetting) =>
@ -114,5 +146,7 @@ class HomeState with _$HomeState {
unauthorized: false,
isMenuCollapsed: false,
resizeOffset: 0,
resizeStart: 0,
resizeType: MenuResizeType.slide,
);
}

3
frontend/app_flowy/lib/workspace/presentation/home/home_layout.dart
View File

@ -2,7 +2,6 @@ import 'dart:io' show Platform;
import 'package:app_flowy/workspace/application/home/home_bloc.dart';
import 'package:flowy_infra/size.dart';
import 'package:flowy_infra/time/duration.dart';
import 'package:flutter/material.dart';
// ignore: import_of_legacy_library_into_null_safe
import 'package:sized_context/sized_context.dart';
@ -44,7 +43,7 @@ class HomeLayout {
homePageLOffset = (showMenu && !menuIsDrawer) ? menuWidth : 0.0;
menuSpacing = !showMenu && Platform.isMacOS ? 80.0 : 0.0;
animDuration = .35.seconds;
animDuration = homeBlocState.resizeType.duration();
editPanelWidth = HomeSizes.editPanelWidth;
homePageROffset = showEditPanel ? editPanelWidth : 0;

19
frontend/app_flowy/lib/workspace/presentation/home/home_screen.dart
View File

@ -176,11 +176,18 @@ class _HomeScreenState extends State<HomeScreen> {
cursor: SystemMouseCursors.resizeLeftRight,
child: GestureDetector(
dragStartBehavior: DragStartBehavior.down,
onPanUpdate: ((details) {
context
onHorizontalDragStart: (details) => context
.read<HomeBloc>()
.add(HomeEvent.editPanelResized(details.delta.dx));
}),
.add(const HomeEvent.editPanelResizeStart()),
onHorizontalDragUpdate: (details) => context
.read<HomeBloc>()
.add(HomeEvent.editPanelResized(details.localPosition.dx)),
onHorizontalDragEnd: (details) => context
.read<HomeBloc>()
.add(const HomeEvent.editPanelResizeEnd()),
onHorizontalDragCancel: () => context
.read<HomeBloc>()
.add(const HomeEvent.editPanelResizeEnd()),
behavior: HitTestBehavior.translucent,
child: SizedBox(
width: 10,
@ -208,7 +215,6 @@ class _HomeScreenState extends State<HomeScreen> {
top: 0,
animate: true)
.animate(layout.animDuration, Curves.easeOut),
homeMenuResizer.positioned(left: layout.homePageLOffset - 5),
bubble
.positioned(
right: 20,
@ -236,6 +242,9 @@ class _HomeScreenState extends State<HomeScreen> {
bottom: 0,
animate: true)
.animate(layout.animDuration, Curves.easeOut),
homeMenuResizer
.positioned(left: layout.homePageLOffset - 5)
.animate(layout.animDuration, Curves.easeOut),
],
);
}