diff --git a/src/components/backpack/backpack.css b/src/components/backpack/backpack.css
index 6c3d9fbc2f9bebcfd78d5306a10605641645d406..ad7644c64b9ca89e8f50618bb9db650e89d0aee1 100644
--- a/src/components/backpack/backpack.css
+++ b/src/components/backpack/backpack.css
@@ -57,7 +57,7 @@
width: 100%;
height: 100%;
opacity: 0.75;
- background-color: #8cbcff;
+ background-color: $drop-highlight;
transition: all 0.25s ease;
}
diff --git a/src/components/blocks/blocks.css b/src/components/blocks/blocks.css
index e0b07ce26cc7e5053d26a4db770f09f4304b021e..fd66c68bd76335edbc5cfe64a2b349a7f51d778a 100644
--- a/src/components/blocks/blocks.css
+++ b/src/components/blocks/blocks.css
@@ -13,7 +13,7 @@
width: 100%;
height: 100%;
opacity: 0.75;
- background-color: #8cbcff;
+ background-color: $drop-highlight;
transition: all 0.25s ease;
}
diff --git a/src/components/sprite-selector/sprite-list.jsx b/src/components/sprite-selector/sprite-list.jsx
index 17ba2dc215345c14ddc3f4291ca7cc2700927e20..de727969e175aed1146730740416d9889e0a96e4 100644
--- a/src/components/sprite-selector/sprite-list.jsx
+++ b/src/components/sprite-selector/sprite-list.jsx
@@ -34,62 +34,68 @@ const SpriteList = function (props) {
return (
<Box
- className={styles.itemsWrapper}
+ className={classNames(styles.scrollWrapper, {
+ [styles.scrollWrapperDragging]: draggingType === DragConstants.BACKPACK_SPRITE
+ })}
componentRef={containerRef}
>
- {items.map((sprite, index) => {
+ <Box
+ className={styles.itemsWrapper}
+ >
+ {items.map((sprite, index) => {
- // If the sprite has just received a block drop, used for green highlight
- const receivedBlocks = (
- hoveredTarget.sprite === sprite.id &&
+ // If the sprite has just received a block drop, used for green highlight
+ const receivedBlocks = (
+ hoveredTarget.sprite === sprite.id &&
sprite.id !== editingTarget &&
hoveredTarget.receivedBlocks
- );
+ );
- // If the sprite is indicating it can receive block dropping, used for blue highlight
- let isRaised = !receivedBlocks && raised && sprite.id !== editingTarget;
+ // If the sprite is indicating it can receive block dropping, used for blue highlight
+ let isRaised = !receivedBlocks && raised && sprite.id !== editingTarget;
- // A sprite is also raised if a costume or sound is being dragged.
- // Note the absence of the self-sharing check: a sprite can share assets with itself.
- // This is a quirk of 2.0, but seems worth leaving possible, it
- // allows quick (albeit unusual) duplication of assets.
- isRaised = isRaised || [
- DragConstants.COSTUME,
- DragConstants.SOUND,
- DragConstants.BACKPACK_COSTUME,
- DragConstants.BACKPACK_SOUND,
- DragConstants.BACKPACK_CODE].includes(draggingType);
+ // A sprite is also raised if a costume or sound is being dragged.
+ // Note the absence of the self-sharing check: a sprite can share assets with itself.
+ // This is a quirk of 2.0, but seems worth leaving possible, it
+ // allows quick (albeit unusual) duplication of assets.
+ isRaised = isRaised || [
+ DragConstants.COSTUME,
+ DragConstants.SOUND,
+ DragConstants.BACKPACK_COSTUME,
+ DragConstants.BACKPACK_SOUND,
+ DragConstants.BACKPACK_CODE].includes(draggingType);
- return (
- <SortableAsset
- className={classNames(styles.spriteWrapper, {
- [styles.placeholder]: isSpriteDrag && index === draggingIndex})}
- index={isSpriteDrag ? ordering.indexOf(index) : index}
- key={sprite.name}
- onAddSortable={onAddSortable}
- onRemoveSortable={onRemoveSortable}
- >
- <SpriteSelectorItem
- asset={sprite.costume && sprite.costume.asset}
- className={classNames(styles.sprite, {
- [styles.raised]: isRaised,
- [styles.receivedBlocks]: receivedBlocks
- })}
- dragPayload={sprite}
- dragType={DragConstants.SPRITE}
- id={sprite.id}
- index={index}
- key={sprite.id}
- name={sprite.name}
- selected={sprite.id === selectedId}
- onClick={onSelectSprite}
- onDeleteButtonClick={onDeleteSprite}
- onDuplicateButtonClick={onDuplicateSprite}
- onExportButtonClick={onExportSprite}
- />
- </SortableAsset>
- );
- })}
+ return (
+ <SortableAsset
+ className={classNames(styles.spriteWrapper, {
+ [styles.placeholder]: isSpriteDrag && index === draggingIndex})}
+ index={isSpriteDrag ? ordering.indexOf(index) : index}
+ key={sprite.name}
+ onAddSortable={onAddSortable}
+ onRemoveSortable={onRemoveSortable}
+ >
+ <SpriteSelectorItem
+ asset={sprite.costume && sprite.costume.asset}
+ className={classNames(styles.sprite, {
+ [styles.raised]: isRaised,
+ [styles.receivedBlocks]: receivedBlocks
+ })}
+ dragPayload={sprite}
+ dragType={DragConstants.SPRITE}
+ id={sprite.id}
+ index={index}
+ key={sprite.id}
+ name={sprite.name}
+ selected={sprite.id === selectedId}
+ onClick={onSelectSprite}
+ onDeleteButtonClick={onDeleteSprite}
+ onDuplicateButtonClick={onDuplicateSprite}
+ onExportButtonClick={onExportSprite}
+ />
+ </SortableAsset>
+ );
+ })}
+ </Box>
</Box>
);
};
diff --git a/src/components/sprite-selector/sprite-selector.css b/src/components/sprite-selector/sprite-selector.css
index 678f61ef49ae2e2d1bf6e99b45637ed67f1800d1..ffade4750e3ee31cd36d90427f4b97d51db206cf 100644
--- a/src/components/sprite-selector/sprite-selector.css
+++ b/src/components/sprite-selector/sprite-selector.css
@@ -55,6 +55,10 @@
overflow-y: auto;
}
+.scroll-wrapper-dragging {
+ background-color: $drop-highlight;
+}
+
.items-wrapper {
display: flex;
flex-wrap: wrap;
@@ -80,12 +84,12 @@
}
.raised {
- background-color: #8cbcff;
+ background-color: $drop-highlight;
transition: all 0.25s ease;
}
.raised:hover {
- background-color: #8cbcff;
+ background-color: $drop-highlight;
transform: scale(1.05);
}
@@ -94,7 +98,7 @@
animation-duration: 500ms;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
- background-color: #8cbcff;
+ background-color: $drop-highlight;
}
@keyframes wiggle {
diff --git a/src/components/sprite-selector/sprite-selector.jsx b/src/components/sprite-selector/sprite-selector.jsx
index 981e44b0fe3c19b526fc93af506b73311ad83291..115eaee955f25d6ccba82b86c7f8206cc0ee3719 100644
--- a/src/components/sprite-selector/sprite-selector.jsx
+++ b/src/components/sprite-selector/sprite-selector.jsx
@@ -100,20 +100,18 @@ const SpriteSelectorComponent = function (props) {
onChangeY={onChangeSpriteY}
/>
- <Box className={styles.scrollWrapper}>
- <SpriteList
- editingTarget={editingTarget}
- hoveredTarget={hoveredTarget}
- items={Object.keys(sprites).map(id => sprites[id])}
- raised={raised}
- selectedId={selectedId}
- onDeleteSprite={onDeleteSprite}
- onDrop={onDrop}
- onDuplicateSprite={onDuplicateSprite}
- onExportSprite={onExportSprite}
- onSelectSprite={onSelectSprite}
- />
- </Box>
+ <SpriteList
+ editingTarget={editingTarget}
+ hoveredTarget={hoveredTarget}
+ items={Object.keys(sprites).map(id => sprites[id])}
+ raised={raised}
+ selectedId={selectedId}
+ onDeleteSprite={onDeleteSprite}
+ onDrop={onDrop}
+ onDuplicateSprite={onDuplicateSprite}
+ onExportSprite={onExportSprite}
+ onSelectSprite={onSelectSprite}
+ />
<ActionMenu
className={styles.addButton}
img={spriteIcon}
diff --git a/src/components/stage-selector/stage-selector.css b/src/components/stage-selector/stage-selector.css
index 8136911e80b0321cb396eef06c0264540b40a215..742898bd3baab6c094f61062af27e8c2fc8bdd60 100644
--- a/src/components/stage-selector/stage-selector.css
+++ b/src/components/stage-selector/stage-selector.css
@@ -100,7 +100,7 @@ $header-height: calc($stage-menu-height - 2px);
}
.raised, .raised .header {
- background-color: #8cbcff;
+ background-color: $drop-highlight;
transition: all 0.25s ease;
}
diff --git a/src/css/colors.css b/src/css/colors.css
index 9caf8430d96e6bdd534e148f21a9bdb762c30249..185091812e51af86ed3ba3841478fb743f4dd8d6 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -40,3 +40,5 @@ $extensions-primary: hsla(163, 85%, 40%, 1); /* #0FBD8C */
$extensions-tertiary: hsla(163, 85%, 30%, 1); /* #0B8E69 */
$extensions-transparent: hsla(163, 85%, 40%, 0.35); /* 35% transparent version of extensions-primary */
$extensions-light: hsla(163, 57%, 85%, 1); /* opaque version of extensions-transparent, on white bg */
+
+$drop-highlight: hsla(215, 100%, 77%); /* lighter than motion-primary */