fix: add visible drag-handle icon (3x3 dots) in bottom-right corner

- ui.tsx: decorative SVG drag indicator (pointerEvents:none) like old plugin
- uses --figma-color-icon-secondary + opacity 0.4, fixed bottom/right 3px
- Fragment wrapper; real drag still handled by useWindowResize handle
This commit is contained in:
Hermes Agent committed 2026-09-09 12:43:39 +02:00
1 parent 6c7be98a82
commit 3bff4241d6
1 file changed
+46 -22
+46 -22
View File
@@ -10,7 +10,7 @@ import {
useWindowResize
} from '@create-figma-plugin/ui'
import { emit } from '@create-figma-plugin/utilities'
import { h } from 'preact'
import { h, Fragment } from 'preact'
import { useState } from 'preact/hooks'
const MIN_WINDOW_SIZE = { width: 320, height: 200 }
@@ -39,33 +39,57 @@ function Plugin () {
currentWindowSize.height >= MAX_WINDOW_SIZE.height
return (
<Container space="medium" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<IconButton
title={isMaximized ? 'Свернуть окно' : 'Развернуть окно'}
onClick={toggleWindowSize}
<Fragment>
<Container space="medium" style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<IconButton
title={isMaximized ? 'Свернуть окно' : 'Развернуть окно'}
onClick={toggleWindowSize}
>
{isMaximized ? <IconCollapse24 /> : <IconExpand24 />}
</IconButton>
</div>
<div
style={{
flex: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column'
}}
>
{isMaximized ? <IconCollapse24 /> : <IconExpand24 />}
</IconButton>
</div>
<Text style={{ fontSize: '13px', fontWeight: 600 }}>Hello, Figma ✦</Text>
<VerticalSpace space="small" />
<Muted>AI assistant (MVP) — bootstrap</Muted>
<VerticalSpace space="small" />
<Muted>
{currentWindowSize.width} × {currentWindowSize.height}
</Muted>
</div>
</Container>
{/* Декоративная иконка drag-хендла в правом нижнем углу (как в старом плагине).
pointerEvents:none — сам drag ловит невидимый div от useWindowResize. */}
<div
style={{
flex: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column'
position: 'fixed',
bottom: 3,
right: 3,
zIndex: 2,
color: 'var(--figma-color-icon-secondary)',
opacity: 0.4,
pointerEvents: 'none'
}}
aria-hidden="true"
>
<Text style={{ fontSize: '13px', fontWeight: 600 }}>Hello, Figma ✦</Text>
<VerticalSpace space="small" />
<Muted>AI assistant (MVP) — bootstrap</Muted>
<VerticalSpace space="small" />
<Muted>
{currentWindowSize.width} × {currentWindowSize.height}
</Muted>
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 9C2.55228 9 3 9.44772 3 10C3 10.5523 2.55228 11 2 11C1.44772 11 1 10.5523 1 10C1 9.44772 1.44772 9 2 9Z" fill="currentColor" />
<path d="M6 9C6.55228 9 7 9.44772 7 10C7 10.5523 6.55228 11 6 11C5.44772 11 5 10.5523 5 10C5 9.44772 5.44772 9 6 9Z" fill="currentColor" />
<path d="M6 5C6.55228 5 7 5.44772 7 6C7 6.55228 6.55228 7 6 7C5.44772 7 5 6.55228 5 6C5 5.44772 5.44772 5 6 5Z" fill="currentColor" />
<path d="M10 5C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5Z" fill="currentColor" />
<path d="M10 1C10.5523 1 11 1.44772 11 2C11 2.55228 10.5523 3 10 3C9.44772 3 9 2.55228 9 2C9 1.44772 9.44772 1 10 1Z" fill="currentColor" />
</svg>
</div>
</Container>
</Fragment>
)
}