diff options
| -rw-r--r-- | packages/taler-wallet-webextension/src/NavigationBar.tsx | 4 | ||||
| -rw-r--r-- | packages/taler-wallet-webextension/src/stories.tsx | 39 |
2 files changed, 39 insertions, 4 deletions
diff --git a/packages/taler-wallet-webextension/src/NavigationBar.tsx b/packages/taler-wallet-webextension/src/NavigationBar.tsx index 9b222cdb4..f6c56af13 100644 --- a/packages/taler-wallet-webextension/src/NavigationBar.tsx +++ b/packages/taler-wallet-webextension/src/NavigationBar.tsx @@ -143,7 +143,7 @@ export function PopupNavBar({ path = "" }: { path?: string }): VNode { <div style={{ display: "flex", paddingTop: 4, justifyContent: "right" }}> <a href={Pages.qr}> <SvgIcon - title={i18n.str`QR Reader`} + title={i18n.str`QR Reader and Taler URI`} dangerouslySetInnerHTML={{ __html: qrIcon }} color="white" /> @@ -189,7 +189,7 @@ export function WalletNavBar({ path = "" }: { path?: string }): VNode { > <a href={Pages.qr}> <SvgIcon - title={i18n.str`QR Reader`} + title={i18n.str`QR Reader and Taler URI`} dangerouslySetInnerHTML={{ __html: qrIcon }} color="white" /> diff --git a/packages/taler-wallet-webextension/src/stories.tsx b/packages/taler-wallet-webextension/src/stories.tsx index 09261d6f7..02cc15393 100644 --- a/packages/taler-wallet-webextension/src/stories.tsx +++ b/packages/taler-wallet-webextension/src/stories.tsx @@ -62,7 +62,7 @@ const Page = styled.div` `; const SideBar = styled.div` - min-width: 200px; + min-width: var(--with-size); height: calc(100vh - 20px); overflow-y: visible; overflow-x: hidden; @@ -106,6 +106,35 @@ const SideBar = styled.div` } `; +const ResizeHandleDiv = styled.div` + width: 10px; + background: #ddd; + cursor: ew-resize; +`; + +function ResizeHandle({ onUpdate }: { onUpdate: (x: number) => void }): VNode { + const [start, setStart] = useState<number | undefined>(undefined); + return ( + <ResizeHandleDiv + onMouseDown={(e: any) => { + setStart(e.pageX); + console.log("active", e.pageX); + return false; + }} + onMouseMove={(e: any) => { + if (start !== undefined) { + onUpdate(e.pageX - start); + } + return false; + }} + onMouseUp={() => { + setStart(undefined); + return false; + }} + /> + ); +} + const Content = styled.div` width: 100%; padding: 20px; @@ -380,11 +409,12 @@ function Application(): VNode { const ExampleContent = getContentForExample(selected); const GroupWrapper = getWrapperForGroup(selected?.group || "default"); + const [sidebarWidth, setSidebarWidth] = useState(200); return ( <Page> <LiveReload /> - <SideBar> + <SideBar style={{ "--with-size": `${sidebarWidth}px` }}> {allExamples.map((e) => ( <ExampleList key={e.title} @@ -401,6 +431,11 @@ function Application(): VNode { ))} <hr /> </SideBar> + <ResizeHandle + onUpdate={(x) => { + setSidebarWidth((s) => s + x); + }} + /> <Content> <ErrorReport selected={selected}> <GroupWrapper> |