GROWI Developers Wiki
GROWI Developers Wiki
helpdelete

/Web会議室/エディタ拡張(BS4 Grid追加編集モーダル)

懸念点

自分たちが使用しようとしているライブラリの使用がわかっていない

  • EDN は果たして必要なのか否なのか
    • 実装タスクを着手する前に調査タスクが必要
    • shoelace果たして使っていいのか

要件

  • エディターアイコンのボタンを押すことでモーダルが開きBS4を元にしたGridを編集できる。

新規作成

  • エディタアイコンのGridボタンを押すことでモーダルを開きBS4のコードを元にGridを編集できる
    • イメージではこんなアイコン
    • image.png
  • 複雑な構成を避けるためrow一つに対してこのモーダルを表示するようにする。
  • 見た目に関して
    • ベースになる12等分のコラムが薄く表示されている状態
    • 各ディスプレイサイズを選択できる。
      • モバイル版(xs)
      • タブレット版(sm)
      • デスクトップ版(md)
      • ラージデスクトップ版(lg)
    • クリック＆ドラックしてcolの大きさを決める
      • 表示されたcolを左右に動かすことによって
        • 選択されたcolの位置の移動
        • offsetをきめることができる。
    • rowを選択して名前を付けることができる
    • colを選択して
      • 名前を付けることができる
      • そのcolを削除することができる
  • 最後に生成するボタンでBS4のコードを自動生成する
  • 再編集する時
    • tableのモーダルと同じようにRowの範囲内に入力カーソルを当ててアイコンをクリックすると再編集モーダルが表示される。

参考にしたもの

自動生成されるbs4のクラス達

  • col
    • col-xs-{number}, col-sm-{number}, col-md-{number}, col-lg-{number}
  • row
  • offset
    • offset-xs-{number}, offset-sm-{number}, offset-md-{number}, offset-lg-{number}

ファイル名・トピックブランチ名等

  • ファイル名
    • src/client/js/components/PageEditor/GridEditModal.jsx
    • src/client/js/components/PageEditor/CodeMirrorEditor.jsx
  • トピックブランチ名
    • feat/grid-edit-modal-for-master-merge