Change context menu on mobile

portalnesia · Dec 24, 2022 · 9f227da · 9f227da
1 parent ab8f931
commit 9f227da
Show file tree

Hide file tree

Showing 18 changed files with 460 additions and 326 deletions.
diff --git a/src/components/Action.tsx b/src/components/Action.tsx
@@ -15,6 +15,7 @@ import MenuPopover from '@design/components/MenuPopover'
 import MenuItem from '@mui/material/MenuItem'
 import Stack from '@mui/material/Stack'
 import { IReport } from '@type/redux'
+import Box from '@mui/material/Box'
 
 export type LikeActionProps={
     /**
@@ -263,12 +264,14 @@ export type ShareActionProps={
                 open={openMenu}
                 onClose={handleCloseMenu}
             >
-                <MenuItem key={'facebook'} onClick={handleMenuClick('facebook')}>Facebook</MenuItem>
-                <MenuItem key={'twitter'} onClick={handleMenuClick('twitter')}>Twitter</MenuItem>
-                <MenuItem key={'line'} onClick={handleMenuClick('line')}>Line</MenuItem>
-                <MenuItem key={'whatsapp'} onClick={handleMenuClick('whatsapp')}>Whatsapp</MenuItem>
-                <MenuItem key={'telegram'} onClick={handleMenuClick('telegram')}>Telegram</MenuItem>
-                <MenuItem key={'copy'} onClick={handleMenuClick('copy')}>Copy URL</MenuItem>
+                <Box py={1}>
+                    <MenuItem key={'facebook'} onClick={handleMenuClick('facebook')}>Facebook</MenuItem>
+                    <MenuItem key={'twitter'} onClick={handleMenuClick('twitter')}>Twitter</MenuItem>
+                    <MenuItem key={'line'} onClick={handleMenuClick('line')}>Line</MenuItem>
+                    <MenuItem key={'whatsapp'} onClick={handleMenuClick('whatsapp')}>Whatsapp</MenuItem>
+                    <MenuItem key={'telegram'} onClick={handleMenuClick('telegram')}>Telegram</MenuItem>
+                    <MenuItem key={'copy'} onClick={handleMenuClick('copy')}>Copy URL</MenuItem>
+                </Box>
             </MenuPopover>
         </>
     );

diff --git a/src/components/Feedback.tsx b/src/components/Feedback.tsx
diff --git a/src/components/FileManager.tsx b/src/components/FileManager.tsx
@@ -64,7 +64,8 @@ const Sticky=styled('div',{shouldForwardProp:prop=>prop!=="nosticky"})<{notstick
     zIndex:100,
     paddingTop:10,
     paddingBottom:10,
-    backgroundColor:theme.palette.background.paper
+    backgroundColor:theme.palette.background.paper,
+    borderBottom:`1px solid ${theme.palette.divider}`
 }))
 
 type FilesWithIdx = IFiles & ({
@@ -476,7 +477,7 @@ function PortalnesiaFiles({data:dt,index:i,onClick,onRightClick,disabled,onDelet
         e.currentTarget.blur();
         handleContextClose()();
         handleClick();
-    },[onClick,handleContextClose,handleClick])
+    },[handleContextClose,handleClick])
 
     return (
         <>
@@ -505,6 +506,7 @@ function PortalnesiaFiles({data:dt,index:i,onClick,onRightClick,disabled,onDelet
                         invisible:false
                     }
                 }}
+                sx={{zIndex:1301}}
             >
                 <Box py={1}>
                     <MenuItem onClick={handleSelect}>

diff --git a/src/components/Pages.tsx b/src/components/Pages.tsx
@@ -2,7 +2,7 @@ import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 're
 import { useTheme } from '@mui/material/styles';
 import config from '@src/config';
 import { NextSeo, SiteLinksSearchBoxJsonLd, CorporateContactJsonLd } from 'next-seo';
-import Router, { useRouter } from 'next/router';
+import Router from 'next/router';
 import { portalUrl, staticUrl } from '@utils/main';
 import { useDispatch, useSelector } from '@redux/store';
 import SplashScreen from '@design/components/Splashscreen';
@@ -16,8 +16,6 @@ import Zoom from '@mui/material/Zoom';
 import { Socket } from './Socket';
 import Script from 'next/script';
 import Portal from '@mui/material/Portal';
-import Box from '@mui/material/Box';
-import Slide from '@mui/material/Slide';
 import { useHotKeys } from '@hooks/hotkeys';
 import HotKeys from './HotKeys';
 import { IReport } from '@type/redux';
@@ -50,7 +48,6 @@ export interface PageProps {
 
 
 export default function Pages({children,title,desc,keyword,canonical:canonicalProps,image,noIndex=false,withoutShowTop}: PageProps) {
-    const router = useRouter()
     const { adBlock } = useInit();
     const dispatch = useDispatch();
     const {appToken,report} = useSelector(s=>({appToken:s.appToken,report:s.report}));
@@ -201,6 +198,22 @@ export default function Pages({children,title,desc,keyword,canonical:canonicalPr
     /* eslint-disable-next-line react-hooks/exhaustive-deps */
     },[post,appToken])
 
+    const onWidgetLoad = useCallback(()=>{
+        setTimeout(()=>{
+            const widget = document.getElementById('arc-widget-container');
+            if(widget) {
+                widget.setAttribute('data-arc-widget-portalnesia','');
+            }
+        },2000)
+    },[])
+
+    useEffect(()=>{
+        const widget = document.getElementById('arc-widget-container');
+        if(widget) {
+            widget.setAttribute('data-arc-widget-portalnesia','');
+        }
+    },[canonicalProps])
+
     return (
         <div>
             {!appToken ? (
@@ -270,15 +283,11 @@ export default function Pages({children,title,desc,keyword,canonical:canonicalPr
                     <KeyboardArrowUp fontSize='large' />
                 </Fab>
             </Zoom>
-            {process.env.NODE_ENV==='production' ? <Script key='arcio' strategy="lazyOnload" src="https://arc.io/widget.min.js#3kw38brn" /> : null}
+            {process.env.NODE_ENV==='production' ? <Script key='arcio' strategy="lazyOnload" onLoad={onWidgetLoad} src="https://arc.io/widget.min.js#3kw38brn" /> : null}
             {process.env.NODE_ENV==='production' ? <Script key="instatus" strategy="lazyOnload" src="https://portalnesia.instatus.com/widget/script.js" /> : null}
 
             <Portal>
-                <Slide direction='left' in={report!==undefined} unmountOnExit>
-                    <Box>
-                        <Feedback title={report?.type === 'feedback' ? 'Send Feedback' : 'Send Report'} placeholder={report?.type === 'feedback' ? "Tell us how we can improve our product":undefined} onCancel={handleCloseFeecback} onSend={handleReport(report)} disabled={loading==='report'} required={['konten','komentar','user'].includes(report?.type||"")} />
-                    </Box>
-                </Slide>
+                <Feedback open={report!==undefined} title={report?.type === 'feedback' ? 'Send Feedback' : 'Send Report'} placeholder={report?.type === 'feedback' ? "Tell us how we can improve our product":undefined} onCancel={handleCloseFeecback} onSend={handleReport(report)} disabled={loading==='report'} required={['konten','komentar','user'].includes(report?.type||"")} />
             </Portal>
             <HotKeys atasKeymap={atasKeyMap} bawahKeymap={bawahKeyMap} open={keysDialog==='keyboard'} onClose={setKeysDialog(undefined)} />
             <Recaptcha ref={captchaRef} />

diff --git a/src/design/components/Dialog.tsx b/src/design/components/Dialog.tsx
@@ -56,7 +56,7 @@ export default function Dialog({handleClose,loading,onClose:_,fullScreen,maxWidt
     return (
       <Dialogg {...(isDark  ? {PaperProps:{elevation:0}} : {})} fullScreen={isFullscreen} onClose={onClose} fullWidth maxWidth={maxWidth} scroll='body' {...other}>
         {title && (
-          <Div {...sticky ? {sx:{position:'sticky',top:0,width:'100%',backgroundColor:'background.paper',zIndex:1}} : {}}>
+          <Div {...sticky ? {sx:{position:'sticky',top:0,width:'100%',backgroundColor:'background.paper',zIndex:1,borderBottom:t=>`1px solid ${t.palette.divider}`}} : {}}>
             <DialogTitle>
               <Box display="flex" justifyContent="space-between" alignItems="center">
                 <Typography variant='h5'>{title}</Typography>

diff --git a/src/design/components/MenuPopover.tsx b/src/design/components/MenuPopover.tsx
@@ -1,8 +1,12 @@
-import React from 'react'
-import type { PopoverProps } from '@mui/material';
+import React, { useCallback } from 'react'
+import { PopoverProps } from '@mui/material';
 import { styled, SxProps, Theme } from '@mui/material/styles';
 import { alpha } from '@mui/system/colorManipulator';
 import Popover from '@mui/material/Popover';
+import useResponsive from '@design/hooks/useResponsive';
+import SwipeableDrawer from '@mui/material/SwipeableDrawer'
+import Box from '@mui/material/Box';
+import { isIOS } from 'react-device-detect';
 
 // ----------------------------------------------------------------------
 
@@ -28,6 +32,8 @@ const ArrowStyle = styled('span')(({ theme }) => ({
 export interface MenuPopoverProps extends PopoverProps {
   paperSx?: SxProps<Theme>
   arrow?:boolean
+  onClose(): void
+  disableDrawer?: boolean
 }
 
 /**
@@ -36,9 +42,48 @@ export interface MenuPopoverProps extends PopoverProps {
  * 
  * Homepage: [Portalnesia](https://portalnesia.com)
  */
-export default function MenuPopover({ children, paperSx,arrow=true, ...other }: MenuPopoverProps) {
+export default function MenuPopover({ children, paperSx,sx,arrow=true,open,onClose,disableDrawer, ...other }: MenuPopoverProps) {
+  const is400 = useResponsive('down','sm');
+
+  if(is400 && !disableDrawer) {
+    return (
+      <SwipeableDrawer
+        open={open}
+        onClose={onClose}
+        onOpen={()=>{}}
+        disableSwipeToOpen
+        anchor='bottom'
+        disableDiscovery
+        disableBackdropTransition={!isIOS}
+        sx={{
+          zIndex:1301,
+          ...sx
+        }}
+        PaperProps={{
+          sx:{
+            borderTopLeftRadius:15,borderTopRightRadius:15,
+            ...paperSx,
+            width:'100%',
+            maxWidth:'unset'
+          }
+        }}
+      >
+        <Box pb={1}>
+          <Box width="100%" pt={1.5} pb={0.5} display="flex" alignItems="center" justifyContent="center">
+            <Box width={100} height={10} borderRadius={2} bgcolor="action.focus" />
+          </Box>
+          <Box overflow="auto">
+            {children}
+          </Box>
+        </Box>
+      </SwipeableDrawer>
+    )
+  }
+
   return (
     <Popover
+      open={open}
+      onClose={onClose}
       anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
       transformOrigin={{ vertical: 'top', horizontal: 'right' }}
       PaperProps={{

diff --git a/src/design/components/Popover.tsx b/src/design/components/Popover.tsx
@@ -30,9 +30,9 @@ const Popover=(props: PopoverProps)=>{
         setOpen(true)
     },[])
 
-    const closePopOver=React.useCallback((event: {}, reason: "backdropClick" | "escapeKeyDown")=>{
+    const closePopOver=React.useCallback(()=>{
         setOpen(false)
-        if(onClose) onClose(event,reason);
+        if(onClose) onClose();
     },[onClose])
 
     return (

diff --git a/src/design/themes/GlobalStyles.tsx b/src/design/themes/GlobalStyles.tsx
@@ -29,6 +29,9 @@ export default function GlobalStyles({styles}: GlobalStylesProps) {
           width: '100%',
           height: '100%'
         },
+        'div#arc-widget-container[data-arc-widget-portalnesia]':{
+          zIndex:'unset !important'
+        },
         '#root': {
           width: '100%',
           height: '100%'

diff --git a/src/layout/AccountPopover.tsx b/src/layout/AccountPopover.tsx
@@ -123,63 +123,65 @@ export default function AccountPopover() {
         sx={{ width: 220 }}
         disableScrollLock
       >
-        <Box sx={{ my: 1.5, px: 2.5 }}>
-          <Typography variant="subtitle1" noWrap>
-            {user ? user?.name : "Guest"}
-          </Typography>
-          <Typography variant="body2" sx={{ color: 'text.secondary' }} noWrap>
-            {user ? `@${user?.username}` : '@portalnesia'}
-          </Typography>
-        </Box>
+        <Box py={1}>
+          <Box sx={{ pb: 1.5, px: 2.5 }}>
+            <Typography variant="subtitle1" noWrap>
+              {user ? user?.name : "Guest"}
+            </Typography>
+            <Typography variant="body2" sx={{ color: 'text.secondary' }} noWrap>
+              {user ? `@${user?.username}` : '@portalnesia'}
+            </Typography>
+          </Box>
 
-        <Divider sx={{ my: 1 }} />
-
-        {!pathname.startsWith("/dashboard") && user ? (
-          <Link key={'dashboard'} href={"/dashboard?utm_source=portalnesia+web&utm_medium=header"} passHref legacyBehavior>
-            <MenuItem component='a' onClick={handleClose} sx={{typography:'body2',py:1,px:2.5}}>
-              <Iconify icon={"material-symbols:dashboard-rounded"} sx={{mr:2,width:24,height:24}} />
-              Dashboard
-            </MenuItem>
-          </Link>
-        ) : null}
+          <Divider sx={{ my: 1 }} />
+          
+          {!pathname.startsWith("/dashboard") && user ? (
+            <Link key={'dashboard'} href={"/dashboard?utm_source=portalnesia+web&utm_medium=header"} passHref legacyBehavior>
+              <MenuItem component='a' onClick={handleClose} sx={{typography:'body2',py:1,px:2.5}}>
+                <Iconify icon={"material-symbols:dashboard-rounded"} sx={{mr:2,width:24,height:24}} />
+                Dashboard
+              </MenuItem>
+            </Link>
+          ) : null}
 
-        {MENU_OPTIONS(user).map(m=>{
-          if(m.href) {
-            return (
-              <Link key={m.label} href={m.href} passHref legacyBehavior>
-                <MenuItem component='a' onClick={handleClose} sx={{typography:'body2',py:1,px:2.5}}>
-                  <Iconify icon={m.icon} sx={{mr:2,width:24,height:24}} />
-                  {m.label}
-                </MenuItem>
-              </Link>
-            )
-          }
-          return null;
-        })}
+          {MENU_OPTIONS(user).map(m=>{
+            if(m.href) {
+              return (
+                <Link key={m.label} href={m.href} passHref legacyBehavior>
+                  <MenuItem component='a' onClick={handleClose} sx={{typography:'body2',py:1,px:2.5}}>
+                    <Iconify icon={m.icon} sx={{mr:2,width:24,height:24}} />
+                    {m.label}
+                  </MenuItem>
+                </Link>
+              )
+            }
+            return null;
+          })}
 
-        <MenuItem key='feedback' component='div' onClick={handleFeedback} sx={{typography:'body2',py:1,px:2.5}}>
-          <Iconify icon={"ic:outline-feedback"} sx={{mr:2,width:24,height:24}} />
-          Send Feedback
-        </MenuItem>
+          <MenuItem key='feedback' component='div' onClick={handleFeedback} sx={{typography:'body2',py:1,px:2.5}}>
+            <Iconify icon={"ic:outline-feedback"} sx={{mr:2,width:24,height:24}} />
+            Send Feedback
+          </MenuItem>
 
-        <MenuItem key='navigation' component='div' onClick={handleKeyboard} sx={{typography:'body2',py:1,px:2.5}}>
-          <Iconify icon={"material-symbols:keyboard-alt"} sx={{mr:2,width:24,height:24}} />
-          Navigation
-        </MenuItem>
+          <MenuItem key='navigation' component='div' onClick={handleKeyboard} sx={{typography:'body2',py:1,px:2.5}}>
+            <Iconify icon={"material-symbols:keyboard-alt"} sx={{mr:2,width:24,height:24}} />
+            Navigation
+          </MenuItem>
 
-        <Box sx={{ p: 2, pt: 1.5 }}>
-          {user ? (
-            <Button href={accountUrl("logout?utm_source=portalnesia+web&utm_medium=header")} fullWidth color="inherit" variant="outlined">
-              Logout
-            </Button>
-          ) : (
-            <>
-              <Button href={accountUrl("login?utm_source=portalnesia+web&utm_medium=header")} fullWidth color="inherit" variant="outlined">
-                Login / Register
+          <Box sx={{ p: 2, pt: 1.5 }}>
+            {user ? (
+              <Button href={accountUrl("logout?utm_source=portalnesia+web&utm_medium=header")} fullWidth color="inherit" variant="outlined">
+                Logout
               </Button>
-            </>
-          )}
-
+            ) : (
+              <>
+                <Button href={accountUrl("login?utm_source=portalnesia+web&utm_medium=header")} fullWidth color="inherit" variant="outlined">
+                  Login / Register
+                </Button>
+              </>
+            )}
+
+          </Box>
         </Box>
       </MenuPopover>
     </>