diff options
author | Sebastian <sebasjm@gmail.com> | 2021-07-09 23:15:49 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-07-09 23:15:53 -0300 |
commit | d29499b80a992a0d107327c0dfbf31bb2d2ba6f7 (patch) | |
tree | 256d181c9f3c3795841c71ef6400f4dce6a738f4 /packages/taler-wallet-webextension/src | |
parent | 5881d957caf3bd7d3311cae7420ceb1e3fa5a9e1 (diff) | |
download | wallet-core-d29499b80a992a0d107327c0dfbf31bb2d2ba6f7.tar.xz |
migration css to linaria
Diffstat (limited to 'packages/taler-wallet-webextension/src')
4 files changed, 215 insertions, 96 deletions
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx new file mode 100644 index 000000000..6e7e736a5 --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -0,0 +1,135 @@ +// import { FunctionalComponent, JSX } from 'preact'; +// import styled from './preact-styled' + +// import { css } from '@linaria/core'; +import { styled } from '@linaria/react'; + +export const PopupBox = styled.div` + height: calc(320px - 34px - 16px); + display: flex; + flex-direction: column; + + & > section { + overflow: auto; + } + + & > footer { + padding-top: 5px; + flex-direction: row; + justify-content: flex-end; + display: flex; + & > button { + margin-left: 5px; + } + } +` + +const Button = styled.button` + display: inline-block; + zoom: 1; + line-height: normal; + white-space: nowrap; + vertical-align: middle; + text-align: center; + cursor: pointer; + user-select: none; + box-sizing: border-box; + + font-family: inherit; + font-size: 100%; + padding: 0.5em 1em; + color: #444; /* rgba not supported (IE 8) */ + color: rgba(0, 0, 0, 0.8); /* rgba supported */ + border: 1px solid #999; /*IE 6/7/8*/ + border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/ + background-color: '#e6e6e6'; + text-decoration: none; + border-radius: 2px; + + :focus { + outline: 0; + } + + [disabled] { + border: none; + background-image: none; + /* csslint ignore:start */ + filter: alpha(opacity=40); + /* csslint ignore:end */ + opacity: 0.4; + cursor: not-allowed; + box-shadow: none; + pointer-events: none; + } + + :hover { + filter: alpha(opacity=90); + background-image: linear-gradient( + transparent, + rgba(0, 0, 0, 0.05) 40%, + rgba(0, 0, 0, 0.1) + ); + } +`; + +const ButtonVariant = styled(Button)` + color: white; + border-radius: 4px; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); +` + +export const ButtonPrimary = styled(ButtonVariant)` + background-color: rgb(66, 184, 221); +` + +export const ButtonSuccess = styled(ButtonVariant)` + background-color: rgb(28, 184, 65); +` + +export const ButtonWarning = styled(ButtonVariant)` + background-color: rgb(223, 117, 20); +` + +export const ButtonDestructive = styled(ButtonVariant)` + background-color: rgb(202, 60, 60); +` + +export const BoldLight = styled.div` +color: gray; +font-weight: bold; +` +export const Centered = styled.div` + text-align: center; + & > :not(:first-child) { + margin-top: 15px; + } +` +export const Row = styled.div` + display: flex; + border: 1px solid gray; + border-radius: 0.5em; + margin: 0.5em 0; + justify-content: space-between; + padding: 0.5em; +` + +export const SmallText = styled.div` + font-size: small; + margin-top: 0.5em; +` + +export const SmallTextLight = styled(SmallText)` + color: gray; +` + +export const CenteredText = styled.div` + white-space: nowrap; + text-align: center; +` + +export const CenteredTextBold = styled(CenteredText)` + white-space: nowrap; + text-align: center; + font-weight: bold; + color: ${((props: any): any => String(props.color) as any) as any}; +` diff --git a/packages/taler-wallet-webextension/src/popup/Backup.stories.tsx b/packages/taler-wallet-webextension/src/popup/Backup.stories.tsx index 2d28a6ddc..ed03f2087 100644 --- a/packages/taler-wallet-webextension/src/popup/Backup.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/Backup.stories.tsx @@ -62,7 +62,7 @@ export const LotOfProviders = createExample(TestedComponent, { "storageLimitInMegabytes": 16, "supportedProtocolVersion": "0.0" } - },{ + }, { "active": true, "syncProviderBaseUrl": "http://sync.taler:9967/", "lastSuccessfulBackupTimestamp": { @@ -82,43 +82,57 @@ export const LotOfProviders = createExample(TestedComponent, { "storageLimitInMegabytes": 16, "supportedProtocolVersion": "0.0" } - },{ + }, { "active": false, "syncProviderBaseUrl": "http://sync.demo.taler.net/", "paymentProposalIds": [], "paymentStatus": { - "type": ProviderPaymentType.Unpaid, + "type": ProviderPaymentType.Pending, }, "terms": { "annualFee": "KUDOS:0.1", "storageLimitInMegabytes": 16, "supportedProtocolVersion": "0.0" } - },{ + }, { "active": false, "syncProviderBaseUrl": "http://sync.demo.taler.net/", "paymentProposalIds": [], "paymentStatus": { - "type": ProviderPaymentType.Unpaid, + "type": ProviderPaymentType.InsufficientBalance, }, "terms": { "annualFee": "KUDOS:0.1", "storageLimitInMegabytes": 16, "supportedProtocolVersion": "0.0" } - },{ + }, { "active": false, "syncProviderBaseUrl": "http://sync.demo.taler.net/", "paymentProposalIds": [], "paymentStatus": { - "type": ProviderPaymentType.Unpaid, + "type": ProviderPaymentType.TermsChanged, + newTerms: { + annualFee: 'USD:2', + storageLimitInMegabytes: 8, + supportedProtocolVersion: '2', + }, + oldTerms: { + annualFee: 'USD:1', + storageLimitInMegabytes: 16, + supportedProtocolVersion: '1', + + }, + paidUntil: { + t_ms: 'never' + } }, "terms": { "annualFee": "KUDOS:0.1", "storageLimitInMegabytes": 16, "supportedProtocolVersion": "0.0" } - },{ + }, { "active": false, "syncProviderBaseUrl": "http://sync.demo.taler.net/", "paymentProposalIds": [], @@ -130,7 +144,7 @@ export const LotOfProviders = createExample(TestedComponent, { "storageLimitInMegabytes": 16, "supportedProtocolVersion": "0.0" } - },{ + }, { "active": false, "syncProviderBaseUrl": "http://sync.demo.taler.net/", "paymentProposalIds": [], diff --git a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx index d7a2d863c..6e60acc74 100644 --- a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx @@ -16,9 +16,14 @@ import { i18n, Timestamp } from "@gnu-taler/taler-util"; -import { ProviderInfo } from "@gnu-taler/taler-wallet-core"; +import { ProviderInfo, ProviderPaymentStatus } from "@gnu-taler/taler-wallet-core"; import { differenceInMonths, formatDuration, intervalToDuration } from "date-fns"; -import { Fragment, JSX, VNode } from "preact"; +import { FunctionalComponent, Fragment, JSX, VNode, AnyComponent } from "preact"; +import { + BoldLight, ButtonPrimary, ButtonSuccess, Centered, + CenteredText, CenteredTextBold, PopupBox, Row, + SmallText, SmallTextLight +} from "../components/styled"; import { useBackupStatus } from "../hooks/useBackupStatus"; import { Pages } from "./popup"; @@ -31,7 +36,7 @@ export function BackupPage({ onAddProvider }: Props): VNode { if (!status) { return <div>Loading...</div> } - return <BackupView providers={status.providers} onAddProvider={onAddProvider} onSyncAll={status.sync}/>; + return <BackupView providers={status.providers} onAddProvider={onAddProvider} onSyncAll={status.sync} />; } export interface ViewProps { @@ -42,44 +47,35 @@ export interface ViewProps { export function BackupView({ providers, onAddProvider, onSyncAll }: ViewProps): VNode { return ( - <div style={{ height: 'calc(320px - 34px - 16px)', overflow: 'auto' }}> - <div style={{ display: 'flex', flexDirection: 'column' }}> - <section style={{ flex: '1 0 auto', height: 'calc(320px - 34px - 34px - 16px)', overflow: 'auto' }}> - - {!!providers.length && <div> - {providers.map((provider) => { - return <BackupLayout - status={provider.paymentStatus} - timestamp={provider.lastSuccessfulBackupTimestamp} - id={provider.syncProviderBaseUrl} - active={provider.active} - title={provider.syncProviderBaseUrl} - /> - })} - </div>} - {!providers.length && <div style={{ color: 'gray', fontWeight: 'bold', marginTop: 80, textAlign: 'center' }}> - <div>No backup providers configured</div> - <button class="pure-button button-success" style={{ marginTop: 15 }} onClick={onAddProvider}><i18n.Translate>Add provider</i18n.Translate></button> - </div>} - - </section> - {!!providers.length && <footer style={{ marginTop: 'auto', display: 'flex', flexShrink: 0 }}> - <div style={{ width: '100%', flexDirection: 'row', justifyContent: 'flex-end', display: 'flex' }}> - <button class="pure-button button-secondary" style={{ marginLeft: 5 }} onClick={onSyncAll}>{ - providers.length > 1 ? - <i18n.Translate>Sync all backups</i18n.Translate> : - <i18n.Translate>Sync now</i18n.Translate> - }</button> - <button class="pure-button button-success" style={{ marginLeft: 5 }} onClick={onAddProvider}><i18n.Translate>Add provider</i18n.Translate></button> - </div> - </footer>} - </div> - </div> + <PopupBox style={{ justifyContent: !providers.length ? 'center' : 'space-between' }}> + <section> + {providers.map((provider) => <BackupLayout + status={provider.paymentStatus} + timestamp={provider.lastSuccessfulBackupTimestamp} + id={provider.syncProviderBaseUrl} + active={provider.active} + title={provider.syncProviderBaseUrl} + /> + )} + {!providers.length && <Centered> + <BoldLight>No backup providers configured</BoldLight> + <ButtonSuccess onClick={onAddProvider}><i18n.Translate>Add provider</i18n.Translate></ButtonSuccess> + </Centered>} + </section> + {!!providers.length && <footer> + <ButtonPrimary onClick={onSyncAll}>{ + providers.length > 1 ? + <i18n.Translate>Sync all backups</i18n.Translate> : + <i18n.Translate>Sync now</i18n.Translate> + }</ButtonPrimary> + <ButtonSuccess onClick={onAddProvider}>Add provider</ButtonSuccess> + </footer>} + </PopupBox> ) } interface TransactionLayoutProps { - status: any; + status: ProviderPaymentStatus; timestamp?: Timestamp; title: string; id: string; @@ -92,55 +88,33 @@ function BackupLayout(props: TransactionLayoutProps): JSX.Element { dateStyle: "medium", timeStyle: "short", } as any); + + return ( - <div - style={{ - display: "flex", - flexDirection: "row", - border: "1px solid gray", - borderRadius: "0.5em", - margin: "0.5em 0", - justifyContent: "space-between", - padding: "0.5em", - }} - > - <div - style={{ display: "flex", flexDirection: "column", color: !props.active ? "gray" : undefined }} - > - <div style={{ }}> - <a href={Pages.provider_detail.replace(':pid', encodeURIComponent(props.id))}><span>{props.title}</span></a> - </div> - - {dateStr && <div style={{ fontSize: "small", marginTop: '0.5em' }}>Last synced: {dateStr}</div>} - {!dateStr && <div style={{ fontSize: "small", color: 'gray' }}>Not synced</div>} + <Row> + <div style={{ color: !props.active ? "grey" : undefined }}> + <a href={Pages.provider_detail.replace(':pid', encodeURIComponent(props.id))}><span>{props.title}</span></a> + + {dateStr && <SmallText>Last synced: {dateStr}</SmallText>} + {!dateStr && <SmallTextLight>Not synced</SmallTextLight>} </div> - <div style={{ - marginLeft: "auto", - display: "flex", - flexDirection: "column", - alignItems: "center", - alignSelf: "center" - }}> - <div style={{ display: 'flex', flexDirection: 'column' }}> - { - props.status?.type === 'paid' ? - <Fragment> - <div style={{ whiteSpace: 'nowrap', textAlign: 'center' }}> - Expires in - </div> - <div style={{ whiteSpace: 'nowrap', textAlign: 'center', fontWeight: 'bold', color: colorByTimeToExpire(props.status.paidUntil) }}> - {daysUntil(props.status.paidUntil)} - </div> - </Fragment> - : - 'unpaid' - } - </div> + <div> + {props.status?.type === 'paid' ? + <ExpirationText until={props.status.paidUntil} /> : + <div>{props.status.type}</div> + } </div> - </div> + </Row> ); } +function ExpirationText({ until }: { until: Timestamp }) { + return <Fragment> + <CenteredText> Expires in </CenteredText> + <CenteredTextBold {...({color:colorByTimeToExpire(until)})}> {daysUntil(until)} </CenteredTextBold> + </Fragment> +} + function colorByTimeToExpire(d: Timestamp) { if (d.t_ms === 'never') return 'rgb(28, 184, 65)' const months = differenceInMonths(d.t_ms, new Date()) diff --git a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx index b7a6f847c..0d48ab070 100644 --- a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx +++ b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx @@ -15,15 +15,11 @@ */ -import { BackupBackupProviderTerms, i18n, Timestamp } from "@gnu-taler/taler-util"; +import { i18n, Timestamp } from "@gnu-taler/taler-util"; import { ProviderInfo, ProviderPaymentStatus, ProviderPaymentType } from "@gnu-taler/taler-wallet-core"; -import { ContractTermsUtil } from "@gnu-taler/taler-wallet-core/src/util/contractTerms"; -import { formatDuration, intervalToDuration, format } from "date-fns"; +import { format, formatDuration, intervalToDuration } from "date-fns"; import { Fragment, VNode } from "preact"; -import { useRef, useState } from "preact/hooks"; -import { useBackupStatus } from "../hooks/useBackupStatus"; -import { useProviderStatus } from "../hooks/useProviderStatus.js"; -import * as wxApi from "../wxApi"; +import { useProviderStatus } from "../hooks/useProviderStatus"; interface Props { pid: string; |