Skip to content

Commit d54cfb3

Browse files
takaokoujiclaude
takaokouji
and
claude
committed
refactor: simplify URL loader modal UI by removing prompt text
- Remove prompt text "Enter a project URL:" to simplify the modal - Add dedicated URL examples section below input field - Update placeholder text to be shorter and clearer - Clean up unused CSS styles and internationalization messages 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent 1fff5f1 commit d54cfb3

File tree

5 files changed

+87
-32
lines changed

5 files changed

+87
-32
lines changed

‎src/components/url-loader-modal/url-loader-modal.css‎

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,6 @@
1919
gap: 1.5rem;
2020
}
2121

22-
.promptSection {
23-
text-align: left;
24-
}
25-
26-
.promptText {
27-
font-size: 0.875rem;
28-
color: $text-primary;
29-
line-height: 1.5;
30-
}
31-
3222
.inputSection {
3323
display: flex;
3424
flex-direction: column;
@@ -66,6 +56,43 @@
6656
line-height: 1.4;
6757
}
6858

59+
.examplesSection {
60+
display: flex;
61+
flex-direction: column;
62+
margin-top: -0.5rem;
63+
}
64+
65+
.examplesTitle {
66+
font-size: 0.75rem;
67+
color: $text-primary;
68+
font-weight: bold;
69+
margin-bottom: 0.5rem;
70+
}
71+
72+
.examplesList {
73+
list-style: none;
74+
padding: 0;
75+
margin: 0;
76+
display: flex;
77+
flex-direction: column;
78+
gap: 0.25rem;
79+
}
80+
81+
.exampleItem {
82+
font-size: 0.75rem;
83+
color: $text-primary-transparent;
84+
font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
85+
padding-left: 1rem;
86+
position: relative;
87+
}
88+
89+
.exampleItem::before {
90+
content: "•";
91+
position: absolute;
92+
left: 0;
93+
color: $text-primary-transparent;
94+
}
95+
6996
.buttonSection {
7097
display: flex;
7198
justify-content: flex-end;

‎src/components/url-loader-modal/url-loader-modal.jsx‎

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,26 @@ const messages = defineMessages({
1616
description: 'Title for the URL loader modal',
1717
id: 'gui.urlLoader.title'
1818
},
19-
prompt: {
20-
defaultMessage: 'Enter a project URL:',
21-
description: 'Prompt message for URL input',
22-
id: 'gui.urlLoader.urlPrompt'
23-
},
2419
urlPlaceholder: {
25-
defaultMessage: 'https://scratch.mit.edu/projects/1234567890/ or https://drive.google.com/file/d/FILE_ID/view',
26-
description: 'Placeholder text for URL input field showing both Scratch and Google Drive examples',
20+
defaultMessage: 'Enter project URL...',
21+
description: 'Placeholder text for URL input field',
2722
id: 'gui.urlLoader.urlPlaceholder'
2823
},
24+
urlExamplesTitle: {
25+
defaultMessage: 'URL Examples',
26+
description: 'Title for URL examples section',
27+
id: 'gui.urlLoader.urlExamplesTitle'
28+
},
29+
urlExampleScratch: {
30+
defaultMessage: 'https://scratch.mit.edu/projects/{project_id}/',
31+
description: 'Example URL format for Scratch projects',
32+
id: 'gui.urlLoader.urlExampleScratch'
33+
},
34+
urlExampleGoogleDrive: {
35+
defaultMessage: 'https://drive.google.com/file/d/{file_id}/view?usp=drive_link',
36+
description: 'Example URL format for Google Drive files',
37+
id: 'gui.urlLoader.urlExampleGoogleDrive'
38+
},
2939
openButton: {
3040
defaultMessage: 'Open',
3141
description: 'Label for open button',
@@ -106,14 +116,6 @@ class URLLoaderModal extends React.Component {
106116
onRequestClose={onRequestClose}
107117
>
108118
<Box className={styles.body}>
109-
<Box className={styles.promptSection}>
110-
<div className={styles.promptText}>
111-
<FormattedMessage
112-
{...messages.prompt}
113-
/>
114-
</div>
115-
</Box>
116-
117119
<Box className={styles.inputSection}>
118120
<input
119121
className={classNames(styles.urlInput, {
@@ -135,6 +137,26 @@ class URLLoaderModal extends React.Component {
135137
)}
136138
</Box>
137139

140+
<Box className={styles.examplesSection}>
141+
<div className={styles.examplesTitle}>
142+
<FormattedMessage
143+
{...messages.urlExamplesTitle}
144+
/>
145+
</div>
146+
<ul className={styles.examplesList}>
147+
<li className={styles.exampleItem}>
148+
<FormattedMessage
149+
{...messages.urlExampleScratch}
150+
/>
151+
</li>
152+
<li className={styles.exampleItem}>
153+
<FormattedMessage
154+
{...messages.urlExampleGoogleDrive}
155+
/>
156+
</li>
157+
</ul>
158+
</Box>
159+
138160
<Box className={styles.buttonSection}>
139161
<button
140162
className={styles.cancelButton}

‎src/locales/en.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -180,9 +180,11 @@ export default {
180180
// URL Loader messages
181181
'gui.urlLoader.loadError': 'The project URL that was entered failed to load.',
182182
'gui.urlLoader.invalidUrl': 'Please enter a valid Scratch project URL or Google Drive URL.',
183-
'gui.urlLoader.urlPrompt': 'Enter a project URL:',
184183
'gui.urlLoader.title': 'Load from URL',
185-
'gui.urlLoader.urlPlaceholder': 'https://scratch.mit.edu/projects/1234567890/ or https://drive.google.com/file/d/FILE_ID/view',
184+
'gui.urlLoader.urlPlaceholder': 'Enter project URL...',
186185
'gui.urlLoader.openButton': 'Open',
187-
'gui.urlLoader.cancelButton': 'Cancel'
186+
'gui.urlLoader.cancelButton': 'Cancel',
187+
'gui.urlLoader.urlExamplesTitle': 'URL Examples',
188+
'gui.urlLoader.urlExampleScratch': 'https://scratch.mit.edu/projects/{project_id}/',
189+
'gui.urlLoader.urlExampleGoogleDrive': 'https://drive.google.com/file/d/{file_id}/view?usp=drive_link'
188190
};

‎src/locales/ja-Hira.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ export default {
22
'gui.menuBar.loadFromUrl': 'URLからよみこむ',
33
'gui.urlLoader.loadError': 'プロジェクトURLのよみこみにしっぱいしました。',
44
'gui.urlLoader.invalidUrl': 'ゆうこうなScratchプロジェクトURLまたはGoogle DriveのURLをにゅうりょくしてください。',
5-
'gui.urlLoader.urlPrompt': 'プロジェクトのURLをにゅうりょくしてください：',
65
'gui.urlLoader.title': 'URLからよみこむ',
7-
'gui.urlLoader.urlPlaceholder': 'https://scratch.mit.edu/projects/1234567890/ または https://drive.google.com/file/d/FILE_ID/view',
6+
'gui.urlLoader.urlPlaceholder': 'プロジェクトのURLをにゅうりょく...',
87
'gui.urlLoader.openButton': 'ひらく',
98
'gui.urlLoader.cancelButton': 'キャンセル',
9+
'gui.urlLoader.urlExamplesTitle': 'URLのれい',
10+
'gui.urlLoader.urlExampleScratch': 'https://scratch.mit.edu/projects/{project_id}/',
11+
'gui.urlLoader.urlExampleGoogleDrive': 'https://drive.google.com/file/d/{file_id}/view?usp=drive_link',
1012
'gui.menuBar.seeProjectPage': 'プロジェクトページをみる',
1113
'gui.loader.creating': 'プロジェクトをさくせいちゅう...',
1214
'gui.smalruby3.crashMessage.description': 'もうしわけありません。スモウルビーがクラッシュしたようです。このバグはじどうてきにスモウルビーチームにほうこくされました。ページをさいよみこみしてください。',

‎src/locales/ja.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ export default {
22
'gui.menuBar.loadFromUrl': 'URLから読み込む',
33
'gui.urlLoader.loadError': 'プロジェクトURLの読み込みに失敗しました。',
44
'gui.urlLoader.invalidUrl': '有効なScratchプロジェクトURLまたはGoogle DriveのURLを入力してください。',
5-
'gui.urlLoader.urlPrompt': 'プロジェクトのURLを入力してください：',
65
'gui.urlLoader.title': 'URLから読み込む',
7-
'gui.urlLoader.urlPlaceholder': 'https://scratch.mit.edu/projects/1234567890/ または https://drive.google.com/file/d/FILE_ID/view',
6+
'gui.urlLoader.urlPlaceholder': 'プロジェクトのURLを入力...',
87
'gui.urlLoader.openButton': '開く',
98
'gui.urlLoader.cancelButton': 'キャンセル',
9+
'gui.urlLoader.urlExamplesTitle': 'URLの例',
10+
'gui.urlLoader.urlExampleScratch': 'https://scratch.mit.edu/projects/{project_id}/',
11+
'gui.urlLoader.urlExampleGoogleDrive': 'https://drive.google.com/file/d/{file_id}/view?usp=drive_link',
1012
'gui.menuBar.seeProjectPage': 'プロジェクトページを見る',
1113
'gui.loader.creating': 'プロジェクトを作成中...',
1214
'gui.smalruby3.crashMessage.description': '申し訳ありません。スモウルビーがクラッシュしたようです。このバグは自動的にスモウルビーチームに報告されました。ページを再読み込みしてください。',

0 commit comments

Comments
 (0)