概要
クラス管理の各サブ画面のスタイルがバラバラなので、「評価」画面 (teacher-evaluation.jsx) のレイアウトに統一する。評価画面は枠なし・濃い太字タイトル・パンくずの左端にそろったマージン・統一されたボタンスタイルになっており、これを基準にする。
参考スクリーンショット:
- 現状 (NG): クラス一覧 > 課題一覧 > みんなの課題からさがす — 枠あり・紫のタイトル・右上キャンセル
- 基準 (OK): クラス一覧 > 評価 (
teacher-evaluation.jsx) — 枠なし・濃い太字 <h2 styles.teacherViewTitle>・TeacherBreadcrumbs・統一ボタン
基準スタイル(評価画面から踏襲する)
packages/scratch-gui/src/components/classroom-modal/teacher-evaluation.jsx を参照:
- ラッパー:
styles.teacherView(枠・カードフレームなし。背景色は共有モーダルの本文既定に従う)
- パンくず:
TeacherBreadcrumbs
- タイトル:
<h2 className={styles.teacherViewTitle}>(濃い太字。紫のボックス風タイトルは使わない)
- 本文は左端をパンくず/タイトルとそろえる(左マージン統一)
- フッターのボタン配置: セカンダリ(キャンセル/戻る)は左、プライマリは右
対象画面と対応コンポーネント
すべて packages/scratch-gui/src/components/classroom-modal/ 配下。
| 画面 |
コンポーネント |
直すこと |
| クラス一覧 > 課題一覧 > みんなの課題からさがす |
shared-assignment-catalog.jsx(teacher-assignment-board.jsx の catalog サブビュー) |
枠を外す・タイトルを teacherViewTitle スタイルに・マージン/配置を評価画面にそろえる |
| クラス一覧 > 設定 |
teacher-class-list.jsx(設定画面) |
枠なし・タイトル・マージン・ボタンスタイル統一 |
| クラス一覧 > 課題一覧 > 課題を作る |
teacher-assignment-board.jsx(post サブビュー, 作成 #1108) |
レイアウト・左マージン・ボタンスタイル統一 |
| クラス一覧 > 課題一覧 > 課題を再利用 |
teacher-assignment-board.jsx(reuse サブビュー) |
レイアウト・左マージン・ボタンスタイル統一 |
| クラス一覧 > 課題一覧 > 合言葉で取り込み |
teacher-passcode-import.jsx |
レイアウト・左マージン・ボタンスタイル統一 |
CSS は packages/scratch-gui/src/components/classroom-modal/classroom-modal.css に集約されている。
ボタンスタイルの統一(重要な受け入れ基準)
- ボタンの見た目そのものは自由。ただし プライマリ/セカンダリのスタイルが全画面で統一されていること。
- プライマリ = 塗りつぶし(評価画面の「提出を読み込む」「AI評価を実行」= 青塗り)
- セカンダリ = 白地・枠線(評価画面の「キャンセル」)
- 現状のように画面ごとにボタンの見た目が異なる状態が NG。可能なら共通のボタンクラスに寄せる。
スコープ外(重複回避)
DoD
autopilot-base: feature/assignment-sharing
概要
クラス管理の各サブ画面のスタイルがバラバラなので、「評価」画面 (
teacher-evaluation.jsx) のレイアウトに統一する。評価画面は枠なし・濃い太字タイトル・パンくずの左端にそろったマージン・統一されたボタンスタイルになっており、これを基準にする。参考スクリーンショット:
teacher-evaluation.jsx) — 枠なし・濃い太字<h2 styles.teacherViewTitle>・TeacherBreadcrumbs・統一ボタン基準スタイル(評価画面から踏襲する)
packages/scratch-gui/src/components/classroom-modal/teacher-evaluation.jsxを参照:styles.teacherView(枠・カードフレームなし。背景色は共有モーダルの本文既定に従う)TeacherBreadcrumbs<h2 className={styles.teacherViewTitle}>(濃い太字。紫のボックス風タイトルは使わない)対象画面と対応コンポーネント
すべて
packages/scratch-gui/src/components/classroom-modal/配下。shared-assignment-catalog.jsx(teacher-assignment-board.jsxの catalog サブビュー)teacherViewTitleスタイルに・マージン/配置を評価画面にそろえるteacher-class-list.jsx(設定画面)teacher-assignment-board.jsx(post サブビュー, 作成 #1108)teacher-assignment-board.jsx(reuse サブビュー)teacher-passcode-import.jsxCSS は
packages/scratch-gui/src/components/classroom-modal/classroom-modal.cssに集約されている。ボタンスタイルの統一(重要な受け入れ基準)
スコープ外(重複回避)
DoD
teacherViewTitle相当のタイトル・パンくず左端そろえのマージンになっている。docs/<feature>/screenshots/の該当画面を撮り直す(UI 変更のため。ファイル名は変えない)。autopilot-base: feature/assignment-sharing