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: bottom sheet issues (#4523)

Browse Source 
* fix: bottom sheet padding

* fix: set divider width to 0.5px

* feat: optimize number select menu

* chore: update edit field icons

* chore: use short form in add block menu

* feat: optimize select and multi-select menu

* feat: refactor font settings page, theme mode menu and rtl menu
This commit is contained in:
Lucas.Xu 2024-01-28 22:50:25 +08:00 committed by GitHub
parent 4811e65efa
commit 5a9a1e60e6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
35 changed files with 457 additions and 256 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/appflowy_flutter/lib/mobile/presentation/base/flowy_search_text_field.dart Normal file
View File

@ -0,0 +1,40 @@
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class FlowySearchTextField extends StatelessWidget {
const FlowySearchTextField({
super.key,
this.hintText,
this.controller,
this.onChanged,
this.onSubmitted,
});
final String? hintText;
final TextEditingController? controller;
final ValueChanged<String>? onChanged;
final ValueChanged<String>? onSubmitted;
@override
Widget build(BuildContext context) {
return SizedBox(
height: 44.0,
child: CupertinoSearchTextField(
controller: controller,
onChanged: onChanged,
onSubmitted: onSubmitted,
placeholder: hintText,
prefixIcon: const FlowySvg(FlowySvgs.m_search_m),
prefixInsets: const EdgeInsets.only(left: 16.0),
suffixIcon: const Icon(Icons.close),
suffixInsets: const EdgeInsets.only(right: 16.0),
placeholderStyle: Theme.of(context).textTheme.titleSmall?.copyWith(
color: Theme.of(context).hintColor,
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
),
);
}
}

1
frontend/appflowy_flutter/lib/mobile/presentation/base/mobile_view_page.dart
View File

@ -152,7 +152,6 @@ class _MobileViewPageState extends State<MobileViewPage> {
context,
showDragHandle: true,
showDivider: false,
padding: const EdgeInsets.only(bottom: 36.0),
backgroundColor: Theme.of(context).colorScheme.background,
builder: (_) => _buildViewPageBottomSheet(context),
);

1
frontend/appflowy_flutter/lib/mobile/presentation/base/option_color_list.dart
View File

@ -34,6 +34,7 @@ class OptionColorList extends StatelessWidget {
color: color,
borderRadius: Corners.s12Border,
border: Border.all(
width: isSelected ? 2.0 : 1.0,
color: isSelected
? const Color(0xff00C6F1)
: Theme.of(context).dividerColor,

1
frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/default_mobile_action_pane.dart
View File

@ -54,7 +54,6 @@ enum MobilePaneActionType {
context,
showDragHandle: true,
showDivider: false,
padding: const EdgeInsets.only(bottom: 36.0),
backgroundColor: Theme.of(context).colorScheme.background,
useRootNavigator: true,
builder: (context) {

25
frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart
View File

@ -20,7 +20,7 @@ Future<T?> showMobileBottomSheet<T>(
bool useRootNavigator = false,
ShapeBorder? shape,
// the padding of the content, the padding of the header area is fixed
EdgeInsets padding = const EdgeInsets.fromLTRB(16, 4, 16, 32),
EdgeInsets padding = const EdgeInsets.all(0.0),
Color? backgroundColor,
BoxConstraints? constraints,
Color? barrierColor,
@ -38,16 +38,20 @@ Future<T?> showMobileBottomSheet<T>(
),
);
backgroundColor ??= Theme.of(context).brightness == Brightness.light
? const Color(0xFFF7F8FB)
: const Color(0xFF626364);
return showModalBottomSheet<T>(
context: context,
isScrollControlled: isScrollControlled,
enableDrag: isDragEnabled,
useSafeArea: true,
clipBehavior: Clip.antiAlias,
backgroundColor: backgroundColor,
constraints: constraints,
barrierColor: barrierColor,
elevation: elevation,
backgroundColor: backgroundColor,
shape: shape,
useRootNavigator: useRootNavigator,
builder: (context) {
@ -81,7 +85,7 @@ Future<T?> showMobileBottomSheet<T>(
if (showDivider) {
children.add(
const Divider(height: 1.0, thickness: 1.0),
const Divider(height: 0.5, thickness: 0.5),
);
}
}
@ -110,9 +114,18 @@ Future<T?> showMobileBottomSheet<T>(
return children.first;
}
return Column(
mainAxisSize: MainAxisSize.min,
children: children,
// not full-screen mode
if (MediaQuery.of(context).padding.bottom == 0) {
children.add(
const VSpace(16),
);
}
return SafeArea(
child: Column(
mainAxisSize: MainAxisSize.min,
children: children,
),
);
},
);

4
frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_field_bottom_sheets.dart
View File

@ -1,9 +1,8 @@
import 'package:flutter/material.dart';
import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
import 'package:appflowy/plugins/database/application/field/field_controller.dart';
import 'package:appflowy/plugins/database/application/field/field_info.dart';
import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'mobile_create_field_screen.dart';
@ -98,7 +97,6 @@ Future<String?> showFieldPicker(
) {
return showMobileBottomSheet<String>(
context,
padding: EdgeInsets.zero,
builder: (context) {
return MobileFieldPickerList(
selectedFieldId: selectedFieldId,

98
frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_field_type_option_editor.dart
View File

@ -7,6 +7,7 @@ import 'package:appflowy/mobile/presentation/base/option_color_list.dart';
import 'package:appflowy/mobile/presentation/bottom_sheet/bottom_sheet.dart';
import 'package:appflowy/mobile/presentation/database/card/card_detail/widgets/widgets.dart';
import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
import 'package:appflowy/plugins/base/drag_handler.dart';
import 'package:appflowy/plugins/database/application/field/field_service.dart';
import 'package:appflowy/plugins/database/application/field/type_option/number_format_bloc.dart';
import 'package:appflowy/plugins/database/grid/presentation/widgets/header/type_option/date/date_time_format.dart';
@ -18,6 +19,7 @@ import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/size.dart';
import 'package:flowy_infra/uuid.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:protobuf/protobuf.dart';
@ -338,7 +340,7 @@ class _FieldOptionEditorState extends State<FieldOptionEditor> {
if (widget.actions.contains(FieldOptionAction.hide))
FlowyOptionTile.text(
text: LocaleKeys.grid_field_hide.tr(),
leftIcon: const FlowySvg(FlowySvgs.hide_s),
leftIcon: const FlowySvg(FlowySvgs.m_field_hide_s),
onTap: () => widget.onAction?.call(FieldOptionAction.hide),
),
if (widget.actions.contains(FieldOptionAction.show))
@ -352,7 +354,7 @@ class _FieldOptionEditorState extends State<FieldOptionEditor> {
FlowyOptionTile.text(
showTopBorder: false,
text: LocaleKeys.button_duplicate.tr(),
leftIcon: const FlowySvg(FlowySvgs.copy_s),
leftIcon: const FlowySvg(FlowySvgs.m_field_copy_s),
onTap: () => widget.onAction?.call(FieldOptionAction.duplicate),
),
if (widget.actions.contains(FieldOptionAction.delete) &&
@ -362,7 +364,7 @@ class _FieldOptionEditorState extends State<FieldOptionEditor> {
text: LocaleKeys.button_delete.tr(),
textColor: Theme.of(context).colorScheme.error,
leftIcon: FlowySvg(
FlowySvgs.delete_s,
FlowySvgs.m_delete_s,
color: Theme.of(context).colorScheme.error,
),
onTap: () => widget.onAction?.call(FieldOptionAction.delete),
@ -642,7 +644,7 @@ class _NumberOption extends StatelessWidget {
onTap: () {
showMobileBottomSheet(
context,
padding: EdgeInsets.zero,
backgroundColor: Theme.of(context).colorScheme.surface,
builder: (context) {
return DraggableScrollableSheet(
expand: false,
@ -665,7 +667,7 @@ class _NumberOption extends StatelessWidget {
}
}
class _NumberFormatList extends StatelessWidget {
class _NumberFormatList extends StatefulWidget {
const _NumberFormatList({
this.scrollController,
required this.selectedFormat,
@ -676,20 +678,81 @@ class _NumberFormatList extends StatelessWidget {
final ScrollController? scrollController;
final void Function(NumberFormatPB format) onSelected;
@override
State<_NumberFormatList> createState() => _NumberFormatListState();
}
class _NumberFormatListState extends State<_NumberFormatList> {
List<NumberFormatPB> formats = NumberFormatPB.values;
@override
Widget build(BuildContext context) {
return ListView(
controller: scrollController,
children: NumberFormatPB.values
.mapIndexed(
(index, element) => FlowyOptionTile.checkbox(
text: element.title(),
isSelected: selectedFormat == element,
showTopBorder: index == 0,
onTap: () => onSelected(element),
controller: widget.scrollController,
children: [
const Center(
child: DragHandler(),
),
Container(
margin: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
height: 44.0,
child: CupertinoSearchTextField(
prefixIcon: const FlowySvg(FlowySvgs.m_search_m),
prefixInsets: const EdgeInsets.only(left: 16.0),
suffixIcon: const Icon(Icons.close),
suffixInsets: const EdgeInsets.only(right: 16.0),
placeholderStyle: Theme.of(context).textTheme.titleSmall?.copyWith(
color: Theme.of(context).hintColor,
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
onChanged: (String value) {
setState(() {
formats = NumberFormatPB.values
.where(
(element) => element
.title()
.toLowerCase()
.contains(value.toLowerCase()),
)
.toList();
});
},
),
),
...formats.mapIndexed(
(index, element) => FlowyOptionTile.checkbox(
text: element.title(),
content: Expanded(
child: Row(
children: [
Padding(
padding: const EdgeInsets.symmetric(
horizontal: 4.0,
vertical: 16.0,
),
child: FlowyText(
element.title(),
fontSize: 16,
),
),
const Spacer(),
FlowyText(
element.iconSymbol(),
fontSize: 16,
),
widget.selectedFormat != element
? const HSpace(30.0)
: const HSpace(6.0),
],
),
),
)
.toList(),
isSelected: widget.selectedFormat == element,
showTopBorder: false,
onTap: () => widget.onSelected(element),
),
),
],
);
}
}
@ -730,7 +793,10 @@ class _SelectOption extends StatelessWidget {
),
FlowyOptionTile.text(
text: LocaleKeys.grid_field_addOption.tr(),
leftIcon: const FlowySvg(FlowySvgs.add_s),
leftIcon: const FlowySvg(
FlowySvgs.add_s,
size: Size.square(20),
),
onTap: () {
onAddOptions([
SelectOptionPB(

12
frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_quick_field_editor.dart
View File

@ -72,7 +72,7 @@ class _QuickEditFieldState extends State<QuickEditField> {
const _Divider(),
FlowyOptionTile.text(
text: LocaleKeys.grid_field_editProperty.tr(),
leftIcon: const FlowySvg(FlowySvgs.edit_s),
leftIcon: const FlowySvg(FlowySvgs.m_field_edit_s),
onTap: () async {
widget.fieldInfo.field.freeze();
final field = widget.fieldInfo.field.rebuild((field) {
@ -98,7 +98,7 @@ class _QuickEditFieldState extends State<QuickEditField> {
text: fieldVisibility.isVisibleState()
? LocaleKeys.grid_field_hide.tr()
: LocaleKeys.grid_field_show.tr(),
leftIcon: const FlowySvg(FlowySvgs.hide_s),
leftIcon: const FlowySvg(FlowySvgs.m_field_hide_s),
onTap: () async {
context.pop();
if (fieldVisibility.isVisibleState()) {
@ -112,7 +112,7 @@ class _QuickEditFieldState extends State<QuickEditField> {
FlowyOptionTile.text(
showTopBorder: false,
text: LocaleKeys.grid_field_insertLeft.tr(),
leftIcon: const FlowySvg(FlowySvgs.insert_left_s),
leftIcon: const FlowySvg(FlowySvgs.m_filed_insert_left_s),
onTap: () async {
context.pop();
showCreateFieldBottomSheet(
@ -128,7 +128,7 @@ class _QuickEditFieldState extends State<QuickEditField> {
FlowyOptionTile.text(
showTopBorder: false,
text: LocaleKeys.grid_field_insertRight.tr(),
leftIcon: const FlowySvg(FlowySvgs.insert_right_s),
leftIcon: const FlowySvg(FlowySvgs.m_filed_insert_right_s),
onTap: () async {
context.pop();
showCreateFieldBottomSheet(
@ -145,7 +145,7 @@ class _QuickEditFieldState extends State<QuickEditField> {
FlowyOptionTile.text(
showTopBorder: false,
text: LocaleKeys.button_duplicate.tr(),
leftIcon: const FlowySvg(FlowySvgs.copy_s),
leftIcon: const FlowySvg(FlowySvgs.m_field_copy_s),
onTap: () async {
context.pop();
await service.duplicate();
@ -156,7 +156,7 @@ class _QuickEditFieldState extends State<QuickEditField> {
text: LocaleKeys.button_delete.tr(),
textColor: Theme.of(context).colorScheme.error,
leftIcon: FlowySvg(
FlowySvgs.delete_s,
FlowySvgs.m_field_delete_s,
color: Theme.of(context).colorScheme.error,
),
onTap: () async {

1
frontend/appflowy_flutter/lib/mobile/presentation/database/view/database_view_list.dart
View File

@ -156,7 +156,6 @@ class MobileNewDatabaseViewButton extends StatelessWidget {
onTap: () async {
final result = await showMobileBottomSheet<(DatabaseLayoutPB, String)>(
context,
padding: const EdgeInsets.only(bottom: 36),
builder: (_) {
return const MobileCreateDatabaseView();
},

16
frontend/appflowy_flutter/lib/mobile/presentation/database/view/edit_database_view_screen.dart
View File

@ -336,18 +336,14 @@ class DatabaseViewSettingTile extends StatelessWidget {
final databaseLayout = databaseLayoutFromViewLayout(view.layout);
final newLayout = await showMobileBottomSheet<DatabaseLayoutPB>(
context,
padding: EdgeInsets.zero,
resizeToAvoidBottomInset: false,
showDragHandle: true,
builder: (context) {
return Padding(
padding: const EdgeInsets.only(top: 24, bottom: 46),
child: DatabaseViewLayoutPicker(
selectedLayout: databaseLayout,
onSelect: (layout) {
Navigator.of(context).pop(layout);
},
),
return DatabaseViewLayoutPicker(
selectedLayout: databaseLayout,
onSelect: (layout) {
Navigator.of(context).pop(layout);
},
);
},
);
@ -363,7 +359,6 @@ class DatabaseViewSettingTile extends StatelessWidget {
if (setting == DatabaseViewSettings.board) {
showMobileBottomSheet<DatabaseLayoutPB>(
context,
padding: EdgeInsets.zero,
resizeToAvoidBottomInset: false,
builder: (context) {
return Padding(
@ -380,7 +375,6 @@ class DatabaseViewSettingTile extends StatelessWidget {
if (setting == DatabaseViewSettings.calendar) {
showMobileBottomSheet<DatabaseLayoutPB>(
context,
padding: EdgeInsets.zero,
resizeToAvoidBottomInset: false,
builder: (context) {
return Padding(

1
frontend/appflowy_flutter/lib/mobile/presentation/page_item/mobile_view_item.dart
View File

@ -397,7 +397,6 @@ class _SingleMobileInnerViewItemState extends State<SingleMobileInnerViewItem> {
showDragHandle: true,
showCloseButton: true,
useRootNavigator: true,
padding: const EdgeInsets.only(bottom: 36),
builder: (sheetContext) {
return AddNewPageWidgetBottomSheet(
view: widget.view,

19
frontend/appflowy_flutter/lib/mobile/presentation/setting/appearance/rtl_setting.dart
View File

@ -39,7 +39,6 @@ class RTLSetting extends StatelessWidget {
showDivider: false,
showCloseButton: false,
title: LocaleKeys.settings_appearance_textDirection_label.tr(),
padding: const EdgeInsets.only(bottom: 36),
builder: (context) {
final layoutDirection =
context.watch<AppearanceSettingsCubit>().state.layoutDirection;
@ -48,17 +47,23 @@ class RTLSetting extends StatelessWidget {
FlowyOptionTile.checkbox(
text: LocaleKeys.settings_appearance_textDirection_ltr.tr(),
isSelected: layoutDirection == LayoutDirection.ltrLayout,
onTap: () => context
.read<AppearanceSettingsCubit>()
.setLayoutDirection(LayoutDirection.ltrLayout),
onTap: () {
context
.read<AppearanceSettingsCubit>()
.setLayoutDirection(LayoutDirection.ltrLayout);
Navigator.pop(context);
},
),
FlowyOptionTile.checkbox(
showTopBorder: false,
text: LocaleKeys.settings_appearance_textDirection_rtl.tr(),
isSelected: layoutDirection == LayoutDirection.rtlLayout,
onTap: () => context
.read<AppearanceSettingsCubit>()
.setLayoutDirection(LayoutDirection.rtlLayout),
onTap: () {
context
.read<AppearanceSettingsCubit>()
.setLayoutDirection(LayoutDirection.rtlLayout);
Navigator.pop(context);
},
),
],
);

28
frontend/appflowy_flutter/lib/mobile/presentation/setting/appearance/theme_setting.dart
View File

@ -40,7 +40,6 @@ class ThemeSetting extends StatelessWidget {
showDivider: false,
showCloseButton: false,
title: LocaleKeys.settings_appearance_themeMode_label.tr(),
padding: const EdgeInsets.only(bottom: 36),
builder: (context) {
final themeMode =
context.read<AppearanceSettingsCubit>().state.themeMode;
@ -52,9 +51,12 @@ class ThemeSetting extends StatelessWidget {
FlowySvgs.m_theme_mode_system_s,
),
isSelected: themeMode == ThemeMode.system,
onTap: () => context
.read<AppearanceSettingsCubit>()
.setThemeMode(ThemeMode.system),
onTap: () {
context
.read<AppearanceSettingsCubit>()
.setThemeMode(ThemeMode.system);
Navigator.pop(context);
},
),
FlowyOptionTile.checkbox(
showTopBorder: false,
@ -63,9 +65,12 @@ class ThemeSetting extends StatelessWidget {
FlowySvgs.m_theme_mode_light_s,
),
isSelected: themeMode == ThemeMode.light,
onTap: () => context
.read<AppearanceSettingsCubit>()
.setThemeMode(ThemeMode.light),
onTap: () {
context
.read<AppearanceSettingsCubit>()
.setThemeMode(ThemeMode.light);
Navigator.pop(context);
},
),
FlowyOptionTile.checkbox(
showTopBorder: false,
@ -74,9 +79,12 @@ class ThemeSetting extends StatelessWidget {
FlowySvgs.m_theme_mode_dark_s,
),
isSelected: themeMode == ThemeMode.dark,
onTap: () => context
.read<AppearanceSettingsCubit>()
.setThemeMode(ThemeMode.dark),
onTap: () {
context
.read<AppearanceSettingsCubit>()
.setThemeMode(ThemeMode.dark);
Navigator.pop(context);
},
),
],
);

47
frontend/appflowy_flutter/lib/mobile/presentation/setting/font/font_picker_screen.dart
View File

@ -1,6 +1,7 @@
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_search_bar.dart';
import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_search_text_field.dart';
import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
import 'package:appflowy/workspace/application/settings/appearance/appearance_cubit.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@ -48,11 +49,18 @@ class _LanguagePickerPageState extends State<LanguagePickerPage> {
return Scaffold(
appBar: AppBar(
titleSpacing: 0,
elevation: 0,
title: FlowyText.semibold(
LocaleKeys.titleBar_font.tr(),
fontSize: 14.0,
),
leading: const AppBarBackButton(),
bottom: const PreferredSize(
preferredSize: Size.fromHeight(0.5),
child: Divider(
height: 0.5,
),
),
),
body: SafeArea(
child: ListView.separated(
@ -62,7 +70,7 @@ class _LanguagePickerPageState extends State<LanguagePickerPage> {
return Padding(
padding: const EdgeInsets.all(8.0),
child: FlowyMobileSearchTextField(
onKeywordChanged: (keyword) {
onChanged: (keyword) {
setState(() {
availableFonts = _availableFonts
.where(
@ -78,34 +86,13 @@ class _LanguagePickerPageState extends State<LanguagePickerPage> {
}
final fontFamilyName = availableFonts[index - 1];
final displayName = parseFontFamilyName(fontFamilyName);
return SizedBox(
height: 48.0,
child: InkWell(
onTap: () => context.pop(fontFamilyName),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 4.0,
vertical: 12.0,
),
child: Row(
children: [
const HSpace(12.0),
FlowyText(
displayName,
fontFamily:
GoogleFonts.getFont(fontFamilyName).fontFamily,
),
const Spacer(),
if (selectedFontFamilyName == fontFamilyName)
const Icon(
Icons.check,
size: 16,
),
const HSpace(12.0),
],
),
),
),
return FlowyOptionTile.checkbox(
text: displayName,
isSelected: selectedFontFamilyName == fontFamilyName,
showTopBorder: index == 0,
onTap: () => context.pop(fontFamilyName),
fontFamily: GoogleFonts.getFont(fontFamilyName).fontFamily,
backgroundColor: Colors.transparent,
);
},
separatorBuilder: (_, __) => const Divider(

6
frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_mobile_option_decorate_box.dart
View File

@ -5,27 +5,31 @@ class FlowyOptionDecorateBox extends StatelessWidget {
super.key,
this.showTopBorder = true,
this.showBottomBorder = true,
this.color,
required this.child,
});
final bool showTopBorder;
final bool showBottomBorder;
final Widget child;
final Color? color;
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
color: color ?? Theme.of(context).colorScheme.surface,
border: Border(
top: showTopBorder
? BorderSide(
color: Theme.of(context).dividerColor,
width: 0.5,
)
: BorderSide.none,
bottom: showBottomBorder
? BorderSide(
color: Theme.of(context).dividerColor,
width: 0.5,
)
: BorderSide.none,
),

77
frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_mobile_search_bar.dart
View File

@ -1,77 +0,0 @@
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
import 'package:flutter/material.dart';
class FlowyMobileSearchTextField extends StatefulWidget {
const FlowyMobileSearchTextField({
super.key,
required this.onKeywordChanged,
});
final void Function(String keyword) onKeywordChanged;
@override
State<FlowyMobileSearchTextField> createState() =>
_FlowyMobileSearchTextFieldState();
}
class _FlowyMobileSearchTextFieldState
extends State<FlowyMobileSearchTextField> {
final TextEditingController controller = TextEditingController();
final FocusNode focusNode = FocusNode();
@override
void dispose() {
controller.dispose();
focusNode.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: const BoxConstraints(
maxHeight: 36.0,
),
child: FlowyTextField(
focusNode: focusNode,
hintText: LocaleKeys.emoji_search.tr(),
controller: controller,
onChanged: widget.onKeywordChanged,
prefixIcon: const Padding(
padding: EdgeInsets.only(
left: 8.0,
right: 4.0,
),
child: FlowySvg(
FlowySvgs.search_s,
),
),
prefixIconConstraints: const BoxConstraints(
maxHeight: 18.0,
),
suffixIcon: Padding(
padding: const EdgeInsets.all(4.0),
child: FlowyButton(
text: const FlowySvg(
FlowySvgs.close_lg,
),
margin: EdgeInsets.zero,
useIntrinsicWidth: true,
onTap: () {
if (controller.text.isNotEmpty) {
controller.clear();
widget.onKeywordChanged('');
} else {
focusNode.unfocus();
}
},
),
),
),
);
}
}

40
frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_mobile_search_text_field.dart Normal file
View File

@ -0,0 +1,40 @@
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class FlowyMobileSearchTextField extends StatelessWidget {
const FlowyMobileSearchTextField({
super.key,
this.hintText,
this.controller,
this.onChanged,
this.onSubmitted,
});
final String? hintText;
final TextEditingController? controller;
final ValueChanged<String>? onChanged;
final ValueChanged<String>? onSubmitted;
@override
Widget build(BuildContext context) {
return SizedBox(
height: 44.0,
child: CupertinoSearchTextField(
controller: controller,
onChanged: onChanged,
onSubmitted: onSubmitted,
placeholder: hintText,
prefixIcon: const FlowySvg(FlowySvgs.m_search_m),
prefixInsets: const EdgeInsets.only(left: 16.0),
suffixIcon: const Icon(Icons.close),
suffixInsets: const EdgeInsets.only(right: 16.0),
placeholderStyle: Theme.of(context).textTheme.titleSmall?.copyWith(
color: Theme.of(context).hintColor,
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
),
);
}
}

45
frontend/appflowy_flutter/lib/mobile/presentation/widgets/flowy_option_tile.dart
View File

@ -32,6 +32,9 @@ class FlowyOptionTile extends StatelessWidget {
this.onTextChanged,
this.onTextSubmitted,
this.autofocus,
this.content,
this.backgroundColor,
this.fontFamily,
});
factory FlowyOptionTile.text({
@ -89,14 +92,20 @@ class FlowyOptionTile extends StatelessWidget {
required bool isSelected,
required VoidCallback? onTap,
Widget? leftIcon,
Widget? content,
bool showTopBorder = true,
bool showBottomBorder = true,
String? fontFamily,
Color? backgroundColor,
}) {
return FlowyOptionTile._(
type: FlowyOptionTileType.checkbox,
isSelected: isSelected,
text: text,
content: content,
onTap: onTap,
fontFamily: fontFamily,
backgroundColor: backgroundColor,
showTopBorder: showTopBorder,
showBottomBorder: showBottomBorder,
leading: leftIcon,
@ -141,6 +150,9 @@ class FlowyOptionTile extends StatelessWidget {
final Widget? leading;
final Widget? trailing;
// customize the content widget
final Widget? content;
// only used in checkbox or switcher
final bool isSelected;
@ -155,25 +167,27 @@ class FlowyOptionTile extends StatelessWidget {
final FlowyOptionTileType type;
final Color? backgroundColor;
final String? fontFamily;
@override
Widget build(BuildContext context) {
final leadingWidget = _buildLeading();
final child = ColoredBox(
color: Theme.of(context).colorScheme.surface,
child: FlowyOptionDecorateBox(
showTopBorder: showTopBorder,
showBottomBorder: showBottomBorder,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Row(
children: [
if (leadingWidget != null) leadingWidget,
_buildText(),
_buildTextField(),
if (trailing != null) trailing!,
],
),
final child = FlowyOptionDecorateBox(
color: backgroundColor,
showTopBorder: showTopBorder,
showBottomBorder: showBottomBorder,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Row(
children: [
if (leadingWidget != null) leadingWidget,
if (content != null) content!,
if (content == null) _buildText(),
if (content == null) _buildTextField(),
if (trailing != null) trailing!,
],
),
),
);
@ -215,6 +229,7 @@ class FlowyOptionTile extends StatelessWidget {
text!,
fontSize: 16,
color: textColor,
fontFamily: fontFamily,
),
),
);

92
frontend/appflowy_flutter/lib/plugins/database/application/field/type_option/number_format_bloc.dart
View File

@ -128,18 +128,82 @@ extension NumberFormatExtension on NumberFormatPB {
}
}
// String iconName() {
// switch (this) {
// case NumberFormatPB.CNY:
// return "grid/field/yen";
// case NumberFormatPB.EUR:
// return "grid/field/euro";
// case NumberFormatPB.Number:
// return "grid/field/numbers";
// case NumberFormatPB.USD:
// return "grid/field/us_dollar";
// default:
// throw UnimplementedError;
// }
// }
String iconSymbol() {
switch (this) {
case NumberFormatPB.ArgentinePeso:
return "\$";
case NumberFormatPB.Baht:
return "฿";
case NumberFormatPB.CanadianDollar:
return "C\$";
case NumberFormatPB.ChileanPeso:
return "\$";
case NumberFormatPB.ColombianPeso:
return "\$";
case NumberFormatPB.DanishKrone:
return "kr";
case NumberFormatPB.Dirham:
return "د.إ";
case NumberFormatPB.EUR:
return "€";
case NumberFormatPB.Forint:
return "Ft";
case NumberFormatPB.Franc:
return "Fr";
case NumberFormatPB.HongKongDollar:
return "HK\$";
case NumberFormatPB.Koruna:
return "Kč";
case NumberFormatPB.Krona:
return "kr";
case NumberFormatPB.Leu:
return "lei";
case NumberFormatPB.Lira:
return "₺";
case NumberFormatPB.MexicanPeso:
return "\$";
case NumberFormatPB.NewTaiwanDollar:
return "NT\$";
case NumberFormatPB.NewZealandDollar:
return "NZ\$";
case NumberFormatPB.NorwegianKrone:
return "kr";
case NumberFormatPB.Num:
return "#";
case NumberFormatPB.Percent:
return "%";
case NumberFormatPB.PhilippinePeso:
return "₱";
case NumberFormatPB.Pound:
return "£";
case NumberFormatPB.Rand:
return "R";
case NumberFormatPB.Real:
return "R\$";
case NumberFormatPB.Ringgit:
return "RM";
case NumberFormatPB.Riyal:
return "ر.س";
case NumberFormatPB.Ruble:
return "₽";
case NumberFormatPB.Rupee:
return "₹";
case NumberFormatPB.Rupiah:
return "Rp";
case NumberFormatPB.Shekel:
return "₪";
case NumberFormatPB.USD:
return "\$";
case NumberFormatPB.UruguayanPeso:
return "\$U";
case NumberFormatPB.Won:
return "₩";
case NumberFormatPB.Yen:
return "JPY ¥";
case NumberFormatPB.Yuan:
return "¥";
default:
throw UnimplementedError;
}
}
}

22
frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/extension.dart
View File

@ -1,7 +1,7 @@
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:appflowy_backend/protobuf/flowy-database2/select_option_entities.pb.dart';
import 'package:appflowy_editor/appflowy_editor.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/theme_extension.dart';
import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@ -68,6 +68,8 @@ class SelectOptionTag extends StatelessWidget {
this.color,
this.textStyle,
this.onRemove,
this.textAlign,
this.isExpanded = false,
required this.padding,
}) : assert(option != null || name != null && color != null);
@ -78,11 +80,20 @@ class SelectOptionTag extends StatelessWidget {
final TextStyle? textStyle;
final void Function(String)? onRemove;
final EdgeInsets padding;
final TextAlign? textAlign;
final bool isExpanded;
@override
Widget build(BuildContext context) {
final optionName = option?.name ?? name!;
final optionColor = option?.color.toColor(context) ?? color!;
final text = FlowyText.medium(
optionName,
fontSize: fontSize,
overflow: TextOverflow.ellipsis,
color: AFThemeExtension.of(context).textColor,
textAlign: textAlign,
);
return Container(
padding: onRemove == null ? padding : padding.copyWith(right: 2.0),
decoration: BoxDecoration(
@ -96,14 +107,7 @@ class SelectOptionTag extends StatelessWidget {
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: FlowyText.medium(
optionName,
fontSize: fontSize,
overflow: TextOverflow.ellipsis,
color: AFThemeExtension.of(context).textColor,
),
),
isExpanded ? Expanded(child: text) : Flexible(child: text),
if (onRemove != null) ...[
const HSpace(4),
FlowyIconButton(

73
frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/mobile_select_option_editor.dart
View File

@ -1,12 +1,12 @@
import 'package:appflowy/generated/flowy_svgs.g.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
import 'package:appflowy/mobile/presentation/base/option_color_list.dart';
import 'package:appflowy/mobile/presentation/widgets/flowy_mobile_search_text_field.dart';
import 'package:appflowy/mobile/presentation/widgets/widgets.dart';
import 'package:appflowy/plugins/base/drag_handler.dart';
import 'package:appflowy/plugins/database/application/cell/cell_controller_builder.dart';
import 'package:appflowy/plugins/database/grid/presentation/layout/sizes.dart';
import 'package:appflowy/plugins/database/widgets/cell_editor/extension.dart';
import 'package:appflowy/plugins/database/application/cell/bloc/select_option_editor_bloc.dart';
import 'package:appflowy/plugins/database/application/cell/cell_controller_builder.dart';
import 'package:appflowy/plugins/database/widgets/cell_editor/extension.dart';
import 'package:appflowy_backend/protobuf/flowy-database2/field_entities.pbenum.dart';
import 'package:appflowy_backend/protobuf/flowy-database2/select_option_entities.pb.dart';
import 'package:easy_localization/easy_localization.dart';
@ -65,6 +65,7 @@ class _MobileSelectOptionEditorState extends State<MobileSelectOptionEditor> {
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: _buildHeader(context),
),
const Divider(height: 0.5),
Expanded(
child: Padding(
padding: EdgeInsets.symmetric(
@ -146,6 +147,7 @@ class _MobileSelectOptionEditorState extends State<MobileSelectOptionEditor> {
return SingleChildScrollView(
child: Column(
children: [
const VSpace(16),
_SearchField(
controller: searchController,
hintText: LocaleKeys.grid_selectOption_searchOrCreateOption.tr(),
@ -165,6 +167,7 @@ class _MobileSelectOptionEditorState extends State<MobileSelectOptionEditor> {
);
},
),
const VSpace(22),
_OptionList(
onCreateOption: (optionName) {
context
@ -234,23 +237,11 @@ class _SearchField extends StatelessWidget {
@override
Widget build(BuildContext context) {
final textStyle = Theme.of(context).textTheme.bodyMedium;
return Padding(
padding: const EdgeInsets.symmetric(
vertical: 12,
),
child: SizedBox(
height: 44, // the height is fixed.
child: FlowyTextField(
autoFocus: false,
hintText: hintText,
textStyle: textStyle,
hintStyle: textStyle?.copyWith(color: Theme.of(context).hintColor),
onChanged: onChanged,
onSubmitted: onSubmitted,
controller: controller,
),
),
return FlowyMobileSearchTextField(
controller: controller,
onChanged: onChanged,
onSubmitted: onSubmitted,
hintText: hintText,
);
}
}
@ -300,8 +291,7 @@ class _OptionList extends StatelessWidget {
return ListView.separated(
shrinkWrap: true,
itemCount: cells.length,
separatorBuilder: (_, __) =>
VSpace(GridSize.typeOptionSeparatorHeight),
separatorBuilder: (_, __) => const VSpace(20),
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (_, int index) => cells[index],
padding: const EdgeInsets.only(bottom: 12.0),
@ -327,7 +317,7 @@ class _SelectOption extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SizedBox(
height: 44,
height: 40,
child: GestureDetector(
// no need to add click effect, so using gesture detector
behavior: HitTestBehavior.translucent,
@ -340,19 +330,28 @@ class _SelectOption extends StatelessWidget {
? FlowySvgs.m_checkbox_checked_s
: FlowySvgs.m_checkbox_uncheck_s,
size: const Size.square(24.0),
blendMode: null,
blendMode: checked ? null : BlendMode.srcIn,
),
// padding
const HSpace(12),
// option tag
SelectOptionTag(
option: option,
padding: const EdgeInsets.symmetric(horizontal: 11, vertical: 8),
Expanded(
child: SelectOptionTag(
option: option,
padding: const EdgeInsets.symmetric(
vertical: 10,
),
textAlign: TextAlign.center,
fontSize: 15.0,
isExpanded: true,
),
),
const Spacer(),
const HSpace(24),
// more options
FlowyIconButton(
icon: const FlowySvg(FlowySvgs.three_dots_s),
icon: const FlowySvg(
FlowySvgs.m_field_more_s,
),
onPressed: onMoreOptions,
),
],
@ -386,13 +385,13 @@ class _CreateOptionCell extends StatelessWidget {
),
const HSpace(8),
Expanded(
child: Align(
alignment: Alignment.centerLeft,
child: SelectOptionTag(
name: optionName,
color: Theme.of(context).colorScheme.surfaceVariant,
padding:
const EdgeInsets.symmetric(horizontal: 11, vertical: 8),
child: SelectOptionTag(
isExpanded: true,
name: optionName,
color: Theme.of(context).colorScheme.surfaceVariant,
textAlign: TextAlign.center,
padding: const EdgeInsets.symmetric(
vertical: 10,
),
),
),
@ -483,7 +482,7 @@ class _MoreOptionsState extends State<_MoreOptions> {
Widget _buildDeleteButton(BuildContext context) {
return FlowyOptionTile.text(
text: LocaleKeys.button_delete.tr(),
leftIcon: const FlowySvg(FlowySvgs.delete_s),
leftIcon: const FlowySvg(FlowySvgs.m_delete_s),
onTap: widget.onDelete,
);
}

1
frontend/appflowy_flutter/lib/plugins/database/widgets/setting/mobile_database_controls.dart
View File

@ -95,7 +95,6 @@ class MobileDatabaseControls extends StatelessWidget {
showDragHandle: true,
showDivider: false,
title: LocaleKeys.grid_settings_viewList.tr(),
padding: const EdgeInsets.only(bottom: 36.0),
builder: (_) {
return MultiBlocProvider(
providers: [

2
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/_color_list.dart
View File

@ -212,6 +212,7 @@ class _BackgroundColorItem extends StatelessWidget {
color: color,
borderRadius: Corners.s12Border,
border: Border.all(
width: isSelected ? 2.0 : 1.0,
color: isSelected
? theme.toolbarMenuItemSelectedBackgroundColor
: Theme.of(context).dividerColor,
@ -291,6 +292,7 @@ class _TextColorItem extends StatelessWidget {
decoration: BoxDecoration(
borderRadius: Corners.s12Border,
border: Border.all(
width: isSelected ? 2.0 : 1.0,
color: isSelected
? const Color(0xff00C6F1)
: Theme.of(context).dividerColor,

11
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mobile_toolbar_v3/add_block_toolbar_item.dart
View File

@ -131,21 +131,21 @@ class _AddBlockMenu extends StatelessWidget {
_AddBlockMenuItemData(
blockType: BulletedListBlockKeys.type,
backgroundColor: const Color(0xFFFFB9EF),
text: LocaleKeys.editor_bulletedList.tr(),
text: LocaleKeys.editor_bulletedListShortForm.tr(),
icon: FlowySvgs.m_add_block_bulleted_list_s,
onTap: () => _insertBlock(bulletedListNode()),
),
_AddBlockMenuItemData(
blockType: NumberedListBlockKeys.type,
backgroundColor: const Color(0xFFFFB9EF),
text: LocaleKeys.editor_numberedList.tr(),
text: LocaleKeys.editor_numberedListShortForm.tr(),
icon: FlowySvgs.m_add_block_numbered_list_s,
onTap: () => _insertBlock(numberedListNode()),
),
_AddBlockMenuItemData(
blockType: ToggleListBlockKeys.type,
backgroundColor: const Color(0xFFFFB9EF),
text: LocaleKeys.document_plugins_toggleList.tr(),
text: LocaleKeys.editor_toggleListShortForm.tr(),
icon: FlowySvgs.m_add_block_toggle_s,
onTap: () => _insertBlock(toggleListBlockNode()),
),
@ -161,14 +161,14 @@ class _AddBlockMenu extends StatelessWidget {
_AddBlockMenuItemData(
blockType: CodeBlockKeys.type,
backgroundColor: const Color(0xFFCABDFF),
text: LocaleKeys.document_selectionMenu_codeBlock.tr(),
text: LocaleKeys.editor_codeBlockShortForm.tr(),
icon: FlowySvgs.m_add_block_code_s,
onTap: () => _insertBlock(codeBlockNode()),
),
_AddBlockMenuItemData(
blockType: MathEquationBlockKeys.type,
backgroundColor: const Color(0xFFCABDFF),
text: LocaleKeys.document_plugins_mathEquation_name.tr(),
text: LocaleKeys.editor_mathEquationShortForm.tr(),
icon: FlowySvgs.m_add_block_formula_s,
onTap: () {
AppGlobals.rootNavKey.currentContext?.pop(true);
@ -298,6 +298,7 @@ class _AddBlockMenuItem extends StatelessWidget {
data.text,
fontSize: 12.0,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
),
),
],

1
frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/setting_cloud.dart
View File

@ -167,7 +167,6 @@ class CloudTypeSwitcher extends StatelessWidget {
showDivider: false,
showCloseButton: false,
title: LocaleKeys.settings_menu_cloudServerType.tr(),
padding: const EdgeInsets.only(bottom: 36),
builder: (context) {
return Column(
children: values

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

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.1027 8.36639C8.69626 8.36639 8.36678 8.69588 8.36678 9.10231V15.564C8.36678 15.9705 8.69626 16.3 9.1027 16.3H15.5644C15.9709 16.3 16.3003 15.9705 16.3003 15.564V9.10231C16.3003 8.69588 15.9709 8.36639 15.5644 8.36639H9.1027ZM6.96674 9.10231C6.96674 7.92265 7.92304 6.96635 9.1027 6.96635H15.5644C16.7441 6.96635 17.7004 7.92265 17.7004 9.10231V15.564C17.7004 16.7437 16.7441 17.7 15.5644 17.7H9.1027C7.92304 17.7 6.96674 16.7437 6.96674 15.564V9.10231ZM4.43601 3.70004C4.24083 3.70004 4.05365 3.77758 3.91564 3.91559C3.77762 4.0536 3.70009 4.24079 3.70009 4.43596V10.8977C3.70009 11.0929 3.77762 11.2801 3.91564 11.4181C4.05365 11.5561 4.24083 11.6336 4.43601 11.6336H5.15398C5.54059 11.6336 5.854 11.947 5.854 12.3336C5.854 12.7202 5.54059 13.0337 5.15398 13.0337H4.43601C3.86952 13.0337 3.32623 12.8086 2.92566 12.408C2.52509 12.0075 2.30005 11.4642 2.30005 10.8977V4.43596C2.30005 3.86947 2.52509 3.32618 2.92566 2.92561C3.32623 2.52504 3.86952 2.3 4.43601 2.3H10.8977C11.4642 2.3 12.0075 2.52504 12.4081 2.92561C12.8087 3.32618 13.0337 3.86947 13.0337 4.43596V5.15393C13.0337 5.54054 12.7203 5.85395 12.3337 5.85395C11.9471 5.85395 11.6337 5.54054 11.6337 5.15393V4.43596C11.6337 4.24079 11.5561 4.0536 11.4181 3.91559C11.2801 3.77758 11.0929 3.70004 10.8977 3.70004H4.43601Z" fill="#333333"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

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

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.09998 5.19994H4.63331M4.63331 5.19994H16.9M4.63331 5.19994L4.63335 16.4C4.63335 16.8243 4.79489 17.2313 5.08245 17.5314C5.37001 17.8314 5.76001 18 6.16668 18H13.8333C14.24 18 14.63 17.8314 14.9176 17.5314C15.2051 17.2313 15.3667 16.8243 15.3667 16.4V5.2L4.63331 5.19994ZM6.93335 5.2V3.6C6.93335 3.17565 7.09489 2.76869 7.38245 2.46863C7.67001 2.16857 8.06001 2 8.46668 2H11.5333C11.94 2 12.33 2.16857 12.6176 2.46863C12.9051 2.76869 13.0667 3.17565 13.0667 3.6V5.2M8.46661 9.19994V13.9999M11.5333 9.19994V13.9999" stroke="#FB006D" stroke-width="1.375" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 716 B

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

@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.3429 5.19481H16.3001L16.2894 5.23624C15.9181 6.67889 14.6085 7.74481 13.05 7.74481C11.4915 7.74481 10.1819 6.67889 9.81057 5.23624L9.7999 5.19481H9.75711H2.85C2.41104 5.19481 2.05519 4.83896 2.05519 4.4C2.05519 3.96104 2.41104 3.60519 2.85 3.60519H9.75711H9.7999L9.81057 3.56376C10.1819 2.12111 11.4915 1.05519 13.05 1.05519C14.6085 1.05519 15.9181 2.12111 16.2894 3.56376L16.3001 3.60519H16.3429H18.15C18.589 3.60519 18.9448 3.96104 18.9448 4.4C18.9448 4.83896 18.589 5.19481 18.15 5.19481H16.3429ZM11.2429 15.3948H11.2001L11.1894 15.4362C10.8181 16.8789 9.50847 17.9448 7.95 17.9448C6.39153 17.9448 5.08188 16.8789 4.71057 15.4362L4.6999 15.3948H4.65711H2.85C2.41104 15.3948 2.05519 15.039 2.05519 14.6C2.05519 14.161 2.41104 13.8052 2.85 13.8052H4.65711H4.6999L4.71057 13.7638C5.08188 12.3211 6.39153 11.2552 7.95 11.2552C9.50847 11.2552 10.8181 12.3211 11.1894 13.7638L11.2001 13.8052H11.2429H18.15C18.589 13.8052 18.9448 14.161 18.9448 14.6C18.9448 15.039 18.589 15.3948 18.15 15.3948H11.2429ZM13.05 6.15519C14.0194 6.15519 14.8052 5.36937 14.8052 4.4C14.8052 3.43063 14.0194 2.64481 13.05 2.64481C12.0806 2.64481 11.2948 3.43063 11.2948 4.4C11.2948 5.36937 12.0806 6.15519 13.05 6.15519ZM7.95 16.3552C8.91937 16.3552 9.70519 15.5694 9.70519 14.6C9.70519 13.6306 8.91937 12.8448 7.95 12.8448C6.98063 12.8448 6.19481 13.6306 6.19481 14.6C6.19481 15.5694 6.98063 16.3552 7.95 16.3552Z" fill="#2B2F36" stroke="white" stroke-width="0.11039"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

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

@ -0,0 +1,5 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8073 3.2121C15.0906 2.9293 15.5499 2.9293 15.8333 3.2121C16.1166 3.49489 16.1166 3.95339 15.8333 4.23618L3.74157 16.3051C3.45825 16.5879 2.99889 16.5879 2.71556 16.3051C2.43223 16.0224 2.43223 15.5639 2.71556 15.2811L3.93295 14.066C3.41326 13.5187 2.98355 12.9706 2.64732 12.4971C1.78423 11.2814 1.78423 9.68409 2.64732 8.46845C3.88659 6.72299 6.39575 3.96552 10 3.96552C11.2123 3.96552 12.3007 4.27747 13.2585 4.75793L14.8073 3.2121ZM12.1632 5.85123C11.4982 5.57809 10.7757 5.4138 10 5.4138C7.15653 5.4138 5.02695 7.62166 3.8312 9.30583C3.32427 10.0198 3.32427 10.9457 3.8312 11.6597C4.1444 12.1008 4.52167 12.5779 4.95905 13.0418L7.1835 10.8215C7.17073 10.7102 7.16416 10.5972 7.16416 10.4828C7.16416 8.9042 8.41303 7.5862 10.0002 7.5862C10.1351 7.5862 10.2675 7.59572 10.397 7.61411L12.1632 5.85123Z" fill="#333333"/>
<path d="M10 17C8.38239 17 6.98536 16.4446 5.82471 15.6745L6.87578 14.6254C7.78689 15.1801 8.83336 15.5517 10 15.5517C12.8435 15.5517 14.9731 13.3439 16.1688 11.6597C16.6757 10.9457 16.6757 10.0198 16.1688 9.30583C15.6913 8.63328 15.0649 7.87722 14.3035 7.2116L15.3312 6.18589C16.1916 6.95147 16.8689 7.78707 17.3527 8.46845C18.2158 9.68409 18.2158 11.2814 17.3527 12.4971C16.1134 14.2425 13.6042 17 10 17Z" fill="#333333"/>
<path d="M10.0002 13.3793C9.46217 13.3793 8.963 13.2278 8.53818 12.9661L9.62864 11.8777C9.74764 11.9125 9.87241 11.931 10.0002 11.931C10.7443 11.931 11.3853 11.3038 11.3853 10.4828C11.3853 10.3708 11.3733 10.2624 11.3509 10.1587L12.4637 9.04797C12.7013 9.47302 12.8363 9.96381 12.8363 10.4828C12.8363 12.0613 11.5874 13.3793 10.0002 13.3793Z" fill="#333333"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

9
frontend/resources/flowy_icons/16x/m_field_more.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="icon_more_outlined">
<g id="Union">
<path d="M4.58341 9.79171C4.58341 10.5971 3.9305 11.25 3.12508 11.25C2.31967 11.25 1.66675 10.5971 1.66675 9.79171C1.66675 8.98629 2.31967 8.33337 3.12508 8.33337C3.9305 8.33337 4.58341 8.98629 4.58341 9.79171Z" fill="#1F2329" fill-opacity="0.5"/>
<path d="M11.4379 9.79171C11.4379 10.5971 10.785 11.25 9.97957 11.25C9.17415 11.25 8.52124 10.5971 8.52124 9.79171C8.52124 8.98629 9.17415 8.33337 9.97957 8.33337C10.785 8.33337 11.4379 8.98629 11.4379 9.79171Z" fill="#1F2329" fill-opacity="0.5"/>
<path d="M18.3334 9.79171C18.3334 10.5971 17.6805 11.25 16.8751 11.25C16.0697 11.25 15.4167 10.5971 15.4167 9.79171C15.4167 8.98629 16.0697 8.33337 16.8751 8.33337C17.6805 8.33337 18.3334 8.98629 18.3334 9.79171Z" fill="#1F2329" fill-opacity="0.5"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 902 B

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

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 16.25C5 16.6642 4.66421 17 4.25 17C3.83579 17 3.5 16.6642 3.5 16.25L3.5 4.25C3.5 3.83579 3.83579 3.5 4.25 3.5C4.66421 3.5 5 3.83579 5 4.25L5 16.25Z" fill="#333333"/>
<path d="M10.4697 16.0303C10.7626 16.3232 11.2374 16.3232 11.5303 16.0303C11.8232 15.7374 11.8232 15.2626 11.5303 14.9697L7.56066 11H17.25C17.6642 11 18 10.6642 18 10.25C18 9.83579 17.6642 9.5 17.25 9.5H7.56066L11.5303 5.53033C11.8232 5.23744 11.8232 4.76256 11.5303 4.46967C11.2374 4.17678 10.7626 4.17678 10.4697 4.46967L5.21967 9.71967C4.92678 10.0126 4.92678 10.4874 5.21967 10.7803L10.4697 16.0303Z" fill="#333333"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 703 B

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

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.5 3.75C15.5 3.33579 15.8358 3 16.25 3C16.6642 3 17 3.33579 17 3.75V15.75C17 16.1642 16.6642 16.5 16.25 16.5C15.8358 16.5 15.5 16.1642 15.5 15.75V3.75Z" fill="#333333"/>
<path d="M10.0303 3.96967C9.73744 3.67678 9.26256 3.67678 8.96967 3.96967C8.67678 4.26256 8.67678 4.73744 8.96967 5.03033L12.9393 9H3.25C2.83579 9 2.5 9.33579 2.5 9.75C2.5 10.1642 2.83579 10.5 3.25 10.5H12.9393L8.96967 14.4697C8.67678 14.7626 8.67678 15.2374 8.96967 15.5303C9.26256 15.8232 9.73744 15.8232 10.0303 15.5303L15.2803 10.2803C15.5732 9.98744 15.5732 9.51256 15.2803 9.21967L10.0303 3.96967Z" fill="#333333"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 707 B

6
frontend/resources/flowy_icons/24x/m_close.svg
View File

@ -1,3 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.00586 2.92969C4.79686 2.92969 3.00586 4.72069 3.00586 6.92969V16.9297C3.00586 19.1387 4.79686 20.9297 7.00586 20.9297H17.0059C19.2149 20.9297 21.0059 19.1387 21.0059 16.9297V6.92969C21.0059 4.72069 19.2149 2.92969 17.0059 2.92969H7.00586ZM9.00586 7.92969C9.26186 7.92969 9.52885 8.01569 9.72485 8.21069L12.0059 10.4917L14.2869 8.21069C14.4819 8.01569 14.7499 7.92969 15.0059 7.92969C15.2619 7.92969 15.5289 8.01569 15.7249 8.21069C16.1149 8.60169 16.1149 9.25768 15.7249 9.64868L13.4438 11.9297L15.7249 14.2107C16.1149 14.6017 16.1149 15.2577 15.7249 15.6487C15.3339 16.0387 14.6779 16.0387 14.2869 15.6487L12.0059 13.3677L9.72485 15.6487C9.33385 16.0387 8.67787 16.0387 8.28687 15.6487C7.89687 15.2577 7.89687 14.6017 8.28687 14.2107L10.5679 11.9297L8.28687 9.64868C7.89687 9.25768 7.89687 8.60169 8.28687 8.21069C8.48187 8.01569 8.74986 7.92969 9.00586 7.92969Z" fill="#2F3030"/>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="&#229;&#133;&#179;&#233;&#151;&#173;_close 1">
<path id="Union" d="M5.13807 4.19526C4.87772 3.93491 4.45561 3.93491 4.19526 4.19526C3.93491 4.45561 3.93491 4.87772 4.19526 5.13807L9.05719 10L4.19526 14.8619C3.93491 15.1223 3.93491 15.5444 4.19526 15.8047C4.45561 16.0651 4.87772 16.0651 5.13807 15.8047L10 10.9428L14.8619 15.8047C15.1223 16.0651 15.5444 16.0651 15.8047 15.8047C16.0651 15.5444 16.0651 15.1223 15.8047 14.8619L10.9428 10L15.8047 5.13807C16.0651 4.87772 16.0651 4.45561 15.8047 4.19526C15.5444 3.93491 15.1223 3.93491 14.8619 4.19526L10 9.05719L5.13807 4.19526Z" fill="#1F2329" stroke="#1F2329" stroke-width="0.24" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 997 B

After

Width:  |  Height:  |  Size: 794 B

4
frontend/resources/flowy_icons/24x/m_search.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="9.25" cy="9.25" r="7.5" stroke="#1F2329" stroke-opacity="0.3" stroke-width="1.5"/>
<path d="M16.9696 18.031C17.2625 18.3239 17.7373 18.324 18.0303 18.0311C18.3232 17.7382 18.3233 17.2634 18.0304 16.9704L16.9696 18.031ZM13.9696 15.0303L16.9696 18.031L18.0304 16.9704L15.0304 13.9697L13.9696 15.0303Z" fill="#1F2329" fill-opacity="0.3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 451 B

8
frontend/resources/translations/en.json
View File

@ -1096,6 +1096,7 @@
"editor": {
"bold": "Bold",
"bulletedList": "Bulleted List",
"bulletedListShortForm": "Bulleted",
"checkbox": "Checkbox",
"embedCode": "Embed Code",
"heading1": "H1",
@ -1108,6 +1109,7 @@
"italic": "Italic",
"link": "Link",
"numberedList": "Numbered List",
"numberedListShortForm": "Numbered",
"quote": "Quote",
"strikethrough": "Strikethrough",
"text": "Text",
@ -1206,7 +1208,11 @@
"colClear": "Clear Content",
"rowClear": "Clear Content",
"slashPlaceHolder": "Type '/' to insert a block, or start typing",
"typeSomething": "Type something..."
"typeSomething": "Type something...",
"toggleListShortForm": "Toggle",
"quoteListShortForm": "Quote",
"mathEquationShortForm": "Formula",
"codeBlockShortForm": "Code"
},
"favorite": {
"noFavorite": "No favorite page",