Design

https://xd.adobe.com/view/26f3cef5-06c1-4ed2-9871-b86d5d00adce-73a0/screen/15f0303d-a929-4452-8d8a-dfd668debe9f/ external_link

Outline

  • v6 まではページ作成モーダルよりページパス名を指定することでページを作成していた
  • v7 でデザイン刷新されサイドバーにボタン一つでページを作成できる機構を新設

外部仕様

導線

  • ボタンをクリックすると "Create New Page"
  • ボタンをホバーすると右に矢印が出る
  • 矢印をクリックするとドロップダウンが表示される
    • 項目
      • "Create New Page"
      • "Today's Create Page"
      • "Create Template Page"
        • _Template
        • __Template

動き

"Create New Page"

  • クリックするとエディタ画面に遷移
  • path 名は現在の配下に /Untitled1
  • /Untitled1 がすでにあれば /Untitled2, /Untitled3 とインクリメントされていく
  • 配下にページを作成できない場所で "Create New Page" した場合は、ルートページ / 配下に作成
  • ページは "Create New Page" された時点で生成される
    • Attachment をつけると作成される仕様や grant を変更していた仕様がなくなる

"Today's Create Page", "Create Template Page"

  • "Today's Create Page", "Create Template Page" の操作感は基本 v6 と同じ
    • 対象ページが無ければ作る
    • 対象ページがあれば、編集画面へ
    • 作成できないページでは以下を表示 image.png
  • "Today's Create Page" にはあらかじめ path 名が決められているため、v6 ではできていた path 選択ができない(これは page 名変更が気軽にできるようになると解消するかも)

UX 相談したい点

  • "Create New Page" したときに page 名が固定される。page 名を変更するのが煩わしいのでこれを解消できる方法を考えたい

内部仕様

コンポーネント設計、デザイン

  • コンポーネントを用意して SidebarNav.tsx から呼び出す
  • XD に従う
  • bootstrap 5 を基本使っていく、たぶん細かいところは scss で用意する、デザインの素材はデザイナーに依頼する

(TBD)"Create New Page"

  • ※仕様確定後
  • 同時多人数編集機能の観点から、#edit に移行できる時点で page とドキュメントが必要?要検証

"Today's Create Page"

  • v6 と同様、Link で /temp/{todayspage}#edit へ飛ぶ
  • あらかじめ path を確定させておく必要がある
  • レンダリングのタイミングと日時の変化による差分は仕方ない
    • が、表示されているパスと作成されたパスが異なることは避けたいのでその点は注意する

"Create Template Page"

  • v6 と同様、Link で /temp/_template#edit へ飛ぶ