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:
1 parent
6c7be98a82
commit
3bff4241d6
1 file changed
+46
-22
+46
-22
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user