[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] 01/02: green on focus, scroll fix
From: |
gnunet |
Subject: |
[taler-wallet-core] 01/02: green on focus, scroll fix |
Date: |
Wed, 13 Apr 2022 18:55:03 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
commit 5044db65955dc7aff74abc78fb7ec93e25e67b7e
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Wed Apr 13 13:46:51 2022 -0300
green on focus, scroll fix
---
packages/taler-wallet-webextension/src/stories.tsx | 61 ++++++++++++++++------
1 file changed, 44 insertions(+), 17 deletions(-)
diff --git a/packages/taler-wallet-webextension/src/stories.tsx
b/packages/taler-wallet-webextension/src/stories.tsx
index e8624068..3f74cf11 100644
--- a/packages/taler-wallet-webextension/src/stories.tsx
+++ b/packages/taler-wallet-webextension/src/stories.tsx
@@ -86,6 +86,12 @@ const SideBar = styled.div`
dd:nth-child(odd) {
background-color: lightblue;
}
+ a {
+ color: black;
+ }
+ dd[data-selected] {
+ background-color: green;
+ }
}
}
`;
@@ -175,12 +181,16 @@ function getContentForExample(item: ExampleItem |
undefined): () => VNode {
function ExampleList({
name,
list,
+ selected,
+ onSelectStory,
}: {
name: string;
list: {
name: string;
examples: ExampleItem[];
}[];
+ selected: ExampleItem | undefined;
+ onSelectStory: (i: ExampleItem, id: string) => void;
}): VNode {
const [open, setOpen] = useState(true);
return (
@@ -194,9 +204,22 @@ function ExampleList({
{k.examples.map((r) => {
const e = encodeURIComponent;
const eId = `${e(r.group)}-${e(r.component)}-${e(r.name)}`;
+ const isSelected =
+ selected &&
+ selected.component === r.component &&
+ selected.group === r.group &&
+ selected.name === r.name;
return (
- <dd id={eId} key={r.name}>
- <a href={`#${eId}`}>{r.name}</a>
+ <dd id={eId} key={r.name} data-selected={isSelected}>
+ <a
+ href={`#${eId}`}
+ onClick={(e) => {
+ e.preventDefault();
+ onSelectStory(r, eId);
+ }}
+ >
+ {r.name}
+ </a>
</dd>
);
})}
@@ -278,9 +301,9 @@ function ErrorReport({
return <Fragment>{children}</Fragment>;
}
-function getSelectionFromLocationHash(): ExampleItem | undefined {
- if (!location.hash) return undefined;
- const parts = location.hash.substring(1).split("-");
+function getSelectionFromLocationHash(hash: string): ExampleItem | undefined {
+ if (!hash) return undefined;
+ const parts = hash.substring(1).split("-");
if (parts.length < 3) return undefined;
return findByGroupComponentName(
decodeURIComponent(parts[0]),
@@ -290,27 +313,20 @@ function getSelectionFromLocationHash(): ExampleItem |
undefined {
}
function Application(): VNode {
- const initialSelection = getSelectionFromLocationHash();
+ const initialSelection = getSelectionFromLocationHash(location.hash);
const [selected, updateSelected] = useState<ExampleItem | undefined>(
initialSelection,
);
-
- function updateSelectedFromHashChange(): void {
- const selected = getSelectionFromLocationHash();
- updateSelected(selected);
- }
useEffect(() => {
- window.addEventListener("hashchange", updateSelectedFromHashChange);
if (location.hash) {
const hash = location.hash.substring(1);
const found = document.getElementById(hash);
if (found) {
- found.scrollIntoView();
+ found.scrollIntoView({
+ block: "center",
+ });
}
}
- return () => {
- window.removeEventListener("hashchange", updateSelectedFromHashChange);
- };
}, []);
const ExampleContent = getContentForExample(selected);
@@ -321,7 +337,18 @@ function Application(): VNode {
<Page>
<SideBar>
{allExamples.map((e) => (
- <ExampleList key={e.title} name={e.title} list={e.list} />
+ <ExampleList
+ key={e.title}
+ name={e.title}
+ list={e.list}
+ selected={selected}
+ onSelectStory={(item, htmlId) => {
+ document.getElementById(htmlId)?.scrollIntoView({
+ block: "center",
+ });
+ updateSelected(item);
+ }}
+ />
))}
<hr />
</SideBar>
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.