jedmund/jedmund-svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: make drag handle smaller with increased gap

Browse source 
- Reduce drag handle size from 1.5rem to 1.25rem (24px to 20px)
- Reduce SVG icon size to 0.875rem (14px)
- Increase gap between handle and content from 4px to 12px
- Update invisible hover zone to match new gap size
- Remove duplicate SVG styles

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Justin Edmund 2025-06-26 10:19:39 -04:00
parent 8ce7613256
commit 5e9df976e3
3 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/edra/drag-handle.svelte
View file

@ -406,7 +406,7 @@
// Register the plugin with onMouseMove callback // Register the plugin with onMouseMove callback
const plugin = DragHandlePlugin({ const plugin = DragHandlePlugin({
pluginKey: pluginKey, pluginKey: pluginKey,
dragHandleWidth: 24, dragHandleWidth: 20,
scrollTreshold: 100, scrollTreshold: 100,
excludedTags: ['pre', 'code', 'table p'], excludedTags: ['pre', 'code', 'table p'],
customNodes: ['urlEmbed', 'image', 'video', 'audio', 'gallery', 'iframe', 'geolocation'], customNodes: ['urlEmbed', 'image', 'video', 'audio', 'gallery', 'iframe', 'geolocation'],

20
src/lib/components/edra/editor.css
View file

@ -272,8 +272,8 @@ input[type='checkbox'] {
.drag-handle { .drag-handle {
position: fixed; position: fixed;
z-index: 50; z-index: 50;
width: 1.5rem; width: 1.25rem;
height: 1.5rem; height: 1.25rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -284,8 +284,13 @@ input[type='checkbox'] {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1); transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
color: var(--border-color-hover); color: var(--border-color-hover);
cursor: grab; cursor: grab;
padding: 0.25rem; padding: 0.125rem;
border-radius: 6px; /* $corner-radius-sm */ border-radius: 4px; /* $corner-radius-sm */
}
.drag-handle svg {
width: 0.875rem;
height: 0.875rem;
} }
/* Invisible hover zone to bridge the gap */ /* Invisible hover zone to bridge the gap */
@ -295,7 +300,7 @@ input[type='checkbox'] {
left: 100%; left: 100%;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 12px; /* Slightly larger than the 8px gap */ width: 16px; /* Slightly larger than the 12px gap */
height: 100%; height: 100%;
pointer-events: auto; pointer-events: auto;
} }
@ -326,11 +331,6 @@ input[type='checkbox'] {
} }
} }
.drag-handle svg {
height: 1rem;
width: 1rem;
}
/* Math Equations (KaTeX) */ /* Math Equations (KaTeX) */
.katex:hover { .katex:hover {
background-color: var(--code-bg); background-color: var(--code-bg);

4
src/lib/components/edra/extensions/drag-handle/index.ts
View file

@ -338,9 +338,9 @@ export function DragHandlePlugin(options: GlobalDragHandleOptions & { pluginKey:
// Get the computed padding of the element to position handle correctly // Get the computed padding of the element to position handle correctly
const paddingLeft = parseInt(compStyle.paddingLeft, 10) || 0 const paddingLeft = parseInt(compStyle.paddingLeft, 10) || 0
// Add 4px gap between drag handle and content // Add 12px gap between drag handle and content
// Position the handle inside the padding area, close to the text // Position the handle inside the padding area, close to the text
dragHandleElement.style.left = `${rect.left + paddingLeft - rect.width - 4}px` dragHandleElement.style.left = `${rect.left + paddingLeft - rect.width - 12}px`
dragHandleElement.style.top = `${rect.top - 4}px` // Offset for padding dragHandleElement.style.top = `${rect.top - 4}px` // Offset for padding
showDragHandle() showDragHandle()
}, },