yujunjun/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2025-12-25 14:14:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: grid ui improvements (#6428)

Browse Source 
* fix: dont use medium font weight

* fix: widget padding adjustments

* fix: new divider color

* chore: use horizontal padding from databsepluginwidgetbuildersize

* chore: use existing color token

* chore: restore old add icon
This commit is contained in:
Richard Shiue 2024-09-30 16:09:57 +08:00 committed by GitHub
parent b0211be03c
commit af40ff8eb1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
46 changed files with 185 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/grid_page.dart
View File

@ -1,5 +1,6 @@
import 'dart:math';
import 'package:flowy_infra/theme_extension.dart';
import 'package:flutter/material.dart';
import 'package:appflowy/generated/locale_keys.g.dart';
@ -321,7 +322,12 @@ class _GridRowsState extends State<_GridRows> {
builder: (BuildContext context, BoxConstraints layoutConstraits) {
return _WrapScrollView(
scrollController: widget.scrollController,
contentWidth: GridLayout.headerWidth(state.fields),
contentWidth: GridLayout.headerWidth(
context
.read<DatabasePluginWidgetBuilderSize>()
.horizontalPadding,
state.fields,
),
child: BlocConsumer<GridBloc, GridState>(
listenWhen: (previous, current) =>
previous.rowCount != current.rowCount,
@ -562,7 +568,9 @@ class _PositionedCalculationsRowState
decoration: BoxDecoration(
color: Theme.of(context).canvasColor,
border: Border(
top: BorderSide(color: Theme.of(context).dividerColor),
top: BorderSide(
color: AFThemeExtension.of(context).borderColor,
),
),
),
child: SizedBox(

7
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/layout/layout.dart
View File

@ -3,7 +3,7 @@ import 'package:appflowy_backend/protobuf/flowy-database2/field_settings_entitie
import 'sizes.dart';
class GridLayout {
static double headerWidth(List<FieldInfo> fields) {
static double headerWidth(double padding, List<FieldInfo> fields) {
if (fields.isEmpty) return 0;
final fieldsWidth = fields
@ -15,9 +15,6 @@ class GridLayout {
.map((fieldInfo) => fieldInfo.width!.toDouble())
.reduce((value, element) => value + element);
return fieldsWidth +
GridSize.horizontalHeaderPadding +
40 +
GridSize.trailHeaderPadding;
return fieldsWidth + padding + GridSize.newPropertyButtonWidth;
}
}

7
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/layout/sizes.dart
View File

@ -5,12 +5,11 @@ class GridSize {
static double scale = 1;
static double get scrollBarSize => 8 * scale;
static double get headerHeight => 40 * scale;
static double get headerHeight => 36 * scale;
static double get buttonHeight => 38 * scale;
static double get footerHeight => 40 * scale;
static double get footerHeight => 36 * scale;
static double get horizontalHeaderPadding =>
UniversalPlatform.isDesktop ? 40 * scale : 16 * scale;
static double get trailHeaderPadding => 140 * scale;
static double get cellHPadding => 10 * scale;
static double get cellVPadding => 10 * scale;
static double get popoverItemHeight => 26 * scale;
@ -31,7 +30,7 @@ class GridSize {
static EdgeInsets get typeOptionContentInsets => const EdgeInsets.all(4);
static EdgeInsets get toolbarSettingButtonInsets =>
const EdgeInsets.symmetric(horizontal: 8, vertical: 2);
const EdgeInsets.symmetric(horizontal: 6, vertical: 2);
static EdgeInsets get footerContentInsets => EdgeInsets.fromLTRB(
GridSize.horizontalHeaderPadding,

2
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/filter/create_filter_list.dart
View File

@ -135,7 +135,7 @@ class FilterableFieldButton extends StatelessWidget {
Widget build(BuildContext context) {
return FlowyButton(
hoverColor: AFThemeExtension.of(context).lightGreyHover,
text: FlowyText.medium(
text: FlowyText(
lineHeight: 1.0,
fieldInfo.field.name,
color: AFThemeExtension.of(context).textColor,

12
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/footer/grid_footer.dart
View File

@ -15,23 +15,27 @@ class GridAddRowButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final color = Theme.of(context).brightness == Brightness.light
? const Color(0xFF171717).withOpacity(0.4)
: const Color(0xFFFFFFFF).withOpacity(0.4);
return FlowyButton(
radius: BorderRadius.zero,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Theme.of(context).dividerColor),
bottom: BorderSide(color: AFThemeExtension.of(context).borderColor),
),
),
text: FlowyText(
lineHeight: 1.0,
LocaleKeys.grid_row_newRow.tr(),
color: Theme.of(context).hintColor,
color: color,
),
margin: const EdgeInsets.symmetric(horizontal: 12),
hoverColor: AFThemeExtension.of(context).lightGreyHover,
onTap: () => context.read<GridBloc>().add(const GridEvent.createRow()),
leftIcon: FlowySvg(
FlowySvgs.add_s,
color: Theme.of(context).hintColor,
FlowySvgs.add_less_padding_s,
color: color,
),
);
}

13
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/header/desktop_field_cell.dart
View File

@ -95,10 +95,11 @@ class _GridFieldCellState extends State<GridFieldCell> {
);
},
child: SizedBox(
height: 40,
height: GridSize.headerHeight,
child: FieldCellButton(
field: widget.fieldInfo.field,
onTap: widget.onTap,
margin: const EdgeInsetsDirectional.fromSTEB(12, 9, 10, 9),
),
),
);
@ -140,9 +141,8 @@ class _GridHeaderCellContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
final borderSide = BorderSide(
color: Theme.of(context).dividerColor,
);
final borderSide =
BorderSide(color: AFThemeExtension.of(context).borderColor);
final decoration = BoxDecoration(
border: Border(
right: borderSide,
@ -210,7 +210,7 @@ class FieldCellButton extends StatelessWidget {
final VoidCallback onTap;
final int? maxLines;
final BorderRadius? radius;
final EdgeInsets? margin;
final EdgeInsetsGeometry? margin;
@override
Widget build(BuildContext context) {
@ -225,10 +225,11 @@ class FieldCellButton extends StatelessWidget {
? FlowySvg(
field.fieldType.rightIcon!,
blendMode: null,
size: const Size.square(18),
)
: null,
radius: radius,
text: FlowyText.medium(
text: FlowyText(
field.name,
lineHeight: 1.0,
maxLines: maxLines,

6
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/header/grid_header.dart
View File

@ -161,7 +161,7 @@ class _CellTrailing extends StatelessWidget {
margin: EdgeInsets.only(right: GridSize.scrollBarSize + Insets.m),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Theme.of(context).dividerColor),
bottom: BorderSide(color: AFThemeExtension.of(context).borderColor),
),
),
child: CreateFieldButton(
@ -205,8 +205,8 @@ class CreateFieldButton extends StatelessWidget {
);
},
leftIcon: const FlowySvg(
FlowySvgs.add_s,
size: Size.square(18),
FlowySvgs.add_less_padding_s,
size: Size.square(16),
),
);
}

9
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/header/mobile_grid_header.dart
View File

@ -178,7 +178,7 @@ class _GridHeaderState extends State<_GridHeader> {
}
}
class CreateFieldButton extends StatefulWidget {
class CreateFieldButton extends StatelessWidget {
const CreateFieldButton({
super.key,
required this.viewId,
@ -188,11 +188,6 @@ class CreateFieldButton extends StatefulWidget {
final String viewId;
final void Function(String fieldId) onFieldCreated;
@override
State<CreateFieldButton> createState() => _CreateFieldButtonState();
}
class _CreateFieldButtonState extends State<CreateFieldButton> {
@override
Widget build(BuildContext context) {
return Container(
@ -211,7 +206,7 @@ class _CreateFieldButtonState extends State<CreateFieldButton> {
color: Theme.of(context).hintColor,
),
hoverColor: AFThemeExtension.of(context).greyHover,
onTap: () => mobileCreateFieldWorkflow(context, widget.viewId),
onTap: () => mobileCreateFieldWorkflow(context, viewId),
leftIconSize: const Size.square(18),
leftIcon: FlowySvg(
FlowySvgs.add_s,

2
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/row/action.dart
View File

@ -54,7 +54,7 @@ class RowActionMenu extends StatelessWidget {
return SizedBox(
height: GridSize.popoverItemHeight,
child: FlowyButton(
text: FlowyText.medium(
text: FlowyText(
action.text,
overflow: TextOverflow.ellipsis,
lineHeight: 1.0,

31
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/row/row.dart
View File

@ -25,7 +25,7 @@ import '../../layout/sizes.dart';
import 'action.dart';
class GridRow extends StatefulWidget {
class GridRow extends StatelessWidget {
const GridRow({
super.key,
required this.fieldController,
@ -45,32 +45,27 @@ class GridRow extends StatefulWidget {
final void Function(BuildContext context) openDetailPage;
final int index;
@override
State<GridRow> createState() => _GridRowState();
}
class _GridRowState extends State<GridRow> {
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (_) => RowBloc(
fieldController: widget.fieldController,
rowId: widget.rowId,
rowController: widget.rowController,
viewId: widget.viewId,
fieldController: fieldController,
rowId: rowId,
rowController: rowController,
viewId: viewId,
),
child: _RowEnterRegion(
child: Row(
children: [
_RowLeading(
viewId: widget.viewId,
index: widget.index,
viewId: viewId,
index: index,
),
Expanded(
child: RowContent(
fieldController: widget.fieldController,
cellBuilder: widget.cellBuilder,
onExpand: () => widget.openDetailPage(context),
fieldController: fieldController,
cellBuilder: cellBuilder,
onExpand: () => openDetailPage(context),
),
),
],
@ -304,11 +299,11 @@ class RowContent extends StatelessWidget {
return MouseRegion(
cursor: SystemMouseCursors.basic,
child: Container(
width: GridSize.trailHeaderPadding,
constraints: const BoxConstraints(minHeight: 46),
width: GridSize.newPropertyButtonWidth,
constraints: const BoxConstraints(minHeight: 36),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Theme.of(context).dividerColor),
bottom: BorderSide(color: AFThemeExtension.of(context).borderColor),
),
),
),

2
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/sort/create_sort_list.dart
View File

@ -133,7 +133,7 @@ class GridSortPropertyCell extends StatelessWidget {
height: GridSize.popoverItemHeight,
child: FlowyButton(
hoverColor: AFThemeExtension.of(context).lightGreyHover,
text: FlowyText.medium(
text: FlowyText(
fieldInfo.name,
lineHeight: 1.0,
color: AFThemeExtension.of(context).textColor,

2
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/sort/order_panel.dart
View File

@ -47,7 +47,7 @@ class OrderPanelItem extends StatelessWidget {
return SizedBox(
height: GridSize.popoverItemHeight,
child: FlowyButton(
text: FlowyText.medium(condition.title),
text: FlowyText(condition.title),
onTap: () => onCondition(condition),
),
);

4
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/sort/sort_editor.dart
View File

@ -228,7 +228,7 @@ class _DatabaseAddSortButtonState extends State<DatabaseAddSortButton> {
child: FlowyButton(
hoverColor: AFThemeExtension.of(context).greyHover,
disable: widget.disable,
text: FlowyText.medium(LocaleKeys.grid_sort_addSort.tr()),
text: FlowyText(LocaleKeys.grid_sort_addSort.tr()),
onTap: () => _popoverController.show(),
leftIcon: const FlowySvg(FlowySvgs.add_s),
),
@ -249,7 +249,7 @@ class DeleteAllSortsButton extends StatelessWidget {
return SizedBox(
height: GridSize.popoverItemHeight,
child: FlowyButton(
text: FlowyText.medium(LocaleKeys.grid_sort_deleteAllSorts.tr()),
text: FlowyText(LocaleKeys.grid_sort_deleteAllSorts.tr()),
onTap: () {
context
.read<SortEditorBloc>()

4
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/toolbar/filter_button.dart
View File

@ -32,14 +32,14 @@ class _FilterButtonState extends State<FilterButton> {
return BlocBuilder<FilterEditorBloc, FilterEditorState>(
builder: (context, state) {
final textColor = state.filters.isEmpty
? AFThemeExtension.of(context).textColor
? Theme.of(context).hintColor
: Theme.of(context).colorScheme.primary;
return _wrapPopover(
FlowyTextButton(
LocaleKeys.grid_settings_filter.tr(),
fontColor: textColor,
fontSize: FontSizes.s11,
fontSize: FontSizes.s12,
fontWeight: FontWeight.w400,
fillColor: Colors.transparent,
hoverColor: AFThemeExtension.of(context).lightGreyHover,

4
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/toolbar/grid_setting_bar.dart
View File

@ -49,9 +49,9 @@ class GridSettingBar extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.end,
children: [
FilterButton(toggleExtension: toggleExtension),
const HSpace(2),
const HSpace(6),
SortButton(toggleExtension: toggleExtension),
const HSpace(2),
const HSpace(6),
SettingButton(
databaseController: controller,
),

4
frontend/appflowy_flutter/lib/plugins/database/grid/presentation/widgets/toolbar/sort_button.dart
View File

@ -29,14 +29,14 @@ class _SortButtonState extends State<SortButton> {
return BlocBuilder<SortEditorBloc, SortEditorState>(
builder: (context, state) {
final textColor = state.sorts.isEmpty
? AFThemeExtension.of(context).textColor
? Theme.of(context).hintColor
: Theme.of(context).colorScheme.primary;
return wrapPopover(
FlowyTextButton(
LocaleKeys.grid_settings_sort.tr(),
fontColor: textColor,
fontSize: FontSizes.s11,
fontSize: FontSizes.s12,
fontWeight: FontWeight.w400,
fillColor: Colors.transparent,
hoverColor: AFThemeExtension.of(context).lightGreyHover,

37
frontend/appflowy_flutter/lib/plugins/database/tab_bar/desktop/tab_bar_add_button.dart
View File

@ -32,27 +32,22 @@ class _AddDatabaseViewButtonState extends State<AddDatabaseViewButton> {
offset: const Offset(0, 8),
margin: EdgeInsets.zero,
triggerActions: PopoverTriggerFlags.none,
child: SizedBox(
height: 26,
child: Row(
children: [
VerticalDivider(
width: 1.0,
thickness: 1.0,
indent: 4.0,
endIndent: 4.0,
color: Theme.of(context).dividerColor,
),
FlowyIconButton(
width: 26,
iconPadding: const EdgeInsets.all(5),
hoverColor: AFThemeExtension.of(context).greyHover,
onPressed: () => popoverController.show(),
radius: Corners.s4Border,
icon: const FlowySvg(FlowySvgs.add_s),
iconColorOnHover: Theme.of(context).colorScheme.onSurface,
),
],
child: Padding(
padding: const EdgeInsetsDirectional.only(
top: 2.0,
bottom: 7.0,
start: 6.0,
),
child: FlowyIconButton(
width: 26,
hoverColor: AFThemeExtension.of(context).greyHover,
onPressed: () => popoverController.show(),
radius: Corners.s4Border,
icon: FlowySvg(
FlowySvgs.add_s,
color: Theme.of(context).hintColor,
),
iconColorOnHover: Theme.of(context).colorScheme.onSurface,
),
),
popupBuilder: (BuildContext context) {

99
frontend/appflowy_flutter/lib/plugins/database/tab_bar/desktop/tab_bar_header.dart
View File

@ -24,7 +24,7 @@ class TabBarHeader extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 30,
height: 35,
padding: EdgeInsets.symmetric(
horizontal:
context.read<DatabasePluginWidgetBuilderSize>().horizontalPadding,
@ -36,7 +36,7 @@ class TabBarHeader extends StatelessWidget {
left: 0,
right: 0,
child: Divider(
color: Theme.of(context).dividerColor,
color: AFThemeExtension.of(context).borderColor,
height: 1,
thickness: 1,
),
@ -44,16 +44,16 @@ class TabBarHeader extends StatelessWidget {
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Flexible(child: DatabaseTabBar()),
const Expanded(
child: DatabaseTabBar(),
),
BlocBuilder<DatabaseTabBarBloc, DatabaseTabBarState>(
builder: (context, state) {
return SizedBox(
width: 200,
child: Column(
children: [
const VSpace(3),
pageSettingBarFromState(context, state),
],
child: Padding(
padding: const EdgeInsets.only(top: 6.0),
child: pageSettingBarFromState(context, state),
),
);
},
@ -99,40 +99,36 @@ class _DatabaseTabBarState extends State<DatabaseTabBar> {
Widget build(BuildContext context) {
return BlocBuilder<DatabaseTabBarBloc, DatabaseTabBarState>(
builder: (context, state) {
final children = state.tabBars.indexed.map((indexed) {
final isSelected = state.selectedIndex == indexed.$1;
final tabBar = indexed.$2;
return DatabaseTabBarItem(
key: ValueKey(tabBar.viewId),
view: tabBar.view,
isSelected: isSelected,
onTap: (selectedView) {
context.read<DatabaseTabBarBloc>().add(
DatabaseTabBarEvent.selectView(selectedView.id),
);
},
);
}).toList();
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Flexible(
child: ListView(
controller: _scrollController,
scrollDirection: Axis.horizontal,
shrinkWrap: true,
children: children,
),
),
AddDatabaseViewButton(
onTap: (layoutType) async {
context.read<DatabaseTabBarBloc>().add(
DatabaseTabBarEvent.createView(layoutType, null),
);
},
),
],
return ListView.separated(
controller: _scrollController,
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: state.tabBars.length + 1,
itemBuilder: (context, index) => index == state.tabBars.length
? AddDatabaseViewButton(
onTap: (layoutType) {
context
.read<DatabaseTabBarBloc>()
.add(DatabaseTabBarEvent.createView(layoutType, null));
},
)
: DatabaseTabBarItem(
key: ValueKey(state.tabBars[index].viewId),
view: state.tabBars[index].view,
isSelected: state.selectedIndex == index,
onTap: (selectedView) {
context.read<DatabaseTabBarBloc>().add(
DatabaseTabBarEvent.selectView(selectedView.id),
);
},
),
separatorBuilder: (context, index) => VerticalDivider(
width: 1.0,
thickness: 1.0,
indent: 8,
endIndent: 13,
color: Theme.of(context).dividerColor,
),
);
},
);
@ -157,12 +153,15 @@ class DatabaseTabBarItem extends StatelessWidget {
constraints: const BoxConstraints(maxWidth: 160),
child: Stack(
children: [
SizedBox(
height: 26,
child: TabBarItemButton(
view: view,
isSelected: isSelected,
onTap: () => onTap(view),
Padding(
padding: const EdgeInsets.symmetric(vertical: 2),
child: SizedBox(
height: 26,
child: TabBarItemButton(
view: view,
isSelected: isSelected,
onTap: () => onTap(view),
),
),
),
if (isSelected)
@ -212,6 +211,7 @@ class TabBarItemButton extends StatelessWidget {
radius: Corners.s6Border,
hoverColor: AFThemeExtension.of(context).greyHover,
onTap: onTap,
margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
onSecondaryTap: () {
controller.show();
},
@ -223,11 +223,10 @@ class TabBarItemButton extends StatelessWidget {
text: FlowyText(
view.name,
lineHeight: 1.0,
fontSize: FontSizes.s11,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
color: color,
fontWeight: isSelected ? null : FontWeight.w400,
fontWeight: isSelected ? FontWeight.w500 : FontWeight.w400,
),
),
);

2
frontend/appflowy_flutter/lib/plugins/database/widgets/cell/desktop_grid/desktop_grid_date_cell.dart
View File

@ -56,7 +56,7 @@ class DesktopGridDateCellSkin extends IEditableDateCellSkin {
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: FlowyText.medium(
child: FlowyText(
state.dateStr,
overflow: wrap ? null : TextOverflow.ellipsis,
maxLines: wrap ? null : 1,

2
frontend/appflowy_flutter/lib/plugins/database/widgets/cell/desktop_grid/desktop_grid_timestamp_cell.dart
View File

@ -29,7 +29,7 @@ class DesktopGridTimestampCellSkin extends IEditableTimestampCellSkin {
Widget _buildCellContent(TimestampCellState state) {
return Padding(
padding: GridSize.cellContentInsets,
child: FlowyText.medium(
child: FlowyText(
state.dateStr,
overflow: state.wrap ? null : TextOverflow.ellipsis,
maxLines: state.wrap ? null : 1,

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

@ -89,7 +89,7 @@ class SelectOptionTag extends StatelessWidget {
Widget build(BuildContext context) {
final optionName = option?.name ?? name!;
final optionColor = option?.color.toColor(context) ?? color!;
final text = FlowyText.medium(
final text = FlowyText(
optionName,
fontSize: fontSize,
overflow: TextOverflow.ellipsis,

4
frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/relation_cell_editor.dart
View File

@ -419,7 +419,7 @@ class _RowListItem extends StatelessWidget {
child: Row(
children: [
Expanded(
child: FlowyText.medium(
child: FlowyText(
row.name.trim().isEmpty
? LocaleKeys.grid_title_placeholder.tr()
: row.name,
@ -536,7 +536,7 @@ class _RelationCellEditorDatabasePicker extends StatelessWidget {
databaseMeta.databaseId,
),
),
text: FlowyText.medium(
text: FlowyText(
databaseMeta.databaseName,
overflow: TextOverflow.ellipsis,
),

2
frontend/appflowy_flutter/lib/plugins/database/widgets/cell_editor/select_option_cell_editor.dart
View File

@ -508,7 +508,7 @@ class _CreateOptionCell extends StatelessWidget {
},
child: Row(
children: [
FlowyText.medium(
FlowyText(
LocaleKeys.grid_selectOption_create.tr(),
color: Theme.of(context).hintColor,
),

6
frontend/appflowy_flutter/lib/plugins/database/widgets/field/field_editor.dart
View File

@ -162,7 +162,7 @@ class _EditFieldButton extends StatelessWidget {
padding: padding,
child: FlowyButton(
leftIcon: const FlowySvg(FlowySvgs.edit_s),
text: FlowyText.medium(
text: FlowyText(
lineHeight: 1.0,
LocaleKeys.grid_field_editProperty.tr(),
),
@ -198,7 +198,7 @@ class FieldActionCell extends StatelessWidget {
return FlowyButton(
resetHoverOnRebuild: false,
disable: !enable,
text: FlowyText.medium(
text: FlowyText(
action.title(fieldInfo),
lineHeight: 1.0,
color: enable ? null : Theme.of(context).disabledColor,
@ -623,7 +623,7 @@ class _SwitchFieldButtonState extends State<SwitchFieldButton> {
_popoverController.show();
}
},
text: FlowyText.medium(
text: FlowyText(
state.field.fieldType.i18n,
lineHeight: 1.0,
color: isPrimary ? Theme.of(context).disabledColor : null,

2
frontend/appflowy_flutter/lib/plugins/database/widgets/field/field_type_list.dart
View File

@ -76,7 +76,7 @@ class FieldTypeCell extends StatelessWidget {
return SizedBox(
height: GridSize.popoverItemHeight,
child: FlowyButton(
text: FlowyText.medium(fieldType.i18n, lineHeight: 1.0),
text: FlowyText(fieldType.i18n, lineHeight: 1.0),
onTap: () => onSelectField(fieldType),
leftIcon: FlowySvg(
fieldType.svgData,

10
frontend/appflowy_flutter/lib/plugins/database/widgets/field/type_option_editor/date/date_time_format.dart
View File

@ -23,7 +23,7 @@ class DateFormatButton extends StatelessWidget {
return SizedBox(
height: GridSize.popoverItemHeight,
child: FlowyButton(
text: FlowyText.medium(
text: FlowyText(
LocaleKeys.grid_field_dateFormat.tr(),
lineHeight: 1.0,
),
@ -50,7 +50,7 @@ class TimeFormatButton extends StatelessWidget {
return SizedBox(
height: GridSize.popoverItemHeight,
child: FlowyButton(
text: FlowyText.medium(
text: FlowyText(
LocaleKeys.grid_field_timeFormat.tr(),
lineHeight: 1.0,
),
@ -122,7 +122,7 @@ class DateFormatCell extends StatelessWidget {
return SizedBox(
height: GridSize.popoverItemHeight,
child: FlowyButton(
text: FlowyText.medium(
text: FlowyText(
dateFormat.title(),
lineHeight: 1.0,
),
@ -212,7 +212,7 @@ class TimeFormatCell extends StatelessWidget {
return SizedBox(
height: GridSize.popoverItemHeight,
child: FlowyButton(
text: FlowyText.medium(
text: FlowyText(
timeFormat.title(),
lineHeight: 1.0,
),
@ -259,7 +259,7 @@ class IncludeTimeButton extends StatelessWidget {
color: Theme.of(context).iconTheme.color,
),
const HSpace(6),
FlowyText.medium(LocaleKeys.grid_field_includeTime.tr()),
FlowyText(LocaleKeys.grid_field_includeTime.tr()),
const Spacer(),
Toggle(
value: value,

2
frontend/appflowy_flutter/lib/plugins/database/widgets/field/type_option_editor/media.dart
View File

@ -32,7 +32,7 @@ class MediaTypeOptionEditorFactory implements TypeOptionEditorFactory {
alignment: Alignment.centerLeft,
child: FlowyButton(
resetHoverOnRebuild: false,
text: FlowyText.medium(
text: FlowyText(
LocaleKeys.grid_media_hideFileNames.tr(),
lineHeight: 1.0,
),

4
frontend/appflowy_flutter/lib/plugins/database/widgets/field/type_option_editor/number.dart
View File

@ -31,7 +31,7 @@ class NumberTypeOptionEditorFactory implements TypeOptionEditorFactory {
height: GridSize.popoverItemHeight,
child: FlowyButton(
rightIcon: const FlowySvg(FlowySvgs.more_s),
text: FlowyText.medium(
text: FlowyText(
lineHeight: 1.0,
typeOption.format.title(),
),
@ -168,7 +168,7 @@ class NumberFormatCell extends StatelessWidget {
return SizedBox(
height: GridSize.popoverItemHeight,
child: FlowyButton(
text: FlowyText.medium(
text: FlowyText(
format.title(),
lineHeight: 1.0,
),

2
frontend/appflowy_flutter/lib/plugins/database/widgets/field/type_option_editor/relation.dart
View File

@ -134,7 +134,7 @@ class _DatabaseList extends StatelessWidget {
height: GridSize.popoverItemHeight,
child: FlowyButton(
onTap: () => onSelectDatabase(meta.databaseId),
text: FlowyText.medium(
text: FlowyText(
lineHeight: 1.0,
meta.databaseName,
overflow: TextOverflow.ellipsis,

2
frontend/appflowy_flutter/lib/plugins/database/widgets/field/type_option_editor/select/select_option.dart
View File

@ -180,7 +180,7 @@ class _AddOptionButton extends StatelessWidget {
child: SizedBox(
height: GridSize.popoverItemHeight,
child: FlowyButton(
text: FlowyText.medium(
text: FlowyText(
lineHeight: 1.0,
LocaleKeys.grid_field_addSelectOption.tr(),
),

6
frontend/appflowy_flutter/lib/plugins/database/widgets/field/type_option_editor/select/select_option_editor.dart
View File

@ -106,7 +106,7 @@ class _DeleteTag extends StatelessWidget {
return SizedBox(
height: GridSize.popoverItemHeight,
child: FlowyButton(
text: FlowyText.medium(
text: FlowyText(
lineHeight: 1.0,
LocaleKeys.grid_selectOption_deleteTag.tr(),
),
@ -175,7 +175,7 @@ class SelectOptionColorList extends StatelessWidget {
padding: GridSize.typeOptionContentInsets,
child: SizedBox(
height: GridSize.popoverItemHeight,
child: FlowyText.medium(
child: FlowyText(
LocaleKeys.grid_selectOption_colorPanelTitle.tr(),
textAlign: TextAlign.left,
color: Theme.of(context).hintColor,
@ -230,7 +230,7 @@ class _SelectOptionColorCell extends StatelessWidget {
height: GridSize.popoverItemHeight,
child: FlowyButton(
hoverColor: AFThemeExtension.of(context).lightGreyHover,
text: FlowyText.medium(
text: FlowyText(
lineHeight: 1.0,
color.colorName(),
color: AFThemeExtension.of(context).textColor,

2
frontend/appflowy_flutter/lib/plugins/database/widgets/field/type_option_editor/translate.dart
View File

@ -164,7 +164,7 @@ class LanguageCell extends StatelessWidget {
return SizedBox(
height: GridSize.popoverItemHeight,
child: FlowyButton(
text: FlowyText.medium(
text: FlowyText(
languageTypeToLanguage(languageType),
lineHeight: 1.0,
),

8
frontend/appflowy_flutter/lib/plugins/database/widgets/group/database_group.dart
View File

@ -65,7 +65,7 @@ class DatabaseGroupList extends StatelessWidget {
child: Row(
children: [
Expanded(
child: FlowyText.medium(
child: FlowyText(
LocaleKeys.board_showUngrouped.tr(),
),
),
@ -86,7 +86,7 @@ class DatabaseGroupList extends StatelessWidget {
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
child: FlowyText.medium(
child: FlowyText(
LocaleKeys.board_groupBy.tr(),
textAlign: TextAlign.left,
color: Theme.of(context).hintColor,
@ -112,7 +112,7 @@ class DatabaseGroupList extends StatelessWidget {
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
child: FlowyText.medium(
child: FlowyText(
LocaleKeys.board_groupCondition.tr(),
textAlign: TextAlign.left,
color: Theme.of(context).hintColor,
@ -192,7 +192,7 @@ class _GridGroupCell extends StatelessWidget {
padding: const EdgeInsets.symmetric(horizontal: 6.0),
child: FlowyButton(
hoverColor: AFThemeExtension.of(context).lightGreyHover,
text: FlowyText.medium(
text: FlowyText(
name,
color: AFThemeExtension.of(context).textColor,
lineHeight: 1.0,

6
frontend/appflowy_flutter/lib/plugins/database/widgets/row/cells/cell_container.dart
View File

@ -1,3 +1,4 @@
import 'package:flowy_infra/theme_extension.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
@ -57,7 +58,7 @@ class CellContainer extends StatelessWidget {
}
},
child: Container(
constraints: BoxConstraints(maxWidth: width, minHeight: 46),
constraints: BoxConstraints(maxWidth: width, minHeight: 36),
decoration: _makeBoxDecoration(context, isFocus),
child: container,
),
@ -76,7 +77,8 @@ class CellContainer extends StatelessWidget {
return BoxDecoration(border: Border.fromBorderSide(borderSide));
}
final borderSide = BorderSide(color: Theme.of(context).dividerColor);
final borderSide =
BorderSide(color: AFThemeExtension.of(context).borderColor);
return BoxDecoration(
border: Border(right: borderSide, bottom: borderSide),
);

4
frontend/appflowy_flutter/lib/plugins/database/widgets/row/row_property.dart
View File

@ -304,7 +304,7 @@ class ToggleHiddenFieldsVisibilityButton extends StatelessWidget {
return SizedBox(
height: 30,
child: FlowyButton(
text: FlowyText.medium(
text: FlowyText(
text,
lineHeight: 1.0,
color: Theme.of(context).hintColor,
@ -380,7 +380,7 @@ class CreateRowFieldButton extends StatelessWidget {
height: 30,
child: FlowyButton(
margin: const EdgeInsets.symmetric(horizontal: 4, vertical: 6),
text: FlowyText.medium(
text: FlowyText(
lineHeight: 1.0,
LocaleKeys.grid_field_newProperty.tr(),
color: Theme.of(context).hintColor,

2
frontend/appflowy_flutter/lib/plugins/database/widgets/setting/database_layout_selector.dart
View File

@ -79,7 +79,7 @@ class DatabaseViewLayoutCell extends StatelessWidget {
height: GridSize.popoverItemHeight,
child: FlowyButton(
hoverColor: AFThemeExtension.of(context).lightGreyHover,
text: FlowyText.medium(
text: FlowyText(
lineHeight: 1.0,
databaseLayout.layoutName,
color: AFThemeExtension.of(context).textColor,

2
frontend/appflowy_flutter/lib/plugins/database/widgets/setting/database_setting_action.dart
View File

@ -80,7 +80,7 @@ extension DatabaseSettingActionExtension on DatabaseSettingAction {
height: GridSize.popoverItemHeight,
child: FlowyButton(
hoverColor: AFThemeExtension.of(context).lightGreyHover,
text: FlowyText.medium(
text: FlowyText(
title(),
lineHeight: 1.0,
color: AFThemeExtension.of(context).textColor,

4
frontend/appflowy_flutter/lib/plugins/database/widgets/setting/setting_button.dart
View File

@ -32,8 +32,8 @@ class _SettingButtonState extends State<SettingButton> {
triggerActions: PopoverTriggerFlags.none,
child: FlowyTextButton(
LocaleKeys.settings_title.tr(),
fontColor: AFThemeExtension.of(context).textColor,
fontSize: FontSizes.s11,
fontColor: Theme.of(context).hintColor,
fontSize: FontSizes.s12,
fontWeight: FontWeight.w400,
fillColor: Colors.transparent,
hoverColor: AFThemeExtension.of(context).lightGreyHover,

2
frontend/appflowy_flutter/lib/plugins/database/widgets/setting/setting_property_list.dart
View File

@ -149,7 +149,7 @@ class _DatabasePropertyCellState extends State<DatabasePropertyCell> {
margin: const EdgeInsets.symmetric(vertical: 2, horizontal: 6),
child: FlowyButton(
hoverColor: AFThemeExtension.of(context).lightGreyHover,
text: FlowyText.medium(
text: FlowyText(
lineHeight: 1.0,
widget.fieldInfo.name,
color: AFThemeExtension.of(context).textColor,

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

@ -22,7 +22,7 @@ class ClearDateButton extends StatelessWidget {
child: SizedBox(
height: DatePickerSize.itemHeight,
child: FlowyButton(
text: FlowyText.medium(LocaleKeys.datePicker_clearDate.tr()),
text: FlowyText(LocaleKeys.datePicker_clearDate.tr()),
onTap: () {
onClearDate();
PopoverContainer.of(context).close();

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

@ -39,7 +39,7 @@ class DateTypeOptionButton extends StatelessWidget {
child: SizedBox(
height: GridSize.popoverItemHeight,
child: FlowyButton(
text: FlowyText.medium(title),
text: FlowyText(title),
rightIcon: const FlowySvg(FlowySvgs.more_s),
),
),

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

@ -33,7 +33,7 @@ class EndTimeButton extends StatelessWidget {
color: Theme.of(context).iconTheme.color,
),
const HSpace(6),
FlowyText.medium(LocaleKeys.datePicker_isRange.tr()),
FlowyText(LocaleKeys.datePicker_isRange.tr()),
const Spacer(),
Toggle(
value: isRange,

2
frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/button.dart
View File

@ -143,7 +143,7 @@ class FlowyButton extends StatelessWidget {
final VoidCallback? onTap;
final VoidCallback? onSecondaryTap;
final void Function(bool)? onHover;
final EdgeInsets? margin;
final EdgeInsetsGeometry? margin;
final Widget? leftIcon;
final Widget? rightIcon;
final Color? hoverColor;

11
frontend/appflowy_flutter/packages/flowy_infra_ui/lib/style_widget/icon_button.dart
View File

@ -63,11 +63,12 @@ class FlowyIconButton extends StatelessWidget {
child = FlowyHover(
isSelected: isSelected != null ? () => isSelected! : null,
style: HoverStyle(
hoverColor: hoverColor,
foregroundColorOnHover:
iconColorOnHover ?? Theme.of(context).iconTheme.color,
//Do not set background here. Use [fillColor] instead.
),
hoverColor: hoverColor,
foregroundColorOnHover:
iconColorOnHover ?? Theme.of(context).iconTheme.color,
borderRadius: radius ?? Corners.s6Border
//Do not set background here. Use [fillColor] instead.
),
resetHoverOnRebuild: false,
child: child,
);

4
frontend/resources/flowy_icons/16x/add_less_padding.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="M3 8H13" stroke="#000000" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 13V3" stroke="#000000" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 309 B

26
frontend/resources/flowy_icons/16x/ai_indicator.svg
View File

@ -1,23 +1,11 @@
<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_2389_7357)">
<rect x="3.66663" y="2" width="16" height="16" rx="6" fill="url(#paint0_linear_2389_7357)" shape-rendering="crispEdges"/>
<rect x="3.66663" y="2" width="16" height="16" rx="6" fill="#806989" shape-rendering="crispEdges"/>
<path d="M11.1576 11.884H8.79963L8.42163 13H6.81063L9.09663 6.682H10.8786L13.1646 13H11.5356L11.1576 11.884ZM10.7616 10.696L9.97863 8.383L9.20463 10.696H10.7616ZM14.6794 7.456C14.4094 7.456 14.1874 7.378 14.0134 7.222C13.8454 7.06 13.7614 6.862 13.7614 6.628C13.7614 6.388 13.8454 6.19 14.0134 6.034C14.1874 5.872 14.4094 5.791 14.6794 5.791C14.9434 5.791 15.1594 5.872 15.3274 6.034C15.5014 6.19 15.5884 6.388 15.5884 6.628C15.5884 6.862 15.5014 7.06 15.3274 7.222C15.1594 7.378 14.9434 7.456 14.6794 7.456ZM15.4444 7.978V13H13.9054V7.978H15.4444Z" fill="white"/>
</g>
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="18" height="18" rx="6" fill="url(#paint0_linear_3154_1297)" fill-opacity="0.08"/>
<path d="M9.06641 10.3512L9.92804 12.6047C10.0221 12.8506 10.2976 12.9737 10.5435 12.8797C10.7894 12.7857 10.9125 12.5101 10.8185 12.2643L8.2445 5.53232C8.01837 4.9409 7.18168 4.9409 6.95555 5.53232L4.38157 12.2643C4.28756 12.5101 4.41067 12.7857 4.65656 12.8797C4.90245 12.9737 5.17799 12.8506 5.27201 12.6047L6.13364 10.3512H9.06641ZM6.49813 9.39792L7.60002 6.51606L8.70192 9.39792H6.49813Z" fill="#9D46F3" stroke="#9D46F3" stroke-width="0.1"/>
<rect x="12.3" y="5.10001" width="1" height="7.8" rx="0.5" fill="#9D46F3"/>
<defs>
<filter id="filter0_d_2389_7357" x="0.666626" y="0" width="22" height="22" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="1"/>
<feGaussianBlur stdDeviation="1.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2389_7357"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2389_7357" result="shape"/>
</filter>
<linearGradient id="paint0_linear_2389_7357" x1="15.6666" y1="2.4" x2="6.86663" y2="17.2" gradientUnits="userSpaceOnUse">
<stop stop-color="#726084" stop-opacity="0.8"/>
<stop offset="1" stop-color="#5D5862"/>
<linearGradient id="paint0_linear_3154_1297" x1="-5.28572" y1="16.9984" x2="16.2306" y2="3.99301" gradientUnits="userSpaceOnUse">
<stop stop-color="#665CE5"/>
<stop offset="1" stop-color="#F03EFF"/>
</linearGradient>
</defs>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 953 B