drop styles

duckduckgo · Oct 10, 2024 · 1811a11 · 1811a11
1 parent 14ba5e6
commit 1811a11
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 21 deletions.
diff --git a/packages/special-pages/pages/new-tab/app/favorites/Favorites.js b/packages/special-pages/pages/new-tab/app/favorites/Favorites.js
@@ -55,7 +55,7 @@ export function Favorites ({ favorites, listDidReOrder }) {
 const PlusIcon = memo(function PlusIcon () {
     return (
         <div className={styles.item}>
-            <div className={cn(styles.icon, styles.placeholder)}>
+            <div className={cn(styles.icon, styles.placeholder, styles.plus)}>
                 <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                     <g opacity="0.8">
                         <path

diff --git a/packages/special-pages/pages/new-tab/app/favorites/Favorites.module.css b/packages/special-pages/pages/new-tab/app/favorites/Favorites.module.css
@@ -37,10 +37,24 @@
     width: 64px;
     height: 64px;
     border-radius: 12px;
+}
+
+.draggable {
     background: var(--color-black-at-3);
 
+    &:hover {
+        background: var(--color-black-at-9);
+    }
+
+    &:active {
+        transform: scale(0.95);
+    }
+
     @media screen and (prefers-color-scheme: dark) {
         background: var(--color-white-at-9);
+        &:hover {
+            background: var(--color-white-at-12);
+        }
     }
 }
 
@@ -74,22 +88,36 @@
 
 .placeholder {
     background-color: transparent;
-    border: 1.5px solid var(--color-black-at-9);
+    border: 1.5px dashed var(--color-black-at-9);
 
     @media screen and (prefers-color-scheme: dark) {
         border-color: var(--color-white-at-9);
     }
 }
 
 .plus {
-    border: 1px dashed white;
+    border-style: solid;
+
+    &:hover {
+        background: var(--color-black-at-3);
+    }
+
+    &:active {
+        transform: scale(0.95);
+    }
+
+    @media screen and (prefers-color-scheme: dark) {
+        &:hover {
+            background: var(--color-white-at-9);
+        }
+    }
 }
 
 .dropper {
     width: 2px;
-    height: 30%;
+    height: 64px;
     position: absolute;
-    top: 20px;
+    top: 0;
     background-color: var(--color-black-at-12);
     @media screen and (prefers-color-scheme: dark) {
         background-color: var(--color-white-at-12);

diff --git a/packages/special-pages/pages/new-tab/app/favorites/Tile.js b/packages/special-pages/pages/new-tab/app/favorites/Tile.js
@@ -1,11 +1,10 @@
 import { Fragment, h } from 'preact'
+import cn from 'classnames'
 import { useContext, useEffect, useRef, useState } from 'preact/hooks'
 import { createPortal, memo } from 'preact/compat'
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
 import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
 import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge'
-import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview'
-import { pointerOutsideOfPreview } from '@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview'
 
 import styles from './Favorites.module.css'
 import { InstanceIdContext } from './FavouritesGrid.js'
@@ -40,7 +39,7 @@ export function Tile ({ data, favicon, title, id }) {
                 ref={ref}
                 style={{ viewTransitionName: id }}
             >
-                <div class={styles.icon}>
+                <div class={cn(styles.icon, styles.draggable)}>
                     {/* <span class={styles.favicon} style={{backgroundColor: favicon}}/> */}
                     <span class={styles.favicon} style={{ backgroundImage: `url(${favicon})` }}/>
                 </div>
@@ -81,19 +80,19 @@ function useTileState (url, id) {
                 element: el,
                 getInitialData: () => ({ type: 'grid-item', url, id, instanceId }),
                 onDragStart: () => setState({ type: 'dragging' }),
-                onDrop: () => setState({ type: 'idle' }),
-                onGenerateDragPreview ({ nativeSetDragImage }) {
-                    setCustomNativeDragPreview({
-                        nativeSetDragImage,
-                        getOffset: pointerOutsideOfPreview({
-                            x: '0px',
-                            y: '12px'
-                        }),
-                        render ({ container }) {
-                            setState({ type: 'preview', container })
-                        }
-                    })
-                }
+                onDrop: () => setState({ type: 'idle' })
+                // onGenerateDragPreview ({ nativeSetDragImage }) {
+                //     setCustomNativeDragPreview({
+                //         nativeSetDragImage,
+                //         getOffset: pointerOutsideOfPreview({
+                //             x: '0px',
+                //             y: '12px'
+                //         }),
+                //         render ({ container }) {
+                //             setState({ type: 'preview', container })
+                //         }
+                //     })
+                // }
             }),
             dropTargetForElements({
                 element: el,