diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index 5132af685..fa6c4ce1a 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -57,10 +57,13 @@
.tab {
flex-grow: 1;
height: 80%;
- margin-left: 1px;
+ margin-left: -0.5rem;
- border-radius: $space $space 0 0;
- border: none;
+ border-radius: 1rem 1rem 0 0;
+ border: $ui-pane-border 1px solid;
+
+ padding: 0.125rem 1rem 0;
+ font-size: 0.7rem;
background-color: #F6F8FA;
color: #9AA1B5;
@@ -72,13 +75,49 @@
user-select: none;
}
-.tab.is-selected {
+/* Use z-indices to force left-on-top for tabs */
+.tab:nth-of-type(1) {
+ margin-left: 0;
+ z-index: 3;
+}
+.tab:nth-of-type(2) {
+ z-index: 2;
+}
+.tab:nth-of-type(3) {
z-index: 1;
- color: #40B9F5;
- background-color: #FFFFFF;
- border-bottom: $ui-background-blue 1px solid;
}
+.tab.is-selected {
+ color: $motion-primary;
+ background-color: #FFFFFF;
+ z-index: 4; /* Make sure selected is always above */
+}
+
+.tab img {
+ margin-right: 0.125rem;
+ filter: grayscale(100%);
+}
+
+.tab.is-selected img {
+ filter: none;
+}
+
+/* Tab style overrides from react-tabs */
+.tab.is-selected:after {
+ display: none;
+}
+
+.tab.is-selected:focus {
+ outline: none;
+ box-shadow: none;
+ border-color: $ui-pane-border;
+}
+
+.tab.is-selected:focus:after {
+ display: none;
+}
+
+/* Body of the tabs */
.tabs {
position: relative;
flex-grow: 1;
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index 2ec53402b..37a66c308 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -1,7 +1,7 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
-import {defineMessages, injectIntl, intlShape} from 'react-intl';
+import {defineMessages, FormattedMessage, injectIntl, intlShape} from 'react-intl';
import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
import MediaQuery from 'react-responsive';
import tabStyles from 'react-tabs/style/react-tabs.css';
@@ -25,6 +25,9 @@ import WebGlModal from '../../containers/webgl-modal.jsx';
import layout from '../../lib/layout-constants.js';
import styles from './gui.css';
import addExtensionIcon from './icon--extensions.svg';
+import codeIcon from './icon--code.svg';
+import costumesIcon from './icon--costumes.svg';
+import soundsIcon from './icon--sounds.svg';
const messages = defineMessages({
addExtension: {
@@ -110,9 +113,39 @@ const GUIComponent = props => {
onSelect={onActivateTab}
>
- Blocks
- Costumes
- Sounds
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
diff --git a/src/components/gui/icon--code.svg b/src/components/gui/icon--code.svg
new file mode 100644
index 000000000..390e683b1
--- /dev/null
+++ b/src/components/gui/icon--code.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/src/components/gui/icon--costumes.svg b/src/components/gui/icon--costumes.svg
new file mode 100644
index 000000000..de50ce39b
--- /dev/null
+++ b/src/components/gui/icon--costumes.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/src/components/gui/icon--sounds.svg b/src/components/gui/icon--sounds.svg
new file mode 100644
index 000000000..0de67c537
--- /dev/null
+++ b/src/components/gui/icon--sounds.svg
@@ -0,0 +1,10 @@
+
+
\ No newline at end of file
diff --git a/test/integration/blocks.test.js b/test/integration/blocks.test.js
index 9f0736488..4f3411d55 100644
--- a/test/integration/blocks.test.js
+++ b/test/integration/blocks.test.js
@@ -29,7 +29,7 @@ describe('Working with the blocks', () => {
test('Blocks report when clicked in the toolbox', async () => {
await loadUri(uri);
await clickXpath('//button[@title="tryit"]');
- await clickText('Blocks');
+ await clickText('Code');
await clickText('Operators', scope.blocksTab);
await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
await clickText('join', scope.blocksTab); // Click "join " block
@@ -58,7 +58,7 @@ describe('Working with the blocks', () => {
test('Creating variables', async () => {
await loadUri(uri);
await clickXpath('//button[@title="tryit"]');
- await clickText('Blocks');
+ await clickText('Code');
await clickText('Variables', scope.blocksTab);
await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
diff --git a/test/integration/localization.test.js b/test/integration/localization.test.js
index 7c90b3221..deaf1a788 100644
--- a/test/integration/localization.test.js
+++ b/test/integration/localization.test.js
@@ -29,7 +29,7 @@ describe('Localization', () => {
test.skip('Localization', async () => {
await loadUri(uri);
await clickXpath('//button[@title="tryit"]');
- await clickText('Blocks');
+ await clickText('Code');
await clickXpath('//button[@title="Add Extension"]');
await clickText('Pen', scope.modal); // Modal closes
await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation