diff --git a/src/components/action-menu/action-menu.css b/src/components/action-menu/action-menu.css
index 6771a6851d50d5aefd856d94700811d6be15bf3d..8f39946c128d445c5dbd98acbade5ac10553f1c2 100644
--- a/src/components/action-menu/action-menu.css
+++ b/src/components/action-menu/action-menu.css
@@ -28,7 +28,7 @@ button::-moz-focus-inner {
}
.button:hover {
- background: $pen-primary;
+ background: $extensions-primary;
}
.button:active {
@@ -126,7 +126,7 @@ button::-moz-focus-inner {
is not very easy to style.
*/
.tooltip {
- background-color: $pen-primary !important;
+ background-color: $extensions-primary !important;
opacity: 1 !important;
border: 1px solid hsla(0, 0%, 0%, .1) !important;
box-shadow: 0 0 .5rem hsla(0, 0%, 0%, .25) !important;
@@ -134,7 +134,7 @@ button::-moz-focus-inner {
}
.tooltip:after {
- background-color: $pen-primary;
+ background-color: $extensions-primary;
}
.coming-soon-tooltip {
diff --git a/src/components/camera-modal/camera-modal.css b/src/components/camera-modal/camera-modal.css
index 5f631e41bf5ad9b22675065153f683534c896a7b..4ea962fbafd68bc7ecdf3736d96930070a46f0de 100644
--- a/src/components/camera-modal/camera-modal.css
+++ b/src/components/camera-modal/camera-modal.css
@@ -93,7 +93,7 @@ $main-button-size: 2.75rem;
}
.main-button:hover {
- background: $pen-primary;
+ background: $extensions-primary;
box-shadow: 0 0 0 6px $motion-transparent;
}
diff --git a/src/components/cards/card.css b/src/components/cards/card.css
index 99ab8a66c01f10aa99f68fdbd1153bf1e2a72538..9e14a1fb2a6b1152e0b099479febe77507c68ea9 100644
--- a/src/components/cards/card.css
+++ b/src/components/cards/card.css
@@ -14,21 +14,21 @@
top: 5%;
background: $ui-white;
border: 1px solid $ui-tertiary;
- width: 10px;
+ width: .75rem;
z-index: 10;
opacity: 0.9;
overflow: hidden;
}
.left-card {
- left: -10px;
+ left: -.75rem;
border-right: 0;
border-top-left-radius: 0.75rem;
border-bottom-left-radius: 0.75rem;
}
.right-card {
- right: -10px;
+ right: -.75rem;
border-left: 0;
border-top-right-radius: 0.75rem;
border-bottom-right-radius: 0.75rem;
@@ -39,9 +39,9 @@
position: absolute;
top: 0;
left: 0;
- height: 1.8rem;
+ height: 2.5rem;
width: 100%;
- background: $motion-primary;
+ background: $extensions-primary;
}
.left-button, .right-button {
@@ -51,14 +51,24 @@
z-index: 20;
user-select: none;
cursor: pointer;
- background: $motion-primary;
- box-shadow: 0 0 0 4px $motion-transparent;
- height: 40px;
- width: 40px;
+ background: $extensions-primary;
+ box-shadow: 0 0 0 4px $extensions-transparent;
+ height: 44px;
+ width: 44px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
+ transition: all 0.25s ease;
+}
+
+.left-button:hover, .right-button:hover {
+ box-shadow: 0 0 0 6px $extensions-transparent;
+ transform: scale(1.125);
+}
+
+.left-button img, .right-button img{
+ width: 1.75rem;
}
.left-button {
@@ -88,10 +98,10 @@
flex-direction: row;
justify-content: space-between;
align-items: center;
- background: $motion-primary;
- border-bottom: 1px solid $motion-tertiary;
- padding: 0.5rem;
+ background: $extensions-primary;
+ border-bottom: 1px solid $extensions-tertiary;
font-size: 0.625rem;
+ font-weight: bold;
}
.remove-button, .all-button {
@@ -101,6 +111,11 @@
flex-direction: row;
justify-content: center;
align-items: center;
+ padding: 0.75rem;
+}
+
+.remove-button:hover, .all-button:hover {
+ background-color: $ui-black-transparent;
}
.step-title {
@@ -161,14 +176,14 @@
color: $motion-primary;
font-weight: bold;
font-size: 0.85rem;
- margin: 14px 0px;
+ margin: .625rem 0px;
text-align: center;
font-weight: bold;
text-align: center;
}
.help-icon, .close-icon {
- height: 0.75rem;
+ height: 1rem;
}
.help-icon {
@@ -198,9 +213,9 @@
display: flex;
align-items: center;
color: $ui-white;
- font-size: 12px;
+ font-size: .75rem;
font-weight: bold;
- line-height: 15px;
+ line-height: 1rem;
text-align: center;
}
@@ -228,10 +243,10 @@
height: 0.5rem;
margin: 0 0.25rem;
border-radius: 100%;
- background: transparent;
- border: 2px solid $ui-white-transparent;
+ background: $ui-white-transparent;
}
.active-step-pip {
- background: white;
+ background: $ui-white;
+ box-shadow: 0px 0px 0px 2px $ui-black-transparent;
}
diff --git a/src/components/import-modal/import-modal.css b/src/components/import-modal/import-modal.css
index b41c02b1baaa92923fc92af9ecbe3d22667cef1f..b265efae02fc5ed6c7348a4422d9b84e9e474fa0 100644
--- a/src/components/import-modal/import-modal.css
+++ b/src/components/import-modal/import-modal.css
@@ -45,7 +45,7 @@ $sides: 20rem;
box-sizing: border-box;
width: 100%;
- background-color: $pen-primary;
+ background-color: $extensions-primary;
}
.header-item {
@@ -129,12 +129,12 @@ $sides: 20rem;
font-weight: bold;
font-size: .875rem;
cursor: pointer;
- border: 0px solid $pen-primary;
+ border: 0px solid $extensions-primary;
outline: none;
}
.input-row button.ok-button {
- background: $pen-primary;
+ background: $extensions-primary;
color: white;
}
diff --git a/src/components/preview-modal/preview-modal.css b/src/components/preview-modal/preview-modal.css
index 2c35acf63e0f78fbca407f74b063e691e105f2ec..d6cf6dc4568fd5178ea0849bbd92551838d14bf9 100644
--- a/src/components/preview-modal/preview-modal.css
+++ b/src/components/preview-modal/preview-modal.css
@@ -69,8 +69,8 @@
}
.button-row button.view-project-button {
- background: $pen-primary;
- border-color: $pen-primary;
+ background: $extensions-primary;
+ border-color: $extensions-primary;
color: white;
}
diff --git a/src/css/colors.css b/src/css/colors.css
index d4cf5696e16fb2c3b48ef63a3e01a31c996723f5..37ffa62227a6f6ccb42a6170d4652db037f4f769 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -32,3 +32,7 @@ $pen-transparent: hsla(163, 85%, 40%, 0.25); /* #0FBD8C */
$error-primary: hsla(30, 100%, 55%, 1); /* #FF8C1A */
$error-transparent: hsla(30, 100%, 55%, 0.25); /* #FF8C1A */
+
+$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 */
diff --git a/src/lib/audio/audio-effects.js b/src/lib/audio/audio-effects.js
index 067dcc6209397782d248a3a04ce8ad11f0f668d9..ab170f9c677924e2be4f4995287e9699e1271ffc 100644
--- a/src/lib/audio/audio-effects.js
+++ b/src/lib/audio/audio-effects.js
@@ -34,9 +34,6 @@ class AudioEffects {
playbackRate = 1 / pitchRatio;
sampleCount = Math.floor(buffer.length / playbackRate);
break;
- case effectTypes.REVERSE:
- buffer.getChannelData(0).reverse();
- break;
}
if (window.OfflineAudioContext) {
this.audioContext = new window.OfflineAudioContext(1, sampleCount, buffer.sampleRate);
@@ -46,7 +43,24 @@ class AudioEffects {
const sampleScale = 44100 / buffer.sampleRate;
this.audioContext = new window.webkitOfflineAudioContext(1, sampleScale * sampleCount, 44100);
}
- this.buffer = buffer;
+
+ // For the reverse effect we need to manually reverse the data into a new audio buffer
+ // to prevent overwriting the original, so that the undo stack works correctly.
+ // Doing buffer.reverse() would mutate the original data.
+ if (name === effectTypes.REVERSE) {
+ const originalBufferData = buffer.getChannelData(0);
+ const newBuffer = this.audioContext.createBuffer(1, buffer.length, buffer.sampleRate);
+ const newBufferData = newBuffer.getChannelData(0);
+ const bufferLength = buffer.length;
+ for (let i = 0; i < bufferLength; i++) {
+ newBufferData[i] = originalBufferData[bufferLength - i - 1];
+ }
+ this.buffer = newBuffer;
+ } else {
+ // All other effects use the original buffer because it is not modified.
+ this.buffer = buffer;
+ }
+
this.source = this.audioContext.createBufferSource();
this.source.buffer = this.buffer;
this.source.playbackRate.value = playbackRate;
diff --git a/src/lib/libraries/extensions/translate.png b/src/lib/libraries/extensions/translate.png
index 3e25993021b71beb390b2f6b9865b566e88839a6..95961ae52fee6e27c5f7946c41a7e4fd1d22fe7a 100644
Binary files a/src/lib/libraries/extensions/translate.png and b/src/lib/libraries/extensions/translate.png differ
diff --git a/src/lib/make-toolbox-xml.js b/src/lib/make-toolbox-xml.js
index 1c2a0ae1936d2ef2d373ba87437bc696e80d3467..245c918e51e99de0991e05868741c24263d912e0 100644
--- a/src/lib/make-toolbox-xml.js
+++ b/src/lib/make-toolbox-xml.js
@@ -270,12 +270,12 @@ const looks = function (isStage, targetId) {
const sound = function (isStage, targetId) {
return `
<category name="%{BKY_CATEGORY_SOUND}" id="sound" colour="#D65CD6" secondaryColour="#BD42BD">
- <block id="${targetId}_sound_play" type="sound_play">
+ <block id="${targetId}_sound_playuntildone" type="sound_playuntildone">
<value name="SOUND_MENU">
<shadow type="sound_sounds_menu"/>
</value>
</block>
- <block id="${targetId}_sound_playuntildone" type="sound_playuntildone">
+ <block id="${targetId}_sound_play" type="sound_play">
<value name="SOUND_MENU">
<shadow type="sound_sounds_menu"/>
</value>