[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] branch master updated: mobile for side menu
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] branch master updated: mobile for side menu |
|
Date: |
Thu, 19 Oct 2023 14:02:54 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
The following commit(s) were added to refs/heads/master by this push:
new 6bc2ca85e mobile for side menu
6bc2ca85e is described below
commit 6bc2ca85e7238dbd9a88643e540a73cee6c918c7
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Thu Oct 19 09:02:45 2023 -0300
mobile for side menu
---
.../src/components/Transactions/views.tsx | 12 +--
packages/demobank-ui/src/hooks/settings.ts | 19 ++++
packages/demobank-ui/src/pages/BankFrame.tsx | 105 +++++----------------
packages/demobank-ui/src/pages/QrCodeSection.tsx | 2 +-
4 files changed, 50 insertions(+), 88 deletions(-)
diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx
b/packages/demobank-ui/src/components/Transactions/views.tsx
index 696fb59f3..404e25619 100644
--- a/packages/demobank-ui/src/components/Transactions/views.tsx
+++ b/packages/demobank-ui/src/components/Transactions/views.tsx
@@ -14,13 +14,11 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
-import { Fragment, h, VNode } from "preact";
import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { State } from "./index.js";
-import { format, isToday } from "date-fns";
-import { Amounts } from "@gnu-taler/taler-util";
-import { useEffect, useRef } from "preact/hooks";
+import { format } from "date-fns";
+import { Fragment, h, VNode } from "preact";
import { RenderAmount } from "../../pages/PaytoWireTransferForm.js";
+import { State } from "./index.js";
export function LoadingUriView({ error }: State.LoadingUriError): VNode {
const { i18n } = useTranslationContext();
@@ -82,7 +80,9 @@ export function ReadyView({ transactions, onNext, onPrev }:
State.Ready): VNode
<dt class="sr-only
sm:hidden"><i18n.Translate>Amount</i18n.Translate></dt>
<dd class="mt-1 truncate text-gray-700">
{item.negative ? i18n.str`sent` :
i18n.str`received`} {item.amount ? (
- <RenderAmount value={item.amount} />
+ <span data-negative={item.negative ? "true" :
"false"} class="data-[negative=false]:text-green-600
data-[negative=true]:text-red-600">
+ <RenderAmount value={item.amount} />
+ </span>
) : (
<span style={{ color: "grey"
}}><{i18n.str`invalid value`}></span>
)}</dd>
diff --git a/packages/demobank-ui/src/hooks/settings.ts
b/packages/demobank-ui/src/hooks/settings.ts
index ad853f9d7..cfc3b6a5b 100644
--- a/packages/demobank-ui/src/hooks/settings.ts
+++ b/packages/demobank-ui/src/hooks/settings.ts
@@ -17,6 +17,7 @@
import {
AmountString,
Codec,
+ TranslatedString,
buildCodecForObject,
codecForAmountString,
codecForBoolean,
@@ -25,6 +26,7 @@ import {
codecOptional,
} from "@gnu-taler/taler-util";
import { buildStorageKey, useLocalStorage } from "@gnu-taler/web-util/browser";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
interface Settings {
currentWithdrawalOperationId: string | undefined;
@@ -34,6 +36,23 @@ interface Settings {
maxWithdrawalAmount: number;
fastWithdrawal: boolean;
showDebugInfo: boolean;
+
+}
+
+export function getAllBooleanSettings(): Array<keyof Settings> {
+ return ["fastWithdrawal", "showDebugInfo", "showDemoDescription",
"showInstallWallet", "showWithdrawalSuccess"]
+}
+
+export function getLabelForSetting(k: keyof Settings, i18n: ReturnType<typeof
useTranslationContext>["i18n"]): TranslatedString {
+ switch (k) {
+ case "currentWithdrawalOperationId": return i18n.str`Current withdrawal
operation`
+ case "maxWithdrawalAmount": return i18n.str`Max withdrawal amount`
+ case "showWithdrawalSuccess": return i18n.str`Show withdrawal confirmation`
+ case "showDemoDescription": return i18n.str`Show demo description`
+ case "showInstallWallet": return i18n.str`Show install wallet first`
+ case "fastWithdrawal": return i18n.str`Use fast withdrawal form`
+ case "showDebugInfo": return i18n.str`Show debug info`
+ }
}
export const codecForSettings = (): Codec<Settings> =>
diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx
b/packages/demobank-ui/src/pages/BankFrame.tsx
index c75964f8e..acd994fee 100644
--- a/packages/demobank-ui/src/pages/BankFrame.tsx
+++ b/packages/demobank-ui/src/pages/BankFrame.tsx
@@ -14,7 +14,7 @@
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
*/
-import { Amounts, Logger, TalerError, TranslatedString, parsePaytoUri } from
"@gnu-taler/taler-util";
+import { Amounts, TalerError, TranslatedString, parsePaytoUri } from
"@gnu-taler/taler-util";
import { notifyError, notifyException, useNotifications, useTranslationContext
} from "@gnu-taler/web-util/browser";
import { ComponentChildren, Fragment, VNode, h } from "preact";
import { useEffect, useErrorBoundary, useState } from "preact/hooks";
@@ -22,12 +22,12 @@ import logo from "../assets/logo-2021.svg";
import { Attention } from "../components/Attention.js";
import { CopyButton } from "../components/CopyButton.js";
import { LangSelector } from "../components/LangSelector.js";
+import { Loading } from "../components/Loading.js";
import { useBackendContext } from "../context/backend.js";
import { useAccountDetails } from "../hooks/access.js";
-import { useSettings } from "../hooks/settings.js";
+import { getAllBooleanSettings, getLabelForSetting, useSettings } from
"../hooks/settings.js";
import { bankUiSettings } from "../settings.js";
import { RenderAmount } from "./PaytoWireTransferForm.js";
-import { Loading } from "../components/Loading.js";
const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ :
undefined;
const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined;
@@ -138,7 +138,7 @@ export function BankFrame({
<div class="px-4 sm:px-6" >
<div class="flex items-start justify-between" >
<h2 class="text-base font-semibold leading-6
text-gray-900" id="slide-over-title">
- <i18n.Translate>Preferences</i18n.Translate>
+ <i18n.Translate>Menu</i18n.Translate>
</h2>
<div class="ml-3 flex h-7 items-center">
<button type="button" class="relative rounded-md
bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2
focus:ring-indigo-500 focus:ring-offset-2"
@@ -184,7 +184,7 @@ export function BankFrame({
<div class="text-xs font-semibold leading-6
text-gray-400">
<i18n.Translate>Sites</i18n.Translate>
</div>
- <ul role="list" class="-mx-2 mt-2 space-y-1">
+ <ul role="list" class="space-y-1">
{bankUiSettings.demoSites.map(([name, url])
=> {
return <li>
<a href={url} target="_blank"
rel="noopener noreferrer" class="text-gray-700 hover:text-indigo-600
hover:bg-gray-100 group flex gap-x-3 rounded-md p-2 text-sm leading-6
font-semibold">
@@ -197,84 +197,27 @@ export function BankFrame({
</li>
}
<li>
+ <div class="text-xs font-semibold leading-6
text-gray-400">
+ <i18n.Translate>Preferences</i18n.Translate>
+ </div>
<ul role="list" class="space-y-1">
- <li class="mt-2">
- <div class="flex items-center
justify-between">
- <span class="flex flex-grow flex-col">
- <span class="text-sm text-black
font-medium leading-6 " id="availability-label">
- <i18n.Translate>Show withdrawal
confirmation</i18n.Translate>
- </span>
- </span>
- <button type="button"
data-enabled={settings.showWithdrawalSuccess} class="bg-indigo-600
data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0
cursor-pointer rounded-full border-2 border-transparent transition-colors
duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600
focus:ring-offset-2" role="switch" aria-checked="false"
aria-labelledby="availability-label" aria-describedby="availability-description"
-
- onClick={() => {
-
updateSettings("showWithdrawalSuccess", !settings.showWithdrawalSuccess);
- }}>
- <span aria-hidden="true"
data-enabled={settings.showWithdrawalSuccess} class="translate-x-5
data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5
transform rounded-full bg-white shadow ring-0 transition duration-200
ease-in-out"></span>
- </button>
- </div>
- </li>
- <li class="mt-2">
- <div class="flex items-center
justify-between">
- <span class="flex flex-grow flex-col">
- <span class="text-sm text-black
font-medium leading-6 " id="availability-label">
- <i18n.Translate>Show demo
description</i18n.Translate>
- </span>
- </span>
- <button type="button"
data-enabled={settings.showDemoDescription} class="bg-indigo-600
data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0
cursor-pointer rounded-full border-2 border-transparent transition-colors
duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600
focus:ring-offset-2" role="switch" aria-checked="false"
aria-labelledby="availability-label" aria-describedby="availability-description"
-
- onClick={() => {
- updateSettings("showDemoDescription",
!settings.showDemoDescription);
- }}>
- <span aria-hidden="true"
data-enabled={settings.showDemoDescription} class="translate-x-5
data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5
transform rounded-full bg-white shadow ring-0 transition duration-200
ease-in-out"></span>
- </button>
- </div>
- </li>
- <li class="mt-2">
- <div class="flex items-center
justify-between">
- <span class="flex flex-grow flex-col">
- <span class="text-sm text-black
font-medium leading-6 " id="availability-label">
- <i18n.Translate>Show debug
info</i18n.Translate>
- </span>
- </span>
- <button type="button"
data-enabled={settings.showDebugInfo} class="bg-indigo-600
data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0
cursor-pointer rounded-full border-2 border-transparent transition-colors
duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600
focus:ring-offset-2" role="switch" aria-checked="false"
aria-labelledby="availability-label" aria-describedby="availability-description"
- onClick={() => {
- updateSettings("showDebugInfo",
!settings.showDebugInfo);
- }}>
- <span aria-hidden="true"
data-enabled={settings.showDebugInfo} class="translate-x-5
data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5
transform rounded-full bg-white shadow ring-0 transition duration-200
ease-in-out"></span>
- </button>
- </div>
- </li>
- <li class="mt-2">
- <div class="flex items-center
justify-between">
- <span class="flex flex-grow flex-col">
- <span class="text-sm text-black
font-medium leading-6 " id="availability-label">
- <i18n.Translate>Show install wallet
first</i18n.Translate>
- </span>
- </span>
- <button type="button"
data-enabled={settings.showInstallWallet} class="bg-indigo-600
data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0
cursor-pointer rounded-full border-2 border-transparent transition-colors
duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600
focus:ring-offset-2" role="switch" aria-checked="false"
aria-labelledby="availability-label" aria-describedby="availability-description"
- onClick={() => {
- updateSettings("showInstallWallet",
!settings.showInstallWallet);
- }}>
- <span aria-hidden="true"
data-enabled={settings.showInstallWallet} class="translate-x-5
data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5
transform rounded-full bg-white shadow ring-0 transition duration-200
ease-in-out"></span>
- </button>
- </div>
- </li>
- <li class="mt-2">
- <div class="flex items-center
justify-between">
- <span class="flex flex-grow flex-col">
- <span class="text-sm text-black
font-medium leading-6 " id="availability-label">
- <i18n.Translate>Use fast
withdrawal</i18n.Translate>
+ {getAllBooleanSettings().map(set => {
+ const isOn: boolean = !!settings[set]
+ return <li class="mt-2 pl-2">
+ <div class="flex items-center
justify-between">
+ <span class="flex flex-grow flex-col">
+ <span class="text-sm text-black
font-medium leading-6 " id="availability-label">
+ {getLabelForSetting(set, i18n)}
+ </span>
</span>
- </span>
- <button type="button"
data-enabled={settings.fastWithdrawal} class="bg-indigo-600
data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0
cursor-pointer rounded-full border-2 border-transparent transition-colors
duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600
focus:ring-offset-2" role="switch" aria-checked="false"
aria-labelledby="availability-label" aria-describedby="availability-description"
- onClick={() => {
- updateSettings("fastWithdrawal",
!settings.fastWithdrawal);
- }}>
- <span aria-hidden="true"
data-enabled={settings.fastWithdrawal} class="translate-x-5
data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5
transform rounded-full bg-white shadow ring-0 transition duration-200
ease-in-out"></span>
- </button>
- </div>
- </li>
+ <button type="button"
data-enabled={isOn} class="bg-indigo-600 data-[enabled=false]:bg-gray-200
relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full
border-2 border-transparent transition-colors duration-200 ease-in-out
focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
role="switch" aria-checked="false" aria-labelledby="availability-label"
aria-describedby="availability-description"
+
+ onClick={() => { updateSettings(set,
!isOn); }}>
+ <span aria-hidden="true"
data-enabled={isOn} class="translate-x-5 data-[enabled=false]:translate-x-0
pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow
ring-0 transition duration-200 ease-in-out"></span>
+ </button>
+ </div>
+ </li>
+ })}
</ul>
</li>
</ul>
diff --git a/packages/demobank-ui/src/pages/QrCodeSection.tsx
b/packages/demobank-ui/src/pages/QrCodeSection.tsx
index 109993aae..a37de383d 100644
--- a/packages/demobank-ui/src/pages/QrCodeSection.tsx
+++ b/packages/demobank-ui/src/pages/QrCodeSection.tsx
@@ -123,7 +123,7 @@ export function QrCodeSection({
<i18n.Translate>Or if you have the wallet in another
device</i18n.Translate>
</h3>
<div class="mt-4 max-w-xl text-sm text-gray-500">
- <i18n.Translate>Scan the QR below to start the
withdrawal</i18n.Translate>
+ <i18n.Translate>Scan the QR below to start the
withdrawal.</i18n.Translate>
</div>
<div class="mt-2 max-w-md ml-auto mr-auto">
<QR text={talerWithdrawUri} />
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- [taler-wallet-core] branch master updated: mobile for side menu,
gnunet <=