From 6db7231de108e17e8de255a5c51665fdb97d6da1 Mon Sep 17 00:00:00 2001 From: Gorka Date: Mon, 22 Apr 2019 15:34:42 +0200 Subject: [PATCH 1/8] TransferFilters: remove duplicate margin rules --- apps/finance/app/src/components/TransfersFilters.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/finance/app/src/components/TransfersFilters.js b/apps/finance/app/src/components/TransfersFilters.js index 4a34aadf1e..a5387373db 100644 --- a/apps/finance/app/src/components/TransfersFilters.js +++ b/apps/finance/app/src/components/TransfersFilters.js @@ -131,8 +131,6 @@ const Filters = styled.div` width: 100%; margin: 0; justify-content: space-between; - margin-left: 0; - margin-right: 0; /* Easier than passing compactMode to every Filter & FilterLabel */ ${Filter} { From 180b1f84ebf4ab4b719231f9b90d1b096b42b58f Mon Sep 17 00:00:00 2001 From: Gorka Date: Mon, 22 Apr 2019 15:35:50 +0200 Subject: [PATCH 2/8] DatePicker: update today border color --- apps/finance/app/src/components/DateRange/DatePicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/finance/app/src/components/DateRange/DatePicker.js b/apps/finance/app/src/components/DateRange/DatePicker.js index cdf25572d4..1c16e73be5 100644 --- a/apps/finance/app/src/components/DateRange/DatePicker.js +++ b/apps/finance/app/src/components/DateRange/DatePicker.js @@ -220,7 +220,7 @@ const DayView = styled.li` ${props => props.today && css` - border: 1px solid ${theme.disabled}; + border: 1px solid ${mainColor}; `} ${props => From b4ce38881eb1988d3f297ed8299cbd5f6fce05b0 Mon Sep 17 00:00:00 2001 From: Gorka Date: Mon, 22 Apr 2019 15:36:37 +0200 Subject: [PATCH 3/8] DateRangePicker: update to allow null values on dates --- .../components/DateRange/DateRangeInput.js | 53 ++++++++++--------- 1 file changed, 29 insertions(+), 24 deletions(-) diff --git a/apps/finance/app/src/components/DateRange/DateRangeInput.js b/apps/finance/app/src/components/DateRange/DateRangeInput.js index e3cd588ecd..18d32941fa 100644 --- a/apps/finance/app/src/components/DateRange/DateRangeInput.js +++ b/apps/finance/app/src/components/DateRange/DateRangeInput.js @@ -10,7 +10,7 @@ import { startOfDay, endOfDay, } from 'date-fns' -import { breakpoint, theme } from '@aragon/ui' +import { breakpoint, font, theme } from '@aragon/ui' import IconCalendar from './Calendar' import TextInput from './TextInput' import DatePicker from './DatePicker' @@ -29,13 +29,20 @@ class DateRangeInput extends React.PureComponent { get formattedStartDate() { const { startDate } = this.state - return isDate(startDate) ? formatDate(startDate, this.props.format) : '' + return isDate(startDate) + ? formatDate(startDate, this.props.format) + : '--/--/----' } get formattedEndDate() { - const { endDate } = this.state - - return isDate(endDate) ? formatDate(endDate, this.props.format) : '' + const { endDate, startDate } = this.state + const { format } = this.props + + return isDate(endDate) + ? formatDate(endDate, format) + : startDate + ? '--/--/----' + : formatDate(new Date(), format) } componentWillUnmount() { @@ -59,36 +66,33 @@ class DateRangeInput extends React.PureComponent { handleClickOutside = event => { if (this.rootRef && !this.rootRef.contains(event.target)) { - this.setState({ showPicker: false }) + this.setState({ showPicker: false }, () => { + const { startDate, endDate } = this.state + if (startDate && endDate) { + this.props.onChange({ + start: startOfDay(startDate), + end: endOfDay(endDate), + }) + } + }) } } handleSelectStartDate = date => { const { endDate } = this.state - const isValidDate = isBefore(date, endDate) || isEqual(date, endDate) + const isValidDate = + !endDate || isBefore(date, endDate) || isEqual(date, endDate) if (isValidDate) { - this.setState( - { startDateSelected: true, startDate: startOfDay(date) }, - () => { - this.props.onChange({ - start: startOfDay(date), - end: endOfDay(endDate), - }) - } - ) + this.setState({ startDateSelected: true, startDate: startOfDay(date) }) } } handleSelectEndDate = date => { const { startDate } = this.state - const isValidDate = isAfter(date, startDate) || isEqual(date, startDate) + const isValidDate = + !startDate || isAfter(date, startDate) || isEqual(date, startDate) if (isValidDate) { - this.setState({ endDateSelected: true, endDate: endOfDay(date) }, () => { - this.props.onChange({ - start: startOfDay(startDate), - end: endOfDay(date), - }) - }) + this.setState({ endDateSelected: true, endDate: endOfDay(date) }) } } @@ -153,7 +157,8 @@ const StyledContainer = styled.div` ` const StyledTextInput = styled(TextInput)` - width: 13rem; + width: 28ch; + fontfamily: ${font({ monospace: true })}; ` const StyledDatePickersContainer = styled.div` From b1caf4e864e223658f6ffaf61179b64a06a07a29 Mon Sep 17 00:00:00 2001 From: Gorka Date: Mon, 22 Apr 2019 15:38:11 +0200 Subject: [PATCH 4/8] Transfers: refactor to no default date selection --- apps/finance/app/src/components/Transfers.js | 31 ++++++++++---------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/apps/finance/app/src/components/Transfers.js b/apps/finance/app/src/components/Transfers.js index c3565ee120..869348b564 100644 --- a/apps/finance/app/src/components/Transfers.js +++ b/apps/finance/app/src/components/Transfers.js @@ -6,7 +6,6 @@ import { format, isWithinInterval, startOfDay, - subDays, } from 'date-fns' import { Button, @@ -31,8 +30,6 @@ const TRANSFER_TYPES = [ const TRANSFERS_PER_PAGE = 10 const TRANSFER_TYPES_STRING = TRANSFER_TYPES.map(TransferTypes.convertToString) -const DEFAULT_DAYS_SELECTED = 90 - const formatDate = date => format(date, 'dd/MM/yy') const reduceTokenDetails = (details, { address, decimals, symbol }) => { @@ -45,8 +42,8 @@ const reduceTokenDetails = (details, { address, decimals, symbol }) => { const initialState = { selectedDateRange: { - start: subDays(new Date(), DEFAULT_DAYS_SELECTED), - end: new Date(), + start: null, + end: null, }, selectedToken: 0, selectedTransferType: 0, @@ -75,9 +72,10 @@ class Transfers extends React.PureComponent { }) } handleResetFilters = () => { - this.setState({ + this.setState(({ selectedDateRange }) => ({ ...initialState, - }) + selectedDateRange, + })) } handleDateRangeChange = selectedDateRange => { this.setState({ selectedDateRange }) @@ -136,10 +134,11 @@ class Transfers extends React.PureComponent { const transferType = TRANSFER_TYPES[selectedTransferType] return transactions.filter( ({ token, isIncoming, date }) => - isWithinInterval(new Date(date), { - start: startOfDay(selectedDateRange.start), - end: endOfDay(selectedDateRange.end), - }) && + (!selectedDateRange.start || !selectedDateRange.end || + isWithinInterval(new Date(date), { + start: startOfDay(selectedDateRange.start), + end: endOfDay(selectedDateRange.end), + })) && (selectedToken === 0 || addressesEqual(token, tokens[selectedToken - 1].address)) && (transferType === TransferTypes.All || @@ -200,12 +199,14 @@ class Transfers extends React.PureComponent { {filteredTransfers.length === 0 ? (

- No transfers match your filter and period ( - {formatDate(selectedDateRange.start)} to{' '} - {formatDate(selectedDateRange.end)}) selection.{' '} + No transfers match your filter{' '} + {selectedDateRange.start && + `and period (${formatDate( + selectedDateRange.start + )} to ${formatDate(selectedDateRange.end)}) selection. `} {filtersActive && ( - Clear filters + Clear filters )}

From 83700011e87de7cfefae5ad7e4c24683b986cb72 Mon Sep 17 00:00:00 2001 From: Pierre Bertet Date: Tue, 23 Apr 2019 08:41:47 +0200 Subject: [PATCH 5/8] DateRangeInput: fix font family declaration Co-Authored-By: AquiGorka --- apps/finance/app/src/components/DateRange/DateRangeInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/finance/app/src/components/DateRange/DateRangeInput.js b/apps/finance/app/src/components/DateRange/DateRangeInput.js index 18d32941fa..65020364ea 100644 --- a/apps/finance/app/src/components/DateRange/DateRangeInput.js +++ b/apps/finance/app/src/components/DateRange/DateRangeInput.js @@ -158,7 +158,7 @@ const StyledContainer = styled.div` const StyledTextInput = styled(TextInput)` width: 28ch; - fontfamily: ${font({ monospace: true })}; + ${font({ monospace: true })}; ` const StyledDatePickersContainer = styled.div` From e62b73dddaff3de148f80f11c87e192dd9e7545d Mon Sep 17 00:00:00 2001 From: Gorka Date: Tue, 23 Apr 2019 08:50:27 +0200 Subject: [PATCH 6/8] Transfers: recover non-breaking space --- apps/finance/app/src/components/Transfers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/finance/app/src/components/Transfers.js b/apps/finance/app/src/components/Transfers.js index 869348b564..1e65ad208a 100644 --- a/apps/finance/app/src/components/Transfers.js +++ b/apps/finance/app/src/components/Transfers.js @@ -206,7 +206,7 @@ class Transfers extends React.PureComponent { )} to ${formatDate(selectedDateRange.end)}) selection. `} {filtersActive && ( - Clear filters + Clear filters )}

From fd112894c74c1caa34e859b67015e00a9b98423f Mon Sep 17 00:00:00 2001 From: Gorka Date: Tue, 23 Apr 2019 08:51:21 +0200 Subject: [PATCH 7/8] DateRangeInput: improve placeholder logic and add input placeholder for screen readers --- .../finance/app/src/components/DateRange/DateRangeInput.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/apps/finance/app/src/components/DateRange/DateRangeInput.js b/apps/finance/app/src/components/DateRange/DateRangeInput.js index 65020364ea..e0971a7ac1 100644 --- a/apps/finance/app/src/components/DateRange/DateRangeInput.js +++ b/apps/finance/app/src/components/DateRange/DateRangeInput.js @@ -15,6 +15,8 @@ import IconCalendar from './Calendar' import TextInput from './TextInput' import DatePicker from './DatePicker' +const DATE_PLACEHOLDER = '--/--/----' + class DateRangeInput extends React.PureComponent { state = { showPicker: false, @@ -31,7 +33,7 @@ class DateRangeInput extends React.PureComponent { return isDate(startDate) ? formatDate(startDate, this.props.format) - : '--/--/----' + : DATE_PLACEHOLDER } get formattedEndDate() { @@ -41,7 +43,7 @@ class DateRangeInput extends React.PureComponent { return isDate(endDate) ? formatDate(endDate, format) : startDate - ? '--/--/----' + ? DATE_PLACEHOLDER : formatDate(new Date(), format) } @@ -116,6 +118,7 @@ class DateRangeInput extends React.PureComponent { adornment={icon} adornmentPosition="end" height={39} + placeholder="" /> {this.state.showPicker && ( From 96b23408f2cd62dd9d26c5402e39bd506d8bed7b Mon Sep 17 00:00:00 2001 From: Gorka Date: Tue, 23 Apr 2019 13:42:05 +0200 Subject: [PATCH 8/8] DateRangeInput: improve on placeholder for accesibility --- .../components/DateRange/DateRangeInput.js | 27 ++++++++++++------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/apps/finance/app/src/components/DateRange/DateRangeInput.js b/apps/finance/app/src/components/DateRange/DateRangeInput.js index e0971a7ac1..0df74afed6 100644 --- a/apps/finance/app/src/components/DateRange/DateRangeInput.js +++ b/apps/finance/app/src/components/DateRange/DateRangeInput.js @@ -31,20 +31,14 @@ class DateRangeInput extends React.PureComponent { get formattedStartDate() { const { startDate } = this.state - return isDate(startDate) - ? formatDate(startDate, this.props.format) - : DATE_PLACEHOLDER + return isDate(startDate) ? formatDate(startDate, this.props.format) : '' } get formattedEndDate() { const { endDate, startDate } = this.state const { format } = this.props - return isDate(endDate) - ? formatDate(endDate, format) - : startDate - ? DATE_PLACEHOLDER - : formatDate(new Date(), format) + return isDate(endDate) ? formatDate(endDate, format) : '' } componentWillUnmount() { @@ -106,6 +100,19 @@ class DateRangeInput extends React.PureComponent { ) : ( ) + const value = + this.formattedStartDate && this.formattedEndDate + ? `${this.formattedStartDate} - ${this.formattedEndDate}` + : '' + const placeholder = `${ + this.formattedStartDate ? this.formattedStartDate : DATE_PLACEHOLDER + } - ${ + this.formattedEndDate + ? this.formattedEndDate + : this.formattedStartDate + ? DATE_PLACEHOLDER + : formatDate(new Date(), this.props.format) + }` return ( {this.state.showPicker && (