- 
+ {locales[this.props.currentLocale].name}
+ 
)}
+ {(this.props.canChangeTheme) && (
-
-
-
+
)}
-
- 
-
-
+
{/* show the proper UI in the account menu, given whether the user is
@@ -856,6 +880,7 @@ MenuBar.propTypes = {
authorUsername: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
autoUpdateProject: PropTypes.func,
canChangeLanguage: PropTypes.bool,
+ canChangeTheme: PropTypes.bool,
canCreateCopy: PropTypes.bool,
canCreateNew: PropTypes.bool,
canEditTitle: PropTypes.bool,
@@ -865,6 +890,7 @@ MenuBar.propTypes = {
canShare: PropTypes.bool,
className: PropTypes.string,
confirmReadyToReplaceProject: PropTypes.func,
+ currentLocale: PropTypes.string.isRequired,
editMenuOpen: PropTypes.bool,
enableCommunity: PropTypes.bool,
fileMenuOpen: PropTypes.bool,
@@ -878,13 +904,13 @@ MenuBar.propTypes = {
locale: PropTypes.string.isRequired,
loginMenuOpen: PropTypes.bool,
logo: PropTypes.string,
+ onChangeTheme: PropTypes.func,
modeMenuOpen: PropTypes.bool,
modeNow: PropTypes.bool,
mode220022BC: PropTypes.bool,
mode1920: PropTypes.bool,
mode1990: PropTypes.bool,
mode2020: PropTypes.bool,
-
onClickAbout: PropTypes.oneOfType([
PropTypes.func, // button mode: call this callback when the About button is clicked
PropTypes.arrayOf( // menu mode: list of items in the About menu
@@ -917,6 +943,8 @@ MenuBar.propTypes = {
onRequestCloseFile: PropTypes.func,
onRequestCloseLanguage: PropTypes.func,
onRequestCloseLogin: PropTypes.func,
+ onRequestCloseTheme: PropTypes.func,
+ onRequestOpenTheme: PropTypes.func,
onRequestCloseMode: PropTypes.func,
onSeeCommunity: PropTypes.func,
onShare: PropTypes.func,
@@ -927,6 +955,8 @@ MenuBar.propTypes = {
sessionExists: PropTypes.bool,
shouldSaveBeforeTransition: PropTypes.func,
showComingSoon: PropTypes.bool,
+ theme: PropTypes.string,
+ themeMenuOpen: PropTypes.bool,
userOwnsProject: PropTypes.bool,
username: PropTypes.string,
vm: PropTypes.instanceOf(VM).isRequired
@@ -943,6 +973,7 @@ const mapStateToProps = (state, ownProps) => {
return {
aboutMenuOpen: aboutMenuOpen(state),
accountMenuOpen: accountMenuOpen(state),
+ currentLocale: state.locales.locale,
fileMenuOpen: fileMenuOpen(state),
editMenuOpen: editMenuOpen(state),
isRtl: state.locales.isRtl,
@@ -954,6 +985,8 @@ const mapStateToProps = (state, ownProps) => {
modeMenuOpen: modeMenuOpen(state),
projectTitle: state.scratchGui.projectTitle,
sessionExists: state.session && typeof state.session.session !== 'undefined',
+ theme: state.scratchGui.theme.theme,
+ themeMenuOpen: themeMenuOpen(state),
username: user ? user.username : null,
userOwnsProject: ownProps.authorUsername && user &&
(ownProps.authorUsername === user.username),
@@ -983,11 +1016,14 @@ const mapDispatchToProps = dispatch => ({
onRequestCloseMode: () => dispatch(closeModeMenu()),
onRequestOpenAbout: () => dispatch(openAboutMenu()),
onRequestCloseAbout: () => dispatch(closeAboutMenu()),
+ onRequestOpenTheme: () => dispatch(openThemeMenu()),
+ onRequestCloseTheme: () => dispatch(closeThemeMenu()),
onClickNew: needSave => dispatch(requestNewProject(needSave)),
onClickRemix: () => dispatch(remixProject()),
onClickSave: () => dispatch(manualUpdateProject()),
onClickSaveAsCopy: () => dispatch(saveProjectAsCopy()),
onSeeCommunity: () => dispatch(setPlayer(true)),
+ onChangeTheme: theme => dispatch(setTheme(theme)),
onSetTimeTravelMode: mode => dispatch(setTimeTravel(mode))
});
diff --git a/src/components/menu-bar/theme-menu.css b/src/components/menu-bar/theme-menu.css
new file mode 100644
index 000000000..7c79945c2
--- /dev/null
+++ b/src/components/menu-bar/theme-menu.css
@@ -0,0 +1,52 @@
+@import "../../css/colors.css";
+
+.theme-label {
+ max-width: 7rem;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ margin: 0 .5rem 0 .25rem;
+}
+
+[dir="rtl"] .theme-label {
+ margin: 0 .25rem 0 .5rem;
+}
+
+.theme-icon {
+ height: 1.5rem;
+ vertical-align: middle;
+ margin: 0 .25rem 0 0;
+}
+
+[dir="rtl"] .theme-icon {
+ margin: 0 0 0 .25rem;
+}
+
+.theme-option {
+ display: flex;
+ align-items: center;
+ gap: .5rem;
+}
+
+.theme-active {
+ background-color: $ui-black-transparent;
+}
+
+.check {
+ margin: 0 .25rem 0 0;
+ visibility: hidden;
+}
+
+[dir="rtl"] .check {
+ margin: 0 0 0 .25rem;
+}
+
+.selected {
+ visibility: visible;
+}
+
+@media only screen and (max-width: 1024px) {
+ .theme-label {
+ display: none;
+ }
+}
diff --git a/src/components/menu-bar/theme-menu.jsx b/src/components/menu-bar/theme-menu.jsx
new file mode 100644
index 000000000..afd58aa53
--- /dev/null
+++ b/src/components/menu-bar/theme-menu.jsx
@@ -0,0 +1,105 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import {defineMessages, FormattedMessage, injectIntl, intlShape} from 'react-intl';
+import classNames from 'classnames';
+
+import MenuBarMenu from './menu-bar-menu.jsx';
+import {DEFAULT_THEME, HIGH_CONTRAST_THEME, themeMap} from '../../lib/themes';
+import {MenuItem, MenuSection} from '../menu/menu.jsx';
+
+import dropdownCaret from './dropdown-caret.svg';
+import check from './check.svg';
+
+import styles from './theme-menu.css';
+import menuBarStyles from './menu-bar.css';
+
+const messages = defineMessages({
+ colorTheme: {
+ id: 'gui.theme.colorTheme',
+ defaultMessage: 'Color theme',
+ description: 'label for selecting the site\'s color theme'
+ }
+});
+
+const ThemeMenuItem = props => {
+ const themeInfo = themeMap[props.theme];
+
+ return (
+ );
+};
+
+ThemeMenuItem.propTypes = {
+ isRtl: PropTypes.bool,
+ isSelected: PropTypes.bool,
+ onClick: PropTypes.func,
+ theme: PropTypes.string
+};
+
+const ThemeMenu = props => {
+ const enabledThemes = [DEFAULT_THEME, HIGH_CONTRAST_THEME];
+ const themeInfo = themeMap[props.theme];
+
+ return (
+
+
+
+
+ 
+
+
+
+ {enabledThemes.map(enabledTheme => (
+ props.onChange(enabledTheme)}
+ theme={enabledTheme}
+ />)
+ )}
+
+
+
);
+};
+
+ThemeMenu.propTypes = {
+ className: PropTypes.string,
+ intl: intlShape.isRequired,
+ isRtl: PropTypes.bool,
+ onChange: PropTypes.func,
+ onRequestClose: PropTypes.func,
+ onRequestOpen: PropTypes.func,
+ theme: PropTypes.string,
+ themeMenuOpen: PropTypes.bool
+};
+
+export default injectIntl(ThemeMenu);
diff --git a/src/components/menu/menu.css b/src/components/menu/menu.css
index c48f0d25d..e5d0a66ef 100644
--- a/src/components/menu/menu.css
+++ b/src/components/menu/menu.css
@@ -4,7 +4,7 @@
position: absolute;
border: 1px solid $ui-black-transparent;
border-radius: 0 0 8px 8px;
- background-color: $motion-primary;
+ background-color: $looks-secondary;
padding: 0;
margin: 0;
min-width: 186px;
diff --git a/src/components/modal/modal.css b/src/components/modal/modal.css
index 1ed2425ce..6beaaf8f6 100644
--- a/src/components/modal/modal.css
+++ b/src/components/modal/modal.css
@@ -67,7 +67,7 @@ $sides: 20rem;
box-sizing: border-box;
width: 100%;
- background-color: $motion-primary;
+ background-color: $looks-secondary;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1rem;
diff --git a/src/components/monitor/default-monitor.jsx b/src/components/monitor/default-monitor.jsx
index 992014775..3368519dd 100644
--- a/src/components/monitor/default-monitor.jsx
+++ b/src/components/monitor/default-monitor.jsx
@@ -10,7 +10,10 @@ const DefaultMonitor = ({categoryColor, label, value}) => (
{value}
@@ -19,7 +22,10 @@ const DefaultMonitor = ({categoryColor, label, value}) => (
);
DefaultMonitor.propTypes = {
- categoryColor: PropTypes.string.isRequired,
+ categoryColor: PropTypes.shape({
+ background: PropTypes.string.isRequired,
+ text: PropTypes.string.isRequired
+ }).isRequired,
label: PropTypes.string.isRequired,
value: PropTypes.oneOfType([
PropTypes.string,
diff --git a/src/components/monitor/large-monitor.jsx b/src/components/monitor/large-monitor.jsx
index 5101ad0a5..64ac32640 100644
--- a/src/components/monitor/large-monitor.jsx
+++ b/src/components/monitor/large-monitor.jsx
@@ -6,7 +6,10 @@ const LargeMonitor = ({categoryColor, value}) => (
{value}
@@ -14,7 +17,10 @@ const LargeMonitor = ({categoryColor, value}) => (
);
LargeMonitor.propTypes = {
- categoryColor: PropTypes.string,
+ categoryColor: PropTypes.shape({
+ background: PropTypes.string.isRequired,
+ text: PropTypes.string.isRequired
+ }).isRequired,
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
diff --git a/src/components/monitor/list-monitor-scroller.jsx b/src/components/monitor/list-monitor-scroller.jsx
index cfcd6a248..ea0de244e 100644
--- a/src/components/monitor/list-monitor-scroller.jsx
+++ b/src/components/monitor/list-monitor-scroller.jsx
@@ -41,7 +41,10 @@ class ListMonitorScroller extends React.Component {
{this.props.draggable && this.props.activeIndex === index ? (
@@ -51,6 +54,7 @@ class ListMonitorScroller extends React.Component {
autoComplete={false}
className={classNames(styles.listInput, 'no-drag')}
spellCheck={false}
+ style={{color: this.props.categoryColor.text}}
type="text"
value={this.props.activeValue}
onBlur={this.props.onDeactivate}
@@ -97,7 +101,10 @@ class ListMonitorScroller extends React.Component {
ListMonitorScroller.propTypes = {
activeIndex: PropTypes.number,
activeValue: PropTypes.string,
- categoryColor: PropTypes.string,
+ categoryColor: PropTypes.shape({
+ background: PropTypes.string.isRequired,
+ text: PropTypes.string.isRequired
+ }).isRequired,
draggable: PropTypes.bool,
height: PropTypes.number,
onActivate: PropTypes.func,
diff --git a/src/components/monitor/list-monitor.jsx b/src/components/monitor/list-monitor.jsx
index e3422e5b3..4bd9a2563 100644
--- a/src/components/monitor/list-monitor.jsx
+++ b/src/components/monitor/list-monitor.jsx
@@ -54,7 +54,10 @@ const ListMonitor = ({draggable, label, width, height, value, onResizeMouseDown,
ListMonitor.propTypes = {
activeIndex: PropTypes.number,
- categoryColor: PropTypes.string.isRequired,
+ categoryColor: PropTypes.shape({
+ background: PropTypes.string.isRequired,
+ text: PropTypes.string.isRequired
+ }).isRequired,
draggable: PropTypes.bool.isRequired,
height: PropTypes.number,
label: PropTypes.string.isRequired,
diff --git a/src/components/monitor/monitor.css b/src/components/monitor/monitor.css
index 0947db638..a4011457a 100644
--- a/src/components/monitor/monitor.css
+++ b/src/components/monitor/monitor.css
@@ -42,7 +42,6 @@
align-items: center;
min-width: 40px;
text-align: center;
- color: white;
margin: 0 5px;
border-radius: calc($space / 2);
padding: 0 2px;
@@ -55,7 +54,6 @@
min-width: 3rem;
padding: 0.1rem 0.25rem;
text-align: center;
- color: white;
font-size: 1rem;
white-space: pre-wrap;
transform: translateZ(0); /* Fixes flickering in Safari */
@@ -115,7 +113,6 @@
.list-value {
min-width: 40px;
text-align: left;
- color: white;
margin: 0 3px;
border-radius: calc($space / 2);
border: 1px solid $ui-black-transparent;
@@ -161,7 +158,6 @@
padding: 3px 5px;
border: 0;
background: none;
- color: $ui-white;
outline: none;
font-size: 0.75rem;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -174,7 +170,6 @@
padding: 0;
padding-right: 5px;
cursor: pointer;
- color: $ui-white;
}
.add-button {
diff --git a/src/components/monitor/monitor.jsx b/src/components/monitor/monitor.jsx
index ddb2f2e57..d9ceb9269 100644
--- a/src/components/monitor/monitor.jsx
+++ b/src/components/monitor/monitor.jsx
@@ -10,17 +10,19 @@ import DefaultMonitor from './default-monitor.jsx';
import LargeMonitor from './large-monitor.jsx';
import SliderMonitor from '../../containers/slider-monitor.jsx';
import ListMonitor from '../../containers/list-monitor.jsx';
+import {getColorsForTheme} from '../../lib/themes/index.js';
import styles from './monitor.css';
-const categories = {
- data: '#FF8C1A',
- sensing: '#5CB1D6',
- sound: '#CF63CF',
- looks: '#9966FF',
- motion: '#4C97FF',
- list: '#FC662C',
- extension: '#0FBD8C'
+// Map category name to color name used in scratch-blocks Blockly.Colours
+const categoryColorMap = {
+ data: 'data',
+ sensing: 'sensing',
+ sound: 'sounds',
+ looks: 'looks',
+ motion: 'motion',
+ list: 'data_lists',
+ extension: 'pen'
};
const modes = {
@@ -30,6 +32,14 @@ const modes = {
list: ListMonitor
};
+const getCategoryColor = (theme, category) => {
+ const colors = getColorsForTheme(theme);
+ return {
+ background: colors[categoryColorMap[category]].primary,
+ text: colors.text
+ };
+};
+
const MonitorComponent = props => (
(
onDoubleClick={props.mode === 'list' || !props.draggable ? null : props.onNextMode}
>
{React.createElement(modes[props.mode], {
- categoryColor: categories[props.category],
+ categoryColor: getCategoryColor(props.theme, props.category),
...props
})}
@@ -122,12 +132,10 @@ const MonitorComponent = props => (
);
-MonitorComponent.categories = categories;
-
const monitorModes = Object.keys(modes);
MonitorComponent.propTypes = {
- category: PropTypes.oneOf(Object.keys(categories)),
+ category: PropTypes.oneOf(Object.keys(categoryColorMap)),
componentRef: PropTypes.func.isRequired,
draggable: PropTypes.bool.isRequired,
label: PropTypes.string.isRequired,
@@ -140,7 +148,8 @@ MonitorComponent.propTypes = {
onSetModeToDefault: PropTypes.func,
onSetModeToLarge: PropTypes.func,
onSetModeToSlider: PropTypes.func,
- onSliderPromptOpen: PropTypes.func
+ onSliderPromptOpen: PropTypes.func,
+ theme: PropTypes.string.isRequired
};
MonitorComponent.defaultProps = {
diff --git a/src/components/monitor/slider-monitor.jsx b/src/components/monitor/slider-monitor.jsx
index 0271b140a..2bda8f593 100644
--- a/src/components/monitor/slider-monitor.jsx
+++ b/src/components/monitor/slider-monitor.jsx
@@ -12,7 +12,10 @@ const SliderMonitor = ({categoryColor, isDiscrete, label, min, max, value, onSli
{value}
@@ -33,7 +36,10 @@ const SliderMonitor = ({categoryColor, isDiscrete, label, min, max, value, onSli
);
SliderMonitor.propTypes = {
- categoryColor: PropTypes.string.isRequired,
+ categoryColor: PropTypes.shape({
+ background: PropTypes.string.isRequired,
+ text: PropTypes.string.isRequired
+ }).isRequired,
isDiscrete: PropTypes.bool,
label: PropTypes.string.isRequired,
max: PropTypes.number,
diff --git a/src/components/prompt/prompt.css b/src/components/prompt/prompt.css
index c12afc6b7..71fb7fac7 100644
--- a/src/components/prompt/prompt.css
+++ b/src/components/prompt/prompt.css
@@ -64,8 +64,8 @@
}
.button-row button.ok-button {
- background: $motion-primary;
- border: $motion-primary;
+ background: $looks-secondary;
+ border: $looks-secondary;
color: white;
}
diff --git a/src/components/question/question.css b/src/components/question/question.css
index a0f8116ed..ca5c65913 100644
--- a/src/components/question/question.css
+++ b/src/components/question/question.css
@@ -34,7 +34,7 @@
border-radius: 100%;
color: white;
- background: $motion-primary;
+ background: $looks-secondary;
}
[dir="ltr"] .question-submit-button {
@@ -60,7 +60,7 @@
}
.question-input > input:focus {
- box-shadow: 0px 0px 0px 3px $motion-transparent;
+ box-shadow: 0px 0px 0px 3px $looks-transparent;
}
.question-submit-button-icon {
diff --git a/src/components/record-modal/icon--back.svg b/src/components/record-modal/icon--back.svg
index 47d09bc7f..aff0c4f68 100644
--- a/src/components/record-modal/icon--back.svg
+++ b/src/components/record-modal/icon--back.svg
@@ -5,7 +5,7 @@
-
+
- 
-
-
- 
-
-
+
+
);
header = (
-
);
header = (
diff --git a/src/components/stage-selector/stage-selector.css b/src/components/stage-selector/stage-selector.css
index 742898bd3..f93a0c344 100644
--- a/src/components/stage-selector/stage-selector.css
+++ b/src/components/stage-selector/stage-selector.css
@@ -26,12 +26,12 @@ $header-height: calc($stage-menu-height - 2px);
.stage-selector.is-selected {
border-top-left-radius: .625rem;
border-top-right-radius: .625rem;
- border-color: $motion-primary;
- box-shadow: 0px 0px 0px 4px $motion-transparent;
+ border-color: $looks-secondary;
+ box-shadow: 0px 0px 0px 4px $looks-transparent;
}
.stage-selector:hover {
- border-color: $motion-primary;
+ border-color: $looks-secondary;
}
.header {
@@ -60,7 +60,7 @@ $header-height: calc($stage-menu-height - 2px);
}
.stage-selector.is-selected .header {
- background-color: $motion-primary;
+ background-color: $looks-secondary;
}
.stage-selector.is-selected .header-title {
diff --git a/src/components/stage/stage.css b/src/components/stage/stage.css
index cb8b4f630..a799e05ce 100644
--- a/src/components/stage/stage.css
+++ b/src/components/stage/stage.css
@@ -108,8 +108,8 @@ stage doesn't "spill" out from under its rounded corners. instead, shift these o
}
.frame {
- background: $motion-transparent;
- border: 2px solid $motion-primary;
+ background: $looks-transparent;
+ border: 2px solid $looks-secondary;
border-radius: 0.5rem;
animation-name: flash;
animation-duration: 0.75s;
diff --git a/src/components/stop-all/stop-all.css b/src/components/stop-all/stop-all.css
index da0bcc7b3..ab89a5c70 100644
--- a/src/components/stop-all/stop-all.css
+++ b/src/components/stop-all/stop-all.css
@@ -10,7 +10,7 @@
}
.stop-all:hover {
- background-color: $motion-light-transparent;
+ background-color: $looks-light-transparent;
}
.stop-all {
diff --git a/src/components/tag-button/tag-button.css b/src/components/tag-button/tag-button.css
index b77004513..83c9ee9ca 100644
--- a/src/components/tag-button/tag-button.css
+++ b/src/components/tag-button/tag-button.css
@@ -3,7 +3,7 @@
.tag-button {
padding: .625rem 1rem;
- background: $motion-primary;
+ background: $looks-secondary;
border-radius: 1.375rem;
color: $ui-white;
height: $library-filter-bar-height;
diff --git a/src/components/telemetry-modal/telemetry-modal.css b/src/components/telemetry-modal/telemetry-modal.css
index 73f2d6a1c..d94f2f00c 100644
--- a/src/components/telemetry-modal/telemetry-modal.css
+++ b/src/components/telemetry-modal/telemetry-modal.css
@@ -35,7 +35,7 @@ $ui-gray: hsla(0, 0%, 95%, 1);
.illustration {
width: 100%;
height: 123px;
- background-color: $motion-primary;
+ background-color: $looks-secondary;
background-image: url('./telemetry-modal-header.png');
background-size: cover;
}
@@ -46,7 +46,7 @@ $ui-gray: hsla(0, 0%, 95%, 1);
}
.privacy-policy-link {
- color: $motion-primary;
+ color: $looks-secondary;
text-decoration: none;
}
@@ -92,14 +92,14 @@ $ui-gray: hsla(0, 0%, 95%, 1);
.radio-buttons input[type="radio"]:checked {
transition: all .25s ease;
background-color: $ui-white;
- border: 1px solid $motion-primary;
+ border: 1px solid $looks-secondary;
}
.radio-buttons input[type="radio"]:checked::after {
display: block;
margin: 0.125rem;
border-radius: 50%;
- background-color: $motion-primary;
+ background-color: $looks-secondary;
width: .625rem;
height: .625rem;
content: "";
@@ -127,11 +127,11 @@ $ui-gray: hsla(0, 0%, 95%, 1);
}
.button-row button {
- border: 1px solid $motion-primary;
+ border: 1px solid $looks-secondary;
border-radius: 0.25rem;
padding: 0.5rem 1.5rem;
color: white;
- background: $motion-primary;
+ background: $looks-secondary;
font-weight: bold;
font-size: .875rem;
cursor: pointer;
@@ -139,7 +139,7 @@ $ui-gray: hsla(0, 0%, 95%, 1);
.button-row button:hover {
background: $extensions-primary;
- box-shadow: 0 0 0 6px $motion-transparent;
+ box-shadow: 0 0 0 6px $looks-transparent;
}
.button-row button:disabled {
diff --git a/src/components/toggle-buttons/toggle-buttons.css b/src/components/toggle-buttons/toggle-buttons.css
new file mode 100644
index 000000000..d5b54e51b
--- /dev/null
+++ b/src/components/toggle-buttons/toggle-buttons.css
@@ -0,0 +1,85 @@
+@import "../../css/units.css";
+@import "../../css/colors.css";
+
+.row {
+ display: flex;
+ flex-direction: row;
+}
+
+.button {
+ margin: 0;
+ border: 1px solid $ui-black-transparent;
+ background: none;
+ outline: none;
+ cursor: pointer;
+ user-select: none;
+ position: relative;
+ width: 34px;
+ height: 34px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.button > img {
+ display: block;
+ transition: transform 0.1s;
+ filter: grayscale(100%) opacity(.5);
+}
+
+.button:not(:last-child) {
+ border-right: none;
+}
+
+[dir="rtl"] .button:not(:last-child) {
+ border-left: none;
+ border-right: 1px solid $ui-black-transparent;
+}
+
+.button:focus::before {
+ content: "";
+ position: absolute;
+ top: -1px;
+ right: -1px;
+ bottom: -1px;
+ left: -1px;
+ border: 1px solid $looks-secondary;
+}
+
+/* round corners for first and last buttons */
+
+.button:first-child,
+[dir="rtl"] .button:last-child,
+.button:first-child:focus::before,
+[dir="rtl"] .button:last-child:focus::before {
+ border-radius: $form-radius 0 0 $form-radius;
+}
+
+.button:last-child,
+[dir="rtl"] .button:first-child,
+.button:last-child:focus::before,
+[dir="rtl"] .button:first-child:focus::before {
+ border-radius: 0 $form-radius $form-radius 0;
+}
+
+/* selected button styling */
+
+.button[aria-pressed='true'] {
+ background-color: $looks-light-transparent;
+}
+
+.button[aria-pressed='true'] > img {
+ filter: none;
+}
+
+/* pressed button styling */
+
+.button:active {
+ background-color: $looks-transparent;
+}
+
+/* disabled styling */
+
+.disabled .button {
+ cursor: default;
+}
diff --git a/src/components/toggle-buttons/toggle-buttons.jsx b/src/components/toggle-buttons/toggle-buttons.jsx
new file mode 100644
index 000000000..f09f60e86
--- /dev/null
+++ b/src/components/toggle-buttons/toggle-buttons.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import styles from './toggle-buttons.css';
+
+const ToggleButtons = ({buttons, className, disabled}) => (
+
-
-
-
-
-
+
+ {buttons.map((button, index) => (
+
+ ))}
+
+);
+
+ToggleButtons.propTypes = {
+ buttons: PropTypes.arrayOf(PropTypes.shape({
+ title: PropTypes.string.isRequired,
+ handleClick: PropTypes.func.isRequired,
+ icon: PropTypes.string.isRequired,
+ iconClassName: PropTypes.string,
+ isSelected: PropTypes.bool
+ })),
+ className: PropTypes.string,
+ disabled: PropTypes.bool
+};
+
+ToggleButtons.defaultProps = {
+ disabled: false
+};
+
+export default ToggleButtons;
diff --git a/src/components/webgl-modal/webgl-modal.css b/src/components/webgl-modal/webgl-modal.css
index 85fcc0d01..43327f211 100644
--- a/src/components/webgl-modal/webgl-modal.css
+++ b/src/components/webgl-modal/webgl-modal.css
@@ -29,7 +29,7 @@
.illustration {
width: 100%;
height: 208px;
- background-color: $motion-primary;
+ background-color: $looks-secondary;
background-image: url('./unsupported.png');
background-size: cover;
}
@@ -54,10 +54,10 @@
}
.button-row button {
- border: 1px solid $motion-primary;
+ border: 1px solid $looks-secondary;
border-radius: 0.25rem;
padding: 0.5rem 2rem;
- background: $motion-primary;
+ background: $looks-secondary;
color: white;
font-weight: bold;
font-size: 0.875rem;
@@ -70,6 +70,6 @@
}
.faq-link {
- color: $motion-primary;
+ color: $looks-secondary;
text-decoration: none;
}
diff --git a/src/containers/blocks.jsx b/src/containers/blocks.jsx
index 616d2e090..750be83fc 100644
--- a/src/containers/blocks.jsx
+++ b/src/containers/blocks.jsx
@@ -18,6 +18,8 @@ import {BLOCKS_DEFAULT_SCALE, STAGE_DISPLAY_SIZES} from '../lib/layout-constants
import DropAreaHOC from '../lib/drop-area-hoc.jsx';
import DragConstants from '../lib/drag-constants';
import defineDynamicBlock from '../lib/define-dynamic-block';
+import {DEFAULT_THEME, getColorsForTheme, themeMap} from '../lib/themes';
+import {injectExtensionBlockTheme, injectExtensionCategoryTheme} from '../lib/themes/blockHelpers';
import {connect} from 'react-redux';
import {updateToolbox} from '../reducers/toolbox';
@@ -100,7 +102,7 @@ class Blocks extends React.Component {
const workspaceConfig = defaultsDeep({},
Blocks.defaultOptions,
this.props.options,
- {rtl: this.props.isRtl, toolbox: this.props.toolboxXML}
+ {rtl: this.props.isRtl, toolbox: this.props.toolboxXML, colours: getColorsForTheme(this.props.theme)}
);
this.workspace = this.ScratchBlocks.inject(this.blocks, workspaceConfig);
@@ -353,11 +355,15 @@ class Blocks extends React.Component {
const stageCostumes = stage.getCostumes();
const targetCostumes = target.getCostumes();
const targetSounds = target.getSounds();
- const dynamicBlocksXML = this.props.vm.runtime.getBlocksXML(target);
+ const dynamicBlocksXML = injectExtensionCategoryTheme(
+ this.props.vm.runtime.getBlocksXML(target),
+ this.props.theme
+ );
return makeToolboxXML(false, target.isStage, target.id, dynamicBlocksXML,
targetCostumes[targetCostumes.length - 1].name,
stageCostumes[stageCostumes.length - 1].name,
- targetSounds.length > 0 ? targetSounds[targetSounds.length - 1].name : ''
+ targetSounds.length > 0 ? targetSounds[targetSounds.length - 1].name : '',
+ getColorsForTheme(this.props.theme)
);
} catch {
return null;
@@ -436,7 +442,7 @@ class Blocks extends React.Component {
if (blockInfo.info && blockInfo.info.isDynamic) {
dynamicBlocksInfo.push(blockInfo);
} else if (blockInfo.json) {
- staticBlocksJson.push(blockInfo.json);
+ staticBlocksJson.push(injectExtensionBlockTheme(blockInfo.json, this.props.theme));
}
// otherwise it's a non-block entry such as '---'
});
@@ -627,22 +633,11 @@ Blocks.propTypes = {
wheel: PropTypes.bool,
startScale: PropTypes.number
}),
- colours: PropTypes.shape({
- workspace: PropTypes.string,
- flyout: PropTypes.string,
- toolbox: PropTypes.string,
- toolboxSelected: PropTypes.string,
- scrollbar: PropTypes.string,
- scrollbarHover: PropTypes.string,
- insertionMarker: PropTypes.string,
- insertionMarkerOpacity: PropTypes.number,
- fieldShadow: PropTypes.string,
- dragShadowOpacity: PropTypes.number
- }),
comments: PropTypes.bool,
collapse: PropTypes.bool
}),
stageSize: PropTypes.oneOf(Object.keys(STAGE_DISPLAY_SIZES)).isRequired,
+ theme: PropTypes.oneOf(Object.keys(themeMap)),
toolboxXML: PropTypes.string,
updateMetrics: PropTypes.func,
updateToolboxState: PropTypes.func,
@@ -664,18 +659,6 @@ Blocks.defaultOptions = {
length: 2,
colour: '#ddd'
},
- colours: {
- workspace: '#F9F9F9',
- flyout: '#F9F9F9',
- toolbox: '#FFFFFF',
- toolboxSelected: '#E9EEF2',
- scrollbar: '#CECDCE',
- scrollbarHover: '#CECDCE',
- insertionMarker: '#000000',
- insertionMarkerOpacity: 0.2,
- fieldShadow: 'rgba(255, 255, 255, 0.3)',
- dragShadowOpacity: 0.6
- },
comments: true,
collapse: false,
sounds: false
@@ -683,7 +666,8 @@ Blocks.defaultOptions = {
Blocks.defaultProps = {
isVisible: true,
- options: Blocks.defaultOptions
+ options: Blocks.defaultOptions,
+ theme: DEFAULT_THEME
};
const mapStateToProps = state => ({
diff --git a/src/containers/gui.jsx b/src/containers/gui.jsx
index 0081c83c5..55055f0f6 100644
--- a/src/containers/gui.jsx
+++ b/src/containers/gui.jsx
@@ -36,6 +36,7 @@ import storage from '../lib/storage';
import vmListenerHOC from '../lib/vm-listener-hoc.jsx';
import vmManagerHOC from '../lib/vm-manager-hoc.jsx';
import cloudManagerHOC from '../lib/cloud-manager-hoc.jsx';
+import systemPreferencesHOC from '../lib/system-preferences-hoc.jsx';
import GUIComponent from '../components/gui/gui.jsx';
import {setIsScratchDesktop} from '../lib/isScratchDesktop.js';
@@ -185,7 +186,8 @@ const WrappedGui = compose(
vmListenerHOC,
vmManagerHOC,
SBFileUploaderHOC,
- cloudManagerHOC
+ cloudManagerHOC,
+ systemPreferencesHOC
)(ConnectedGUI);
WrappedGui.setAppElement = ReactModal.setAppElement;
diff --git a/src/containers/monitor.jsx b/src/containers/monitor.jsx
index b952a1836..f45c2d1ef 100644
--- a/src/containers/monitor.jsx
+++ b/src/containers/monitor.jsx
@@ -9,6 +9,7 @@ import {addMonitorRect, getInitialPosition, resizeMonitorRect, removeMonitorRect
import {getVariable, setVariableValue} from '../lib/variable-utils';
import importCSV from '../lib/import-csv';
import downloadBlob from '../lib/download-blob';
+import {DEFAULT_THEME} from '../lib/themes';
import SliderPrompt from './slider-prompt.jsx';
import {connect} from 'react-redux';
@@ -213,6 +214,7 @@ class Monitor extends React.Component {
min={this.props.min}
mode={this.props.mode}
targetId={this.props.targetId}
+ theme={this.props.theme}
width={this.props.width}
onDragEnd={this.handleDragEnd}
onExport={isList ? this.handleExport : null}
@@ -250,6 +252,7 @@ Monitor.propTypes = {
resizeMonitorRect: PropTypes.func.isRequired,
spriteName: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
targetId: PropTypes.string,
+ theme: PropTypes.string,
toolboxXML: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
value: PropTypes.oneOfType([
PropTypes.string,
@@ -264,8 +267,12 @@ Monitor.propTypes = {
x: PropTypes.number,
y: PropTypes.number
};
+Monitor.defaultProps = {
+ theme: DEFAULT_THEME
+};
const mapStateToProps = state => ({
monitorLayout: state.scratchGui.monitorLayout,
+ theme: state.scratchGui.theme.theme,
// render on toolbox updates since changes to the blocks could affect monitor labels, i.e. updated locale
toolboxXML: state.scratchGui.toolbox.toolboxXML,
vm: state.scratchGui.vm
diff --git a/src/containers/sprite-info.jsx b/src/containers/sprite-info.jsx
index fe0a7267e..2499ed104 100644
--- a/src/containers/sprite-info.jsx
+++ b/src/containers/sprite-info.jsx
@@ -9,9 +9,7 @@ class SpriteInfo extends React.Component {
super(props);
bindAll(this, [
'handleClickVisible',
- 'handleClickNotVisible',
- 'handlePressVisible',
- 'handlePressNotVisible'
+ 'handleClickNotVisible'
]);
}
handleClickVisible (e) {
@@ -22,26 +20,12 @@ class SpriteInfo extends React.Component {
e.preventDefault();
this.props.onChangeVisibility(false);
}
- handlePressVisible (e) {
- if (e.key === ' ' || e.key === 'Enter') {
- e.preventDefault();
- this.props.onChangeVisibility(true);
- }
- }
- handlePressNotVisible (e) {
- if (e.key === ' ' || e.key === 'Enter') {
- e.preventDefault();
- this.props.onChangeVisibility(false);
- }
- }
render () {
return (