Clean up table/list layouts

This commit is contained in:
Hillel Coren 2020-05-26 21:18:43 +03:00
parent 1ec8e70248
commit 2a69d3d7d5
5 changed files with 352 additions and 350 deletions

View File

@ -2,7 +2,6 @@ import 'package:flutter_redux/flutter_redux.dart';
import 'package:invoiceninja_flutter/constants.dart';
import 'package:invoiceninja_flutter/redux/app/app_actions.dart';
import 'package:invoiceninja_flutter/redux/app/app_state.dart';
import 'package:invoiceninja_flutter/redux/ui/pref_state.dart';
import 'package:invoiceninja_flutter/ui/app/actions_menu_button.dart';
import 'package:invoiceninja_flutter/ui/app/entities/entity_status_chip.dart';
import 'package:invoiceninja_flutter/ui/app/entity_state_label.dart';
@ -12,7 +11,6 @@ import 'package:flutter/material.dart';
import 'package:invoiceninja_flutter/data/models/models.dart';
import 'package:invoiceninja_flutter/ui/app/dismissible_entity.dart';
import 'package:invoiceninja_flutter/utils/localization.dart';
import 'package:invoiceninja_flutter/utils/platforms.dart';
class CreditListItem extends StatelessWidget {
const CreditListItem({
@ -55,75 +53,6 @@ class CreditListItem extends StatelessWidget {
: null;
final textColor = Theme.of(context).textTheme.bodyText1.color;
Widget _buildMobile() {
return ListTile(
onTap: isInMultiselect
? () => onEntityAction(EntityAction.toggleMultiselect)
: onTap,
onLongPress: onLongPress,
leading: showCheckbox
? IgnorePointer(
ignoring: listUIState.isInMultiselect(),
child: Checkbox(
value: isChecked,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
onChanged: (value) => onCheckboxChanged(value),
activeColor: Theme.of(context).accentColor,
),
)
: null,
title: Container(
width: MediaQuery.of(context).size.width,
child: Row(
children: <Widget>[
Expanded(
child: Text(
client.displayName,
style: Theme.of(context).textTheme.headline6,
),
),
Text(
formatNumber(
credit.balance > 0 ? credit.balance : credit.amount,
context,
clientId: credit.clientId),
style: Theme.of(context).textTheme.headline6),
],
),
),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: filterMatch == null
? Text((((credit.number ?? '').isEmpty
? localization.pending
: credit.number) +
'' +
formatDate(credit.date, context) +
(hasDocuments ? ' 📎' : ''))
.trim())
: Text(
filterMatch,
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
),
Text(localization.lookup(kCreditStatuses[credit.statusId]),
style: TextStyle(
color: CreditStatusColors.colors[credit.statusId],
)),
],
),
EntityStateLabel(credit),
],
),
);
}
Widget _buildDesktop() {
String subtitle = '';
if (credit.date.isNotEmpty) {
subtitle = formatDate(credit.date, context);
@ -132,7 +61,18 @@ class CreditListItem extends StatelessWidget {
subtitle += ' 📎';
}
return InkWell(
return DismissibleEntity(
isSelected: credit.id ==
(uiState.isEditing
? creditUIState.editing.id
: creditUIState.selectedId),
userCompany: state.userCompany,
entity: credit,
onEntityAction: onEntityAction,
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return constraints.maxWidth > kTableListWidthCutoff
? InkWell(
onTap: isInMultiselect
? () => onEntityAction(EntityAction.toggleMultiselect)
: onTap,
@ -155,7 +95,8 @@ class CreditListItem extends StatelessWidget {
value: isChecked,
materialTapTargetSize:
MaterialTapTargetSize.shrinkWrap,
onChanged: (value) => onCheckboxChanged(value),
onChanged: (value) =>
onCheckboxChanged(value),
activeColor: Theme.of(context).accentColor,
),
)
@ -167,7 +108,8 @@ class CreditListItem extends StatelessWidget {
isSaving: false,
entity: credit,
onSelected: (context, action) =>
handleEntityAction(context, credit, action),
handleEntityAction(
context, credit, action),
)),
ConstrainedBox(
child: Column(
@ -198,7 +140,10 @@ class CreditListItem extends StatelessWidget {
filterMatch ?? subtitle,
maxLines: 3,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.subtitle2.copyWith(
style: Theme.of(context)
.textTheme
.subtitle2
.copyWith(
color: textColor.withOpacity(0.65),
),
),
@ -207,7 +152,8 @@ class CreditListItem extends StatelessWidget {
),
SizedBox(width: 10),
Text(
formatNumber(credit.amount, context, clientId: client.id),
formatNumber(credit.amount, context,
clientId: client.id),
style: textStyle,
textAlign: TextAlign.end,
),
@ -216,20 +162,78 @@ class CreditListItem extends StatelessWidget {
],
),
),
)
: ListTile(
onTap: isInMultiselect
? () => onEntityAction(EntityAction.toggleMultiselect)
: onTap,
onLongPress: onLongPress,
leading: showCheckbox
? IgnorePointer(
ignoring: listUIState.isInMultiselect(),
child: Checkbox(
value: isChecked,
materialTapTargetSize:
MaterialTapTargetSize.shrinkWrap,
onChanged: (value) => onCheckboxChanged(value),
activeColor: Theme.of(context).accentColor,
),
)
: null,
title: Container(
width: MediaQuery.of(context).size.width,
child: Row(
children: <Widget>[
Expanded(
child: Text(
client.displayName,
style: Theme.of(context).textTheme.headline6,
),
),
Text(
formatNumber(
credit.balance > 0
? credit.balance
: credit.amount,
context,
clientId: credit.clientId),
style: Theme.of(context).textTheme.headline6),
],
),
),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: filterMatch == null
? Text((((credit.number ?? '').isEmpty
? localization.pending
: credit.number) +
'' +
formatDate(credit.date, context) +
(hasDocuments ? ' 📎' : ''))
.trim())
: Text(
filterMatch,
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
),
Text(
localization
.lookup(kCreditStatuses[credit.statusId]),
style: TextStyle(
color: CreditStatusColors.colors[credit.statusId],
)),
],
),
EntityStateLabel(credit),
],
),
);
}
return DismissibleEntity(
isSelected: credit.id ==
(uiState.isEditing
? creditUIState.editing.id
: creditUIState.selectedId),
userCompany: state.userCompany,
entity: credit,
onEntityAction: onEntityAction,
child: calculateLayout(context, breakOutTablet: true) == AppLayout.desktop
? _buildDesktop()
: _buildMobile(),
}),
);
}
}

View File

@ -2,7 +2,6 @@ import 'package:flutter_redux/flutter_redux.dart';
import 'package:invoiceninja_flutter/constants.dart';
import 'package:invoiceninja_flutter/redux/app/app_actions.dart';
import 'package:invoiceninja_flutter/redux/app/app_state.dart';
import 'package:invoiceninja_flutter/redux/ui/pref_state.dart';
import 'package:invoiceninja_flutter/ui/app/actions_menu_button.dart';
import 'package:invoiceninja_flutter/ui/app/entities/entity_status_chip.dart';
import 'package:invoiceninja_flutter/ui/app/entity_state_label.dart';
@ -12,7 +11,6 @@ import 'package:flutter/material.dart';
import 'package:invoiceninja_flutter/data/models/models.dart';
import 'package:invoiceninja_flutter/ui/app/dismissible_entity.dart';
import 'package:invoiceninja_flutter/utils/localization.dart';
import 'package:invoiceninja_flutter/utils/platforms.dart';
class InvoiceListItem extends StatelessWidget {
const InvoiceListItem({

View File

@ -2,7 +2,6 @@ import 'package:flutter_redux/flutter_redux.dart';
import 'package:invoiceninja_flutter/constants.dart';
import 'package:invoiceninja_flutter/redux/app/app_actions.dart';
import 'package:invoiceninja_flutter/redux/app/app_state.dart';
import 'package:invoiceninja_flutter/redux/ui/pref_state.dart';
import 'package:invoiceninja_flutter/ui/app/actions_menu_button.dart';
import 'package:invoiceninja_flutter/ui/app/entities/entity_status_chip.dart';
import 'package:invoiceninja_flutter/ui/app/entity_state_label.dart';
@ -12,7 +11,6 @@ import 'package:flutter/material.dart';
import 'package:invoiceninja_flutter/data/models/models.dart';
import 'package:invoiceninja_flutter/ui/app/dismissible_entity.dart';
import 'package:invoiceninja_flutter/utils/localization.dart';
import 'package:invoiceninja_flutter/utils/platforms.dart';
class PaymentListItem extends StatelessWidget {
const PaymentListItem({

View File

@ -5,12 +5,10 @@ import 'package:invoiceninja_flutter/constants.dart';
import 'package:invoiceninja_flutter/data/models/models.dart';
import 'package:invoiceninja_flutter/redux/app/app_actions.dart';
import 'package:invoiceninja_flutter/redux/app/app_state.dart';
import 'package:invoiceninja_flutter/redux/ui/pref_state.dart';
import 'package:invoiceninja_flutter/ui/app/actions_menu_button.dart';
import 'package:invoiceninja_flutter/ui/app/dismissible_entity.dart';
import 'package:invoiceninja_flutter/ui/app/entity_state_label.dart';
import 'package:invoiceninja_flutter/utils/formatting.dart';
import 'package:invoiceninja_flutter/utils/platforms.dart';
class ProductListItem extends StatelessWidget {
const ProductListItem({

View File

@ -2,7 +2,6 @@ import 'package:flutter_redux/flutter_redux.dart';
import 'package:invoiceninja_flutter/constants.dart';
import 'package:invoiceninja_flutter/redux/app/app_actions.dart';
import 'package:invoiceninja_flutter/redux/app/app_state.dart';
import 'package:invoiceninja_flutter/redux/ui/pref_state.dart';
import 'package:invoiceninja_flutter/ui/app/actions_menu_button.dart';
import 'package:invoiceninja_flutter/ui/app/entities/entity_status_chip.dart';
import 'package:invoiceninja_flutter/ui/app/entity_state_label.dart';
@ -12,7 +11,6 @@ import 'package:flutter/material.dart';
import 'package:invoiceninja_flutter/data/models/models.dart';
import 'package:invoiceninja_flutter/ui/app/dismissible_entity.dart';
import 'package:invoiceninja_flutter/utils/localization.dart';
import 'package:invoiceninja_flutter/utils/platforms.dart';
class QuoteListItem extends StatelessWidget {
const QuoteListItem({
@ -55,8 +53,124 @@ class QuoteListItem extends StatelessWidget {
client.matchesFilterValue(filter))
: null;
Widget _buildMobile() {
return ListTile(
String subtitle = '';
if (quote.date.isNotEmpty) {
subtitle = formatDate(quote.date, context);
}
if (quote.dueDate.isNotEmpty) {
if (subtitle.isNotEmpty) {
subtitle += '';
}
subtitle += formatDate(quote.dueDate, context);
}
if (hasDocuments) {
subtitle += ' 📎';
}
return DismissibleEntity(
isSelected: quote.id ==
(uiState.isEditing
? quoteUIState.editing.id
: quoteUIState.selectedId),
userCompany: state.userCompany,
entity: quote,
onEntityAction: onEntityAction,
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return constraints.maxWidth > kTableListWidthCutoff
? InkWell(
onTap: isInMultiselect
? () => onEntityAction(EntityAction.toggleMultiselect)
: onTap,
onLongPress: onLongPress,
child: Padding(
padding: const EdgeInsets.only(
left: 12,
right: 28,
top: 4,
bottom: 4,
),
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 15),
child: showCheckbox
? IgnorePointer(
ignoring: listUIState.isInMultiselect(),
child: Checkbox(
value: isChecked,
materialTapTargetSize:
MaterialTapTargetSize.shrinkWrap,
onChanged: (value) =>
onCheckboxChanged(value),
activeColor:
Theme.of(context).accentColor,
),
)
: ActionMenuButton(
entityActions: quote.getActions(
userCompany: state.userCompany,
includeEdit: true,
client: client),
isSaving: false,
entity: quote,
onSelected: (context, action) =>
handleEntityAction(
context, quote, action),
)),
ConstrainedBox(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
(quote.number ?? '').isEmpty
? localization.pending
: quote.number,
style: textStyle,
overflow: TextOverflow.ellipsis,
),
if (!quote.isActive) EntityStateLabel(quote)
],
),
constraints: BoxConstraints(
minWidth: 80,
maxWidth: 80,
),
),
SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(client.displayName, style: textStyle),
Text(
filterMatch ?? subtitle,
maxLines: 3,
overflow: TextOverflow.ellipsis,
style: Theme.of(context)
.textTheme
.subtitle2
.copyWith(
color: textColor.withOpacity(0.65),
),
),
],
),
),
SizedBox(width: 10),
Text(
formatNumber(quote.balance, context,
clientId: client.id),
style: textStyle,
textAlign: TextAlign.end,
),
SizedBox(width: 25),
EntityStatusChip(entity: quote),
],
),
),
)
: ListTile(
onTap: isInMultiselect
? () => onEntityAction(EntityAction.toggleMultiselect)
: onTap,
@ -66,7 +180,8 @@ class QuoteListItem extends StatelessWidget {
ignoring: listUIState.isInMultiselect(),
child: Checkbox(
value: isChecked,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
materialTapTargetSize:
MaterialTapTargetSize.shrinkWrap,
onChanged: (value) => onCheckboxChanged(value),
activeColor: Theme.of(context).accentColor,
),
@ -84,7 +199,10 @@ class QuoteListItem extends StatelessWidget {
),
Text(
formatNumber(
quote.balance > 0 ? quote.balance : quote.amount, context,
quote.balance > 0
? quote.balance
: quote.amount,
context,
clientId: quote.clientId),
style: Theme.of(context).textTheme.headline6),
],
@ -117,7 +235,8 @@ class QuoteListItem extends StatelessWidget {
Text(
quote.isPastDue
? localization.expired
: localization.lookup(kQuoteStatuses[quote.statusId]),
: localization
.lookup(kQuoteStatuses[quote.statusId]),
style: TextStyle(
color: quote.isPastDue
? Colors.red
@ -129,121 +248,6 @@ class QuoteListItem extends StatelessWidget {
],
),
);
}
Widget _buildDesktop() {
String subtitle = '';
if (quote.date.isNotEmpty) {
subtitle = formatDate(quote.date, context);
}
if (quote.dueDate.isNotEmpty) {
if (subtitle.isNotEmpty) {
subtitle += '';
}
subtitle += formatDate(quote.dueDate, context);
}
if (hasDocuments) {
subtitle += ' 📎';
}
return InkWell(
onTap: isInMultiselect
? () => onEntityAction(EntityAction.toggleMultiselect)
: onTap,
onLongPress: onLongPress,
child: Padding(
padding: const EdgeInsets.only(
left: 12,
right: 28,
top: 4,
bottom: 4,
),
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 15),
child: showCheckbox
? IgnorePointer(
ignoring: listUIState.isInMultiselect(),
child: Checkbox(
value: isChecked,
materialTapTargetSize:
MaterialTapTargetSize.shrinkWrap,
onChanged: (value) => onCheckboxChanged(value),
activeColor: Theme.of(context).accentColor,
),
)
: ActionMenuButton(
entityActions: quote.getActions(
userCompany: state.userCompany,
includeEdit: true,
client: client),
isSaving: false,
entity: quote,
onSelected: (context, action) =>
handleEntityAction(context, quote, action),
)),
ConstrainedBox(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
(quote.number ?? '').isEmpty
? localization.pending
: quote.number,
style: textStyle,
overflow: TextOverflow.ellipsis,
),
if (!quote.isActive) EntityStateLabel(quote)
],
),
constraints: BoxConstraints(
minWidth: 80,
maxWidth: 80,
),
),
SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(client.displayName, style: textStyle),
Text(
filterMatch ?? subtitle,
maxLines: 3,
overflow: TextOverflow.ellipsis,
style: Theme.of(context).textTheme.subtitle2.copyWith(
color: textColor.withOpacity(0.65),
),
),
],
),
),
SizedBox(width: 10),
Text(
formatNumber(quote.balance, context, clientId: client.id),
style: textStyle,
textAlign: TextAlign.end,
),
SizedBox(width: 25),
EntityStatusChip(entity: quote),
],
),
),
);
}
return DismissibleEntity(
isSelected: quote.id ==
(uiState.isEditing
? quoteUIState.editing.id
: quoteUIState.selectedId),
userCompany: state.userCompany,
entity: quote,
onEntityAction: onEntityAction,
child: calculateLayout(context, breakOutTablet: true) == AppLayout.desktop
? _buildDesktop()
: _buildMobile(),
);
}));
}
}