Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[responsive] Responsive tx history page #2124

Merged
merged 6 commits into from
May 23, 2019
Merged

[responsive] Responsive tx history page #2124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
185d551
clean up
vctt94 May 21, 2019
9cce3e5
some more clean up - remove status component
vctt94 May 21, 2019
f5a3138
Add responsive
vctt94 May 21, 2019
6f02d8a
fix lint
vctt94 May 21, 2019
f849e1f
remove duplicated intl key
vctt94 May 21, 2019
aa77d42
review fix
vctt94 May 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 11 additions & 4 deletions app/components/TxHistory/TxHistoryRow/RegularTxRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
import Row from "./Row";
import { Balance } from "shared";
import { createElement as h } from "react";
import Status from "./Status";
import { timeMessage } from "./index";

const RegularTxRow = ({ txAmount, txDescription, txDirection, overview, txAccountName, pending, txTimestamp, tsDate, ...props }) => (
<Row {...{ ...props, txAccountName, pending, overview, tsDate }}>
const RegularTxRow = ({ txAmount, txDescription, txDirection, overview, txAccountName, pending, txTs, ...props }) => (
<Row {...{ ...props, txAccountName, pending, overview }}>
<div className="is-row">
<span className="icon" />
<span className="transaction-amount-number"><Balance amount={txDirection !== "in" ? -txAmount : txAmount} /></span>
{!pending && <Status {...{ overview, txAccountName, pending, txTimestamp, tsDate }} />}
{!overview &&
<div className="transaction-status">
<span className="transaction-account-name">{txAccountName}</span>
</div>}
{!pending &&
<div className="transaction-time-date-spacer">
{timeMessage(txTs, props.intl)}
</div>}
</div>
<div className="transaction-amount-hash">{(txDescription.addressStr || []).join(", ")}</div>
</Row>
Expand Down
14 changes: 9 additions & 5 deletions app/components/TxHistory/TxHistoryRow/Row.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
import Status from "./Status";
import { Tooltip } from "shared";
import { FormattedMessage as T } from "react-intl";
import "style/TxHistory.less";

const Row = ({
txAccountName, pending, onClick, className, children, overview, tsDate
pending, onClick, className, children, overview,
}) => {
const overviewTxIsPending = overview && pending;
const overviewTxIsPending = overview && pending ? "is-row tx-overview-pending" : null;

return (
<div className={[ overview ? "tx-overview-row" : "tx-history-row", overviewTxIsPending ? "is-row tx-overview-pending" : null ].join(" ")}>
<div className={[ overview ? "tx-overview-row" : "tx-history-row is-row", overviewTxIsPending ].join(" ")}>
<div className={[ "tx-info", className ].join(" ")} {...{ onClick }}>
{children}
</div>
{overviewTxIsPending && <Status {...{ txAccountName, pending, overview, onClick, tsDate }} />}
{ pending &&
<Tooltip text={<T id="txHistory.Pending" m="Pending" />}>
<div className="pending-overview-details" onClick={onClick}/>
</Tooltip> }
</div>
);
};
Expand Down
63 changes: 30 additions & 33 deletions app/components/TxHistory/TxHistoryRow/StakeTxRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import Row from "./Row";
import Status from "./Status";
import { createElement as h } from "react";
import { FormattedMessage as T } from "react-intl";
import { createElement as h } from "react";
import { Balance, Tooltip } from "shared";
import { diffBetweenTwoTs } from "helpers/dateFormat";
import { timeMessage } from "./index";

const messageByType = { // TODO: use constants instead of string
"vote": <T id="transaction.type.vote" m="Voted" />,
Expand All @@ -19,7 +19,7 @@ const messageByType = { // TODO: use constants instead of string
};

const StakeTxRow = ({ status, ...props }) => {
const { overview, ticketPrice, ticketReward, leaveTimestamp, enterTimestamp, pending, txAccountName, txTimestamp, tsDate } = props;
const { ticketPrice, ticketReward, leaveTimestamp, enterTimestamp, pending, txTs } = props;

const rewardLabel = <T id="history.ticket.rewardLabel" m="Ticket Reward" />;
const ticketRewardMessage = <T id="history.ticket.rewardMesage"
Expand Down Expand Up @@ -51,37 +51,34 @@ const StakeTxRow = ({ status, ...props }) => {
const statusLower = status ? status.toLowerCase() : "";
const typeMsg = messageByType[statusLower] || "(unknown type)";

return overview ?
(
<Row {...{ className: status, ...props }}>
<div className="is-row">
<span className="icon" />
<span className="transaction-stake-type-overview">{typeMsg}</span>
{!pending && <Status {...{ overview, txAccountName, pending, txTimestamp, tsDate }} />}
</div>
<div className="transaction-info-price-reward">
<Tooltip text={ticketPriceMessage}>
<Balance classNameWrapper="stake-transaction-ticket-price" amount={ticketPrice} />
</Tooltip>
<Tooltip text={ticketRewardMessage}>
<Balance classNameWrapper="stake-transaction-ticket-reward" amount={ticketReward} noSmallAmount />
</Tooltip>
{daysToVote !== null && !isNaN(daysToVote) && (
<Tooltip text={daysToVoteMessage}>
<div className="transaction-info-overview-days-to-vote">
<T id="statusSmall.daysToVotePlural" m="{days, plural, one {# day} other {# days}}"
values={{ days: daysToVote }}/>
</div>
</Tooltip>
)}
</div>
</Row>
) : (
<Row {...{ className: status , ...props }}>
return (
<Row {...{ className: status, ...props }}>
<div className="is-row">
<span className="icon" />
<span className="transaction-stake-type">{typeMsg}</span>
</Row>
);
<span className="transaction-stake-type-overview">{typeMsg}</span>
{!pending &&
<div className="transaction-time-date-spacer">
{timeMessage(txTs, props.intl)}
</div>}
</div>
<div className="transaction-info-price-reward">
<Tooltip text={ticketPriceMessage}>
<Balance classNameWrapper="stake-transaction-ticket-price" amount={ticketPrice} />
</Tooltip>
<Tooltip text={ticketRewardMessage}>
<Balance classNameWrapper="stake-transaction-ticket-reward" amount={ticketReward} noSmallAmount />
</Tooltip>
{daysToVote !== null && !isNaN(daysToVote) && (
<Tooltip text={daysToVoteMessage}>
<div className="transaction-info-overview-days-to-vote">
<T id="statusSmall.daysToVotePlural" m="{days, plural, one {# day} other {# days}}"
values={{ days: daysToVote }}/>
</div>
</Tooltip>
)}
</div>
</Row>
);
};

export const StakeTxRowOfType = (status) => {
Expand Down
47 changes: 0 additions & 47 deletions app/components/TxHistory/TxHistoryRow/Status.js
View file
Open in desktop

This file was deleted.

17 changes: 14 additions & 3 deletions app/components/TxHistory/TxHistoryRow/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { RegularTxRowOfClass as regular } from "./RegularTxRow";
import { StakeTxRowOfType as stake } from "./StakeTxRow";
import { defineMessages, injectIntl } from "react-intl";
import "style/TxHistory.less";

const TxRowByType = { // TODO: use constants instead of string
Expand All @@ -20,7 +21,16 @@ const TxRowByType = { // TODO: use constants instead of string
"Coinbase": regular("Receive", true),
};

const TxRow = ({ tx, overview, tsDate }, { router }) => {
export const timeMessageDefine = defineMessages({
dayMonthHourDisplay: {
id: "txHistory.dayMonthHourDisplay",
defaultMessage: "{value, date, short-month-24hour}"
},
});

export const timeMessage = (txTimestamp, intl) => intl.formatMessage(timeMessageDefine.dayMonthHourDisplay, { value: txTimestamp });

const TxRow = ({ tx, overview, tsDate, intl }, { router }) => {
const rowType = tx.status ? tx.status :
tx.txType ? tx.txType : tx.txDirection;
const Component = TxRowByType[rowType];
Expand All @@ -29,7 +39,8 @@ const TxRow = ({ tx, overview, tsDate }, { router }) => {
<Component
{...{
...tx,
tsDate,
intl,
txTs: tsDate(tx.txTimestamp),
overview,
pending: !tx.txTimestamp,
onClick: () => router.history.push(`/transactions/history/${tx.txHash}`)
Expand All @@ -42,4 +53,4 @@ TxRow.contextTypes = {
router: PropTypes.object.isRequired,
};

export default TxRow;
export default injectIntl(TxRow);
69 changes: 33 additions & 36 deletions app/components/views/TransactionsPage/HistoryTab/Page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,48 +41,45 @@ const Page = ({
useWindow={false}
threshold={loadMoreThreshold}
>
<div className="history-content-title">
<div className="history-content-title-text">
<div className="history-content-title is-row">
<div>
<T id="history.title" m="Transaction History" />
</div>
<div className="history-select-tx-types-area">
<div className="history-select-tx-types">
<div className="history-search-tx">
<TextInput
type="text"
placeholder={intl.formatMessage(messages.filterByAddrPlaceholder)}
value={searchText}
onChange={(e) => onChangeSearchText(e.target.value)}
/>
</div>
<Tooltip tipWidth={ 300 } text={<T id="transactions.sortby.tooltip" m="Sort By" />}>
<EyeFilterMenuWithSlider
{...{ unitDivisor, currencyDisplay }}
labelKey="label"
keyField="value"
options={sortTypes}
selected={selectedSortOrderKey}
onChange={onChangeSortType}
className="sort-by"
onChangeSlider={onChangeSliderValue}
minFilterValue={transactionsFilter.minAmount}
maxFilterValue={transactionsFilter.maxAmount}
/>
</Tooltip>
<Tooltip tipWidth={ 300 } text={<T id="transactions.txtypes.tooltip" m="Transaction Type" />}>
<EyeFilterMenu
labelKey="label"
keyField="key"
options={txTypes}
selected={selectedTxTypeKey}
onChange={onChangeSelectedType}
/>
</Tooltip>
<div className="history-search-tx">
<TextInput
type="text"
placeholder={intl.formatMessage(messages.filterByAddrPlaceholder)}
value={searchText}
onChange={(e) => onChangeSearchText(e.target.value)}
/>
</div>
<Tooltip tipWidth={ 300 } text={<T id="transactions.sortby.tooltip" m="Sort By" />}>
<EyeFilterMenuWithSlider
{...{ unitDivisor, currencyDisplay }}
labelKey="label"
keyField="value"
options={sortTypes}
selected={selectedSortOrderKey}
onChange={onChangeSortType}
className="sort-by"
onChangeSlider={onChangeSliderValue}
minFilterValue={transactionsFilter.minAmount}
maxFilterValue={transactionsFilter.maxAmount}
/>
</Tooltip>
<Tooltip tipWidth={ 300 } text={<T id="transactions.txtypes.tooltip" m="Transaction Type" />}>
<EyeFilterMenu
labelKey="label"
keyField="key"
options={txTypes}
selected={selectedTxTypeKey}
onChange={onChangeSelectedType}
/>
</Tooltip>
</div>
</div>
<div className="history-content-nest"
style = {{ display: transactions.length == 0 ? "none" : "initial" }} >
<div className="history-page-content-wrapper">
{transactions.length > 0
? <TxHistory {...{ transactions, tsDate }} />
: null }
Expand Down
11 changes: 10 additions & 1 deletion app/i18n/locales/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,17 @@ export const defaultFormats = {
},
"short-month": {
month: "short"
},
"short-month-24hour": {
day: "2-digit",
month: "short",
year: "numeric",
hour: "numeric",
minute: "numeric",
hour12: false,
formatMatcher: "best fit"
}
}
},
};

const de = {
Expand Down
Loading