From cf58d318ed5a6200f768f85836d60c78261d46f0 Mon Sep 17 00:00:00 2001
From: Ray Schamp <ray@scratch.mit.edu>
Date: Fri, 19 May 2017 12:54:26 -0700
Subject: [PATCH] Fix tab style handling, changed in 1.0
---
src/components/gui/gui.css | 10 +++++++---
src/components/gui/gui.jsx | 36 ++++++++++++++++++++++++++----------
2 files changed, 33 insertions(+), 13 deletions(-)
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index e2fe4db43..ebaf67d84 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -47,7 +47,7 @@
border-bottom: 0 !important;
}
-.tab-list .tab {
+.tab {
flex-grow: 1;
height: 80%;
margin-left: 1px;
@@ -63,9 +63,9 @@
align-items: center;
}
-
-.tab-list .tab[aria-selected="true"] {
+.tab.is-selected {
color: #40B9F5;
+ background-color: #FFFFFF;
}
.tabs {
@@ -80,6 +80,10 @@
position: relative;
flex-grow: 1;
flex-shrink: 0;
+ display: none;
+}
+
+.tab-panel.is-selected {
display: flex;
}
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index 9bf21c40d..47fb1b327 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -1,6 +1,10 @@
+const classNames = require('classnames');
const PropTypes = require('prop-types');
const React = require('react');
+const {Tab, Tabs, TabList, TabPanel} = require('react-tabs');
+const tabStyles = require('react-tabs/style/react-tabs.css');
const VM = require('scratch-vm');
+
const Blocks = require('../../containers/blocks.jsx');
const CostumeTab = require('../../containers/costume-tab.jsx');
const GreenFlag = require('../../containers/green-flag.jsx');
@@ -8,12 +12,13 @@ const TargetPane = require('../../containers/target-pane.jsx');
const SoundTab = require('../../containers/sound-tab.jsx');
const Stage = require('../../containers/stage.jsx');
const StopAll = require('../../containers/stop-all.jsx');
-const MenuBar = require('../menu-bar/menu-bar.jsx');
-const {Tab, Tabs, TabList, TabPanel} = require('react-tabs');
const Box = require('../box/box.jsx');
+const MenuBar = require('../menu-bar/menu-bar.jsx');
+
const styles = require('./gui.css');
+
const GUIComponent = props => {
const {
basePath,
@@ -31,6 +36,15 @@ const GUIComponent = props => {
);
}
+ const tabClassNames = {
+ tabs: styles.tabs,
+ tab: classNames(tabStyles.reactTabsTab, styles.tab),
+ tabList: classNames(tabStyles.reactTabsTabList, styles.tabList),
+ tabPanel: classNames(tabStyles.reactTabsTabPanel, styles.tabPanel),
+ tabPanelSelected: classNames(tabStyles.reactTabsTabPanelSelected, styles.isSelected),
+ tabSelected: classNames(tabStyles.reactTabsTabSelected, styles.isSelected)
+ };
+
return (
<Box
className={styles.pageWrapper}
@@ -41,16 +55,18 @@ const GUIComponent = props => {
<Box className={styles.flexWrapper}>
<Box className={styles.editorWrapper}>
<Tabs
- className={styles.tabs}
+ className={tabClassNames.tabs}
forceRenderTabPanel={true} // eslint-disable-line react/jsx-boolean-value
+ selectedTabClassName={tabClassNames.tabSelected}
+ selectedTabPanelClassName={tabClassNames.tabPanelSelected}
onSelect={onTabSelect}
>
- <TabList className={styles.tabList}>
- <Tab className={styles.tab}>Scripts</Tab>
- <Tab className={styles.tab}>Costumes</Tab>
- <Tab className={styles.tab}>Sounds</Tab>
+ <TabList className={tabClassNames.tabList}>
+ <Tab className={tabClassNames.tab}>Scripts</Tab>
+ <Tab className={tabClassNames.tab}>Costumes</Tab>
+ <Tab className={tabClassNames.tab}>Sounds</Tab>
</TabList>
- <TabPanel className={styles.tabPanel}>
+ <TabPanel className={tabClassNames.tabPanel}>
<Box className={styles.blocksWrapper}>
<Blocks
grow={1}
@@ -62,10 +78,10 @@ const GUIComponent = props => {
/>
</Box>
</TabPanel>
- <TabPanel className={styles.tabPanel}>
+ <TabPanel className={tabClassNames.tabPanel}>
<CostumeTab vm={vm} />
</TabPanel>
- <TabPanel className={styles.tabPanel}>
+ <TabPanel className={tabClassNames.tabPanel}>
<SoundTab vm={vm} />
</TabPanel>
</Tabs>
--
GitLab