Consistent dropdown layout for article actions

We also offset a little to display the popover in the middle of
the article action button on desktop

Disable autofocus on touch devices so the keyboard doesn't take
up too much space

packages/web/components/elements/DropdownElements.tsx

@@ -8,6 +8,7 @@ import {
   Arrow,
   Label,
 } from '@radix-ui/react-dropdown-menu'
+import { PopperContentProps } from '@radix-ui/react-popover';
 import { CSS } from '@stitches/react';
 import { styled } from './../tokens/stitches.config'
 
@@ -104,18 +105,19 @@ export function DropdownOption(props: DropdownOptionProps): JSX.Element {
   )
 }
 
-export function Dropdown({
-  children,
-  align,
-  triggerElement,
-  labelText,
-  showArrow = true,
-  disabled = false,
-  side = 'bottom',
-  sideOffset = 0,
-  css
-}: DropdownProps): JSX.Element {
-  console.log('side', side)
+export function Dropdown(props: DropdownProps & PopperContentProps): JSX.Element {
+  const {
+    children,
+    align,
+    triggerElement,
+    labelText,
+    showArrow = true,
+    disabled = false,
+    side = 'bottom',
+    sideOffset = 0,
+    alignOffset = 0,
+    css
+  } = props
   return (
     <Root modal={false}>
       <DropdownTrigger disabled={disabled}>{triggerElement}</DropdownTrigger>
@@ -128,6 +130,7 @@ export function Dropdown({
         side={side}
         sideOffset={sideOffset}
         align={align ? align : 'center'}
+        alignOffset={alignOffset}
       >
         {labelText && <StyledLabel>{labelText}</StyledLabel>}
         {children}

packages/web/components/templates/article/ArticleActionsMenu.tsx

@@ -19,7 +19,7 @@ type MenuSeparatorProps = {
   layout: ArticleActionsMenuLayout
 }
 
-export function MenuSeparator(props: MenuSeparatorProps) {
+const MenuSeparator = (props: MenuSeparatorProps): JSX.Element => {
   const LineSeparator = styled(Separator, {
     width: '100%',
     margin: 0,
@@ -29,6 +29,26 @@ export function MenuSeparator(props: MenuSeparatorProps) {
   return (props.layout == 'vertical' ? <LineSeparator /> : <></>)
 }
 
+type ActionDropdownProps = {
+  layout: ArticleActionsMenuLayout
+  triggerElement: JSX.Element
+  children: JSX.Element
+}
+
+const ActionDropdown = (props: ActionDropdownProps): JSX.Element => {
+  return <Dropdown
+    showArrow={true}
+    css={{  m: '0px', p: '0px' }}
+    side={props.layout == 'vertical' ? 'right' : 'bottom'}
+    sideOffset={props.layout == 'vertical' ? 8 : 0}
+    align={props.layout == 'vertical' ? 'start' : 'center'}
+    alignOffset={props.layout == 'vertical' ? -18 : undefined}
+    triggerElement={props.triggerElement}
+  >
+    {props.children}
+  </Dropdown>
+}
+
 export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element {
   const { preferencesData } = useGetUserPreferences()
 
@@ -47,38 +67,29 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
         m: '0px',
       }}
     >
-      <Dropdown
-        showArrow={true}
-        side={props.layout == 'vertical' ? 'right' : 'bottom'}
-        sideOffset={props.layout == 'vertical' ? 8 : 0}
-        align={props.layout == 'vertical' ? 'start' : 'center'}
+      <ActionDropdown
+        layout={props.layout}
         triggerElement={
           <SpanBox css={{ width: '100%', marginLeft: 'auto', marginRight: 'auto' }}>
             <TextAa size={24} color={theme.colors.readerFont.toString()} />
           </SpanBox>
         }
-        css={{  m: '0px', p: '0px' }}
       >
         <ReaderSettings userPreferences={preferencesData} articleActionHandler={props.articleActionHandler} />
-      </Dropdown>
+      </ActionDropdown>
 
       <MenuSeparator layout={props.layout} />
 
-      <Dropdown
-        side={props.layout == 'vertical' ? 'right' : 'bottom'}
-        sideOffset={props.layout == 'vertical' ? 8 : 0}
-        showArrow={true}
-        align={props.layout == 'vertical' ? 'start' : 'center'}
+      <ActionDropdown
+        layout={props.layout}
         triggerElement={
           <SpanBox css={{ width: '100%', marginLeft: 'auto', marginRight: 'auto' }}>
             <TagSimple size={24} color={theme.colors.readerFont.toString()} />
           </SpanBox>
         }
-        css={{  m: '0px', p: '0px' }}
       >
         <EditLabelsModal />
-        {/* <EditLabelsModal> */}
-      </Dropdown>
+      </ActionDropdown>
 
       <Button style='articleActionIcon' onClick={() => props.articleActionHandler('showHighlights')}>
         <HighlighterCircle size={24} color={theme.colors.readerFont.toString()} />

packages/web/components/templates/article/EditLabelsModal.tsx

@@ -97,7 +97,7 @@ function Header(props: HeaderProps): JSX.Element {
         <FormInput
           ref={inputRef}
           type="text"
-          autoFocus={isTouchScreenDevice()}
+          autoFocus={!isTouchScreenDevice()}
           value={props.filterText}
           placeholder="Filter for label"
           onFocus={(event) => {

packages/web/components/templates/article/ReaderSettingsModal.tsx

@@ -73,7 +73,7 @@ export function ReaderSettings(props: ReaderSettingsProps): JSX.Element {
           </Button>
         </HStack>
       </VStack>
-      {/* <VStack css={{
+      <VStack css={{
         p: '0px',
         m: '0px',
         pb: '12px',
@@ -85,12 +85,14 @@ export function ReaderSettings(props: ReaderSettingsProps): JSX.Element {
           <Button style='plainIcon' css={{ pt: '10px', px: '4px' }}>
             <AlignCenterHorizontalSimple size={25} color={theme.colors.readerFont.toString()} />
           </Button>
-          <TickedRangeSlider value={14} onChange={() => {}} />
+          <TickedRangeSlider value={14} onChange={(value) => {
+            console.log('changed line spacing')
+          }} />
           <Button style='plainIcon' css={{ pt: '10px', px: '4px' }}>
             <AlignCenterHorizontalSimple size={25} color={theme.colors.readerFont.toString()} />
           </Button>
         </HStack>
-      </VStack> */}
+      </VStack>
     </VStack>
   )
 }