From 95ca40edb38fb946ec8c18b9bd4959ec998912aa Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Tue, 27 Jun 2017 10:22:10 -0400
Subject: [PATCH] Add new record button
---
src/components/asset-panel/asset-panel.css | 2 +-
.../asset-panel/icon--add-sound-lib.svg | Bin 0 -> 3340 bytes
.../asset-panel/icon--add-sound-record.svg | Bin 0 -> 2325 bytes
src/components/asset-panel/selector.css | 53 +++++++++++-------
src/components/asset-panel/selector.jsx | 35 ++++++++----
src/components/gui/gui.css | 3 +-
src/components/record-modal/record-modal.css | 6 +-
src/containers/costume-tab.jsx | 7 ++-
src/containers/sound-tab.jsx | 25 +++++++--
src/css/colors.css | 1 +
10 files changed, 90 insertions(+), 42 deletions(-)
create mode 100644 src/components/asset-panel/icon--add-sound-lib.svg
create mode 100644 src/components/asset-panel/icon--add-sound-record.svg
diff --git a/src/components/asset-panel/asset-panel.css b/src/components/asset-panel/asset-panel.css
index 8ff5ca4cb..25d13588d 100644
--- a/src/components/asset-panel/asset-panel.css
+++ b/src/components/asset-panel/asset-panel.css
@@ -6,7 +6,7 @@
flex-grow: 1;
border: 1px solid $ui-pane-border;
border-top-right-radius: $space;
- background: $ui-pane-gray;
+ background: white;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.85rem;
}
diff --git a/src/components/asset-panel/icon--add-sound-lib.svg b/src/components/asset-panel/icon--add-sound-lib.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1293940a90e2144058488f01201108bc8cc6724e
GIT binary patch
literal 3340
zcmbVP+iu%N5Pi>AY}uCt6<0g6_ds%hs&!smpg`IWP%Xw%EsKW4*#7*US?WS1QILiR
zVDWJ7b7pokdH3?LR!_}#w`w=jinOUzv$<^-tIgfC`unfzI#p`d%{Pnry4^I>YSUKl
zu3k-cPj~8hwdj`9ip}ForIyX=ZrQ;?mba%>^ZaZ3GOdg<ijATS?Bs+h1-F~sv|4uE
z<J<B0`T1EtTitH&#%zok!~9<4?aO+#x&N9V<($XmYjyQX;hFqY*Xn(<X}0sO-M&>H
z?wjs*shriUUfXO!exqtN@c2)=Y#vtgeY*O#eHib0ox0we>{i{nx!Sd#HVd`7Z8wu~
zkMs@~&F=PUwr%EJvp_kz<=&^BjLWBk)W_YGAo$ZGcWSkmR)5a#ni{3pb=&s7ly=h`
z-s*jE@%iIwy_UMmNBLcEKdm9%JT;qkvDoKc^6$<5*6i-P_OY&O;$&VTqov(;zS(_j
zw-3{*{9GgA*R@Bx%QI4S2x0&7W?*t)_KE5bQil5X#R}!UWb<S)^96$gqs8K`zFF<M
z&%BC|Jd-}D`C?I*E?n^IPJVs#-*DVpJ=!fcYw7F-!*nuizQb$@`Ed>=puvA69eoH)
z#*eH{fg=8?n*mBe``{fOH9Losi<W{@Ne5$-wK0w;YC^j>TcFnCfu5ku!6u)?1ewUu
z6A5gcHOyW`oru`w=nG0V1#5x&Oo5WI#js7;Bvv<8XB){zhOpD*$U5iM%xWOyTpkf5
zLbQRLvf2gmDI`RJ{Gv6<5Kv0lL9NIh&>PZlkWw&b@XTmLj$FMBLnCHHtaDD*xTx>~
zZEMH`l+TQk7E95@tY&5uwPAeV<kZkuK=3~0i0B8d2Pjfyl)%}LM*|qCdgDD=N<$b0
zaFLK;1ZqMeo6#NA!X=-B9eJIZQSs>1P1J#NB78yHIV5Cg(VYl3*zBEWzyu4)AZBzY
zN6H)ov>X#N+H0Ia_d*<i(p~Qj6WIZp;2;Mgp9Kt*(Xk}_h%R{UBVdC>5g054vNj<&
z2wNKxatII}uoNXji>yCK_uQ?@-ny10bX-h7yIGFc*A+IL@V?)0hbjB~@8mcdWOVl6
zKJo^wkw65?&}I<WIi?c`4AC=&0T_eEU^FmvO-cdGy6k|>Kp2CzAuAAstSN%59Y?}^
zj54q!ULbeC5CkRPyB?tM7~ryqV%&;vXfgUE`fzS~n_xYd*n7vG$PtspLSq?S(KldC
zE+GlXxfnItvp;}HJe1T8tg?v~a}MU?u<G?WfiV#S#v08RQ5bbOU|JX!?a?{bf~1b<
zqV4@4PNqI06g%|=IRlT$pU|uwhQ3eJIG1F1fi{u%`FO{eG?p36QDU4S9*be<JDIS}
z`oL{4MG$+&9P^f`^;ViDb?ucyb|r0e*OXeoU}CHf7Y8i(k}d->y2B~?qhw^PNN^mv
zIt&AGVUy$}RNO=8AQ54oMIfk)EEbG6Q;?=R%s=+$3`^5HQ%nUc=@=Dx&<QKG@Dc<T
zy%U6FDY-1A7=Ww^#Z_VqJ(7~)r*J}CV&$?F2MS=sK33;#p@~QPOK9Lr9$+4UfG{!i
z)}YG!G|9)30nAwg9g!nXMkWqkGY*cT8u$<hjsiIo5Q=Bp%i$=%bqu;VGjOOB8k5Gl
zhwcD6C3^xBa>TJH)<8X>QP3GC%AjK7`Ixa?12|N=0+JM$UOOChA_S6Skurn`V^`vL
zHt!pijqCNiLlb<G-Wj+N#eiKag*-I)a~2F37JiIj{pIDCOLvRIMP-DOtG|i8Ia~mz
z)q%_V`{Ch6$OnlU7vtu3{y43+axXiB|7};e&G-1XH}d&~g-1r+fXsd7AC~jS=KB`=
pxfwUYO~Q;2s@!w`hndOv?sB*nKYsPY7vLFid?`OB@*j??{{WhY>6!ol
literal 0
HcmV?d00001
diff --git a/src/components/asset-panel/icon--add-sound-record.svg b/src/components/asset-panel/icon--add-sound-record.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b82e7a412b1360dc05f7bf464cbda917b1023e64
GIT binary patch
literal 2325
zcmbVO+mfR;5PjdTP?VRQ3KEhK2ByGU6_Uw|Q<bVoK7bgFO~wN*U~PYXx^=<c$$Be^
zU*NP_r@K$Lkjqb(w*xtuaq5P?qLK?rOurr4uHRMkkKdnIPRTSkecK#{-c+<7=%@9E
zaysqExohV=?8%Q8O7^DP?dOWB1ktH8=O2elMFkN==0qi6y9SYzK-hk&=zgA$k8ylH
zpZPiA!?=r;5F!S8@A7y#bp7ks9A!}yv0bI>4+MVYcZ`u=OmD_!9>z!V{A%Xyp6G-t
z@-ZpIs(2ub+(i6y*qgVm@#XUE@D@*Q4`ZHk?&gD8k7hfJE$OyHU&hYlBDQAQuIte>
zvuQz(dGCYrGPX;>>t$M_1s=|_BVAk3-<q9apv5$g!>iS{HvzGrE+sGB;ef*9BEGZn
z^8vig$@D|p`r@qsj`k-rz0SjtF(y?mE}4R!&STS0FT?m&QTuv;j6bq8;h;ABBEnXp
z@ZjNw@`m;#+4JzZZ`sdn2m0RQgc0(Tg}Os{Luwf(w&|w%T~u_!U+Ic+EnpL7a3^%4
zm(Z!qzY*IJzo*9T-eFc^VGeKaMGBnZSsojh259oHQt%=dX_W9R(~4{YhG(w9P%j3>
zbMz=Uv@MOK=BWgjaU}~2wLtfjtHR*~aRMv|6;E+<fP$}(eB&{2;cD$6I41y8p5k6e
z5ScO#GXP9bE4mi2h-q+%S%f4ZN8}Aq+oGr)=O>&^7-u)H-|M=_o}MTSK1$&RKdAHm
zc~vXt8V+_OGY}2pYyvKLrVvA5k)eY(pn5AUt_BJDqXYCzV#znyGSrJfg3hiKOQ56+
z5h4V<ff_Xu`t@3K{PZjs`s$Z0U4X)|f#Po2r{gz=^gVZgo0Ts=lpC;@qgEVhv+|_a
zBxc7^;;baaE%xoN7YA@e2f;NaTe#_f#v_|YwZw5)pmd8U2kyK=J6Pas_sWE?aFjIH
zFqV;Aaj^oJ`8qtrE+sZ`Z-8;lt-s&C;E?!@!G(vfIJVX23SsU3C3O@4rXVb9Pal%M
zVxN65c;O(NfCO>wtgvD1obEUCt^ePAyN}opcfK!BP55Zqh5~p97ePhCN%HqZxEWON
zU~og4ZF8*X=)R8bKC$M%h7PWEXaDvQ#3Ok<hAI+dqavslFRJH#b2R_%B!5YxBRH}m
ef>i$_O&Ra*r+atts|)`yeqmUEeJSyu$NFy}iyw*r
literal 0
HcmV?d00001
diff --git a/src/components/asset-panel/selector.css b/src/components/asset-panel/selector.css
index 3050409c1..ef5bba68d 100644
--- a/src/components/asset-panel/selector.css
+++ b/src/components/asset-panel/selector.css
@@ -1,27 +1,48 @@
-/* Need to use a fixed height for the new container to make list scrollable */
-$new-height: 60px;
+@import "../../css/colors.css";
.wrapper {
- width: 250px;
+ width: 150px;
position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ background: $ui-background-blue;
}
-.new-item {
- background: white;
- border-bottom: 1px solid #ddd;
- height: $new-height;
+.new-buttons {
display: flex;
+ flex-direction: column;
align-items: center;
- padding-left: 1.75rem;
+ justify-content: space-around;
+ margin: 1.25rem 0;
+ color: $motion-primary;
+}
+
+.new-button {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ font-size: 0.6rem;
cursor: pointer;
- font-size: 0.85rem;
+ transition: 0.2s;
+}
+
+.new-button:hover {
+ transform: scale(1.2);
+}
+
+.new-button + .new-button {
+ margin-top: 1.25rem;
+}
+
+.new-button-icon + .new-button-label {
+ margin-top: 0.5rem;
}
.list-area {
- position: absolute;
- width: 100%;
- top: 60px;
- height: calc(100% - $new-height);
+ /* Must have some height (recalculated by flex-grow) in order to scroll */
+ height: 0;
+ flex-grow: 1;
overflow-y: scroll;
}
@@ -30,9 +51,3 @@ $new-height: 60px;
min-height: 5rem;
margin: 1rem auto;
}
-
-.delete-button {
- position: absolute;
- top: 2px;
- right: 2px;
-}
diff --git a/src/components/asset-panel/selector.jsx b/src/components/asset-panel/selector.jsx
index 0ddc2bb51..a9c448751 100644
--- a/src/components/asset-panel/selector.jsx
+++ b/src/components/asset-panel/selector.jsx
@@ -8,22 +8,15 @@ const styles = require('./selector.css');
const Selector = props => {
const {
+ buttons,
items,
- newText,
selectedItemIndex,
onDeleteClick,
- onItemClick,
- onNewClick
+ onItemClick
} = props;
return (
<Box className={styles.wrapper}>
- <Box
- className={styles.newItem}
- onClick={onNewClick}
- >
- {newText}
- </Box>
<Box className={styles.listArea}>
{items.map((item, index) => (
<SpriteSelectorItem
@@ -39,19 +32,39 @@ const Selector = props => {
/>
))}
</Box>
+ <Box className={styles.newButtons}>
+ {buttons.map(({text, img, onClick}, index) => (
+ <Box
+ className={styles.newButton}
+ key={index}
+ onClick={onClick}
+ >
+ <img
+ className={styles.newButtonIcon}
+ src={img}
+ />
+ <Box className={styles.newButtonLabel}>
+ {text}
+ </Box>
+ </Box>
+ ))}
+ </Box>
</Box>
);
};
Selector.propTypes = {
+ buttons: PropTypes.arrayOf(PropTypes.shape({
+ text: PropTypes.string.isRequired,
+ img: PropTypes.string.isRequired,
+ onClick: PropTypes.func.isRequired
+ })),
items: PropTypes.arrayOf(PropTypes.shape({
url: PropTypes.string,
name: PropTypes.string.isRequired
})),
- newText: PropTypes.string.isRequired,
onDeleteClick: PropTypes.func.isRequired,
onItemClick: PropTypes.func.isRequired,
- onNewClick: PropTypes.func,
selectedItemIndex: PropTypes.number.isRequired
};
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index 821f55014..de9c7f9ec 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -1,4 +1,5 @@
@import "../../css/units.css";
+@import "../../css/colors.css";
.page-wrapper {
height: 100%;
@@ -6,7 +7,7 @@
.body-wrapper {
height: calc(100% - $menu-bar-height);
- background-color: #e8edf1;
+ background-color: $ui-background-blue;
}
.flex-wrapper {
diff --git a/src/components/record-modal/record-modal.css b/src/components/record-modal/record-modal.css
index 0f82c6594..b880daf78 100644
--- a/src/components/record-modal/record-modal.css
+++ b/src/components/record-modal/record-modal.css
@@ -74,7 +74,7 @@ $sides: 5rem;
}
.body {
- background: $ui-pane-gray;
+ background: white;
padding: 1.5rem 2.25rem;
}
@@ -84,8 +84,8 @@ $sides: 5rem;
}
.meter-container, .waveform-container {
- background: white;
- border: 1px solid #ddd;
+ background: $ui-pane-gray;
+ border: 1px solid $ui-pane-border;
border-radius: 5px;
padding: 3px;
diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx
index af73857e7..855c1d266 100644
--- a/src/containers/costume-tab.jsx
+++ b/src/containers/costume-tab.jsx
@@ -5,6 +5,7 @@ const bindAll = require('lodash.bindall');
const VM = require('scratch-vm');
const AssetPanel = require('../components/asset-panel/asset-panel.jsx');
+const addCostumeIcon = require('../components/asset-panel/icon--add-sound-lib.svg');
const {connect} = require('react-redux');
@@ -64,12 +65,16 @@ class CostumeTab extends React.Component {
return (
<AssetPanel
+ buttons={[{
+ text: addText,
+ img: addCostumeIcon,
+ onClick: addFunc
+ }]}
items={target.costumes || []}
newText={addText}
selectedItemIndex={this.state.selectedCostumeIndex}
onDeleteClick={this.handleDeleteCostume}
onItemClick={this.handleSelectCostume}
- onNewClick={addFunc}
/>
);
}
diff --git a/src/containers/sound-tab.jsx b/src/containers/sound-tab.jsx
index 1828caf92..e7e780d0b 100644
--- a/src/containers/sound-tab.jsx
+++ b/src/containers/sound-tab.jsx
@@ -6,6 +6,9 @@ const VM = require('scratch-vm');
const AssetPanel = require('../components/asset-panel/asset-panel.jsx');
const soundIcon = require('../components/asset-panel/icon--sound.svg');
+const addSoundFromLibraryIcon = require('../components/asset-panel/icon--add-sound-lib.svg');
+const addSoundFromRecordingIcon = require('../components/asset-panel/icon--add-sound-record.svg');
+
const RecordModal = require('./record-modal.jsx');
const {connect} = require('react-redux');
@@ -53,7 +56,9 @@ class SoundTab extends React.Component {
const {
editingTarget,
sprites,
- stage
+ stage,
+ onNewSoundFromLibraryClick,
+ onNewSoundFromRecordingClick
} = this.props;
const target = editingTarget && sprites[editingTarget] ? sprites[editingTarget] : stage;
@@ -71,15 +76,22 @@ class SoundTab extends React.Component {
return (
<AssetPanel
+ buttons={[{
+ text: 'Record Sound',
+ img: addSoundFromRecordingIcon,
+ onClick: onNewSoundFromRecordingClick
+ }, {
+ text: 'Add Sound',
+ img: addSoundFromLibraryIcon,
+ onClick: onNewSoundFromLibraryClick
+ }]}
items={sounds.map(sound => ({
url: soundIcon,
...sound
}))}
- newText={'Add Sound'}
selectedItemIndex={this.state.selectedSoundIndex}
onDeleteClick={this.handleDeleteSound}
onItemClick={this.handleSelectSound}
- onNewClick={this.props.onSoundRecorder}
>
{this.props.soundRecorderVisible ? (
<RecordModal />
@@ -91,7 +103,8 @@ class SoundTab extends React.Component {
SoundTab.propTypes = {
editingTarget: PropTypes.string,
- onSoundRecorder: PropTypes.func.isRequired,
+ onNewSoundFromLibraryClick: PropTypes.func.isRequired,
+ onNewSoundFromRecordingClick: PropTypes.func.isRequired,
soundRecorderVisible: PropTypes.bool,
sprites: PropTypes.shape({
id: PropTypes.shape({
@@ -116,11 +129,11 @@ const mapStateToProps = state => ({
});
const mapDispatchToProps = dispatch => ({
- onNewSoundClick: e => {
+ onNewSoundFromLibraryClick: e => {
e.preventDefault();
dispatch(openSoundLibrary());
},
- onSoundRecorder: () => {
+ onNewSoundFromRecordingClick: () => {
dispatch(openSoundRecorder());
}
});
diff --git a/src/css/colors.css b/src/css/colors.css
index 15bd89d8e..036efe3f2 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -1,5 +1,6 @@
$ui-pane-border: #D9D9D9;
$ui-pane-gray: #F9F9F9;
+$ui-background-blue: #e8edf1;
$motion-primary: #4C97FF;
$motion-tertiary: #3373CC;
--
GitLab