Skip to content

refactor(classroom): クラス管理サブ画面のレイアウトを評価画面に統一 (#1122) #1127

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
smalruby3-editor-bot wants to merge 1 commit into
base: develop
Choose a base branch
from
+81 −32
Open

refactor(classroom): クラス管理サブ画面のレイアウトを評価画面に統一 (#1122) #1127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 80 additions & 31 deletions packages/scratch-gui/src/components/classroom-modal/classroom-modal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2383,8 +2383,9 @@
font-size: 0.85rem;
}

/* プライマリ = 青塗り（評価画面に統一・#1122）。 */
.class-list-create-button {
background: #855cd6;
background: #4c97ff;
color: white;
border: none;
border-radius: 0.5rem;
Expand All @@ -2393,6 +2394,10 @@
cursor: pointer;
}

.class-list-create-button:hover {
background: #3d89f0;
}

.class-list-create-button:disabled {
opacity: 0.5;
cursor: default;
Expand Down Expand Up @@ -2628,10 +2633,12 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
font-size: 0.875rem;
}

/* 評価画面の見出し（.teacher-view-title）に統一: 濃い太字・紫を使わない（#1122）。 */
.shared-form-title {
margin: 0;
font-size: 1rem;
color: #855cd6;
margin: 0.25rem 0 1rem;
font-size: 1.3rem;
font-weight: bold;
color: #575e75;
}

.shared-form-hint {
Expand Down Expand Up @@ -2724,12 +2731,17 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
cursor: pointer;
}

/* プライマリは評価画面と同じ青塗りに統一（#1122）。 */
.shared-form-submit {
border-color: #855cd6 !important;
background: #855cd6 !important;
border-color: #4c97ff !important;
background: #4c97ff !important;
color: white;
}

.shared-form-submit:hover {
background: #3d89f0 !important;
}

.shared-form-submit:disabled {
opacity: 0.5;
cursor: default;
Expand All @@ -2746,15 +2758,19 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {

/* --- みんなの課題: catalog (EPIC #1066 S3) --- */

/* 枠なし（#1122）: 課題ボードの本文幅にそのまま乗せ、パンくず左端にそろえる。 */
.shared-catalog {
display: flex;
flex-direction: column;
gap: 0.6rem;
margin: 0.75rem 0;
padding: 1rem;
border: 1px solid hsla(260, 60%, 60%, 0.35);
border-radius: 0.5rem;
background: white;
}

/* 合言葉で取り込み（#1122）: 課題ボード内に描画されるため、ボード側が持つ
左右パディング（.assignment-board = 2rem）に二重で足さない。左端をパンくずに
そろえるため水平パディングは 0。 */
.passcode-import-view {
padding: 0 0 1.25rem;
}

.shared-catalog-filters {
Expand Down Expand Up @@ -2948,8 +2964,9 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
color: hsla(225, 15%, 40%, 1);
}

/* プライマリ = 青塗り（評価画面に統一・#1122）。 */
.board-create-button {
background: #855cd6;
background: #4c97ff;
color: white;
border: none;
border-radius: 0.5rem;
Expand All @@ -2958,6 +2975,10 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
white-space: nowrap;
}

.board-create-button:hover {
background: #3d89f0;
}

.board-create-button:disabled {
opacity: 0.5;
cursor: default;
Expand Down Expand Up @@ -3128,17 +3149,22 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
cursor: default;
}

/* セカンダリ = 白地 + 中立の枠線（評価画面に統一・#1122）。 */
.class-list-import-button {
margin-left: 0.5rem;
border: 1px solid #855cd6;
border: 1px solid #d9d9d9;
background: white;
color: #855cd6;
color: #575e75;
border-radius: 0.5rem;
padding: 0.5rem 1.25rem;
font-size: 0.9rem;
cursor: pointer;
}

.class-list-import-button:hover {
background: #f2f2f2;
}

.class-list-import-button:disabled {
opacity: 0.5;
cursor: default;
Expand All @@ -3157,13 +3183,14 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {

/* --- Class settings (inline card editor) --- */

/* 紫枠をやめ、他の評価画面系レイアウトと同じ控えめな枠に統一（#1122）。 */
.class-settings-form {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.9rem 1rem;
border: 1px solid #855cd6;
border: 1px solid #d9d9d9;
border-radius: 0.5rem;
background: white;
}
Expand Down Expand Up @@ -3221,10 +3248,15 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
flex: 1;
}

/* プライマリ = 青塗り（評価画面に統一・#1122）。 */
.class-settings-save {
background: #855cd6 !important;
background: #4c97ff !important;
color: white;
border-color: #855cd6 !important;
border-color: #4c97ff !important;
}

.class-settings-save:hover {
background: #3d89f0 !important;
}

.class-settings-save:disabled {
Expand Down Expand Up @@ -3274,30 +3306,41 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
font-size: 0.9rem;
}

.board-inline-create button {
background: #855cd6;
/* プライマリ = 青塗り（評価画面に統一・#1122）。キャンセル（.popover-cancel）は
セカンダリのままにするため除外する。 */
.board-inline-create button:not(.popover-cancel) {
background: #4c97ff;
color: white;
border: none;
border-radius: 0.4rem;
padding: 0.5rem 1rem;
cursor: pointer;
}

.board-inline-create button:disabled {
.board-inline-create button:not(.popover-cancel):hover {
background: #3d89f0;
}

.board-inline-create button:not(.popover-cancel):disabled {
opacity: 0.5;
cursor: default;
}

/* セカンダリ = 白地 + 中立の枠線（評価画面に統一・#1122）。 */
.board-reuse-button {
border: 1px solid #855cd6;
border: 1px solid #d9d9d9;
background: white;
color: #855cd6;
color: #575e75;
border-radius: 0.5rem;
padding: 0.5rem 1rem;
cursor: pointer;
white-space: nowrap;
}

.board-reuse-button:hover {
background: #f2f2f2;
}

.board-reuse-button:disabled {
opacity: 0.5;
cursor: default;
Expand All @@ -3317,16 +3360,21 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
background: white;
}

/* セカンダリ = 白地 + 中立の枠線（評価画面に統一・#1122）。 */
.reuse-row-copy {
border: 1px solid #855cd6;
border: 1px solid #d9d9d9;
background: white;
color: #855cd6;
color: #575e75;
border-radius: 0.4rem;
padding: 0.35rem 0.8rem;
cursor: pointer;
white-space: nowrap;
}

.reuse-row-copy:hover {
background: #f2f2f2;
}

.reuse-row-copy:disabled {
opacity: 0.5;
cursor: default;
Expand Down Expand Up @@ -3410,25 +3458,26 @@ button.detail-tabs-download-urgent:hover:not(:disabled) {
white-space: nowrap;
}

/* Floating (modal-like) inline forms: border + shadow lift them above the
list so their extent is obvious. */
/* 枠なし（#1122）: 評価画面に合わせてカードフレーム（枠・影）を外し、
本文はボードの左端にそろえる。 */
.board-popover {
border: 1px solid hsla(0, 0%, 0%, 0.15);
border-radius: 0.6rem;
background: white;
box-shadow: 0 8px 24px hsla(0, 0%, 0%, 0.18);
padding: 1rem;
margin: 0.75rem 0;
}

/* セカンダリ = 白地 + 中立の枠線（評価画面の .secondary-button に統一・#1122）。 */
.popover-cancel {
border: 1px solid hsla(0, 0%, 0%, 0.2);
border: 1px solid #d9d9d9;
background: white;
color: #575e75;
border-radius: 0.4rem;
padding: 0.5rem 1rem;
cursor: pointer;
}

.popover-cancel:hover {
background: #f2f2f2;
}

.assignment-preview-header {
display: flex;
align-items: center;
Expand Down
2 changes: 1 addition & 1 deletion packages/scratch-gui/src/components/classroom-modal/teacher-passcode-import.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const TeacherPasscodeImport = ({ group, isLoading, lookup, error, onLookup, onIm
}, [onImport, passcode, group]);

return (
<div className={styles.postAssignmentContainer} data-testid="classroom-phase-passcode-import">
<div className={styles.passcodeImportView} data-testid="classroom-phase-passcode-import">
<div className={styles.phaseTitle}>
<FormattedMessage
defaultMessage="Import by passcode"
Expand Down
Loading