Skip to content

refactor(classroom): クラス管理サブ画面のレイアウトを評価画面に統一(枠なし/タイトル/マージン/ボタン) #1122

Description

@smalruby3-editor-bot

概要

クラス管理の各サブ画面のスタイルがバラバラなので、「評価」画面 (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.jsxteacher-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

  • 上表の各画面が枠なし・teacherViewTitle 相当のタイトル・パンくず左端そろえのマージンになっている。
  • プライマリ/セカンダリボタンのスタイルが全対象画面で統一されている。
  • 評価画面と並べて違和感のないレイアウト(左マージン・見出し・ボタン配置)になっている。
  • docs/<feature>/screenshots/ の該当画面を撮り直す(UI 変更のため。ファイル名は変えない)。
  • 既存の classroom 関連 integration/unit テストが通る(data-testid は維持)。lint は 0 エラー 0 警告。

autopilot-base: feature/assignment-sharing

Metadata

Metadata

Assignees

Labels

🙋 HITL人間の対応待ち(Project HITL=Yes の投影)🤖 autopilotautopilot が処理対象にした Issue/PR(daemon が付与)

Type

No type

Projects

Status
Review

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions