use better defaults for permissions panel position

GBSL-Informatik · Nov 27, 2024 · e9917cc · e9917cc
1 parent f3eddaa
commit e9917cc
Showing 1 changed file with 17 additions and 2 deletions.
diff --git a/src/components/PermissionsPanel/index.tsx b/src/components/PermissionsPanel/index.tsx
@@ -22,6 +22,7 @@ interface Props {
 }
 
 const PermissionsPanel = observer(({ documentRootId, position }: Props) => {
+    const [isOpen, setIsOpen] = React.useState(false);
     const userStore = useStore('userStore');
     const documentRootStore = useStore('documentRootStore');
     const permissionStore = useStore('permissionStore');
@@ -62,20 +63,34 @@ const PermissionsPanel = observer(({ documentRootId, position }: Props) => {
                             e.preventDefault();
                         }}
                         icon={mdiShieldLockOutline}
-                        color="secondary"
+                        noOutline={isOpen}
+                        color={isOpen ? 'primary' : 'secondary'}
                     />
                 </span>
             }
             on="click"
             closeOnDocumentClick
             overlayStyle={{ background: isMobileView ? 'rgba(0,0,0,0.5)' : undefined }}
             closeOnEscape
-            position={position}
+            position={
+                position || [
+                    'bottom right',
+                    'bottom left',
+                    'bottom center',
+                    'left center',
+                    'top left',
+                    'top right',
+                    'right center',
+                    'top center'
+                ]
+            }
             keepTooltipInside=".markdown"
             modal={isMobileView}
             onOpen={action(() => {
                 permissionStore.loadPermissions(documentRoot);
+                setIsOpen(true);
             })}
+            onClose={() => setIsOpen(false)}
         >
             <div className={clsx(styles.wrapper, 'card')}>
                 <div className={clsx('card__header', styles.header)}>