AppFlowy-IO/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-09-11 19:17:43 +03:00
Code Issues Projects Releases Wiki Activity

feat: improve hover color in dark mode (#5538)

Browse Source
This commit is contained in:
Lucas.Xu 2024-06-14 14:31:55 +08:00 committed by GitHub
parent cbe452a73d
commit 2a4d78b688
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 101 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/sidebar_space.dart
View File

@ -15,6 +15,7 @@ import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/sidebar_
import 'package:appflowy/workspace/presentation/home/menu/view/view_item.dart';
import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
import 'package:appflowy_backend/protobuf/flowy-user/protobuf.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart';
@ -75,6 +76,8 @@ class _Space extends StatefulWidget {
class _SpaceState extends State<_Space> {
final ValueNotifier<bool> isHovered = ValueNotifier(false);
final PropertyValueNotifier<bool> isExpandedNotifier =
PropertyValueNotifier(false);
@override
Widget build(BuildContext context) {
@ -93,12 +96,14 @@ class _SpaceState extends State<_Space> {
space: currentSpace,
onAdded: () => _showCreatePagePopup(context, currentSpace),
onCreateNewSpace: () => _showCreateSpaceDialog(context),
onCollapseAllPages: () => isExpandedNotifier.value = true,
),
MouseRegion(
onEnter: (_) => isHovered.value = true,
onExit: (_) => isHovered.value = false,
child: _Pages(
key: ValueKey(currentSpace.id),
isExpandedNotifier: isExpandedNotifier,
space: currentSpace,
isHovered: isHovered,
),
@ -156,10 +161,12 @@ class _Pages extends StatelessWidget {
super.key,
required this.space,
required this.isHovered,
required this.isExpandedNotifier,
});
final ViewPB space;
final ValueNotifier<bool> isHovered;
final PropertyValueNotifier<bool> isExpandedNotifier;
@override
Widget build(BuildContext context) {
@ -183,6 +190,7 @@ class _Pages extends StatelessWidget {
leftPadding: HomeSpaceViewSizes.leftPadding,
isFeedback: false,
isHovered: isHovered,
isExpandedNotifier: isExpandedNotifier,
onSelected: (viewContext, view) {
if (HardwareKeyboard.instance.isControlPressed) {
context.read<TabsBloc>().openTab(view);

3
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/sidebar_space_header.dart
View File

@ -22,12 +22,14 @@ class SidebarSpaceHeader extends StatefulWidget {
required this.space,
required this.onAdded,
required this.onCreateNewSpace,
required this.onCollapseAllPages,
required this.isExpanded,
});
final ViewPB space;
final VoidCallback onAdded;
final VoidCallback onCreateNewSpace;
final VoidCallback onCollapseAllPages;
final bool isExpanded;
@override
@ -156,6 +158,7 @@ class _SidebarSpaceHeaderState extends State<SidebarSpaceHeader> {
widget.onCreateNewSpace();
break;
case SpaceMoreActionType.collapseAllPages:
widget.onCollapseAllPages();
break;
case SpaceMoreActionType.delete:
_showDeleteSpaceDialog(context);

3
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/space/space_more_popup.dart
View File

@ -71,6 +71,7 @@ class SpaceMorePopup extends StatelessWidget {
SpaceMoreActionType.manage,
SpaceMoreActionType.divider,
SpaceMoreActionType.addNewSpace,
SpaceMoreActionType.collapseAllPages,
SpaceMoreActionType.divider,
SpaceMoreActionType.delete,
];
@ -155,7 +156,7 @@ class SpaceMoreActionTypeWrapper extends CustomActionCell {
height: 34,
padding: const EdgeInsets.symmetric(vertical: 2.0),
child: Opacity(
opacity: disable ? 0.5 : 1.0,
opacity: disable ? 0.3 : 1.0,
child: FlowyButton(
disable: disable,
margin: const EdgeInsets.symmetric(horizontal: 6),

134
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart
View File

@ -19,6 +19,7 @@ import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
import 'package:appflowy/workspace/presentation/widgets/rename_view_popover.dart';
import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@ -58,6 +59,7 @@ class ViewItem extends StatelessWidget {
this.leftIconBuilder,
this.rightIconsBuilder,
this.shouldLoadChildViews = true,
this.isExpandedNotifier,
});
final ViewPB view;
@ -109,6 +111,7 @@ class ViewItem extends StatelessWidget {
final ViewItemRightIconsBuilder? rightIconsBuilder;
final bool shouldLoadChildViews;
final PropertyValueNotifier<bool>? isExpandedNotifier;
@override
Widget build(BuildContext context) {
@ -144,6 +147,7 @@ class ViewItem extends StatelessWidget {
shouldRenderChildren: shouldRenderChildren,
leftIconBuilder: leftIconBuilder,
rightIconsBuilder: rightIconsBuilder,
isExpandedNotifier: isExpandedNotifier,
);
},
),
@ -153,7 +157,7 @@ class ViewItem extends StatelessWidget {
bool _isDragging = false;
class InnerViewItem extends StatelessWidget {
class InnerViewItem extends StatefulWidget {
const InnerViewItem({
super.key,
required this.view,
@ -176,6 +180,7 @@ class InnerViewItem extends StatelessWidget {
this.shouldRenderChildren = true,
required this.leftIconBuilder,
required this.rightIconsBuilder,
this.isExpandedNotifier,
});
final ViewPB view;
@ -204,46 +209,67 @@ class InnerViewItem extends StatelessWidget {
final ViewItemLeftIconBuilder? leftIconBuilder;
final ViewItemRightIconsBuilder? rightIconsBuilder;
final PropertyValueNotifier<bool>? isExpandedNotifier;
@override
State<InnerViewItem> createState() => _InnerViewItemState();
}
class _InnerViewItemState extends State<InnerViewItem> {
@override
void initState() {
super.initState();
widget.isExpandedNotifier?.addListener(_collapseAllPages);
}
@override
void dispose() {
widget.isExpandedNotifier?.removeListener(_collapseAllPages);
super.dispose();
}
@override
Widget build(BuildContext context) {
Widget child = SingleInnerViewItem(
view: view,
parentView: parentView,
level: level,
showActions: showActions,
spaceType: spaceType,
onSelected: onSelected,
onTertiarySelected: onTertiarySelected,
isExpanded: isExpanded,
isDraggable: isDraggable,
leftPadding: leftPadding,
isFeedback: isFeedback,
height: height,
isPlaceholder: isPlaceholder,
isHovered: isHovered,
leftIconBuilder: leftIconBuilder,
rightIconsBuilder: rightIconsBuilder,
view: widget.view,
parentView: widget.parentView,
level: widget.level,
showActions: widget.showActions,
spaceType: widget.spaceType,
onSelected: widget.onSelected,
onTertiarySelected: widget.onTertiarySelected,
isExpanded: widget.isExpanded,
isDraggable: widget.isDraggable,
leftPadding: widget.leftPadding,
isFeedback: widget.isFeedback,
height: widget.height,
isPlaceholder: widget.isPlaceholder,
isHovered: widget.isHovered,
leftIconBuilder: widget.leftIconBuilder,
rightIconsBuilder: widget.rightIconsBuilder,
);
// if the view is expanded and has child views, render its child views
if (isExpanded && shouldRenderChildren && childViews.isNotEmpty) {
final children = childViews.map((childView) {
if (widget.isExpanded &&
widget.shouldRenderChildren &&
widget.childViews.isNotEmpty) {
final children = widget.childViews.map((childView) {
return ViewItem(
key: ValueKey('${spaceType.name} ${childView.id}'),
parentView: view,
spaceType: spaceType,
isFirstChild: childView.id == childViews.first.id,
key: ValueKey('${widget.spaceType.name} ${childView.id}'),
parentView: widget.view,
spaceType: widget.spaceType,
isFirstChild: childView.id == widget.childViews.first.id,
view: childView,
level: level + 1,
onSelected: onSelected,
onTertiarySelected: onTertiarySelected,
isDraggable: isDraggable,
leftPadding: leftPadding,
isFeedback: isFeedback,
isPlaceholder: isPlaceholder,
isHovered: isHovered,
leftIconBuilder: leftIconBuilder,
rightIconsBuilder: rightIconsBuilder,
level: widget.level + 1,
onSelected: widget.onSelected,
onTertiarySelected: widget.onTertiarySelected,
isDraggable: widget.isDraggable,
leftPadding: widget.leftPadding,
isFeedback: widget.isFeedback,
isPlaceholder: widget.isPlaceholder,
isHovered: widget.isHovered,
leftIconBuilder: widget.leftIconBuilder,
rightIconsBuilder: widget.rightIconsBuilder,
);
}).toList();
@ -257,15 +283,15 @@ class InnerViewItem extends StatelessWidget {
}
// wrap the child with DraggableItem if isDraggable is true
if ((isDraggable || isPlaceholder) &&
!isReferencedDatabaseView(view, parentView)) {
if ((widget.isDraggable || widget.isPlaceholder) &&
!isReferencedDatabaseView(widget.view, widget.parentView)) {
child = DraggableViewItem(
isFirstChild: isFirstChild,
view: view,
isFirstChild: widget.isFirstChild,
view: widget.view,
onDragging: (isDragging) {
_isDragging = isDragging;
},
onMove: isPlaceholder
onMove: widget.isPlaceholder
? (from, to) => _moveViewCrossSection(context, from, to)
: null,
feedback: (context) {
@ -278,17 +304,17 @@ class InnerViewItem extends StatelessWidget {
borderRadius: BorderRadius.circular(8),
),
child: ViewItem(
view: view,
parentView: parentView,
spaceType: spaceType,
level: level,
onSelected: onSelected,
onTertiarySelected: onTertiarySelected,
view: widget.view,
parentView: widget.parentView,
spaceType: widget.spaceType,
level: widget.level,
onSelected: widget.onSelected,
onTertiarySelected: widget.onTertiarySelected,
isDraggable: false,
leftPadding: leftPadding,
leftPadding: widget.leftPadding,
isFeedback: true,
leftIconBuilder: leftIconBuilder,
rightIconsBuilder: rightIconsBuilder,
leftIconBuilder: widget.leftIconBuilder,
rightIconsBuilder: widget.rightIconsBuilder,
),
);
},
@ -305,18 +331,24 @@ class InnerViewItem extends StatelessWidget {
return child;
}
void _collapseAllPages() {
if (widget.isExpandedNotifier?.value == true) {
context.read<ViewBloc>().add(const ViewEvent.collapseAllPages());
}
}
void _moveViewCrossSection(
BuildContext context,
ViewPB from,
ViewPB to,
) {
if (isReferencedDatabaseView(view, parentView)) {
if (isReferencedDatabaseView(widget.view, widget.parentView)) {
return;
}
final fromSection = spaceType == FolderSpaceType.public
final fromSection = widget.spaceType == FolderSpaceType.public
? ViewSectionPB.Private
: ViewSectionPB.Public;
final toSection = spaceType == FolderSpaceType.public
final toSection = widget.spaceType == FolderSpaceType.public
? ViewSectionPB.Public
: ViewSectionPB.Private;
context.read<ViewBloc>().add(
@ -331,7 +363,7 @@ class InnerViewItem extends StatelessWidget {
context.read<ViewBloc>().add(
ViewEvent.updateViewVisibility(
from,
spaceType == FolderSpaceType.public,
widget.spaceType == FolderSpaceType.public,
),
);
}

5
frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_menu_element.dart
View File

@ -1,10 +1,9 @@
import 'package:flutter/material.dart';
import 'package:appflowy/workspace/application/settings/settings_dialog_bloc.dart';
import 'package:flowy_infra/size.dart';
import 'package:flowy_infra/theme_extension.dart';
import 'package:flowy_infra_ui/style_widget/hover.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flutter/material.dart';
class SettingsMenuElement extends StatelessWidget {
const SettingsMenuElement({
@ -28,7 +27,7 @@ class SettingsMenuElement extends StatelessWidget {
isSelected: () => page == selectedPage,
resetHoverOnRebuild: false,
style: HoverStyle(
hoverColor: AFThemeExtension.of(context).greySelect,
hoverColor: AFThemeExtension.of(context).greyHover,
borderRadius: BorderRadius.circular(4),
),
builder: (_, isHovering) => ListTile(

2
frontend/appflowy_flutter/lib/workspace/presentation/widgets/more_view_actions/more_view_actions.dart
View File

@ -103,7 +103,7 @@ class _MoreViewActionsState extends State<MoreViewActions> {
FlowySvgs.three_dots_s,
size: const Size.square(18),
color: isHovering
? Theme.of(context).colorScheme.onSecondary
? Theme.of(context).colorScheme.onSurface
: Theme.of(context).iconTheme.color,
),
),

4
frontend/appflowy_flutter/packages/flowy_infra/lib/colorscheme/default_colorscheme.dart
View File

@ -117,10 +117,10 @@ class DefaultColorScheme extends FlowyColorScheme {
hint: const Color(0xFF59647a),
primary: _darkMain2,
onPrimary: _darkShader1,
hoverBG1: _darkMain1,
hoverBG1: const Color(0x1AFFFFFF),
hoverBG2: _darkMain1,
hoverBG3: _darkShader3,
hoverFG: _darkShader1,
hoverFG: const Color(0xE5FFFFFF),
questionBubbleBG: _darkShader3,
progressBarBGColor: _darkShader3,
toolbarColor: _darkInput,