From 0d16b32ae712e65730b34b002560e4b09c2ab4d0 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 8 Apr 2022 22:00:57 -0700
Subject: [PATCH] Test with bottom sheet

---
 .../components/elements/DropdownElements.tsx  |  1 -
 .../templates/article/ArticleActionsMenu.tsx  | 19 ++++++++++++++++---
 .../templates/article/EditLabelsModal.tsx     |  3 ++-
 .../templates/article/ReaderSettingsModal.tsx |  7 +++++--
 packages/web/package.json                     |  1 +
 5 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/web/components/elements/DropdownElements.tsx b/packages/web/components/elements/DropdownElements.tsx
index d5f3b78c6..6b63da219 100644
--- a/packages/web/components/elements/DropdownElements.tsx
+++ b/packages/web/components/elements/DropdownElements.tsx
@@ -115,7 +115,6 @@ export function Dropdown({
   sideOffset = 0,
   css
 }: DropdownProps): JSX.Element {
-  console.log('side', side)
   return (
     <Root modal={false}>
       <DropdownTrigger disabled={disabled}>{triggerElement}</DropdownTrigger>
diff --git a/packages/web/components/templates/article/ArticleActionsMenu.tsx b/packages/web/components/templates/article/ArticleActionsMenu.tsx
index cd5ea9071..c806fa655 100644
--- a/packages/web/components/templates/article/ArticleActionsMenu.tsx
+++ b/packages/web/components/templates/article/ArticleActionsMenu.tsx
@@ -1,5 +1,7 @@
 import { Separator } from "@radix-ui/react-separator"
 import { ArchiveBox, DotsThree, HighlighterCircle, TagSimple, TextAa } from "phosphor-react"
+import { useState } from "react"
+import { BottomSheet } from "react-spring-bottom-sheet"
 import { useGetUserPreferences, UserPreferences } from "../../../lib/networking/queries/useGetUserPreferences"
 import { Button } from "../../elements/Button"
 import { Dropdown } from "../../elements/DropdownElements"
@@ -8,6 +10,10 @@ import { styled, theme } from "../../tokens/stitches.config"
 import { EditLabelsModal } from "./EditLabelsModal"
 import { ReaderSettings } from "./ReaderSettingsModal"
 
+// if setting up the CSS is tricky, you can add this to your page somewhere:
+// <link rel="stylesheet" href="https://unpkg.com/react-spring-bottom-sheet/dist/style.css" crossorigin="anonymous">
+import 'react-spring-bottom-sheet/dist/style.css'
+
 export type ArticleActionsMenuLayout = 'horizontal' | 'vertical'
 
 type ArticleActionsMenuProps = {
@@ -31,6 +37,7 @@ export function MenuSeparator(props: MenuSeparatorProps) {
 
 export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element {
   const { preferencesData } = useGetUserPreferences()
+  const [open, setOpen] = useState(false)
 
   return (
     <>
@@ -56,7 +63,7 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
             <TextAa size={24} color={theme.colors.readerFont.toString()} />
           </SpanBox>
         }
-        css={{  m: '0px', p: '0px' }}
+        css={{ m: '0px', p: '0px' }}
       >
         <ReaderSettings userPreferences={preferencesData} articleActionHandler={props.articleActionHandler} />
       </Dropdown>
@@ -83,8 +90,8 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
         <HighlighterCircle size={24} color={theme.colors.readerFont.toString()} />
       </Button>
       <MenuSeparator layout={props.layout} />
-
-      <Button style='articleActionIcon' onClick={() => props.articleActionHandler('archive')}>
+{/* // props.articleActionHandler('archive') */}
+      <Button style='articleActionIcon' onClick={() => setOpen(true)}>
         <ArchiveBox size={24} color={theme.colors.readerFont.toString()} />
       </Button>
       {/* <MenuSeparator layout={props.layout} />
@@ -92,6 +99,12 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
       <Button style='articleActionIcon'>
         <DotsThree size={24} color={theme.colors.readerFont.toString()} />
       </Button> */}
+      <BottomSheet 
+          snapPoints={({ minHeight }) => minHeight}
+          open={open} onDismiss={() => setOpen(false)}>
+        <EditLabelsModal />
+        {/* <ReaderSettings userPreferences={preferencesData} articleActionHandler={props.articleActionHandler} /> */}
+      </BottomSheet>
     </Box>
     </>
   )
diff --git a/packages/web/components/templates/article/EditLabelsModal.tsx b/packages/web/components/templates/article/EditLabelsModal.tsx
index 1d74f4574..c7205b43d 100644
--- a/packages/web/components/templates/article/EditLabelsModal.tsx
+++ b/packages/web/components/templates/article/EditLabelsModal.tsx
@@ -241,7 +241,8 @@ export function EditLabelsModal(props: EditLabelsModalProps): JSX.Element {
     //   >
         <VStack distribution="start" css={{ 
           p: '0', maxHeight: '400px',
-          width: '265px',
+          width: '100%',
+          minWidth: '265px',
         }}>
           <Header setFilterText={setFilterText} filterText={filterText} />
           <LabelsList
diff --git a/packages/web/components/templates/article/ReaderSettingsModal.tsx b/packages/web/components/templates/article/ReaderSettingsModal.tsx
index f1043837a..2e13b6d3f 100644
--- a/packages/web/components/templates/article/ReaderSettingsModal.tsx
+++ b/packages/web/components/templates/article/ReaderSettingsModal.tsx
@@ -36,8 +36,9 @@ export function ReaderSettings(props: ReaderSettingsProps): JSX.Element {
       <HStack 
         alignment='center'
         css={{
-          width: '265px',
+          width: '100%',
           height: '70px',
+          minWidth: '265px',
           borderBottom: `1px solid ${theme.colors.grayLine.toString()}`,
         }}
       >
@@ -65,7 +66,9 @@ export function ReaderSettings(props: ReaderSettingsProps): JSX.Element {
           <Button style='plainIcon' css={{ pt: '10px', px: '4px' }} onClick={() => props.articleActionHandler('decrementMarginWidth')}>
             <ArrowsInLineHorizontal size={24} color={theme.colors.readerFont.toString()} />
           </Button>
-          <TickedRangeSlider min={10} max={28} value={props.userPreferences?.margin || 0} onChange={() => {}} />
+          <TickedRangeSlider min={10} max={28} value={props.userPreferences?.margin || 0} onChange={() => {
+            console.log('range changed')
+          }} />
           <Button style='plainIcon' css={{ pt: '10px', px: '4px' }} onClick={() => props.articleActionHandler('incrementMarginWidth')}>
             <ArrowsOutLineHorizontal size={24} color={theme.colors.readerFont.toString()} />
           </Button>
diff --git a/packages/web/package.json b/packages/web/package.json
index 7858d890b..39c1eba08 100644
--- a/packages/web/package.json
+++ b/packages/web/package.json
@@ -40,6 +40,7 @@
     "react-hot-toast": "^2.1.1",
     "react-intl": "^5.20.12",
     "react-loading-skeleton": "^3.0.2",
+    "react-spring-bottom-sheet": "^3.4.0",
     "react-twitter-widgets": "^1.10.0",
     "swr": "^1.0.1",
     "uuid": "^8.3.2"