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

fix: improve sidebar UI (#5453)

Browse Source 
* 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
This commit is contained in:
Lucas.Xu 2024-06-04 09:22:47 +08:00 committed by GitHub
parent d5cfd054cc
commit 03e8dba5f3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
46 changed files with 423 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/appflowy_flutter/lib/core/frameless_window.dart
View File

@ -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),

2
frontend/appflowy_flutter/lib/plugins/database/board/board.dart
View File

@ -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;

4
frontend/appflowy_flutter/lib/plugins/database/calendar/calendar.dart
View File

@ -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;

4
frontend/appflowy_flutter/lib/plugins/database/grid/grid.dart
View File

@ -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;

2
frontend/appflowy_flutter/lib/plugins/database_document/database_document_plugin.dart
View File

@ -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;

4
frontend/appflowy_flutter/lib/plugins/document/document.dart
View File

@ -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,
),

11
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/cover_editor.dart
View File

@ -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 {

2
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/desktop_cover.dart
View File

@ -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:

4
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart
View File

@ -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,

8
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/migration/editor_migration.dart
View File

@ -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 = {

8
frontend/appflowy_flutter/lib/workspace/application/view/view_ext.dart
View File

@ -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,
},

23
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/favorites/favorite_folder.dart
View File

@ -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()),
);
}
}

53
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/folder/_folder_header.dart
View File

@ -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,6 +12,7 @@ class FolderHeader extends StatefulWidget {
required this.addButtonTooltip,
required this.onPressed,
required this.onAdded,
required this.isExpanded,
});
final String title;
@ -18,6 +20,7 @@ class FolderHeader extends StatefulWidget {
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),
),
);
}

1
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/folder/_section_folder.dart
View File

@ -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: () =>

31
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/footer/sidebar_footer.dart
View File

@ -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),
),
);
},
);
},
),
);
}
}

34
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/header/sidebar_top_menu.dart
View File

@ -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),
),
),
),
),
),
);

16
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/shared/sidebar_folder.dart
View File

@ -25,22 +25,21 @@ class SidebarFolder extends StatelessWidget {
@override
Widget build(BuildContext context) {
const sectionPadding = 16.0;
return ValueListenableBuilder(
valueListenable: getIt<MenuSharedState>().notifier,
builder: (context, value, child) {
return Column(
children: [
const VSpace(4.0),
// favorite
BlocBuilder<FavoriteBloc, FavoriteState>(
builder: (context, state) {
if (state.views.isEmpty) {
return const SizedBox.shrink();
}
return Padding(
padding: const EdgeInsets.only(top: 16.0, bottom: 10),
child: FavoriteFolder(
views: state.views.map((e) => e.item).toList(),
),
return FavoriteFolder(
views: state.views.map((e) => e.item).toList(),
);
},
),
@ -56,18 +55,18 @@ class SidebarFolder extends StatelessWidget {
children: isCollaborativeWorkspace
? [
// public
const VSpace(10),
const VSpace(sectionPadding),
PublicSectionFolder(views: state.section.publicViews),
// private
const VSpace(10),
const VSpace(sectionPadding),
PrivateSectionFolder(
views: state.section.privateViews,
),
]
: [
// personal
const VSpace(10),
const VSpace(sectionPadding),
PersonalSectionFolder(
views: state.section.publicViews,
),
@ -75,6 +74,7 @@ class SidebarFolder extends StatelessWidget {
);
},
),
const VSpace(200),
],
);
},

16
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/shared/sidebar_new_page_button.dart
View File

@ -18,20 +18,20 @@ class SidebarNewPageButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 12),
padding: const EdgeInsets.symmetric(horizontal: 8),
height: HomeSizes.newPageSectionHeight,
child: FlowyButton(
onTap: () async => _createNewPage(context),
leftIcon: const FlowySvg(
FlowySvgs.new_app_s,
FlowySvgs.new_app_m,
blendMode: null,
),
iconPadding: 10.0,
text: SizedBox(
height: 18.0,
child: FlowyText.regular(
LocaleKeys.newPageText.tr(),
),
leftIconSize: const Size.square(24.0),
margin: const EdgeInsets.only(left: 4.0),
iconPadding: 8.0,
text: FlowyText.regular(
LocaleKeys.newPageText.tr(),
lineHeight: 1.15,
),
),
);

8
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/shared/sidebar_setting.dart
View File

@ -1,12 +1,9 @@
import 'package:flutter/material.dart';
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/plugins/document/application/document_appearance_cubit.dart';
import 'package:appflowy/startup/startup.dart';
import 'package:appflowy/workspace/application/user/user_workspace_bloc.dart';
import 'package:appflowy/workspace/presentation/home/af_focus_manager.dart';
import 'package:appflowy/workspace/presentation/home/home_sizes.dart';
import 'package:appflowy/workspace/presentation/home/hotkeys.dart';
import 'package:appflowy/workspace/presentation/settings/settings_dialog.dart';
import 'package:appflowy_backend/log.dart';
@ -16,6 +13,7 @@ import 'package:appflowy_editor/appflowy_editor.dart' hide Log;
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:hotkey_manager/hotkey_manager.dart';
@ -51,13 +49,15 @@ class UserSettingButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SizedBox.square(
dimension: HomeSizes.workspaceSectionHeight,
dimension: 24.0,
child: FlowyTooltip(
message: LocaleKeys.settings_menu_open.tr(),
child: FlowyButton(
onTap: () => showSettingsDialog(context, userProfile),
margin: EdgeInsets.zero,
text: const FlowySvg(
FlowySvgs.settings_s,
opacity: 0.7,
),
),
),

137
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/sidebar.dart
View File

@ -189,7 +189,8 @@ class _Sidebar extends StatefulWidget {
class _SidebarState extends State<_Sidebar> {
final _scrollController = ScrollController();
Timer? _scrollDebounce;
bool isScrolling = false;
bool _isScrolling = false;
final _isHovered = ValueNotifier(false);
@override
void initState() {
@ -202,79 +203,101 @@ class _SidebarState extends State<_Sidebar> {
_scrollDebounce?.cancel();
_scrollController.removeListener(_onScrollChanged);
_scrollController.dispose();
_isHovered.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
const menuHorizontalInset = EdgeInsets.symmetric(horizontal: 12);
const menuHorizontalInset = EdgeInsets.symmetric(horizontal: 8);
final userState = context.read<UserWorkspaceBloc>().state;
return DecoratedBox(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceContainerHighest,
border: Border(
right: BorderSide(color: Theme.of(context).dividerColor),
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// top menu
const Padding(padding: menuHorizontalInset, child: SidebarTopMenu()),
// user or workspace, setting
Container(
height: HomeSizes.workspaceSectionHeight,
padding: menuHorizontalInset - const EdgeInsets.only(right: 6),
child:
// if the workspaces are empty, show the user profile instead
userState.isCollabWorkspaceOn && userState.workspaces.isNotEmpty
? SidebarWorkspace(userProfile: widget.userProfile)
: SidebarUser(userProfile: widget.userProfile),
return MouseRegion(
onEnter: (_) => _isHovered.value = true,
onExit: (_) => _isHovered.value = false,
child: DecoratedBox(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceContainerHighest,
border: Border(
right: BorderSide(color: Theme.of(context).dividerColor),
),
if (FeatureFlag.search.isOn) ...[
const VSpace(6),
Container(
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// top menu
Padding(
padding: menuHorizontalInset,
height: HomeSizes.searchSectionHeight,
child: const _SidebarSearchButton(),
child: SidebarTopMenu(
isSidebarOnHover: _isHovered,
),
),
],
// new page button
const SidebarNewPageButton(),
// scrollable document list
Expanded(
child: Padding(
// user or workspace, setting
Container(
height: HomeSizes.workspaceSectionHeight,
padding: menuHorizontalInset - const EdgeInsets.only(right: 6),
child: SingleChildScrollView(
padding: const EdgeInsets.only(right: 6),
controller: _scrollController,
physics: const ClampingScrollPhysics(),
child: SidebarFolder(
userProfile: widget.userProfile,
isHoverEnabled: !isScrolling,
child:
// if the workspaces are empty, show the user profile instead
userState.isCollabWorkspaceOn &&
userState.workspaces.isNotEmpty
? SidebarWorkspace(userProfile: widget.userProfile)
: SidebarUser(userProfile: widget.userProfile),
),
if (FeatureFlag.search.isOn) ...[
const VSpace(6),
Container(
padding: menuHorizontalInset,
height: HomeSizes.searchSectionHeight,
child: const _SidebarSearchButton(),
),
],
const VSpace(6.0),
// new page button
const SidebarNewPageButton(),
// scrollable document list
const VSpace(12.0),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 12.0),
child: Divider(
color: Color(0x1E1F2329),
height: 0.5,
),
),
Expanded(
child: Padding(
padding: menuHorizontalInset - const EdgeInsets.only(right: 6),
child: SingleChildScrollView(
padding: const EdgeInsets.only(right: 6),
controller: _scrollController,
physics: const ClampingScrollPhysics(),
child: SidebarFolder(
userProfile: widget.userProfile,
isHoverEnabled: !_isScrolling,
),
),
),
),
),
const VSpace(10),
// trash
const Padding(
padding: menuHorizontalInset,
child: Divider(height: 1.0, color: Color(0x141F2329)),
),
const VSpace(14),
const Padding(
padding: menuHorizontalInset,
child: SidebarFooter(),
),
const VSpace(10),
],
// trash
Padding(
padding: menuHorizontalInset +
const EdgeInsets.symmetric(horizontal: 4.0),
child: const Divider(height: 1.0, color: Color(0x141F2329)),
),
const VSpace(8),
Padding(
padding: menuHorizontalInset +
const EdgeInsets.symmetric(horizontal: 4.0),
child: const SidebarFooter(),
),
const VSpace(14),
],
),
),
);
}
void _onScrollChanged() {
setState(() => isScrolling = true);
setState(() => _isScrolling = true);
_scrollDebounce?.cancel();
_scrollDebounce =
@ -283,7 +306,7 @@ class _SidebarState extends State<_Sidebar> {
void _setScrollStopped() {
if (mounted) {
setState(() => isScrolling = false);
setState(() => _isScrolling = false);
}
}
}

16
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/_sidebar_workspace_icon.dart
View File

@ -15,13 +15,17 @@ class WorkspaceIcon extends StatefulWidget {
required this.iconSize,
required this.fontSize,
required this.onSelected,
this.borderRadius = 4,
this.emojiSize,
});
final UserWorkspacePB workspace;
final double iconSize;
final bool enableEdit;
final double fontSize;
final double? emojiSize;
final void Function(EmojiPickerResult) onSelected;
final double borderRadius;
@override
State<WorkspaceIcon> createState() => _WorkspaceIconState();
@ -38,18 +42,22 @@ class _WorkspaceIconState extends State<WorkspaceIcon> {
alignment: Alignment.center,
child: FlowyText.emoji(
widget.workspace.icon,
fontSize: widget.iconSize,
fontSize: widget.emojiSize ?? widget.iconSize,
),
)
: Container(
alignment: Alignment.center,
width: widget.iconSize,
height: min(widget.iconSize, 26),
height: min(widget.iconSize, 24),
decoration: BoxDecoration(
color: ColorGenerator(widget.workspace.name).toColor(),
borderRadius: BorderRadius.circular(4),
borderRadius: BorderRadius.circular(widget.borderRadius),
border: Border.all(
color: const Color(0xa1717171),
width: 0.5,
),
),
child: FlowyText(
child: FlowyText.semibold(
widget.workspace.name.isEmpty
? ''
: widget.workspace.name.substring(0, 1),

22
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/sidebar/workspace/sidebar_workspace.dart
View File

@ -1,4 +1,3 @@
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/plugins/document/presentation/editor_plugins/openai/widgets/loading.dart';
import 'package:appflowy/workspace/application/user/user_workspace_bloc.dart';
@ -49,7 +48,9 @@ class _SidebarWorkspaceState extends State<SidebarWorkspace> {
),
),
UserSettingButton(userProfile: widget.userProfile),
const HSpace(8.0),
const NotificationButton(),
const HSpace(10.0),
],
);
},
@ -203,12 +204,14 @@ class _SidebarSwitchWorkspaceButtonState
height: 30,
child: Row(
children: [
const HSpace(6.0),
const HSpace(4.0),
WorkspaceIcon(
workspace: widget.currentWorkspace,
iconSize: 16,
fontSize: 10,
iconSize: 24,
fontSize: 16,
emojiSize: 18,
enableEdit: false,
borderRadius: 8.0,
onSelected: (result) => context.read<UserWorkspaceBloc>().add(
UserWorkspaceEvent.updateWorkspaceIcon(
widget.currentWorkspace.workspaceId,
@ -216,23 +219,16 @@ class _SidebarSwitchWorkspaceButtonState
),
),
),
const HSpace(10),
const HSpace(8),
Flexible(
child: FlowyText.medium(
widget.currentWorkspace.name,
overflow: TextOverflow.ellipsis,
withTooltip: true,
fontSize: 15.0,
),
),
const HSpace(4),
ValueListenableBuilder(
valueListenable: _isWorkSpaceMenuExpanded,
builder: (context, value, _) => FlowySvg(
value
? FlowySvgs.workspace_drop_down_menu_hide_s
: FlowySvgs.workspace_drop_down_menu_show_s,
),
),
],
),
),

8
frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_add_button.dart
View File

@ -50,10 +50,12 @@ class ViewAddButton extends StatelessWidget {
return PopoverActionList<PopoverAction>(
direction: PopoverDirection.bottomWithLeftAligned,
actions: _actions,
offset: const Offset(0, 4),
offset: const Offset(0, 8),
constraints: const BoxConstraints(
minWidth: 200,
),
buildChild: (popover) {
return FlowyIconButton(
hoverColor: Colors.transparent,
width: 24,
icon: const FlowySvg(FlowySvgs.view_item_add_s),
onPressed: () {
@ -122,7 +124,7 @@ class ViewImportActionWrapper extends ActionCell {
final DocumentPluginBuilder pluginBuilder;
@override
Widget? leftIcon(Color iconColor) => const FlowySvg(FlowySvgs.import_s);
Widget? leftIcon(Color iconColor) => const FlowySvg(FlowySvgs.icon_import_s);
@override
String get name => LocaleKeys.moreAction_import.tr();

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

@ -422,20 +422,19 @@ class _SingleInnerViewItemState extends State<SingleInnerViewItem> {
Widget _buildViewItem(bool onHover, [bool isSelected = false]) {
final children = [
const HSpace(2),
// expand icon or placeholder
widget.leftIconBuilder?.call(context, widget.view) ?? _buildLeftIcon(),
const HSpace(2),
// icon
_buildViewIconButton(),
const HSpace(6),
// const SizedBox(
// width: 6.0,
// height: 1,
// ),
// title
Expanded(
child: FlowyText.regular(
widget.view.name,
overflow: TextOverflow.ellipsis,
lineHeight: 1.1,
),
),
];
@ -447,10 +446,10 @@ class _SingleInnerViewItemState extends State<SingleInnerViewItem> {
} else {
// ··· more action button
children.add(_buildViewMoreActionButton(context));
children.add(const HSpace(8.0));
// only support add button for document layout
if (widget.view.layout == ViewLayoutPB.Document) {
// + button
children.add(const HSpace(8.0));
children.add(_buildViewAddButton(context));
}
children.add(const HSpace(4.0));
@ -500,8 +499,9 @@ class _SingleInnerViewItemState extends State<SingleInnerViewItem> {
? FlowyText.emoji(
widget.view.icon.value,
fontSize: 16.0,
lineHeight: 1.4,
)
: widget.view.defaultIcon();
: Opacity(opacity: 0.6, child: widget.view.defaultIcon());
return AppFlowyPopover(
offset: const Offset(20, 0),
@ -545,16 +545,18 @@ class _SingleInnerViewItemState extends State<SingleInnerViewItem> {
return HSpace(widget.leftPadding);
}
final child = GestureDetector(
child: FlowySvg(
widget.isExpanded
? FlowySvgs.view_item_expand_s
: FlowySvgs.view_item_unexpand_s,
size: const Size.square(16.0),
final child = FlowyHover(
child: GestureDetector(
child: FlowySvg(
widget.isExpanded
? FlowySvgs.view_item_expand_s
: FlowySvgs.view_item_unexpand_s,
size: const Size.square(16.0),
),
onTap: () => context
.read<ViewBloc>()
.add(ViewEvent.setIsExpanded(!widget.isExpanded)),
),
onTap: () => context
.read<ViewBloc>()
.add(ViewEvent.setIsExpanded(!widget.isExpanded)),
);
if (widget.isHovered != null) {

13
frontend/appflowy_flutter/lib/workspace/presentation/home/navigation.dart
View File

@ -91,13 +91,16 @@ class FlowyNavigation extends StatelessWidget {
turns: const AlwaysStoppedAnimation(180 / 360),
child: FlowyTooltip(
richMessage: textSpan,
child: FlowyIconButton(
width: 24,
onPressed: () => context
child: Listener(
onPointerDown: (event) => context
.read<HomeSettingBloc>()
.add(const HomeSettingEvent.collapseMenu()),
iconPadding: const EdgeInsets.all(2),
icon: const FlowySvg(FlowySvgs.hide_menu_s),
child: FlowyIconButton(
width: 24,
onPressed: () {},
iconPadding: const EdgeInsets.all(4),
icon: const FlowySvg(FlowySvgs.hide_menu_s),
),
),
),
),

11
frontend/appflowy_flutter/lib/workspace/presentation/notifications/widgets/notification_button.dart
View File

@ -4,7 +4,6 @@ import 'package:appflowy/startup/startup.dart';
import 'package:appflowy/user/application/reminder/reminder_bloc.dart';
import 'package:appflowy/workspace/application/menu/sidebar_sections_bloc.dart';
import 'package:appflowy/workspace/application/settings/notifications/notification_settings_cubit.dart';
import 'package:appflowy/workspace/presentation/home/home_sizes.dart';
import 'package:appflowy/workspace/presentation/notifications/notification_dialog.dart';
import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:easy_localization/easy_localization.dart';
@ -43,9 +42,10 @@ class NotificationButton extends StatelessWidget {
popupBuilder: (_) =>
NotificationDialog(views: views, mutex: mutex),
child: SizedBox.square(
dimension: HomeSizes.workspaceSectionHeight,
dimension: 24.0,
child: FlowyButton(
useIntrinsicWidth: true,
margin: EdgeInsets.zero,
text:
_buildNotificationIcon(context, state.hasUnreads),
),
@ -62,8 +62,11 @@ class NotificationButton extends StatelessWidget {
Widget _buildNotificationIcon(BuildContext context, bool hasUnreads) {
return Stack(
children: [
const FlowySvg(
FlowySvgs.notification_s,
const Center(
child: FlowySvg(
FlowySvgs.notification_s,
opacity: 0.7,
),
),
if (hasUnreads)
Positioned(

3
frontend/appflowy_flutter/lib/workspace/presentation/widgets/favorite_button.dart
View File

@ -33,8 +33,9 @@ class ViewFavoriteButton extends StatelessWidget {
child: Padding(
padding: const EdgeInsets.all(6),
child: FlowySvg(
isFavorite ? FlowySvgs.unfavorite_s : FlowySvgs.favorite_s,
isFavorite ? FlowySvgs.favorited_s : FlowySvgs.favorite_s,
size: const Size.square(18),
blendMode: null,
),
),
),

66
frontend/appflowy_flutter/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart
View File

@ -2,14 +2,14 @@ import 'package:appflowy/core/helpers/url_launcher.dart';
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/startup/tasks/rust_sdk.dart';
import 'package:appflowy/util/theme_extension.dart';
import 'package:appflowy/workspace/presentation/home/toast.dart';
import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
import 'package:appflowy_popover/appflowy_popover.dart';
import 'package:device_info_plus/device_info_plus.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/size.dart';
import 'package:flowy_infra_ui/style_widget/button.dart';
import 'package:flowy_infra_ui/style_widget/text.dart';
import 'package:flowy_infra_ui/widget/flowy_tooltip.dart';
import 'package:flowy_infra_ui/widget/spacing.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
@ -21,9 +21,8 @@ class QuestionBubble extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const SizedBox(
width: 30,
height: 30,
return const SizedBox.square(
dimension: 36.0,
child: BubbleActionList(),
);
}
@ -61,24 +60,55 @@ class _BubbleActionListState extends State<BubbleActionList> {
);
actions.add(FlowyVersionDescription());
final (color, borderColor, shadowColor, iconColor) =
Theme.of(context).isLightMode
? (
Colors.white,
const Color(0x2D454849),
const Color(0x14000000),
Colors.black,
)
: (
const Color(0xFF242B37),
const Color(0x2DFFFFFF),
const Color(0x14000000),
Colors.white,
);
return PopoverActionList<PopoverAction>(
direction: PopoverDirection.topWithRightAligned,
actions: actions,
offset: const Offset(0, -8),
buildChild: (controller) {
return FlowyTextButton(
'?',
tooltip: LocaleKeys.questionBubble_help.tr(),
fontWeight: FontWeight.w600,
fontColor: fontColor,
fillColor: fillColor,
hoverColor: Theme.of(context).colorScheme.primary,
mainAxisAlignment: MainAxisAlignment.center,
radius: Corners.s10Border,
onPressed: () {
toggle();
controller.show();
},
return FlowyTooltip(
message: LocaleKeys.questionBubble_help.tr(),
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
child: Container(
padding: const EdgeInsets.all(10.0),
decoration: ShapeDecoration(
color: color,
shape: RoundedRectangleBorder(
side: BorderSide(width: 0.50, color: borderColor),
borderRadius: BorderRadius.circular(18),
),
shadows: [
BoxShadow(
color: shadowColor,
blurRadius: 20,
offset: const Offset(0, 8),
),
],
),
child: FlowySvg(
FlowySvgs.help_center_s,
color: iconColor,
),
),
onTap: () => controller.show(),
),
),
);
},
onClosed: toggle,

3
frontend/appflowy_flutter/lib/workspace/presentation/widgets/pop_up_action.dart
View File

@ -245,9 +245,10 @@ class HoverButton extends StatelessWidget {
HSpace(ActionListSizes.itemHPadding),
],
Expanded(
child: FlowyText.medium(
child: FlowyText.regular(
name,
overflow: TextOverflow.visible,
lineHeight: 1.15,
),
),
if (rightIcon != null) ...[

33
frontend/appflowy_flutter/lib/workspace/presentation/widgets/view_title_bar.dart
View File

@ -33,6 +33,7 @@ class ViewTitleBar extends StatelessWidget {
return const SizedBox.shrink();
}
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SizedBox(
height: 24,
child: Row(children: _buildViewTitles(context, ancestors)),
@ -165,11 +166,14 @@ class _ViewTitleState extends State<_ViewTitle> {
Widget _buildUnEditableViewTitle(BuildContext context, ViewTitleState state) {
return Listener(
onPointerDown: (_) => context.read<TabsBloc>().openPlugin(widget.view),
child: FlowyButton(
useIntrinsicWidth: true,
margin: const EdgeInsets.symmetric(horizontal: 6.0),
onTap: () {},
text: _buildIconAndName(state),
child: SizedBox(
height: 32.0,
child: FlowyButton(
useIntrinsicWidth: true,
margin: const EdgeInsets.symmetric(horizontal: 6.0),
onTap: () {},
text: _buildIconAndName(state, false),
),
),
);
}
@ -194,15 +198,18 @@ class _ViewTitleState extends State<_ViewTitle> {
emoji: state.icon,
);
},
child: FlowyButton(
useIntrinsicWidth: true,
margin: const EdgeInsets.symmetric(horizontal: 6.0),
text: _buildIconAndName(state),
child: SizedBox(
height: 32.0,
child: FlowyButton(
useIntrinsicWidth: true,
margin: const EdgeInsets.symmetric(horizontal: 6.0),
text: _buildIconAndName(state, true),
),
),
);
}
Widget _buildIconAndName(ViewTitleState state) {
Widget _buildIconAndName(ViewTitleState state, bool isEditable) {
return SingleChildScrollView(
child: Row(
children: [
@ -211,10 +218,10 @@ class _ViewTitleState extends State<_ViewTitle> {
state.icon,
fontSize: 14.0,
),
const HSpace(6.0),
const HSpace(4.0),
],
ConstrainedBox(
constraints: const BoxConstraints(),
Opacity(
opacity: isEditable ? 1.0 : 0.5,
child: FlowyText.regular(
state.name,
overflow: TextOverflow.ellipsis,

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

@ -6,19 +6,19 @@ const _white = Color(0xFFFFFFFF);
const _lightHover = Color(0xFFe0f8FF);
const _lightSelector = Color(0xFFf2fcFF);
const _lightBg1 = Color(0xFFf7f8fc);
const _lightBg2 = Color(0xFFedeef2);
const _lightBg2 = Color(0x0F1F2329);
const _lightShader1 = Color(0xFF333333);
const _lightShader3 = Color(0xFF828282);
const _lightShader5 = Color(0xFFe0e0e0);
const _lightShader6 = Color(0xFFf2f2f2);
const _lightMain1 = Color(0xFF00bcf0);
const _lightTint9 = Color(0xFFe1fbFF);
const _darkShader1 = Color(0xE5FFFFFF);
const _darkShader1 = Color(0xFF131720);
const _darkShader2 = Color(0xFF1A202C);
const _darkShader3 = Color(0xFF363D49);
const _darkShader5 = Color(0xFFBBC3CD);
const _darkShader6 = Color(0xFFF2F2F2);
const _darkMain1 = Color(0x19FFFFFF);
const _darkMain1 = Color(0xFF00BCF0);
const _darkMain2 = Color(0xFF00BCF0);
const _darkInput = Color(0xFF282E3A);

1
frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/text.dart
View File

@ -166,7 +166,6 @@ class FlowyText extends StatelessWidget {
text,
maxLines: maxLines,
textAlign: textAlign,
strutStyle: strutStyle,
style: textStyle,
);
} else {

1
frontend/appflowy_flutter/packages/flowy_infra_ui/lib/widget/flowy_tooltip.dart
View File

@ -25,6 +25,7 @@ class FlowyTooltip extends StatelessWidget {
final isLightMode = Theme.of(context).brightness == Brightness.light;
return Tooltip(
margin: margin,
padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
decoration: BoxDecoration(
color: isLightMode ? const Color(0xE5171717) : const Color(0xE5E5E5E5),
borderRadius: BorderRadius.circular(8.0),

10
frontend/appflowy_flutter/packages/flowy_svg/lib/src/flowy_svg.dart
View File

@ -23,6 +23,7 @@ class FlowySvg extends StatelessWidget {
this.size,
this.color,
this.blendMode = BlendMode.srcIn,
this.opacity = 1.0,
});
/// The data for the flowy svg. Will be generated by the generator in this
@ -46,11 +47,16 @@ class FlowySvg extends StatelessWidget {
/// svg widget.
final BlendMode? blendMode;
/// The opacity of the svg
///
/// The default value is 1.0
final double opacity;
@override
Widget build(BuildContext context) {
final iconColor = color ?? Theme.of(context).iconTheme.color;
final iconColor =
(color ?? Theme.of(context).iconTheme.color)?.withOpacity(opacity);
final textScaleFactor = MediaQuery.textScalerOf(context).scale(1);
return Transform.scale(
scale: textScaleFactor,
child: SizedBox(

3
frontend/resources/flowy_icons/16x/favorited.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.2967 2.63248L11.6167 5.27248C11.7967 5.63998 12.2767 5.99248 12.6817 6.05998L15.0742 6.45748C16.6042 6.71248 16.9642 7.82248 15.8617 8.91748L14.0017 10.7775C13.6867 11.0925 13.5142 11.7 13.6117 12.135L14.1442 14.4375C14.5642 16.26 13.5967 16.965 11.9842 16.0125L9.7417 14.685C9.3367 14.445 8.6692 14.445 8.2567 14.685L6.0142 16.0125C4.4092 16.965 3.4342 16.2525 3.8542 14.4375L4.3867 12.135C4.4842 11.7 4.3117 11.0925 3.9967 10.7775L2.1367 8.91748C1.0417 7.82248 1.3942 6.71248 2.9242 6.45748L5.3167 6.05998C5.7142 5.99248 6.1942 5.63998 6.3742 5.27248L7.6942 2.63248C8.4142 1.19998 9.5842 1.19998 10.2967 2.63248Z" fill="#FFBA00"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 749 B

11
frontend/resources/flowy_icons/16x/help_center.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_859_40861)">
<path d="M8.00207 15.9668C3.84348 15.9668 0.472656 12.596 0.472656 8.43737C0.472656 4.27878 3.84348 0.907959 8.00207 0.907959C12.1607 0.907959 15.5315 4.27878 15.5315 8.43737C15.5315 12.596 12.1607 15.9668 8.00207 15.9668ZM8.00207 15.0256C11.6407 15.0256 14.5903 12.076 14.5903 8.43737C14.5903 4.79878 11.6407 1.84914 8.00207 1.84914C4.36348 1.84914 1.41383 4.79878 1.41383 8.43737C1.41383 12.076 4.36348 15.0256 8.00207 15.0256Z" fill="#171717" stroke="black" stroke-width="0.133333"/>
<path d="M7.96863 12.6016C7.78728 12.6016 7.61337 12.5295 7.48513 12.4013C7.3569 12.2731 7.28486 12.0992 7.28486 11.9178C7.28486 11.7365 7.3569 11.5626 7.48513 11.4343C7.61337 11.3061 7.78728 11.2341 7.96863 11.2341C8.14997 11.2341 8.32389 11.3061 8.45212 11.4343C8.58035 11.5626 8.65239 11.7365 8.65239 11.9178C8.65239 12.0992 8.58035 12.2731 8.45212 12.4013C8.32389 12.5295 8.14997 12.6016 7.96863 12.6016ZM6.12016 7.2157C6.05257 7.21522 5.98585 7.20044 5.92438 7.17233C5.86292 7.14423 5.80809 7.10344 5.76351 7.05263C5.71893 7.00183 5.68561 6.94217 5.66572 6.87757C5.64584 6.81297 5.63986 6.7449 5.64816 6.67782C5.67922 6.41194 5.72863 6.19453 5.79639 6.02559C5.91127 5.74558 6.08998 5.49629 6.31828 5.29759C6.55006 5.08809 6.82166 4.92741 7.11686 4.82512C7.41609 4.72254 7.73043 4.671 8.04675 4.67265C8.70557 4.67265 9.25381 4.86653 9.69239 5.25476C10.131 5.64159 10.3507 6.15829 10.3507 6.803C10.3507 7.09288 10.2943 7.35547 10.1813 7.59076C10.0693 7.82653 9.83028 8.12017 9.46463 8.47123C9.09804 8.82276 8.85616 9.07265 8.73616 9.22135C8.61183 9.3793 8.51973 9.56014 8.4651 9.75359C8.43216 9.86229 8.40863 9.99076 8.39592 10.1385C8.37334 10.3879 8.17286 10.5856 7.92251 10.5856C7.85592 10.5852 7.79014 10.5709 7.72937 10.5436C7.66861 10.5164 7.6142 10.4768 7.5696 10.4273C7.52501 10.3778 7.49122 10.3196 7.47039 10.2564C7.44956 10.1931 7.44215 10.1262 7.44863 10.0599C7.4651 9.88865 7.49004 9.73947 7.52486 9.61241C7.58933 9.37006 7.68722 9.15829 7.81804 8.97712C7.94839 8.79547 8.18369 8.52912 8.52392 8.17759C8.86463 7.82653 9.08392 7.57053 9.18275 7.41194C9.27969 7.25241 9.38181 6.99312 9.38181 6.67782C9.38181 6.36253 9.21569 6.10606 8.99216 5.86323C8.76722 5.62041 8.4411 5.49853 8.01333 5.49853C7.17851 5.49853 6.7051 5.92817 6.59404 6.78747C6.56251 7.02935 6.3658 7.2157 6.12204 7.2157H6.12016Z" fill="#171717" stroke="black" stroke-width="0.133333"/>
</g>
<defs>
<clipPath id="clip0_859_40861">
<rect width="16" height="16" fill="white" transform="translate(0 0.4375)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

5
frontend/resources/flowy_icons/16x/icon_board.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.89999 13.8666L5.89999 3.36531L5.89999 2.1333H3.59999C2.49542 2.1333 1.59999 3.02874 1.59999 4.1333L1.59999 11.8666C1.59999 12.9712 2.49542 13.8666 3.59999 13.8666H5.89999Z" stroke="#171717" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.89999 2.1333V12.6346V13.8666H10.2V12.6346V2.1333H5.89999Z" stroke="#171717" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.2 2.1333V12.6346V13.8666H12.5C13.6046 13.8666 14.5 12.9712 14.5 11.8666V4.1333C14.5 3.02873 13.6046 2.1333 12.5 2.1333H10.2Z" stroke="#171717" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 753 B

3
frontend/resources/flowy_icons/16x/icon_calendar.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5522 1.33329C11.5522 1.02954 11.3059 0.783295 11.0022 0.783295C10.6984 0.783295 10.4522 1.02954 10.4522 1.33329V2.01127H5.75V1.33341C5.75 1.02965 5.50376 0.783409 5.2 0.783409C4.89624 0.783409 4.65 1.02965 4.65 1.33341V2.01127H3.66667C2.19391 2.01127 1 3.20518 1 4.67794V12C1 13.4727 2.19391 14.6666 3.66667 14.6666H12.3333C13.8061 14.6666 15 13.4727 15 12V4.67794C15 3.20518 13.8061 2.01127 12.3333 2.01127H11.5522V1.33329ZM10.4522 3.11127V3.48019C10.4522 3.78394 10.6984 4.03019 11.0022 4.03019C11.3059 4.03019 11.5522 3.78394 11.5522 3.48019V3.11127H12.3333C13.1986 3.11127 13.9 3.81269 13.9 4.67794V5.85763H2.1V4.67794C2.1 3.81269 2.80142 3.11127 3.66667 3.11127H4.65V3.4803C4.65 3.78406 4.89624 4.0303 5.2 4.0303C5.50376 4.0303 5.75 3.78406 5.75 3.4803V3.11127H10.4522ZM2.1 6.95763V12C2.1 12.8652 2.80142 13.5666 3.66667 13.5666H12.3333C13.1986 13.5666 13.9 12.8652 13.9 12V6.95763H2.1Z" fill="#171717"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

4
frontend/resources/flowy_icons/16x/icon_document.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.9024 6.7V10.2122C13.9024 13.6321 13.0245 15 10.0489 15H5.84803C2.87244 15 2 13.6321 2 10.2122V6.10841C2 2.68856 3.19024 1.32062 6.16583 1.32062H8.78861" stroke="#171717" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.8503 6.6332C13.9081 6.69759 13.8624 6.8 13.7759 6.8H11.419C9.63363 6.8 8.79428 6.02268 8.79428 3.95962V1.52225C8.79428 1.33882 9.0206 1.25215 9.14312 1.38866L13.8503 6.6332Z" stroke="#171717" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 627 B

3
frontend/resources/flowy_icons/16x/icon_grid.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.75 2.6H12.8C13.4075 2.6 13.9 3.09249 13.9 3.7V5.31699H6.75V2.6ZM6.75 6.41699H13.9V9.58256H6.75V6.41699ZM5.65 9.58256V6.41699H2.1V9.58256H5.65ZM2.1 10.6826H5.65V13.4H3.2C2.59249 13.4 2.1 12.9075 2.1 12.3V10.6826ZM6.75 10.6826H13.9V12.3C13.9 12.9075 13.4075 13.4 12.8 13.4H6.75V10.6826ZM5.65 2.6V5.31699H2.1V3.7C2.1 3.09249 2.59249 2.6 3.2 2.6H5.65ZM1 3.7C1 2.48497 1.98497 1.5 3.2 1.5H12.8C14.015 1.5 15 2.48497 15 3.7V12.3C15 13.515 14.015 14.5 12.8 14.5H3.2C1.98497 14.5 1 13.515 1 12.3V3.7Z" fill="#171717"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 666 B

5
frontend/resources/flowy_icons/16x/icon_import.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.2701 5.93359C13.9185 6.14536 15 7.40916 15 10.1758V10.2646C15 13.3182 13.6831 14.5411 10.3946 14.5411H5.60536C2.31687 14.5411 1 13.3182 1 10.2646V10.1758C1 7.42965 2.06674 6.16586 4.67105 5.94043" stroke="#171717" stroke-width="1.0247" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 1.33334V9.92001" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.2323 8.43359L7.99896 10.6669L5.76562 8.43359" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 621 B

9
frontend/resources/flowy_icons/16x/workspace_drop_down_menu_hide.svg
View File

@ -1,8 +1,3 @@
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-outside-1_598_58130" maskUnits="userSpaceOnUse" x="1.33203" y="3" width="8" height="5" fill="black">
<rect fill="white" x="1.33203" y="3" width="8" height="5"/>
<path d="M8.20999 7.62796C8.04727 7.79068 7.78346 7.79068 7.62074 7.62796L4.9987 5.00592L2.37666 7.62796C2.21394 7.79068 1.95012 7.79068 1.7874 7.62796C1.62468 7.46524 1.62468 7.20142 1.7874 7.03871L4.70407 4.12204C4.78221 4.0439 4.88819 4 4.9987 4C5.1092 4 5.21519 4.0439 5.29333 4.12204L8.20999 7.03871C8.37271 7.20142 8.37271 7.46524 8.20999 7.62796Z"/>
</mask>
<path d="M8.20999 7.62796C8.04727 7.79068 7.78346 7.79068 7.62074 7.62796L4.9987 5.00592L2.37666 7.62796C2.21394 7.79068 1.95012 7.79068 1.7874 7.62796C1.62468 7.46524 1.62468 7.20142 1.7874 7.03871L4.70407 4.12204C4.78221 4.0439 4.88819 4 4.9987 4C5.1092 4 5.21519 4.0439 5.29333 4.12204L8.20999 7.03871C8.37271 7.20142 8.37271 7.46524 8.20999 7.62796Z" fill="#171717"/>
<path d="M7.62074 7.62796L7.67966 7.56904L7.62074 7.62796ZM8.20999 7.62796L8.15107 7.56904H8.15107L8.20999 7.62796ZM4.9987 5.00592L4.93977 4.947C4.9554 4.93137 4.9766 4.92259 4.9987 4.92259C5.0208 4.92259 5.042 4.93137 5.05762 4.947L4.9987 5.00592ZM2.37666 7.62796L2.31773 7.56904L2.37666 7.62796ZM1.7874 7.62796L1.84633 7.56904L1.7874 7.62796ZM1.7874 7.03871L1.84633 7.09763L1.7874 7.03871ZM4.70407 4.12204L4.64514 4.06311V4.06311L4.70407 4.12204ZM5.29333 4.12204L5.2344 4.18096L5.2344 4.18096L5.29333 4.12204ZM8.20999 7.03871L8.26892 6.97978L8.20999 7.03871ZM7.67966 7.56904C7.80984 7.69921 8.02089 7.69921 8.15107 7.56904L8.26892 7.68689C8.07366 7.88215 7.75707 7.88215 7.56181 7.68689L7.67966 7.56904ZM5.05762 4.947L7.67966 7.56904L7.56181 7.68689L4.93977 5.06485L5.05762 4.947ZM2.31773 7.56904L4.93977 4.947L5.05762 5.06485L2.43558 7.68689L2.31773 7.56904ZM1.84633 7.56904C1.9765 7.69921 2.18756 7.69921 2.31773 7.56904L2.43558 7.68689C2.24032 7.88215 1.92374 7.88215 1.72848 7.68689L1.84633 7.56904ZM1.84633 7.09763C1.71615 7.22781 1.71615 7.43886 1.84633 7.56904L1.72848 7.68689C1.53322 7.49163 1.53322 7.17504 1.72848 6.97978L1.84633 7.09763ZM4.763 4.18096L1.84633 7.09763L1.72848 6.97978L4.64514 4.06311L4.763 4.18096ZM4.9987 4.08333C4.91029 4.08333 4.82551 4.11845 4.763 4.18096L4.64514 4.06311C4.73891 3.96935 4.86609 3.91667 4.9987 3.91667V4.08333ZM5.2344 4.18096C5.17189 4.11845 5.0871 4.08333 4.9987 4.08333V3.91667C5.13131 3.91667 5.25848 3.96935 5.35225 4.06311L5.2344 4.18096ZM8.15107 7.09763L5.2344 4.18096L5.35225 4.06311L8.26892 6.97978L8.15107 7.09763ZM8.15107 7.56904C8.28124 7.43886 8.28124 7.22781 8.15107 7.09763L8.26892 6.97978C8.46418 7.17504 8.46418 7.49163 8.26892 7.68689L8.15107 7.56904Z" fill="#171717" fill-opacity="0.8" mask="url(#path-1-outside-1_598_58130)"/>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.25 9.5L8.67929 6.07071C8.71834 6.03166 8.71834 5.96834 8.67929 5.92929L5.25 2.5" stroke="#171717" stroke-width="1.2" stroke-linecap="round"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 257 B

9
frontend/resources/flowy_icons/16x/workspace_drop_down_menu_show.svg
View File

@ -1,8 +1,3 @@
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-outside-1_628_27017" maskUnits="userSpaceOnUse" x="0.667969" y="4" width="8" height="5" fill="black">
<rect fill="white" x="0.667969" y="4" width="8" height="5"/>
<path d="M1.79001 4.37204C1.95273 4.20932 2.21654 4.20932 2.37926 4.37204L5.0013 6.99408L7.62334 4.37204C7.78606 4.20932 8.04988 4.20932 8.2126 4.37204C8.37532 4.53476 8.37532 4.79858 8.2126 4.96129L5.29593 7.87796C5.21779 7.9561 5.11181 8 5.0013 8C4.8908 8 4.78481 7.9561 4.70667 7.87796L1.79001 4.96129C1.62729 4.79858 1.62729 4.53476 1.79001 4.37204Z"/>
</mask>
<path d="M1.79001 4.37204C1.95273 4.20932 2.21654 4.20932 2.37926 4.37204L5.0013 6.99408L7.62334 4.37204C7.78606 4.20932 8.04988 4.20932 8.2126 4.37204C8.37532 4.53476 8.37532 4.79858 8.2126 4.96129L5.29593 7.87796C5.21779 7.9561 5.11181 8 5.0013 8C4.8908 8 4.78481 7.9561 4.70667 7.87796L1.79001 4.96129C1.62729 4.79858 1.62729 4.53476 1.79001 4.37204Z" fill="#171717"/>
<path d="M2.37926 4.37204L2.32034 4.43096L2.37926 4.37204ZM1.79001 4.37204L1.84893 4.43096H1.84893L1.79001 4.37204ZM5.0013 6.99408L5.06023 7.053C5.0446 7.06863 5.0234 7.07741 5.0013 7.07741C4.9792 7.07741 4.958 7.06863 4.94238 7.053L5.0013 6.99408ZM7.62334 4.37204L7.68227 4.43096L7.62334 4.37204ZM8.2126 4.37204L8.15367 4.43096L8.2126 4.37204ZM8.2126 4.96129L8.15367 4.90237L8.2126 4.96129ZM5.29593 7.87796L5.35486 7.93689V7.93689L5.29593 7.87796ZM4.70667 7.87796L4.7656 7.81904L4.7656 7.81904L4.70667 7.87796ZM1.79001 4.96129L1.73108 5.02022L1.79001 4.96129ZM2.32034 4.43096C2.19016 4.30079 1.97911 4.30079 1.84893 4.43096L1.73108 4.31311C1.92634 4.11785 2.24293 4.11785 2.43819 4.31311L2.32034 4.43096ZM4.94238 7.053L2.32034 4.43096L2.43819 4.31311L5.06023 6.93515L4.94238 7.053ZM7.68227 4.43096L5.06023 7.053L4.94238 6.93515L7.56442 4.31311L7.68227 4.43096ZM8.15367 4.43096C8.0235 4.30079 7.81244 4.30079 7.68227 4.43096L7.56442 4.31311C7.75968 4.11785 8.07626 4.11785 8.27152 4.31311L8.15367 4.43096ZM8.15367 4.90237C8.28385 4.77219 8.28385 4.56114 8.15367 4.43096L8.27152 4.31311C8.46678 4.50837 8.46678 4.82496 8.27152 5.02022L8.15367 4.90237ZM5.237 7.81904L8.15367 4.90237L8.27152 5.02022L5.35486 7.93689L5.237 7.81904ZM5.0013 7.91667C5.08971 7.91667 5.17449 7.88155 5.237 7.81904L5.35486 7.93689C5.26109 8.03065 5.13391 8.08333 5.0013 8.08333V7.91667ZM4.7656 7.81904C4.82811 7.88155 4.9129 7.91667 5.0013 7.91667V8.08333C4.86869 8.08333 4.74152 8.03065 4.64775 7.93689L4.7656 7.81904ZM1.84893 4.90237L4.7656 7.81904L4.64775 7.93689L1.73108 5.02022L1.84893 4.90237ZM1.84893 4.43096C1.71876 4.56114 1.71876 4.77219 1.84893 4.90237L1.73108 5.02022C1.53582 4.82496 1.53582 4.50837 1.73108 4.31311L1.84893 4.43096Z" fill="#171717" fill-opacity="0.8" mask="url(#path-1-outside-1_628_27017)"/>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.5 5.5L5.92929 8.92929C5.96834 8.96834 6.03166 8.96834 6.07071 8.92929L9.5 5.5" stroke="#171717" stroke-width="1.2" stroke-linecap="round"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 255 B

3
frontend/resources/flowy_icons/24x/favorite_header_icon.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.2967 5.63248L14.6167 8.27248C14.7967 8.63998 15.2767 8.99248 15.6817 9.05998L18.0742 9.45748C19.6042 9.71248 19.9642 10.8225 18.8617 11.9175L17.0017 13.7775C16.6867 14.0925 16.5142 14.7 16.6117 15.135L17.1442 17.4375C17.5642 19.26 16.5967 19.965 14.9842 19.0125L12.7417 17.685C12.3367 17.445 11.6692 17.445 11.2567 17.685L9.0142 19.0125C7.4092 19.965 6.4342 19.2525 6.8542 17.4375L7.3867 15.135C7.4842 14.7 7.3117 14.0925 6.9967 13.7775L5.1367 11.9175C4.0417 10.8225 4.3942 9.71248 5.9242 9.45748L8.3167 9.05998C8.7142 8.99248 9.1942 8.63998 9.3742 8.27248L10.6942 5.63248C11.4142 4.19998 12.5842 4.19998 13.2967 5.63248Z" fill="#FFBA00"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 756 B

5
frontend/resources/flowy_icons/24x/new_app.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3.75" y="3.75" width="16.5" height="16.5" rx="8.25" fill="#00BCF0"/>
<rect x="11.3984" y="7.5" width="1.3" height="9" rx="0.65" fill="white"/>
<rect x="16.5" y="11.4" width="1.3" height="9" rx="0.65" transform="rotate(90 16.5 11.4)" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 360 B

9
frontend/resources/flowy_icons/24x/sidebar_footer_trash.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.7">
<path d="M18 8.48665C15.78 8.26665 13.5467 8.15332 11.32 8.15332C10 8.15332 8.68 8.21999 7.36 8.35332L6 8.48665" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.66797 7.81325L9.81464 6.93992C9.9213 6.30659 10.0013 5.83325 11.128 5.83325H12.8746C14.0013 5.83325 14.088 6.33325 14.188 6.94659L14.3346 7.81325" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.5669 10.5933L16.1336 17.3066C16.0603 18.3533 16.0003 19.1666 14.1403 19.1666H9.86026C8.00026 19.1666 7.94026 18.3533 7.86693 17.3066L7.43359 10.5933" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.8867 15.5H13.1067" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.332 12.8333H13.6654" stroke="#171717" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 957 B