From 3e92c2496868d7905b58be87925f5835965c6bda Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 16 Feb 2022 15:15:47 -0300 Subject: settings new design --- .../.storybook/preview.js | 6 +- .../src/NavigationBar.tsx | 81 +++++++++++++--------- .../src/components/JustInDevMode.tsx | 12 ++++ .../src/components/MultiActionButton.tsx | 11 +-- .../src/components/styled/index.tsx | 41 ++++++++--- .../src/popup/BalancePage.tsx | 12 +++- .../src/popup/Popup.stories.tsx | 43 ------------ .../src/popup/Settings.stories.tsx | 37 ---------- .../src/popup/Settings.tsx | 74 -------------------- .../src/popup/index.stories.tsx | 3 +- .../src/popupEntryPoint.tsx | 20 +++--- .../src/walletEntryPoint.tsx | 13 ++-- .../taler-wallet-webextension/src/wxBackend.ts | 24 +++---- .../static/img/settings_black_24dp.svg | 1 + 14 files changed, 143 insertions(+), 235 deletions(-) create mode 100644 packages/taler-wallet-webextension/src/components/JustInDevMode.tsx delete mode 100644 packages/taler-wallet-webextension/src/popup/Popup.stories.tsx delete mode 100644 packages/taler-wallet-webextension/src/popup/Settings.stories.tsx delete mode 100644 packages/taler-wallet-webextension/src/popup/Settings.tsx create mode 100644 packages/taler-wallet-webextension/static/img/settings_black_24dp.svg (limited to 'packages/taler-wallet-webextension') diff --git a/packages/taler-wallet-webextension/.storybook/preview.js b/packages/taler-wallet-webextension/.storybook/preview.js index b770d7b63..5156b556a 100644 --- a/packages/taler-wallet-webextension/.storybook/preview.js +++ b/packages/taler-wallet-webextension/.storybook/preview.js @@ -15,7 +15,7 @@ */ import { h, Fragment } from "preact" -import { NavBar } from '../src/NavigationBar' +import { PopupNavBar, WalletNavBar } from '../src/NavigationBar' import { LogoHeader } from '../src/components/LogoHeader' import { TranslationProvider } from '../src/context/translation' import { PopupBox, WalletBox } from '../src/components/styled' @@ -56,7 +56,7 @@ export const decorators = [ const path = /popup(\/.*).*/.exec(kind)[1]; // add a fake header so it looks similar return - + @@ -155,7 +155,7 @@ export const decorators = [ }`} - + diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx index 9aaeb0d18..6a010f63a 100644 --- a/packages/taler-wallet-webextension/src/NavigationBar.tsx +++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx @@ -25,8 +25,9 @@ * Imports. */ import { i18n } from "@gnu-taler/taler-util"; -import { ComponentChildren, h, VNode } from "preact"; -import { PopupNavigation } from "./components/styled"; +import { VNode, h } from "preact"; +import { JustInDevMode } from "./components/JustInDevMode"; +import { NavigationHeader, NavigationHeaderHolder } from "./components/styled"; export enum Pages { welcome = "/welcome", @@ -55,40 +56,56 @@ export enum Pages { cta_withdraw = "/cta/withdraw", } -interface TabProps { - target: string; - current?: string; - children?: ComponentChildren; -} - -function Tab(props: TabProps): VNode { - let cssClass = ""; - if (props.current?.startsWith(props.target)) { - cssClass = "active"; - } +export function PopupNavBar({ path = "" }: { path?: string }): VNode { + const innerUrl = chrome.runtime + ? new URL(chrome.runtime.getURL("/static/wallet.html#/settings")).href + : "#"; return ( - - {props.children} - + + {i18n.str`Balance`} + {i18n.str`Backup`} + + +
+ + ); } -export function NavBar({ - devMode, - path, -}: { - path: string; - devMode: boolean; -}): VNode { +export function WalletNavBar({ path = "" }: { path?: string }): VNode { return ( - -
- {i18n.str`Balance`} - {i18n.str`Pending`} - {i18n.str`Backup`} - {i18n.str`Settings`} - {devMode && {i18n.str`Dev`}} -
- + + + {i18n.str`Balance`} + {i18n.str`Backup`} + + + {i18n.str`Dev`} + + + + +
+ + + ); } diff --git a/packages/taler-wallet-webextension/src/components/JustInDevMode.tsx b/packages/taler-wallet-webextension/src/components/JustInDevMode.tsx new file mode 100644 index 000000000..d447f87eb --- /dev/null +++ b/packages/taler-wallet-webextension/src/components/JustInDevMode.tsx @@ -0,0 +1,12 @@ +import { ComponentChildren, Fragment, h, VNode } from "preact"; +import { useDevContext } from "../context/devContext"; + +export function JustInDevMode({ + children, +}: { + children: ComponentChildren; +}): VNode { + const { devMode } = useDevContext(); + if (!devMode) return ; + return {children}; +} diff --git a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx index 70d53640d..977ac557d 100644 --- a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx +++ b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx @@ -69,18 +69,21 @@ export function MultiActionButton({ ))}
)} - doClick(selected)} style={{ borderTopRightRadius: 0, borderBottomRightRadius: 0, marginRight: 0, + maxWidth: 170, + overflowX: "hidden", + textOverflow: "ellipsis", }} > {label(selected)} - + - setOpened((s) => !s)} style={{ marginLeft: 0, @@ -89,7 +92,7 @@ export function MultiActionButton({ }} > - +
); } diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index 5dd7318b7..a5ed64a83 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -391,6 +391,7 @@ export const Button = styled.button<{ upperCased?: boolean }>` background-color: "#e6e6e6"; text-decoration: none; border-radius: 2px; + text-transform: uppercase; :focus { outline: 0; @@ -507,12 +508,12 @@ export const LinkPrimary = styled(Link)` export const ButtonPrimary = styled(ButtonVariant)<{ small?: boolean }>` font-size: ${({ small }) => (small ? "small" : "inherit")}; - background-color: rgb(66, 184, 221); - border-color: rgb(66, 184, 221); + background-color: #0042b2; + border-color: #0042b2; `; export const ButtonBoxPrimary = styled(ButtonBox)` - color: rgb(66, 184, 221); - border-color: rgb(66, 184, 221); + color: #0042b2; + border-color: #0042b2; `; export const ButtonSuccess = styled(ButtonVariant)` @@ -776,31 +777,53 @@ export const WarningBox = styled(ErrorBox)` border-color: #ffecb5; `; -export const PopupNavigation = styled.div<{ devMode?: boolean }>` +import settingsIcon from "../../../static/img/settings_black_24dp.svg"; + +export const NavigationHeaderHolder = styled.div` + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + background-color: #0042b2; +`; + +export const NavigationHeader = styled.div` background-color: #0042b2; height: 35px; justify-content: space-around; display: flex; - & > div { + & { width: 500px; } - & > div > a { + & > a { color: #f8faf7; display: inline-block; - width: 100px; + width: 100%; text-align: center; text-decoration: none; vertical-align: middle; line-height: 35px; } - & > div > a.active { + & > a > div.settings-icon { + mask: url(${settingsIcon}) no-repeat center; + background-color: white; + width: 24px; + height: 24px; + margin-left: auto; + margin-right: 8px; + padding: 4px; + } + & > a.active { background-color: #f8faf7; color: #0042b2; font-weight: bold; } + & > a.active > div.settings-icon { + background-color: #0042b2; + } `; const image = `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`; diff --git a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx index a5f24470e..f5e721033 100644 --- a/packages/taler-wallet-webextension/src/popup/BalancePage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BalancePage.tsx @@ -17,10 +17,11 @@ import { Amounts, Balance, i18n } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { BalanceTable } from "../components/BalanceTable"; +import { JustInDevMode } from "../components/JustInDevMode"; import { Loading } from "../components/Loading"; import { LoadingError } from "../components/LoadingError"; import { MultiActionButton } from "../components/MultiActionButton"; -import { ButtonPrimary } from "../components/styled"; +import { ButtonBoxPrimary, ButtonPrimary } from "../components/styled"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook"; import { PageLink } from "../renderHtml"; import * as wxApi from "../wxApi"; @@ -77,8 +78,10 @@ export function BalanceView({

- You have no balance to show. Need some{" "} - help getting started? + You have no balance to show. + + Learn how to top up your wallet balance ยป +

@@ -109,6 +112,9 @@ export function BalanceView({ onClick={(c) => goToWalletDeposit(c)} /> )} + + null}>enter uri +
); diff --git a/packages/taler-wallet-webextension/src/popup/Popup.stories.tsx b/packages/taler-wallet-webextension/src/popup/Popup.stories.tsx deleted file mode 100644 index 5009684c5..000000000 --- a/packages/taler-wallet-webextension/src/popup/Popup.stories.tsx +++ /dev/null @@ -1,43 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021 Taler Systems S.A. - - GNU Taler is free software; you can redistribute it and/or modify it under the - terms of the GNU General Public License as published by the Free Software - Foundation; either version 3, or (at your option) any later version. - - GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY - WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR - A PARTICULAR PURPOSE. See the GNU General Public License for more details. - - You should have received a copy of the GNU General Public License along with - GNU Taler; see the file COPYING. If not, see - */ - -/** - * - * @author Sebastian Javier Marchano (sebasjm) - */ - -import { createExample } from "../test-utils"; -import { NavBar as TestedComponent } from "../NavigationBar"; - -export default { - title: "popup/header", - // component: TestedComponent, - argTypes: { - onRetry: { action: "onRetry" }, - onDelete: { action: "onDelete" }, - onBack: { action: "onBack" }, - }, -}; - -export const OnBalance = createExample(TestedComponent, { - devMode: false, - path: "/balance", -}); - -export const OnHistoryWithDevMode = createExample(TestedComponent, { - devMode: true, - path: "/history", -}); diff --git a/packages/taler-wallet-webextension/src/popup/Settings.stories.tsx b/packages/taler-wallet-webextension/src/popup/Settings.stories.tsx deleted file mode 100644 index 069157475..000000000 --- a/packages/taler-wallet-webextension/src/popup/Settings.stories.tsx +++ /dev/null @@ -1,37 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021 Taler Systems S.A. - - GNU Taler is free software; you can redistribute it and/or modify it under the - terms of the GNU General Public License as published by the Free Software - Foundation; either version 3, or (at your option) any later version. - - GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY - WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR - A PARTICULAR PURPOSE. See the GNU General Public License for more details. - - You should have received a copy of the GNU General Public License along with - GNU Taler; see the file COPYING. If not, see - */ - -/** - * - * @author Sebastian Javier Marchano (sebasjm) - */ - -import { createExample } from "../test-utils"; -import { SettingsView as TestedComponent } from "./Settings"; - -export default { - title: "popup/settings", - component: TestedComponent, - argTypes: { - setDeviceName: () => Promise.resolve(), - }, -}; - -export const AllOff = createExample(TestedComponent, {}); - -export const OneChecked = createExample(TestedComponent, { - permissionsEnabled: true, -}); diff --git a/packages/taler-wallet-webextension/src/popup/Settings.tsx b/packages/taler-wallet-webextension/src/popup/Settings.tsx deleted file mode 100644 index a7cdf9cc0..000000000 --- a/packages/taler-wallet-webextension/src/popup/Settings.tsx +++ /dev/null @@ -1,74 +0,0 @@ -/* - This file is part of TALER - (C) 2016 GNUnet e.V. - - TALER is free software; you can redistribute it and/or modify it under the - terms of the GNU General Public License as published by the Free Software - Foundation; either version 3, or (at your option) any later version. - - TALER is distributed in the hope that it will be useful, but WITHOUT ANY - WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR - A PARTICULAR PURPOSE. See the GNU General Public License for more details. - - You should have received a copy of the GNU General Public License along with - TALER; see the file COPYING. If not, see -*/ - -import { i18n } from "@gnu-taler/taler-util"; -import { Fragment, h, VNode } from "preact"; -import { Checkbox } from "../components/Checkbox"; -import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; - -export function SettingsPage(): VNode { - const [permissionsEnabled, togglePermissions] = useExtendedPermissions(); - - return ( - - ); -} - -export interface ViewProps { - permissionsEnabled: boolean; - togglePermissions: () => void; -} - -export function SettingsView({ - permissionsEnabled, - togglePermissions, -}: ViewProps): VNode { - return ( - -
-

- Permissions -

- -
- - - ); -} diff --git a/packages/taler-wallet-webextension/src/popup/index.stories.tsx b/packages/taler-wallet-webextension/src/popup/index.stories.tsx index 3abb80021..341b06b41 100644 --- a/packages/taler-wallet-webextension/src/popup/index.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/index.stories.tsx @@ -22,7 +22,6 @@ import * as a1 from "../wallet/AddNewActionView.stories"; import * as a2 from "./Balance.stories"; import * as a3 from "./DeveloperPage.stories"; -import * as a5 from "./Popup.stories"; import * as a6 from "./TalerActionFound.stories"; -export default [a1, a2, a3, a5, a6]; +export default [a1, a2, a3, a6]; diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx index e1d1b9017..8b97b09e9 100644 --- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx +++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx @@ -22,25 +22,24 @@ import { setupI18n } from "@gnu-taler/taler-util"; import { createHashHistory } from "history"; -import { render, h, VNode, Fragment } from "preact"; +import { Fragment, h, render, VNode } from "preact"; import Router, { route, Route } from "preact-router"; +import { Match } from "preact-router/match"; import { useEffect } from "preact/hooks"; import { PopupBox } from "./components/styled"; import { DevContextProvider } from "./context/devContext"; +import { IoCProviderForRuntime } from "./context/iocContext"; import { useTalerActionURL } from "./hooks/useTalerActionURL"; import { strings } from "./i18n/strings"; -import { NavBar, Pages } from "./NavigationBar"; -import { BackupPage } from "./wallet/BackupPage"; +import { Pages, PopupNavBar } from "./NavigationBar"; import { BalancePage } from "./popup/BalancePage"; import { DeveloperPage } from "./popup/DeveloperPage"; -import { ProviderAddPage } from "./wallet/ProviderAddPage"; -import { ProviderDetailPage } from "./wallet/ProviderDetailPage"; -import { SettingsPage } from "./popup/Settings"; import { TalerActionFound } from "./popup/TalerActionFound"; +import { BackupPage } from "./wallet/BackupPage"; import { ExchangeAddPage } from "./wallet/ExchangeAddPage"; -import { IoCProviderForRuntime } from "./context/iocContext"; import { Pending } from "./wallet/PendingPage"; -import { Match } from "preact-router/match"; +import { ProviderAddPage } from "./wallet/ProviderAddPage"; +import { ProviderDetailPage } from "./wallet/ProviderDetailPage"; function main(): void { try { @@ -84,9 +83,7 @@ function Application(): VNode { {({ devMode }: { devMode: boolean }) => ( - {({ path }: { path: string }) => ( - - )} + {({ path }: { path: string }) => } @@ -112,7 +109,6 @@ function Application(): VNode { ) } /> - */ -import { setupI18n } from "@gnu-taler/taler-util"; +import { i18n, setupI18n } from "@gnu-taler/taler-util"; import { createHashHistory } from "history"; import { Fragment, h, render, VNode } from "preact"; import Router, { route, Route } from "preact-router"; import Match from "preact-router/match"; import { useEffect, useState } from "preact/hooks"; import { LogoHeader } from "./components/LogoHeader"; -import { SuccessBox, WalletBox } from "./components/styled"; +import { + NavigationHeader, + NavigationHeaderHolder, + SuccessBox, + WalletBox, +} from "./components/styled"; import { DevContextProvider } from "./context/devContext"; import { IoCProviderForRuntime } from "./context/iocContext"; import { PayPage } from "./cta/Pay"; @@ -35,7 +40,7 @@ import { RefundPage } from "./cta/Refund"; import { TipPage } from "./cta/Tip"; import { WithdrawPage } from "./cta/Withdraw"; import { strings } from "./i18n/strings"; -import { NavBar, Pages } from "./NavigationBar"; +import { Pages, WalletNavBar } from "./NavigationBar"; import { DeveloperPage } from "./popup/DeveloperPage"; import { BackupPage } from "./wallet/BackupPage"; import { DepositPage } from "./wallet/DepositPage"; @@ -94,7 +99,7 @@ function Application(): VNode { return ( - + ); }} diff --git a/packages/taler-wallet-webextension/src/wxBackend.ts b/packages/taler-wallet-webextension/src/wxBackend.ts index a242e8a08..52187936b 100644 --- a/packages/taler-wallet-webextension/src/wxBackend.ts +++ b/packages/taler-wallet-webextension/src/wxBackend.ts @@ -226,18 +226,18 @@ function makeSyncWalletRedirect( .join("&"); innerUrl.hash = innerUrl.hash + "?" + hParams; } - if (isFirefox()) { - // Some platforms don't support the sync redirect (yet), so fall back to - // async redirect after a timeout. - const doit = async (): Promise => { - await waitMs(150); - const tab = await getTab(tabId); - if (tab.url === oldUrl) { - chrome.tabs.update(tabId, { url: innerUrl.href }); - } - }; - doit(); - } + // if (isFirefox()) { + // // Some platforms don't support the sync redirect (yet), so fall back to + // // async redirect after a timeout. + // const doit = async (): Promise => { + // await waitMs(150); + // const tab = await getTab(tabId); + // if (tab.url === oldUrl) { + // chrome.tabs.update(tabId, { url: innerUrl.href }); + // } + // }; + // doit(); + // } console.log("redirecting to", innerUrl.href); chrome.tabs.update(tabId, { url: innerUrl.href }); return { redirectUrl: innerUrl.href }; diff --git a/packages/taler-wallet-webextension/static/img/settings_black_24dp.svg b/packages/taler-wallet-webextension/static/img/settings_black_24dp.svg new file mode 100644 index 000000000..f53024e88 --- /dev/null +++ b/packages/taler-wallet-webextension/static/img/settings_black_24dp.svg @@ -0,0 +1 @@ + \ No newline at end of file -- cgit v1.2.3