diff options
author | Sebastian <sebasjm@gmail.com> | 2022-09-14 08:14:00 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-09-14 08:19:59 -0300 |
commit | 62911fd59364e709f1a3e904090f2f55ecd0db7c (patch) | |
tree | 3de2a3344e9309098f31eb76d274a30ef6fc2f87 /packages/taler-wallet-webextension/src/stories.tsx | |
parent | f026a8d326bf64f76cd2523b68b8f84e0eb68361 (diff) | |
download | wallet-core-62911fd59364e709f1a3e904090f2f55ecd0db7c.tar.xz |
stories resize (wip)
Diffstat (limited to 'packages/taler-wallet-webextension/src/stories.tsx')
-rw-r--r-- | packages/taler-wallet-webextension/src/stories.tsx | 39 |
1 files changed, 37 insertions, 2 deletions
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> |