Skip to content

Commit d015a0e

Browse files
adzhindzhiadzhindzhi
committed
Merge branch 'UEPR-282-face-sensing' of github.com:scratchfoundation/scratch-editor into UEPR-56-UEPR-282
2 parents 70adde9 + 7f483ae commit d015a0e

39 files changed

+972
-220
lines changed

‎package-lock.json‎

Lines changed: 14 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/scratch-gui/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@
7979
"core-js": "2.6.12",
8080
"css-loader": "5.2.7",
8181
"dapjs": "2.3.0",
82+
"driver.js": "1.3.6",
8283
"es6-object-assign": "1.1.0",
8384
"fastestsmallesttextencoderdecoder": "1.0.22",
8485
"get-float-time-domain-data": "0.1.0",
@@ -166,7 +167,7 @@
166167
"redux-mock-store": "1.5.5",
167168
"rimraf": "2.7.1",
168169
"scratch-semantic-release-config": "3.0.0",
169-
"scratch-webpack-configuration": "3.0.0",
170+
"scratch-webpack-configuration": "3.1.0",
170171
"selenium-webdriver": "3.6.0",
171172
"semantic-release": "19.0.5",
172173
"stream-browserify": "3.0.0",

‎packages/scratch-gui/src/components/cards/card.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -190,14 +190,14 @@
190190
margin: 0 0.5rem 0.5rem;
191191
}
192192

193-
.decks {
193+
.decks, .resources {
194194
display: flex;
195195
flex-direction: row;
196196
justify-content: space-around;
197197
padding: 0 1rem 0.5rem;
198198
}
199199

200-
.deck {
200+
.deck, .resource {
201201
display: flex;
202202
flex-direction: column;
203203
margin: 0 8px 8px;
@@ -207,13 +207,13 @@
207207
overflow: hidden;
208208
}
209209

210-
.deck-image {
210+
.deck-image, .resource-image {
211211
width: 200px;
212212
height: 100px;
213213
object-fit: cover;
214214
}
215215

216-
.deck-name {
216+
.deck-name, .resource-name {
217217
color: $looks-secondary;
218218
font-weight: bold;
219219
font-size: 0.85rem;

‎packages/scratch-gui/src/components/cards/cards.jsx‎

Lines changed: 79 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,60 @@ PreviewsStep.propTypes = {
275275
onShowAll: PropTypes.func.isRequired
276276
};
277277

278+
const PreviewExternalStep = ({externalResources, onShowAll}) => (
279+
<Fragment>
280+
<div className={styles.stepTitle}>
281+
<FormattedMessage
282+
defaultMessage="More things to try!"
283+
description="Title card with more things to try"
284+
id="gui.cards.more-things-to-try"
285+
/>
286+
</div>
287+
<div className={styles.resources}>
288+
{Object.keys(externalResources).slice(0, 2)
289+
.map(id => (
290+
<a
291+
className={styles.resource}
292+
key={`resource-preview-${id}`}
293+
href={externalResources[id].url}
294+
target="_blank"
295+
rel="noopener noreferrer"
296+
>
297+
<img
298+
className={styles.resourceImage}
299+
draggable={false}
300+
src={externalResources[id].img}
301+
/>
302+
<div className={styles.resourceName}>{externalResources[id].name}</div>
303+
</a>
304+
))}
305+
</div>
306+
<div className={styles.seeAll}>
307+
<div
308+
className={styles.seeAllButton}
309+
onClick={onShowAll}
310+
>
311+
<FormattedMessage
312+
defaultMessage="See more"
313+
description="Title for button to see more in how-to library"
314+
id="gui.cards.see-more"
315+
/>
316+
</div>
317+
</div>
318+
</Fragment>
319+
);
320+
321+
PreviewExternalStep.propTypes = {
322+
externalResources: PropTypes.shape({
323+
id: PropTypes.shape({
324+
name: PropTypes.node.isRequired,
325+
img: PropTypes.string.isRequired,
326+
url: PropTypes.string.isRequired
327+
})
328+
}).isRequired,
329+
onShowAll: PropTypes.func.isRequired
330+
};
331+
278332
const Cards = props => {
279333
const {
280334
activeDeckId,
@@ -359,26 +413,32 @@ const Cards = props => {
359413
onShowAll={onShowAll}
360414
/>
361415
) : (
362-
steps[step].video ? (
363-
showVideos ?
364-
(
365-
<VideoStep
366-
dragging={dragging}
367-
expanded={expanded}
368-
video={translateVideo(steps[step].video, locale)}
369-
/>
370-
) : (
371-
<ImageStep
372-
image={content[activeDeckId].img}
373-
title={content[activeDeckId].name}
374-
/>
375-
)
376-
) : (
377-
<ImageStep
378-
image={translateImage(steps[step].image, locale)}
379-
title={steps[step].title}
416+
steps[step].externalResources ? (
417+
<PreviewExternalStep
418+
externalResources={steps[step].externalResources}
419+
onShowAll={onShowAll}
380420
/>
381-
)
421+
) :
422+
steps[step].video ? (
423+
showVideos ?
424+
(
425+
<VideoStep
426+
dragging={dragging}
427+
expanded={expanded}
428+
video={translateVideo(steps[step].video, locale)}
429+
/>
430+
) : (
431+
<ImageStep
432+
image={content[activeDeckId].img}
433+
title={content[activeDeckId].name}
434+
/>
435+
)
436+
) : (
437+
<ImageStep
438+
image={translateImage(steps[step].image, locale)}
439+
title={steps[step].title}
440+
/>
441+
)
382442
)}
383443
{steps[step].trackingPixel && steps[step].trackingPixel}
384444
</div>

‎packages/scratch-gui/src/components/extension-button/extension-button.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
@import "../../css/units.css";
2+
@import "../../css/colors.css";
3+
@import "../../css/z-index.css";
4+
5+
.extension-button-container {
6+
width: 3.75rem;
7+
height: 3.25rem;
8+
position: absolute;
9+
bottom: 0;
10+
left: 0;
11+
right: 0;
12+
z-index: $z-index-extension-button;
13+
background: $looks-secondary;
14+
15+
border: 1px solid $looks-secondary;
16+
box-sizing: content-box; /* To match scratch-block vertical toolbox borders */
17+
}
18+
19+
$fade-out-distance: 15px;
20+
21+
.extension-button-container:before {
22+
content: "";
23+
position: absolute;
24+
top: calc(calc(-1 * $fade-out-distance) - 1px);
25+
left: -1px;
26+
background: linear-gradient(rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.15));
27+
height: $fade-out-distance;
28+
width: calc(100% + 0.5px);
29+
}
30+
31+
32+
.extension-button {
33+
background: none;
34+
border: none;
35+
outline: none;
36+
width: 100%;
37+
height: 100%;
38+
cursor: pointer;
39+
--radiate-color: 133, 92, 214; /* $looks-secondary */
40+
}
41+
42+
.extension-button-icon {
43+
width: 1.75rem;
44+
height: 1.75rem;
45+
}
46+
47+
[dir="rtl"] .extension-button-icon {
48+
transform: scaleX(-1);
49+
}
50+
51+
.extension-button > div {
52+
margin-top: 0;
53+
}
54+
55+
$radiate-distance: 20px;
56+
57+
.radiate:before,
58+
.radiate:after {
59+
content: '';
60+
position: absolute;
61+
top: 0;
62+
left: 0;
63+
width: 100%;
64+
height: 100%;
65+
66+
z-index: -1;
67+
animation: radiate 2.5s infinite;
68+
clip-path: inset(-$radiate-distance -$radiate-distance 0 0);
69+
}
70+
71+
.radiate:after {
72+
animation-delay: 0.7s;
73+
}
74+
75+
@keyframes radiate {
76+
0% {
77+
box-shadow: 0 0 0 0 rgba(var(--radiate-color), 0.7);
78+
}
79+
100% {
80+
box-shadow: 0 0 0 $radiate-distance rgba(var(--radiate-color), 0);
81+
}
82+
}

0 commit comments

Comments
 (0)