Skip to content

Commit 322786c

Browse files
MiroslavDionisievMiroslavDionisiev
committed
chore: move changes to the debug modal from the standalone repo
1 parent 3d6d653 commit 322786c

21 files changed

+252
-720
lines changed

‎packages/scratch-gui/src/components/debug-modal/debug-modal.css‎

Lines changed: 139 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import "../../css/colors.css";
22

3-
.modal-overlay {
3+
.debug-modal-overlay {
44
position: fixed;
55
top: 0;
66
left: 0;
@@ -12,8 +12,8 @@
1212
align-items: center;
1313
z-index: 510;
1414
}
15-
16-
.modal-container {
15+
16+
.debug-modal-container {
1717
background: white;
1818
border-radius: 8px;
1919
width: 1000px;
@@ -23,127 +23,140 @@
2323
position: relative;
2424
overflow-x: visible;
2525
box-shadow: 0 4px 4px 0 $ui-black-transparent-10;
26+
outline: none;
27+
margin: 0 40px;
28+
29+
.modal-header {
30+
display: flex;
31+
border-radius: 8px 8px 0 0;
32+
justify-content: space-between;
33+
align-items: center;
34+
padding: 8px;
35+
padding-left: 12px;
36+
padding-right: 12px;
37+
background-color: $ui-green-2;
38+
}
39+
40+
.header-title {
41+
display: flex;
42+
gap: 8px;
43+
align-items: center;
44+
font-size: 1rem;
45+
line-height: 1.25rem;
46+
font-weight: 700;
47+
color: white;
48+
}
49+
.debug-icon {
50+
height: 22px;
51+
width: 22px;
52+
}
53+
54+
.hidden {
55+
display: none;
56+
}
57+
58+
.close-button {
59+
display: flex;
60+
background: none;
61+
border: none;
62+
cursor: pointer;
63+
width: 32px;
64+
height: 32px;
65+
}
66+
67+
.modal-content {
68+
display: flex;
69+
width: 100%;
70+
flex-grow: 1;
71+
overflow-y: scroll;
72+
}
73+
74+
.modal-content::-webkit-scrollbar-track {
75+
background: transparent;
76+
}
77+
78+
.modal-content::-webkit-scrollbar {
79+
width: 8px;
80+
}
81+
82+
.previousIcon {
83+
position: absolute;
84+
cursor: pointer;
85+
top: 50%;
86+
}
87+
88+
.nextIcon {
89+
position: absolute;
90+
cursor: pointer;
91+
right: -24px;
92+
top: 50%;
93+
}
94+
95+
.topic-list {
96+
width: 30%;
97+
border-right: 1px solid $ui-green;;
98+
}
99+
100+
.topic-item {
101+
display: flex;
102+
gap: 8px;
103+
align-items: center;
104+
padding: 8px;
105+
padding-left: 12px;
106+
font-size: 1rem;
107+
line-height: 1.5rem;
108+
color: $ui-green;;
109+
cursor: pointer;
110+
}
111+
112+
.topic-item.active {
113+
background-color: #D1FAEE;
114+
font-weight: bold;
115+
}
116+
117+
.info-container {
118+
flex-direction: column;
119+
width: 70%;
120+
display: flex;
121+
padding: 20px;
122+
color: $text-primary;
123+
}
124+
125+
.text-container {
126+
flex: 1;
127+
margin-left: 70px;
128+
}
129+
130+
.title-text {
131+
font-size: 24px;
132+
line-height: 32px;
133+
font-weight: 700;
134+
}
135+
136+
.description {
137+
font-size: 16px;
138+
line-height: 28px;
139+
}
140+
141+
.imageContainer {
142+
display: flex;
143+
justify-content: center;
144+
align-items: center;
145+
padding: 10px;
146+
margin-top: 10px;
147+
}
148+
149+
.topicImage {
150+
max-width: 100%;
151+
max-height: 100%;
152+
object-fit: contain; /* Ensures image scales proportionally */
153+
}
154+
155+
.navigation-buttons {
156+
margin-top: 20px;
157+
}
158+
159+
button {
160+
margin: 5px;
161+
}
26162
}
27-
28-
.modal-header {
29-
display: flex;
30-
border-radius: 8px 8px 0 0;
31-
justify-content: space-between;
32-
align-items: center;
33-
padding: 10px;
34-
background-color: $ui-green;
35-
}
36-
37-
.header-title {
38-
display: flex;
39-
gap: 8px;
40-
align-items: center;
41-
font-size: 1rem;
42-
line-height: 1.25rem;
43-
font-weight: 700;
44-
color: white;
45-
}
46-
.debug-icon {
47-
height: 22px;
48-
width: 22px;
49-
}
50-
51-
.hidden {
52-
display: none;
53-
}
54-
55-
.close-button {
56-
display: flex;
57-
background: none;
58-
border: none;
59-
cursor: pointer;
60-
width: 32px;
61-
height: 32px;
62-
}
63-
64-
.modal-content {
65-
display: flex;
66-
width: 100%;
67-
flex-grow: 1;
68-
overflow-y: scroll;
69-
}
70-
71-
.previousIcon {
72-
position: absolute;
73-
cursor: pointer;
74-
top: 50%;
75-
}
76-
77-
.nextIcon {
78-
position: absolute;
79-
cursor: pointer;
80-
right: -30px;
81-
top: 50%;
82-
}
83-
84-
.topic-list {
85-
width: 30%;
86-
border-right: 1px solid $ui-green;;
87-
}
88-
89-
.topic-item {
90-
display: flex;
91-
gap: 8px;
92-
align-items: center;
93-
padding: 10px;
94-
font-size: 1rem;
95-
line-height: 1.5rem;
96-
color: $ui-green;;
97-
cursor: pointer;
98-
}
99-
100-
.topic-item.active {
101-
background-color: #D1FAEE;
102-
font-weight: bold;
103-
}
104-
105-
.info-container {
106-
flex-direction: column;
107-
width: 70%;
108-
display: flex;
109-
padding: 20px;
110-
color: $text-primary;
111-
}
112-
113-
.text-container {
114-
flex: 1;
115-
margin-left: 70px;
116-
}
117-
118-
.title-text {
119-
font-size: 24px;
120-
line-height: 32px;
121-
font-weight: 700;
122-
}
123-
124-
.description {
125-
font-size: 16px;
126-
line-height: 28px;
127-
}
128-
129-
.imageContainer {
130-
display: flex;
131-
justify-content: center;
132-
align-items: center;
133-
padding: 10px;
134-
margin-top: 10px;
135-
}
136-
137-
.topicImage {
138-
max-width: 100%;
139-
max-height: 100%;
140-
object-fit: contain; /* Ensures image scales proportionally */
141-
}
142-
143-
.navigation-buttons {
144-
margin-top: 20px;
145-
}
146-
147-
button {
148-
margin: 5px;
149-
}

‎packages/scratch-gui/src/components/debug-modal/debug-modal.jsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,13 @@ const logTopicChange = topicIndex => {
3131
const DebugModal = ({isOpen, onClose = () => {}}) => {
3232
const [selectedTopicIndex, setSelectedTopicIndex] = useState(0);
3333

34+
// Preload images
35+
useEffect(() => {
36+
sections.forEach(section => {
37+
new Image().src = section.image;
38+
});
39+
}, []);
40+
3441
const handleNext = useCallback(() => {
3542
if (selectedTopicIndex < sections.length - 1) {
3643
setSelectedTopicIndex(selectedTopicIndex + 1);
@@ -72,8 +79,8 @@ const DebugModal = ({isOpen, onClose = () => {}}) => {
7279
<ReactModal
7380
isOpen={isOpen}
7481
onRequestClose={handleClose}
75-
className={styles.modalContainer}
76-
overlayClassName={styles.modalOverlay}
82+
className={styles.debugModalContainer}
83+
overlayClassName={styles.debugModalOverlay}
7784
>
7885
<div className={styles.modalHeader}>
7986
<div className={styles.headerTitle}>
@@ -140,15 +147,15 @@ const DebugModal = ({isOpen, onClose = () => {}}) => {
140147
src={prevIcon}
141148
alt="Previous"
142149
onClick={handlePrevious}
143-
className={classNames(styles.navigationIcon, styles.previousIcon, {
150+
className={classNames(styles.previousIcon, {
144151
[styles.hidden]: selectedTopicIndex === 0
145152
})}
146153
/>
147154
<img
148155
src={nextIcon}
149156
alt="Next"
150157
onClick={handleNext}
151-
className={classNames(styles.navigationIcon, styles.nextIcon, {
158+
className={classNames(styles.nextIcon, {
152159
[styles.hidden]: selectedTopicIndex === sections.length - 1
153160
})}
154161
/>

‎packages/scratch-gui/src/components/debug-modal/icons/icon--add-sound-checkpoints.svg‎

Lines changed: 1 addition & 14 deletions
Loading

0 commit comments

Comments
 (0)