Started adding drop area

PostHog · Sep 11, 2023 · d63674c · d63674c
1 parent 5f394f8
commit d63674c
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 58 deletions.
diff --git a/frontend/src/scenes/notebooks/Notebook/NotebookPopover.scss b/frontend/src/scenes/notebooks/Notebook/NotebookPopover.scss
@@ -32,18 +32,26 @@
         max-width: calc(100vw - 2rem);
         width: 50rem; // This will be controlable
         pointer-events: all;
-
         display: flex;
         flex-direction: column;
-        border-radius: var(--radius);
-        background-color: var(--bg-light);
-        border: 1px solid var(--border-3000);
-        transition: transform var(--notebook-popover-transition-properties), box-shadow 150ms linear,
-            width var(--notebook-popover-transition-properties);
+        overflow: hidden;
 
         // Transition properties that are overwritten
         transform: translateX(calc(100% + 1rem));
-        box-shadow: 0px 16px 16px rgba(0, 0, 0, 0);
+        transition: transform var(--notebook-popover-transition-properties),
+            width var(--notebook-popover-transition-properties);
+
+        .NotebookPopover__content__card {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            border-radius: var(--radius);
+            background-color: var(--bg-light);
+            border: 1px solid var(--border-3000);
+            box-shadow: 0px 16px 16px rgba(0, 0, 0, 0);
+            transition: box-shadow 150ms linear;
+            overflow: hidden;
+        }
     }
 
     &--visible {
@@ -54,15 +62,19 @@
 
         .NotebookPopover__content {
             transform: translateX(0);
-            box-shadow: 0px 16px 16px rgba(0, 0, 0, 0.15);
+            .NotebookPopover__content__card {
+                box-shadow: 0px 16px 16px rgba(0, 0, 0, 0.15);
+            }
         }
     }
 
     &--peek {
         .NotebookPopover__content {
             transition: none; // NOTE: This shouldn't be none as it affects other transitions
             transform: translateX(calc(100% - 5rem));
-            box-shadow: 0px 16px 16px rgba(0, 0, 0, 0.15);
+            .NotebookPopover__content__card {
+                box-shadow: 0px 16px 16px rgba(0, 0, 0, 0.15);
+            }
         }
     }
 

diff --git a/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx b/frontend/src/scenes/notebooks/Notebook/NotebookPopover.tsx
@@ -14,7 +14,7 @@ import { notebookLogic } from './notebookLogic'
 import { urls } from 'scenes/urls'
 
 export function NotebookPopover(): JSX.Element {
-    const { visibility, shownAtLeastOnce, fullScreen, selectedNotebook, initialAutofocus, dropProperties } =
+    const { visibility, shownAtLeastOnce, fullScreen, selectedNotebook, initialAutofocus, dropProperties, dropMode } =
         useValues(notebookPopoverLogic)
     const { setVisibility, setFullScreen, selectNotebook, setElementRef } = useActions(notebookPopoverLogic)
     const { createNotebook } = useActions(notebooksModel)
@@ -66,59 +66,67 @@ export function NotebookPopover(): JSX.Element {
                 onClick={visibility !== 'visible' ? () => setVisibility('visible') : undefined}
                 {...dropProperties}
             >
-                <header className="flex items-center justify-between gap-2 font-semibold shrink-0 p-1 border-b">
-                    <span className="flex items-center gap-1 text-primary-alt">
-                        <NotebookListMini
-                            selectedNotebookId={selectedNotebook}
-                            onSelectNotebook={(notebook) => selectNotebook(notebook.short_id)}
-                            onNewNotebook={() => createNotebook()}
-                        />
-                    </span>
-                    <span className="flex items-center gap-1 px-1">
-                        {selectedNotebook && <NotebookSyncInfo shortId={selectedNotebook} />}
+                {dropMode ? (
+                    <div className="NotebookPopover__content__dropper">
+                        <p>Wat</p>
+                    </div>
+                ) : null}
 
-                        <LemonButton
-                            size="small"
-                            to={urls.notebook(selectedNotebook)}
-                            onClick={() => setVisibility('hidden')}
-                            status="primary-alt"
-                            icon={<IconLink />}
-                            tooltip="Go to Notebook"
-                            tooltipPlacement="left"
-                        />
+                <div className="NotebookPopover__content__card">
+                    <header className="flex items-center justify-between gap-2 font-semibold shrink-0 p-1 border-b">
+                        <span className="flex items-center gap-1 text-primary-alt">
+                            <NotebookListMini
+                                selectedNotebookId={selectedNotebook}
+                                onSelectNotebook={(notebook) => selectNotebook(notebook.short_id)}
+                                onNewNotebook={() => createNotebook()}
+                            />
+                        </span>
+                        <span className="flex items-center gap-1 px-1">
+                            {selectedNotebook && <NotebookSyncInfo shortId={selectedNotebook} />}
 
-                        <NotebookExpandButton status="primary-alt" size="small" />
+                            <LemonButton
+                                size="small"
+                                to={urls.notebook(selectedNotebook)}
+                                onClick={() => setVisibility('hidden')}
+                                status="primary-alt"
+                                icon={<IconLink />}
+                                tooltip="Go to Notebook"
+                                tooltipPlacement="left"
+                            />
 
-                        <LemonButton
-                            size="small"
-                            onClick={() => setFullScreen(!fullScreen)}
-                            status="primary-alt"
-                            active={fullScreen}
-                            icon={<IconFullScreen />}
-                            tooltip="Toggle full screen"
-                            tooltipPlacement="left"
-                        />
+                            <NotebookExpandButton status="primary-alt" size="small" />
 
-                        <LemonButton
-                            size="small"
-                            onClick={() => setVisibility('hidden')}
-                            status="primary-alt"
-                            icon={<IconChevronRight />}
-                            tooltip="Hide Notebook Sidebar"
-                            tooltipPlacement="left"
-                        />
-                    </span>
-                </header>
+                            <LemonButton
+                                size="small"
+                                onClick={() => setFullScreen(!fullScreen)}
+                                status="primary-alt"
+                                active={fullScreen}
+                                icon={<IconFullScreen />}
+                                tooltip="Toggle full screen"
+                                tooltipPlacement="left"
+                            />
 
-                <div className="flex flex-col flex-1 overflow-y-auto px-4 py-2">
-                    {shownAtLeastOnce && (
-                        <Notebook
-                            key={selectedNotebook}
-                            shortId={selectedNotebook}
-                            editable={isEditable}
-                            initialAutofocus={initialAutofocus}
-                        />
-                    )}
+                            <LemonButton
+                                size="small"
+                                onClick={() => setVisibility('hidden')}
+                                status="primary-alt"
+                                icon={<IconChevronRight />}
+                                tooltip="Hide Notebook Sidebar"
+                                tooltipPlacement="left"
+                            />
+                        </span>
+                    </header>
+
+                    <div className="flex flex-col flex-1 overflow-y-auto px-4 py-2">
+                        {shownAtLeastOnce && (
+                            <Notebook
+                                key={selectedNotebook}
+                                shortId={selectedNotebook}
+                                editable={isEditable}
+                                initialAutofocus={initialAutofocus}
+                            />
+                        )}
+                    </div>
                 </div>
             </div>
         </div>