fix: improve sidebar UI (#5453)

* fix: revert dark main color * fix: workspace name font size * fix: only show collapse button when hovering the sidebar * fix: remove expand button after workspace name * fix: change settings icon opactiy to 0.7 * chore: replace favorite icon * chore: add arrow icon after section name * chore: replace trash bin icon * chore: adjust collapse icon padding * feat: redesign question bubble * fix: replace favorite icon * fix: remove trash button padding * chore: replace hover color * feat: add more padding to tooltip * feat: add hover effect to arrow icon * feat: add hover effect to add view button * fix: view title color * feat: replace question bubble * feat: replace default page icon * fix: header icon size * fix: add view button padding * fix: unable to insert default image on desktop * fix: notification button size issue * fix: workspace icon size * feat: add a divider between favorite space and add new page button
AppFlowy-IO · Jun 4, 2024 · 03e8dba · 03e8dba
1 parent d5cfd05
commit 03e8dba
Show file tree

Hide file tree

Showing 46 changed files with 423 additions and 241 deletions.
diff --git a/frontend/appflowy_flutter/lib/core/frameless_window.dart b/frontend/appflowy_flutter/lib/core/frameless_window.dart
@@ -127,7 +127,7 @@ class MoveWindowDetectorState extends State<MoveWindowDetector> {
         onPressed: () => context
             .read<HomeSettingBloc>()
             .add(const HomeSettingEvent.collapseMenu()),
-        iconPadding: const EdgeInsets.fromLTRB(4, 4, 4, 4),
+        iconPadding: const EdgeInsets.all(4.0),
         icon: context.read<HomeSettingBloc>().state.isMenuCollapsed
             ? const FlowySvg(FlowySvgs.show_menu_s)
             : const FlowySvg(FlowySvgs.hide_menu_m),

diff --git a/frontend/appflowy_flutter/lib/plugins/database/board/board.dart b/frontend/appflowy_flutter/lib/plugins/database/board/board.dart
@@ -19,7 +19,7 @@ class BoardPluginBuilder implements PluginBuilder {
   String get menuName => LocaleKeys.board_menuName.tr();
 
   @override
-  FlowySvgData get icon => FlowySvgs.board_s;
+  FlowySvgData get icon => FlowySvgs.icon_board_s;
 
   @override
   PluginType get pluginType => PluginType.board;

diff --git a/frontend/appflowy_flutter/lib/plugins/database/calendar/calendar.dart b/frontend/appflowy_flutter/lib/plugins/database/calendar/calendar.dart
@@ -2,8 +2,8 @@ import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database/tab_bar/tab_bar_view.dart';
 import 'package:appflowy/startup/plugin/plugin.dart';
-import 'package:easy_localization/easy_localization.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:easy_localization/easy_localization.dart';
 
 class CalendarPluginBuilder extends PluginBuilder {
   @override
@@ -19,7 +19,7 @@ class CalendarPluginBuilder extends PluginBuilder {
   String get menuName => LocaleKeys.calendar_menuName.tr();
 
   @override
-  FlowySvgData get icon => FlowySvgs.date_s;
+  FlowySvgData get icon => FlowySvgs.icon_calendar_s;
 
   @override
   PluginType get pluginType => PluginType.calendar;

diff --git a/frontend/appflowy_flutter/lib/plugins/database/grid/grid.dart b/frontend/appflowy_flutter/lib/plugins/database/grid/grid.dart
@@ -2,8 +2,8 @@ import 'package:appflowy/generated/flowy_svgs.g.dart';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database/tab_bar/tab_bar_view.dart';
 import 'package:appflowy/startup/plugin/plugin.dart';
-import 'package:easy_localization/easy_localization.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
+import 'package:easy_localization/easy_localization.dart';
 
 class GridPluginBuilder implements PluginBuilder {
   @override
@@ -19,7 +19,7 @@ class GridPluginBuilder implements PluginBuilder {
   String get menuName => LocaleKeys.grid_menuName.tr();
 
   @override
-  FlowySvgData get icon => FlowySvgs.grid_s;
+  FlowySvgData get icon => FlowySvgs.icon_grid_s;
 
   @override
   PluginType get pluginType => PluginType.grid;

diff --git a/frontend/appflowy_flutter/lib/plugins/database_document/database_document_plugin.dart b/frontend/appflowy_flutter/lib/plugins/database_document/database_document_plugin.dart
@@ -44,7 +44,7 @@ class DatabaseDocumentPluginBuilder extends PluginBuilder {
   String get menuName => LocaleKeys.document_menuName.tr();
 
   @override
-  FlowySvgData get icon => FlowySvgs.document_s;
+  FlowySvgData get icon => FlowySvgs.icon_document_s;
 
   @override
   PluginType get pluginType => PluginType.databaseDocument;

diff --git a/frontend/appflowy_flutter/lib/plugins/document/document.dart b/frontend/appflowy_flutter/lib/plugins/document/document.dart
@@ -37,7 +37,7 @@ class DocumentPluginBuilder extends PluginBuilder {
   String get menuName => LocaleKeys.document_menuName.tr();
 
   @override
-  FlowySvgData get icon => FlowySvgs.document_s;
+  FlowySvgData get icon => FlowySvgs.icon_document_s;
 
   @override
   PluginType get pluginType => PluginType.document;
@@ -148,7 +148,7 @@ class DocumentPluginWidgetBuilder extends PluginWidgetBuilder
               ? [
                   DocumentCollaborators(
                     key: ValueKey('collaborators_${view.id}'),
-                    width: 150,
+                    width: 120,
                     height: 32,
                     view: view,
                   ),

diff --git a/...ppflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor.dart b/...ppflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor.dart
@@ -1,14 +1,17 @@
 import 'dart:ui';
 
-import 'package:flutter/material.dart';
-
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter/material.dart';
 
 const String kLocalImagesKey = 'local_images';
 
 List<String> get builtInAssetImages => [
-      "assets/images/app_flowy_abstract_cover_1.jpg",
-      "assets/images/app_flowy_abstract_cover_2.jpg",
+      'assets/images/built_in_cover_images/m_cover_image_1.jpg',
+      'assets/images/built_in_cover_images/m_cover_image_2.jpg',
+      'assets/images/built_in_cover_images/m_cover_image_3.jpg',
+      'assets/images/built_in_cover_images/m_cover_image_4.jpg',
+      'assets/images/built_in_cover_images/m_cover_image_5.jpg',
+      'assets/images/built_in_cover_images/m_cover_image_6.jpg',
     ];
 
 class ColorOption {

diff --git a/...pflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/desktop_cover.dart b/...pflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/desktop_cover.dart
@@ -155,7 +155,7 @@ class _DesktopCoverState extends State<DesktopCover> {
         );
       case CoverType.asset:
         return Image.asset(
-          widget.coverDetails!,
+          PageStyleCoverImageType.builtInImagePath(detail),
           fit: BoxFit.cover,
         );
       case CoverType.color:

diff --git a/.../lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart b/.../lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart
@@ -28,8 +28,6 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
 import 'package:string_validator/string_validator.dart';
 
-import 'cover_editor.dart';
-
 const double kCoverHeight = 250.0;
 const double kIconHeight = 60.0;
 const double kToolbarHeight = 40.0; // with padding to the top
@@ -296,7 +294,7 @@ class _DocumentHeaderToolbarState extends State<DocumentHeaderToolbar> {
           leftIconSize: const Size.square(18),
           onTap: () => widget.onIconOrCoverChanged(
             cover: PlatformExtension.isDesktopOrWeb
-                ? (CoverType.asset, builtInAssetImages.first)
+                ? (CoverType.asset, '1')
                 : (CoverType.color, '0xffe8e0ff'),
           ),
           useIntrinsicWidth: true,

diff --git a/..._flutter/lib/plugins/document/presentation/editor_plugins/migration/editor_migration.dart b/..._flutter/lib/plugins/document/presentation/editor_plugins/migration/editor_migration.dart
@@ -191,7 +191,13 @@ class EditorMigration {
     } else {
       switch (coverType) {
         case CoverType.asset:
-          // The new version does not support the asset cover.
+          extra = {
+            ViewExtKeys.coverKey: {
+              ViewExtKeys.coverTypeKey:
+                  PageStyleCoverImageType.builtInImage.toString(),
+              ViewExtKeys.coverValueKey: coverDetails,
+            },
+          };
           break;
         case CoverType.color:
           extra = {

diff --git a/frontend/appflowy_flutter/lib/workspace/application/view/view_ext.dart b/frontend/appflowy_flutter/lib/workspace/application/view/view_ext.dart
@@ -41,10 +41,10 @@ class ViewExtKeys {
 extension ViewExtension on ViewPB {
   Widget defaultIcon() => FlowySvg(
         switch (layout) {
-          ViewLayoutPB.Board => FlowySvgs.board_s,
-          ViewLayoutPB.Calendar => FlowySvgs.calendar_s,
-          ViewLayoutPB.Grid => FlowySvgs.grid_s,
-          ViewLayoutPB.Document => FlowySvgs.document_s,
+          ViewLayoutPB.Board => FlowySvgs.icon_board_s,
+          ViewLayoutPB.Calendar => FlowySvgs.icon_calendar_s,
+          ViewLayoutPB.Grid => FlowySvgs.icon_grid_s,
+          ViewLayoutPB.Document => FlowySvgs.icon_document_s,
           ViewLayoutPB.Chat => FlowySvgs.chat_ai_page_s,
           _ => FlowySvgs.document_s,
         },

diff --git a/...flowy_flutter/lib/workspace/presentation/home/menu/sidebar/favorites/favorite_folder.dart b/...flowy_flutter/lib/workspace/presentation/home/menu/sidebar/favorites/favorite_folder.dart
@@ -134,15 +134,22 @@ class FavoriteHeader extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return FlowyButton(
-      onTap: onPressed,
-      margin: const EdgeInsets.symmetric(horizontal: 6.0, vertical: 7.0),
-      leftIcon: const FlowySvg(
-        FlowySvgs.favorite_header_icon_s,
-        blendMode: null,
+    return SizedBox(
+      height: HomeSizes.newPageSectionHeight,
+      child: FlowyButton(
+        onTap: onPressed,
+        margin: const EdgeInsets.symmetric(horizontal: 4.0, vertical: 3.0),
+        leftIcon: const FlowySvg(
+          FlowySvgs.favorite_header_icon_m,
+          blendMode: null,
+        ),
+        leftIconSize: const Size.square(24.0),
+        iconPadding: 8.0,
+        text: FlowyText.regular(
+          LocaleKeys.sideBar_favorites.tr(),
+          lineHeight: 1.15,
+        ),
       ),
-      iconPadding: 10.0,
-      text: FlowyText.regular(LocaleKeys.sideBar_favorites.tr()),
     );
   }
 }

diff --git a/.../appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/folder/_folder_header.dart b/.../appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/folder/_folder_header.dart
@@ -1,4 +1,5 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/workspace/presentation/home/home_sizes.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
@@ -11,13 +12,15 @@ class FolderHeader extends StatefulWidget {
     required this.addButtonTooltip,
     required this.onPressed,
     required this.onAdded,
+    required this.isExpanded,
   });
 
   final String title;
   final String expandButtonTooltip;
   final String addButtonTooltip;
   final VoidCallback onPressed;
   final VoidCallback onAdded;
+  final bool isExpanded;
 
   @override
   State<FolderHeader> createState() => _FolderHeaderState();
@@ -34,24 +37,42 @@ class _FolderHeaderState extends State<FolderHeader> {
 
   @override
   Widget build(BuildContext context) {
-    return MouseRegion(
-      onEnter: (_) => isHovered.value = true,
-      onExit: (_) => isHovered.value = false,
-      child: FlowyButton(
-        onTap: widget.onPressed,
-        margin: const EdgeInsets.symmetric(horizontal: 6.0),
-        rightIcon: ValueListenableBuilder(
-          valueListenable: isHovered,
-          builder: (context, onHover, child) =>
-              Opacity(opacity: onHover ? 1 : 0, child: child),
-          child: FlowyIconButton(
-            tooltipText: widget.addButtonTooltip,
-            icon: const FlowySvg(FlowySvgs.view_item_add_s),
-            onPressed: widget.onAdded,
+    return SizedBox(
+      height: HomeSizes.workspaceSectionHeight,
+      child: MouseRegion(
+        onEnter: (_) => isHovered.value = true,
+        onExit: (_) => isHovered.value = false,
+        child: FlowyButton(
+          onTap: widget.onPressed,
+          margin: const EdgeInsets.only(left: 6.0, right: 4.0),
+          rightIcon: ValueListenableBuilder(
+            valueListenable: isHovered,
+            builder: (context, onHover, child) =>
+                Opacity(opacity: onHover ? 1 : 0, child: child),
+            child: FlowyIconButton(
+              width: 24,
+              iconPadding: const EdgeInsets.all(4.0),
+              tooltipText: widget.addButtonTooltip,
+              icon: const FlowySvg(FlowySvgs.view_item_add_s),
+              onPressed: widget.onAdded,
+            ),
+          ),
+          iconPadding: 10.0,
+          text: Row(
+            children: [
+              FlowyText(
+                widget.title,
+                lineHeight: 1.15,
+              ),
+              const HSpace(4.0),
+              FlowySvg(
+                widget.isExpanded
+                    ? FlowySvgs.workspace_drop_down_menu_show_s
+                    : FlowySvgs.workspace_drop_down_menu_hide_s,
+              ),
+            ],
           ),
         ),
-        iconPadding: 10.0,
-        text: FlowyText(widget.title),
       ),
     );
   }

diff --git a/...appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/folder/_section_folder.dart b/...appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/folder/_section_folder.dart
@@ -76,6 +76,7 @@ class _SectionFolderState extends State<SectionFolder> {
   Widget _buildHeader(BuildContext context) {
     return FolderHeader(
       title: widget.title,
+      isExpanded: context.watch<FolderBloc>().state.isExpanded,
       expandButtonTooltip: widget.expandButtonTooltip,
       addButtonTooltip: widget.addButtonTooltip,
       onPressed: () =>

diff --git a/.../appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/footer/sidebar_footer.dart b/.../appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/footer/sidebar_footer.dart
@@ -1,8 +1,12 @@
 import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/startup/plugin/plugin.dart';
 import 'package:appflowy/startup/startup.dart';
 import 'package:appflowy/workspace/application/tabs/tabs_bloc.dart';
+import 'package:appflowy/workspace/presentation/home/home_sizes.dart';
 import 'package:appflowy/workspace/presentation/home/menu/menu_shared_state.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 
 class SidebarFooter extends StatelessWidget {
@@ -31,12 +35,20 @@ class SidebarTrashButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ValueListenableBuilder(
-      valueListenable: getIt<MenuSharedState>().notifier,
-      builder: (context, value, child) {
-        return MouseRegion(
-          cursor: SystemMouseCursors.click,
-          child: GestureDetector(
+    return SizedBox(
+      height: HomeSizes.workspaceSectionHeight,
+      child: ValueListenableBuilder(
+        valueListenable: getIt<MenuSharedState>().notifier,
+        builder: (context, value, child) {
+          return FlowyButton(
+            leftIcon: const FlowySvg(FlowySvgs.sidebar_footer_trash_m),
+            leftIconSize: const Size.square(24.0),
+            iconPadding: 8.0,
+            margin: const EdgeInsets.all(4.0),
+            text: FlowyText.regular(
+              LocaleKeys.trash_text.tr(),
+              lineHeight: 1.15,
+            ),
             onTap: () {
               getIt<MenuSharedState>().latestOpenView = null;
               getIt<TabsBloc>().add(
@@ -45,10 +57,9 @@ class SidebarTrashButton extends StatelessWidget {
                 ),
               );
             },
-            child: const FlowySvg(FlowySvgs.sidebar_footer_trash_s),
-          ),
-        );
-      },
+          );
+        },
+      ),
     );
   }
 }

diff --git a/...ppflowy_flutter/lib/workspace/presentation/home/menu/sidebar/header/sidebar_top_menu.dart b/...ppflowy_flutter/lib/workspace/presentation/home/menu/sidebar/header/sidebar_top_menu.dart
@@ -23,8 +23,11 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 class SidebarTopMenu extends StatelessWidget {
   const SidebarTopMenu({
     super.key,
+    required this.isSidebarOnHover,
   });
 
+  final ValueNotifier<bool> isSidebarOnHover;
+
   @override
   Widget build(BuildContext context) {
     return BlocBuilder<SidebarSectionsBloc, SidebarSectionsState>(
@@ -80,17 +83,26 @@ class SidebarTopMenu extends StatelessWidget {
       ],
     );
 
-    return Padding(
-      padding: const EdgeInsets.only(top: 12.0),
-      child: FlowyTooltip(
-        richMessage: textSpan,
-        child: FlowyIconButton(
-          width: 24,
-          onPressed: () => context
-              .read<HomeSettingBloc>()
-              .add(const HomeSettingEvent.collapseMenu()),
-          iconPadding: const EdgeInsets.all(2),
-          icon: const FlowySvg(FlowySvgs.hide_menu_s),
+    return ValueListenableBuilder(
+      valueListenable: isSidebarOnHover,
+      builder: (_, value, ___) => Opacity(
+        opacity: value ? 1 : 0,
+        child: Padding(
+          padding: const EdgeInsets.only(top: 12.0, right: 4.0),
+          child: FlowyTooltip(
+            richMessage: textSpan,
+            child: Listener(
+              onPointerDown: (_) => context
+                  .read<HomeSettingBloc>()
+                  .add(const HomeSettingEvent.collapseMenu()),
+              child: FlowyIconButton(
+                width: 24,
+                onPressed: () {},
+                iconPadding: const EdgeInsets.all(4),
+                icon: const FlowySvg(FlowySvgs.hide_menu_s),
+              ),
+            ),
+          ),
         ),
       ),
     );