[WIP] Making admin pages responsive for xs screens

Protofy-xyz · Jan 13, 2025 · e93c3e5 · e93c3e5
1 parent 2de40a7
commit e93c3e5
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 43 deletions.
diff --git a/packages/protolib/src/components/AdminPanel.tsx b/packages/protolib/src/components/AdminPanel.tsx
@@ -93,7 +93,7 @@ export const AdminPanel = ({ children }) => {
         <>
           <XStack ai="center">
             <XStack>{userSpaces.length > 1 && <WorkspaceSelector />}</XStack>
-            {settingsLogsEnabled ? <InteractiveIcon onPress={() => setAppState({ ...appState, logsPanelOpened: !appState.logsPanelOpened })} IconColor="var(--color)" Icon={Activity}></InteractiveIcon> : null}
+            {settingsLogsEnabled ? <InteractiveIcon $xs={{ display: "none" }} onPress={() => setAppState({ ...appState, logsPanelOpened: !appState.logsPanelOpened })} IconColor="var(--color)" Icon={Activity}></InteractiveIcon> : null}
           </XStack>
         </>
       }

diff --git a/packages/protolib/src/components/AlertDialog.tsx b/packages/protolib/src/components/AlertDialog.tsx
@@ -23,14 +23,16 @@ export const AlertDialog = forwardRef(({
     open,
     setOpen,
     disableDrag = false,
+    disableAdapt = false,
+    dialogCloseProps = {},
     integratedChat = false,
     ...props
 }: any, ref: any) => {
 
     const [_open, _setOpen] = useState(false)
     const [loading, setLoading] = useState(false)
     const [error, setError] = useState<any>()
-    
+
     const seter = setOpen !== undefined ? setOpen : _setOpen
     const status = setOpen !== undefined ? open : _open
 
@@ -87,7 +89,7 @@ export const AlertDialog = forwardRef(({
                                         setLoading(true)
                                         try {
                                             const keepOpen = await onAccept(setOpen !== undefined ? setOpen : _setOpen)
-                                            if(keepOpen !== true) seter(false)
+                                            if (keepOpen !== true) seter(false)
                                         } catch (e) {
                                             setError(e)
                                             console.log('e: ', e)
@@ -101,12 +103,12 @@ export const AlertDialog = forwardRef(({
                         </YStack>}
                     </YStack>
                 </YStack>
-                <Dialog.Close />
+                <Dialog.Close {...dialogCloseProps}/>
             </Dialog.Content>
 
         </Dialog.Portal>
 
-        <Dialog.Adapt when="sm" >
+        {!disableAdapt && <Dialog.Adapt when="sm" >
             <XStack position='absolute'>
                 <Dialog.Sheet disableDrag={disableDrag}>
                     {/* ml -18 because there is an bug centering the dialog on sm screen */}
@@ -118,6 +120,6 @@ export const AlertDialog = forwardRef(({
                     <Dialog.Sheet.Overlay />
                 </Dialog.Sheet>
             </XStack>
-        </Dialog.Adapt>
+        </Dialog.Adapt>}
     </Dialog>)
 })
diff --git a/packages/protolib/src/components/DataView.tsx b/packages/protolib/src/components/DataView.tsx
@@ -1,4 +1,4 @@
-import { YStack, XStack, Paragraph, Text, Button, Stack, ScrollView, Spacer, ButtonProps, Tooltip, Spinner } from 'tamagui'
+import { YStack, XStack, Paragraph, Text, Button, Stack, ScrollView, Spacer, ButtonProps, Tooltip, Spinner, useTheme, useMedia } from 'tamagui'
 import { Center } from './Center';
 import { useRemoteStateList } from '../lib/useRemoteState';
 import { AlertDialog } from './AlertDialog';
@@ -130,34 +130,34 @@ type DataViewActionButtonProps = {
 export const DataViewActionButton = ({ icon, description, id, ...props }: DataViewActionButtonProps & ButtonProps) => {
     const Icon = icon
     return <Tooltip {...props}>
-    <Tooltip.Trigger>
-        <Button id={id ?? ''} hoverStyle={{ o: 1 }} o={0.7} circular chromeless={true} {...props} >
-            <Icon color={"$color10"} />
-        </Button>
-    </Tooltip.Trigger>
-    <Tooltip.Content
-      enterStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
-      exitStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
-      scale={1}
-      x={0}
-      y={0}
-      opacity={1}
-      //@ts-ignore
-      animation={[
-        'quick',
-        {
-          opacity: {
-            overshootClamping: true,
-          },
-        },
-      ]}
-    >
-      <Tooltip.Arrow />
-      <Paragraph size="$2" lineHeight="$1">
-        {description}
-      </Paragraph>
-    </Tooltip.Content>
-  </Tooltip>
+        <Tooltip.Trigger>
+            <Button id={id ?? ''} hoverStyle={{ o: 1 }} o={0.7} circular chromeless={true} {...props} >
+                <Icon color={"$color10"} />
+            </Button>
+        </Tooltip.Trigger>
+        <Tooltip.Content
+            enterStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
+            exitStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
+            scale={1}
+            x={0}
+            y={0}
+            opacity={1}
+            //@ts-ignore
+            animation={[
+                'quick',
+                {
+                    opacity: {
+                        overshootClamping: true,
+                    },
+                },
+            ]}
+        >
+            <Tooltip.Arrow />
+            <Paragraph size="$2" lineHeight="$1">
+                {description}
+            </Paragraph>
+        </Tooltip.Content>
+    </Tooltip>
 }
 
 const DataViewInternal = forwardRef(({
@@ -215,7 +215,7 @@ const DataViewInternal = forwardRef(({
     const displayName = (entityName ?? pluralName) ?? name
     const [state, setState] = useState(pageState ?? {})
     sourceUrl = URLTransform(sourceUrl)
-    
+
     const fetch = async (fn) => {
         const data = await API.get({ url: sourceUrl, ...sourceUrlParams, ...state })
         fn(data)
@@ -232,6 +232,8 @@ const DataViewInternal = forwardRef(({
     const hasGlobalMenu = extraMenuActions && extraMenuActions.some(action => action.menus && action.menus.includes("global"));
     const filters = Object.entries(state).filter((st) => st[0].startsWith('filter'))
 
+    const isXs = useMedia().xs
+
     useQueryState(setState)
 
     useEffect(() => {
@@ -494,6 +496,7 @@ const DataViewInternal = forwardRef(({
                 </AlertDialog>
                 <AlertDialog
                     integratedChat
+                    disableAdapt
                     p={"$1"}
                     pt="$5"
                     pl="$5"
@@ -505,6 +508,17 @@ const DataViewInternal = forwardRef(({
                     }}
                     open={state.item}
                     description={""}
+                    dialogCloseProps={isXs ? {
+                        asChild: true,
+                        children: <Button
+                            position="absolute"
+                            top="$4"
+                            right="$4"
+                            size="$3"
+                            circular
+                            icon={X}
+                        />
+                    } : {}}
                 //bc={resolvedTheme == 'dark' ? "$background": "$color1"}
                 >
                     <YStack f={1} jc="center" ai="center">
@@ -556,7 +570,7 @@ const DataViewInternal = forwardRef(({
                                 <Text fontSize="$5" color="$color11">{displayName.charAt(0).toUpperCase() + displayName.slice(1)}</Text>
                             </Paragraph>
                             {hasGlobalMenu ? <Tinted><ItemMenu type={"global"} sourceUrl='' hideDeleteButton={true} element="" extraMenuActions={extraMenuActions}></ItemMenu></Tinted> : <></>}
-                            {toolBarContent}
+                            {!isXs && toolBarContent}
                         </XStack>
 
                         <XStack ai="center" ml="$2">
@@ -591,7 +605,7 @@ const DataViewInternal = forwardRef(({
                                     </XStack>
                                 </XStack>}
                             </XStack>
-                            <XStack ai="center" marginLeft="$3" mb={"$1"}>
+                            <XStack ai="center" marginLeft="$3" mb={"$1"} $xs={{display: 'none'}}>
                                 {!disableViewSelector && <ButtonGroup marginRight="$3">
                                     {
                                         tableViews.map((v, index) => <ActiveGroupButton id={'tableView-' + v.name} key={index} onSetActive={() => push('view', v.name)} activeId={index}>

diff --git a/packages/protolib/src/components/Page.tsx b/packages/protolib/src/components/Page.tsx
@@ -32,7 +32,7 @@ export const Page = React.forwardRef(({mqttConfig, title, ...props}: {mqttConfig
             {title && <Head>
             <title>{title}</title>
             </Head>}
-            <YStack id={"protolib-page-container"} $xs={{paddingHorizontal: '$5'}} ref={ref} flex={1} height={"100%"} style={{overflowX:"hidden", ...(isEditing?{backgroundColor: theme.color1.val}:{})}} {...props}>
+            <YStack id={"protolib-page-container"} $xs={{paddingHorizontal: '$2'}} ref={ref} flex={1} height={"100%"} style={{overflowX:"hidden", ...(isEditing?{backgroundColor: theme.color1.val}:{})}} {...props}>
                 {props.children}
             </YStack>
         </>

diff --git a/packages/protolib/src/components/layout/PanelLayout.tsx b/packages/protolib/src/components/layout/PanelLayout.tsx
@@ -49,7 +49,7 @@ export const PanelLayout = ({ panelBgColor = undefined, menuContent, children, S
         // </AppBar>
       }>
       {/* <Theme name={tint as any}> */}
-      <XStack f={1} p="$3" pl={0} bc={bgPanels}>
+      <XStack f={1} p="$3" $xs={{px: "$0"}} pl={0} bc={bgPanels}>
         {!panelBottom?panel:
         <PanelGroup direction="vertical" style={{ height: '100%', width: '100%' }}>
          {panel}

diff --git a/packages/protolib/src/styles/datatable.css b/packages/protolib/src/styles/datatable.css
@@ -186,10 +186,11 @@
 .rdt_TableHead {
     background-color: var(--bgContent) !important;
     /* border-radius: 13px 13px 0px 0px !important; */
-    position: fixed;
-    z-index: 1000;
-    border-bottom: 1px solid var(--gray5) !important;
+    /* position: fixed; */
+    /* z-index: 1000; */
+    /* border-bottom: 1px solid var(--gray5) !important; */
     margin-top: -3px;
+    margin-bottom: -40px;
 }
 
 .rdt_Table {