画面画像編集・ハイライトのダイアログのデザイン

[tomof]

概要

Figma等でダイアログの形状（角丸や影）、各種ボタン、ツールバーのデザインをお願いしたいです。

考慮してもらいたい点

• ダイアログ自体（閉じるボタンを含む）の見た目は、サイトツリーダイアログでも統一したいと考えています
• ツールバーの見た目が特に酷いのでここはスッキリさせたいと考えています
  • srcやlabel等は適切なラベル名だとは思っていないので、分かりやすい名前に変更することを検討しています（現状、良いアイディアがない）
  • Delete ImageはRemove Imageが正しいです（画像のリンクを解除するだけで、画像自体を削除するわけではに）
• 後述するBの場合に画像をD&Dまたはペーストするための領域をデザインしてほしいです
  • カーソルがホバーしたときになにか見た目に変化があると尚良いですが優先度は低いです
• 後述するCの場合には画像のパスが見つけられないという情報が伝わるようにしたいです

画面画像編集・ハイライトのダイアログの情報

見た目

A：ハイライト編集時

B：画像未指定時（画像のクリップボード貼り付けまたはD&DでAの状態へ）

C：画像のパスが間違っている場合（Delete ImageすればBの状態へ）

ダイアログ含まれる要素

共通

• 右上端の×ボタン
  • 操作をキャンセルして、ダイアログを閉じます
• ツールバー
  • src：画像のパス + ハイライトの座標・サイズ情報をURL方式で表示します
    • 編集負荷
  • copy：srcをクリップボードにコピーします
  • label：選択中のハイライトの数字
    • 両隣の<と>で選択中のハイライトの数字を増減します
  • xとy：選択中のハイライトの座標
  • wとh：選択中のハイライトのサイズ
  • zoom：つまみで拡大率を調整
    • 1、2、3、4、5の5段階の調整が可能です
  • Delete Image：配置している画像を解除します

A：ハイライト編集時のみ

• ハイライト
  • ドラッグ可能
  • 各端・辺の中央のつまみでサイズ変更

B：画像未指定時のみ

• D&Dまたはクリップボードから画像をペーストすることを促すエリア

C：画像のパスが間違っている場合

• 何も表示されない