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

chore: mobile grid dark mode improvements (#4821)

Browse Source 
* chore: field type grid

* chore: don't allow hiding primary field

* chore: bottom sheets

* chore: checklist bottom sheet
This commit is contained in:
Richard Shiue 2024-03-05 15:44:16 +08:00 committed by GitHub
parent c8e86f4f26
commit ff8eb0d479
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 46 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,6 +20,7 @@ class OptionColorList extends StatelessWidget {
crossAxisCount: 6,
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
padding: EdgeInsets.zero,
children: SelectOptionColorPB.values.map(
(colorPB) {
final color = colorPB.toColor(context);

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

@ -65,7 +65,7 @@ Future<T?> showMobileBottomSheet<T>(
backgroundColor ??= Theme.of(context).brightness == Brightness.light
? const Color(0xFFF7F8FB)
: const Color(0xFF626364);
: const Color(0xFF23262B);
return showModalBottomSheet<T>(
context: context,

2
frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_transition_bottom_sheet.dart
View File

@ -39,7 +39,7 @@ Future<T?> showTransitionMobileBottomSheet<T>(
backgroundColor ??= Theme.of(context).brightness == Brightness.light
? const Color(0xFFF7F8FB)
: const Color(0xFF626364);
: const Color(0xFF23262B);
return Navigator.of(
context,

2
frontend/appflowy_flutter/lib/mobile/presentation/database/date_picker/mobile_date_picker_screen.dart
View File

@ -55,7 +55,7 @@ class _MobileDateCellEditScreenState extends State<MobileDateCellEditScreen> {
minChildSize: 0.4,
snapSizes: const [0.4, 0.7, 1.0],
builder: (_, controller) => Material(
color: Theme.of(context).colorScheme.secondaryContainer,
color: Colors.transparent,
child: ListView(
controller: controller,
children: [

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

@ -47,7 +47,9 @@ Future<FieldType?> showFieldTypeGridBottomSheet(
.map(
(fieldType) => TypeOptionMenuItemValue(
value: fieldType,
backgroundColor: fieldType.mobileIconBackgroundColor,
backgroundColor: Theme.of(context).brightness == Brightness.light
? fieldType.mobileIconBackgroundColor
: fieldType.mobileIconBackgroundColorDark,
text: fieldType.i18n,
icon: fieldType.svgData,
onTap: (context, fieldType) =>
@ -121,7 +123,6 @@ void showQuickEditField(
) {
showMobileBottomSheet(
context,
backgroundColor: Theme.of(context).colorScheme.secondaryContainer,
showDragHandle: true,
builder: (context) {
return SingleChildScrollView(

7
frontend/appflowy_flutter/lib/mobile/presentation/database/field/mobile_full_field_editor.dart
View File

@ -208,7 +208,9 @@ class _MobileFieldEditorState extends State<MobileFieldEditor> {
Widget build(BuildContext context) {
final option = _buildOption();
return Container(
color: Theme.of(context).colorScheme.secondaryContainer,
color: Theme.of(context).brightness == Brightness.light
? const Color(0xFFF7F8FB)
: const Color(0xFF23262B),
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
child: Column(
@ -259,6 +261,7 @@ class _MobileFieldEditorState extends State<MobileFieldEditor> {
],
..._buildOptionActions(),
const _Divider(),
VSpace(MediaQuery.viewPaddingOf(context).bottom == 0 ? 28.0 : 16.0),
],
),
),
@ -351,7 +354,7 @@ class _MobileFieldEditorState extends State<MobileFieldEditor> {
}
return [
if (widget.actions.contains(FieldOptionAction.hide))
if (widget.actions.contains(FieldOptionAction.hide) && !widget.isPrimary)
FlowyOptionTile.text(
text: LocaleKeys.grid_field_hide.tr(),
leftIcon: const FlowySvg(FlowySvgs.m_field_hide_s),

6
frontend/appflowy_flutter/lib/plugins/database/tab_bar/mobile/mobile_tab_bar_header.dart
View File

@ -87,7 +87,11 @@ class _DatabaseViewSelectorButton extends StatelessWidget {
borderRadius: BorderRadius.all(Radius.circular(12)),
),
),
backgroundColor: const MaterialStatePropertyAll(Color(0x0F212729)),
backgroundColor: MaterialStatePropertyAll(
Theme.of(context).brightness == Brightness.light
? const Color(0x0F212729)
: const Color(0x0FFFFFFF),
),
overlayColor: MaterialStatePropertyAll(
Theme.of(context).colorScheme.secondary,
),

1
frontend/appflowy_flutter/lib/plugins/database/widgets/cell/mobile_grid/mobile_grid_checklist_cell.dart
View File

@ -39,7 +39,6 @@ class MobileGridChecklistCellSkin extends IEditableChecklistCellSkin {
),
onTap: () => showMobileBottomSheet(
context,
backgroundColor: Theme.of(context).colorScheme.background,
builder: (context) {
return BlocProvider.value(
value: bloc,

1
frontend/appflowy_flutter/lib/plugins/database/widgets/cell/mobile_grid/mobile_grid_date_cell.dart
View File

@ -44,7 +44,6 @@ class MobileGridDateCellSkin extends IEditableDateCellSkin {
onTap: () {
showMobileBottomSheet(
context,
backgroundColor: Theme.of(context).colorScheme.secondaryContainer,
builder: (context) {
return MobileDateCellEditScreen(
controller: bloc.cellController,

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

@ -230,7 +230,7 @@ class _ChecklistItemState extends State<_ChecklistItem> {
void _showDeleteTaskBottomSheet() {
showMobileBottomSheet(
context,
padding: const EdgeInsets.only(top: 8, bottom: 32),
showDragHandle: true,
builder: (_) => Column(
mainAxisSize: MainAxisSize.min,
children: [

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

@ -421,7 +421,6 @@ class _MoreOptionsState extends State<_MoreOptions> {
@override
Widget build(BuildContext context) {
final color = Theme.of(context).colorScheme.secondaryContainer;
return SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
@ -432,22 +431,18 @@ class _MoreOptionsState extends State<_MoreOptions> {
const VSpace(16.0),
Padding(
padding: const EdgeInsets.only(left: 12.0),
child: ColoredBox(
color: color,
child: FlowyText(
LocaleKeys.grid_selectOption_colorPanelTitle.tr().toUpperCase(),
color: Theme.of(context).hintColor,
fontSize: 13,
),
child: FlowyText(
LocaleKeys.grid_selectOption_colorPanelTitle.tr().toUpperCase(),
color: Theme.of(context).hintColor,
fontSize: 13,
),
),
const VSpace(4.0),
FlowyOptionDecorateBox(
child: Padding(
padding: const EdgeInsets.only(
top: 12.0,
left: 6.0,
right: 6.0,
padding: const EdgeInsets.symmetric(
vertical: 12.0,
horizontal: 6.0,
),
child: OptionColorList(
selectedColor: option.color,

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

@ -147,7 +147,6 @@ void _showEditSortPanelFromToolbar(
) {
showMobileBottomSheet(
context,
backgroundColor: Theme.of(context).colorScheme.surface,
showDragHandle: true,
showDivider: false,
useSafeArea: false,

24
frontend/appflowy_flutter/lib/util/field_type_extension.dart
View File

@ -42,14 +42,30 @@ extension FieldTypeExtension on FieldType {
Color get mobileIconBackgroundColor => switch (this) {
FieldType.RichText => const Color(0xFFBECCFF),
FieldType.Number => const Color(0xFFCABDFF),
FieldType.DateTime => const Color(0xFFFDEDA7),
FieldType.URL => const Color(0xFFFFB9EF),
FieldType.SingleSelect => const Color(0xFFBECCFF),
FieldType.MultiSelect => const Color(0xFFBECCFF),
FieldType.URL => const Color(0xFFFFB9EF),
FieldType.Checkbox => const Color(0xFF98F4CD),
FieldType.Checklist => const Color(0xFF98F4CD),
FieldType.DateTime => const Color(0xFFFDEDA7),
FieldType.LastEditedTime => const Color(0xFFFDEDA7),
FieldType.CreatedTime => const Color(0xFFFDEDA7),
FieldType.Checkbox => const Color(0xFF98F4CD),
FieldType.Checklist => const Color(0xFF98F4CD),
FieldType.Relation => const Color(0xFFFDEDA7),
_ => throw UnimplementedError(),
};
// TODO(RS): inner icon color isn't always white
Color get mobileIconBackgroundColorDark => switch (this) {
FieldType.RichText => const Color(0xFF6859A7),
FieldType.Number => const Color(0xFF6859A7),
FieldType.URL => const Color(0xFFA75C96),
FieldType.SingleSelect => const Color(0xFF5366AB),
FieldType.MultiSelect => const Color(0xFF5366AB),
FieldType.DateTime => const Color(0xFFB0A26D),
FieldType.LastEditedTime => const Color(0xFFB0A26D),
FieldType.CreatedTime => const Color(0xFFB0A26D),
FieldType.Checkbox => const Color(0xFF42AD93),
FieldType.Checklist => const Color(0xFF42AD93),
FieldType.Relation => const Color(0xFFFDEDA7),
_ => throw UnimplementedError(),
};

3
frontend/appflowy_flutter/lib/workspace/application/settings/appearance/mobile_appearance.dart
View File

@ -74,10 +74,9 @@ class MobileAppearance extends BaseAppearance {
outline: _hintColorInDarkMode,
outlineVariant: Colors.black,
//Snack bar
surface: const Color(0xff2F3030),
surface: const Color(0xFF171A1F),
onSurface: const Color(0xffC5C6C7), // text/body color
);
final hintColor = brightness == Brightness.light
? const Color(0x991F2329)
: _hintColorInDarkMode;