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,168 +53,12 @@ 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),
],
),
);
String subtitle = '';
if (credit.date.isNotEmpty) {
subtitle = formatDate(credit.date, context);
}
Widget _buildDesktop() {
String subtitle = '';
if (credit.date.isNotEmpty) {
subtitle = formatDate(credit.date, 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: credit.getActions(
userCompany: state.userCompany,
includeEdit: true,
client: client),
isSaving: false,
entity: credit,
onSelected: (context, action) =>
handleEntityAction(context, credit, action),
)),
ConstrainedBox(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
(credit.number ?? '').isEmpty
? localization.pending
: credit.number,
style: textStyle,
overflow: TextOverflow.ellipsis,
),
if (!credit.isActive) EntityStateLabel(credit)
],
),
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(credit.amount, context, clientId: client.id),
style: textStyle,
textAlign: TextAlign.end,
),
SizedBox(width: 25),
EntityStatusChip(entity: credit),
],
),
),
);
if (hasDocuments) {
subtitle += ' 📎';
}
return DismissibleEntity(
@ -227,9 +69,171 @@ class CreditListItem extends StatelessWidget {
userCompany: state.userCompany,
entity: credit,
onEntityAction: onEntityAction,
child: calculateLayout(context, breakOutTablet: true) == AppLayout.desktop
? _buildDesktop()
: _buildMobile(),
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: credit.getActions(
userCompany: state.userCompany,
includeEdit: true,
client: client),
isSaving: false,
entity: credit,
onSelected: (context, action) =>
handleEntityAction(
context, credit, action),
)),
ConstrainedBox(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
(credit.number ?? '').isEmpty
? localization.pending
: credit.number,
style: textStyle,
overflow: TextOverflow.ellipsis,
),
if (!credit.isActive) EntityStateLabel(credit)
],
),
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(credit.amount, context,
clientId: client.id),
style: textStyle,
textAlign: TextAlign.end,
),
SizedBox(width: 25),
EntityStatusChip(entity: credit),
],
),
),
)
: 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),
],
),
);
}),
);
}
}

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,114 +53,129 @@ class QuoteListItem extends StatelessWidget {
client.matchesFilterValue(filter))
: null;
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(
quote.balance > 0 ? quote.balance : quote.amount, context,
clientId: quote.clientId),
style: Theme.of(context).textTheme.headline6),
],
),
),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: filterMatch == null
? Text((((quote.number ?? '').isEmpty
? localization.pending
: quote.number) +
'' +
formatDate(
quote.dueDate.isNotEmpty
? quote.dueDate
: quote.date,
context) +
(hasDocuments ? ' 📎' : ''))
.trim())
: Text(
filterMatch,
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
),
Text(
quote.isPastDue
? localization.expired
: localization.lookup(kQuoteStatuses[quote.statusId]),
style: TextStyle(
color: quote.isPastDue
? Colors.red
: QuoteStatusColors.colors[quote.statusId],
)),
],
),
EntityStateLabel(quote),
],
),
);
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 += ' 📎';
}
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
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,
onLongPress: onLongPress,
leading: showCheckbox
? IgnorePointer(
ignoring: listUIState.isInMultiselect(),
child: Checkbox(
@ -173,77 +186,68 @@ class QuoteListItem extends StatelessWidget {
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),
: 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(
quote.balance > 0
? quote.balance
: quote.amount,
context,
clientId: quote.clientId),
style: Theme.of(context).textTheme.headline6),
],
),
],
),
),
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(),
);
),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: filterMatch == null
? Text((((quote.number ?? '').isEmpty
? localization.pending
: quote.number) +
'' +
formatDate(
quote.dueDate.isNotEmpty
? quote.dueDate
: quote.date,
context) +
(hasDocuments ? ' 📎' : ''))
.trim())
: Text(
filterMatch,
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
),
Text(
quote.isPastDue
? localization.expired
: localization
.lookup(kQuoteStatuses[quote.statusId]),
style: TextStyle(
color: quote.isPastDue
? Colors.red
: QuoteStatusColors.colors[quote.statusId],
)),
],
),
EntityStateLabel(quote),
],
),
);
}));
}
}