chore: misc mobile UI improvements (#4072)

* chore: adjust colors

* chore: adjust card detail padding and text weight

* fix: recent view horizontal padding

* chore: entire row opens row detail page
This commit is contained in:
Richard Shiue 2023-12-03 12:19:43 +08:00 committed by GitHub
parent ff3ff9f888
commit 4d71b42a3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 37 additions and 42 deletions

View File

@ -354,10 +354,11 @@ class MobileRowDetailPageContentState
if (state.primaryField != null) {
final cellStyle = GridTextCellStyle(
placeholder: LocaleKeys.grid_row_titlePlaceholder.tr(),
textStyle: Theme.of(context)
.textTheme
.bodyMedium
?.copyWith(fontSize: 22),
textStyle:
Theme.of(context).textTheme.bodyMedium?.copyWith(
fontSize: 22,
fontWeight: FontWeight.w500,
),
cellPadding: const EdgeInsets.symmetric(vertical: 8),
useRoundedBorder: false,
);
@ -382,7 +383,7 @@ class MobileRowDetailPageContentState
),
Expanded(
child: ListView(
padding: const EdgeInsets.symmetric(vertical: 8),
padding: const EdgeInsets.only(top: 8, bottom: 100),
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 18),
@ -397,9 +398,10 @@ class MobileRowDetailPageContentState
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (rowDetailState.numHiddenFields != 0)
if (rowDetailState.numHiddenFields != 0) ...[
const ToggleHiddenFieldsVisibilityButton(),
const VSpace(12),
const VSpace(12),
],
MobileRowDetailCreateFieldButton(
viewId: viewId,
fieldController: fieldController,

View File

@ -36,6 +36,7 @@ class MobileRowPropertyList extends StatelessWidget {
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount: visibleCells.length,
padding: EdgeInsets.zero,
itemBuilder: (context, index) => _PropertyCell(
key: ValueKey('row_detail_${visibleCells[index].fieldId}'),
cellContext: visibleCells[index],

View File

@ -91,7 +91,7 @@ class MobileHomePage extends StatelessWidget {
child: Scrollbar(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8.0),
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
@ -101,7 +101,7 @@ class MobileHomePage extends StatelessWidget {
// Folders
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
padding: const EdgeInsets.symmetric(horizontal: 24),
child: MobileFolders(
user: userProfile,
workspaceSetting: workspaceSetting,
@ -110,7 +110,7 @@ class MobileHomePage extends StatelessWidget {
),
const SizedBox(height: 8),
const Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
padding: EdgeInsets.symmetric(horizontal: 24),
child: _TrashButton(),
),
],

View File

@ -66,7 +66,7 @@ class _RecentViews extends StatelessWidget {
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
padding: const EdgeInsets.symmetric(horizontal: 24),
child: FlowyText.semibold(
LocaleKeys.sideBar_recent.tr(),
fontSize: 20.0,
@ -74,7 +74,7 @@ class _RecentViews extends StatelessWidget {
),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
child: IntrinsicHeight(
child: SeparatedRow(
separatorBuilder: () => const HSpace(8),

View File

@ -5,7 +5,6 @@ import 'package:appflowy/plugins/database_view/application/row/row_cache.dart';
import 'package:appflowy/plugins/database_view/application/row/row_controller.dart';
import 'package:appflowy/plugins/database_view/application/row/row_service.dart';
import 'package:appflowy/plugins/database_view/grid/application/row/row_bloc.dart';
import 'package:appflowy/plugins/database_view/widgets/row/accessory/cell_accessory.dart';
import 'package:appflowy/plugins/database_view/widgets/row/cell_builder.dart';
import 'package:appflowy/plugins/database_view/widgets/row/cells/mobile_cell_container.dart';
import 'package:flowy_infra/theme_extension.dart';
@ -72,9 +71,14 @@ class _MobileGridRowState extends State<MobileGridRow> {
children: [
SizedBox(width: GridSize.leadingHeaderPadding),
Expanded(
child: RowContent(
builder: _cellBuilder,
onExpand: () => widget.openDetailPage(context),
child: InkWell(
onTap: () => widget.openDetailPage(context),
child: IgnorePointer(
child: RowContent(
builder: _cellBuilder,
onExpand: () => widget.openDetailPage(context),
),
),
),
),
],
@ -152,25 +156,7 @@ class RowContent extends StatelessWidget {
width: cellId.fieldInfo.fieldSettings?.width.toDouble() ?? 140,
isPrimary: cellId.fieldInfo.field.isPrimary,
accessoryBuilder: (buildContext) {
final builder = child.accessoryBuilder;
final List<GridCellAccessoryBuilder> accessories = [];
if (cellId.fieldInfo.field.isPrimary) {
accessories.add(
GridCellAccessoryBuilder(
builder: (key) => PrimaryCellAccessory(
key: key,
onTapCallback: onExpand,
isCellEditing: buildContext.isCellEditing,
),
),
);
}
if (builder != null) {
accessories.addAll(builder(buildContext));
}
return accessories;
return [];
},
child: child,
);

View File

@ -136,9 +136,12 @@ class _DateCellState extends GridCellState<GridDateCell> {
),
),
const HSpace(6),
const RotatedBox(
RotatedBox(
quarterTurns: 3,
child: Icon(Icons.chevron_left),
child: Icon(
Icons.chevron_left,
color: Theme.of(context).hintColor,
),
),
const HSpace(2),
],

View File

@ -232,9 +232,12 @@ class _SelectOptionWrapState extends State<SelectOptionWrap> {
children: [
Expanded(child: _buildMobileOptions(isInRowDetail: true)),
const HSpace(6),
const RotatedBox(
RotatedBox(
quarterTurns: 3,
child: Icon(Icons.chevron_left),
child: Icon(
Icons.chevron_left,
color: Theme.of(context).hintColor,
),
),
const HSpace(2),
],
@ -298,7 +301,7 @@ class _SelectOptionWrapState extends State<SelectOptionWrap> {
return Container(
alignment: Alignment.centerLeft,
padding: const EdgeInsets.symmetric(vertical: 1),
child: FlowyText.medium(
child: FlowyText(
widget.cellStyle.placeholder,
color: Theme.of(context).hintColor,
),

View File

@ -6,7 +6,7 @@ import 'package:flowy_infra/theme_extension.dart';
import 'package:flutter/material.dart';
class MobileAppearance extends BaseAppearance {
static const _primaryColor = Color(0xFF2DA2F6); //primary 100
static const _primaryColor = Color(0xFF00BCF0); //primary 100
static const _onBackgroundColor = Color(0xff2F3030); // text/title color
static const _onSurfaceColor = Color(0xff676666); // text/body color
static const _onSecondaryColor = Color(0xFFC5C7CB); // text/body2 color
@ -79,7 +79,7 @@ class MobileAppearance extends BaseAppearance {
);
final hintColor = brightness == Brightness.light
? const Color(0xff89909B)
? const Color(0x991F2329)
: _hintColorInDarkMode;
return ThemeData(