サイトツリーのダイアログのデザイン

[tomof]

概要

Figma等でダイアログの形状（角丸や影）、ページ名フィルター、サイトツリーのデザインをお願いしたいです。

このダイアログは下記の2つのケースで表示されます

• 画面左端のヘッダー内の虫眼鏡アイコンのクリック
• 仕様書ドキュメントの編集時、リンク挿入アイコンのクリック

考慮してもらいたい点

• ダイアログ自体（閉じるボタンを含む）の見た目は、サイトツリーダイアログでも統一したいと考えています（画面画像編集・ハイライトのダイアログのデザイン #76 と関連）
• 現状の検索フィルター入力欄が適当なので、ちゃんとしたものにしたいです
• 使用されているアイコンは特にこだわっていませんが、このままでも良いかなと思っています
  • 例によってFontAwesomeのフリー版の中で適切そうなのがプラス・マイナスのものぐらいしかなかったと記憶しています
• サイトツリーの罫線もきれいにしたいところですが、テキストで組めるものでないと実装に時間がかかるかもしれません
  • 段階的に対応することも検討します

サイトツリーのダイアログの情報

見た目

フィルター使用時

ダイアログ含まれる要素

• 右上端の×ボタン
  • 操作をキャンセルして、ダイアログを閉じます
• ページ名フィルター
  • ページ名でフィルターします
  • 該当ページだけが活性状態になります
• サイトツリー

[saucer-jp]

ここで作っている https://www.figma.com/file/YmCMMXRXJkfr5Xh62uu1w3/UI-Spec-md?node-id=47%3A210

[kyosuke]

@saucer-jp グレーアウトはツリーが多くなると役に立たないので微妙そうだなと思いました。

[saucer-jp]

@kyosuke たしかにー、既存の動きにひっぱられた。調整しますー

[tomof]

他を全部グレーアウトしているのは、多分現状のツリーがそうなっているからですよね。現状こうなっているのは仕様をどうするのか決めかねているためです。

案としては2つあって、例として商品編集画面 で検索を掛けた場合…

1. トップの画面仕様書 と親の商品一覧画面 だけはグレーアウトして、他は全て非表示とする
2. 階層の深さに関係なく、検索をした場合はヒットした全てのページがフラットに並ぶ

のどちらかにするのが理想かなと思います。

[saucer-jp]

1は上手にやろうとすると結構複雑になりそう。
2は目的のファイルを探すには手っ取り早いですが、全体の構造を失ってしまうので、その辺がデメリットになりそうですね。

ひとまずはフラットで対応ですかね

[saucer-jp]

Slackで議論を進めた https://pxgrid.slack.com/archives/C10U7HP0X/p1593161981006600