Merge pull request #11 from japamat/rithm-move-calc-with-panes

slide calculator over with expanded pane [issue desmosinc#48]

src/components/App.css

@@ -1,7 +1,21 @@
 .calculator {
+ z-index: 1;
  position: absolute;
  top: 60px;
- left: 70px;
  right: 0;
  bottom: 0;
 }
+
+.calculator-burst,
+.calculator-settings {
+ left: 271px;
+}
+
+.calculator-none,
+.calculator-preview {
+ left: 70px;
+}
+
+.calculator-files {
+ left: 449px;
+}

src/components/App.js

@@ -31,10 +31,12 @@ class App extends Component {
  }
 
  render() {
+ const { pane } = this.props;
+
  return (
  <div className="App">
  <Header />
- <div className="calculator" ref={calcContainer} />
+ <div className={`calculator calculator-${pane}`} ref={calcContainer} />
  <SettingsContainer />
  <PreviewContainer />
  <BurstContainer />

src/components/Header.test.js

@@ -11,7 +11,9 @@ describe('<Header/>', () => {
 
  it('renders appropriate content', () => {
  const { getByTestId } = global.renderWithRedux(<Header />);
- expect(getByTestId('Header-logo').textContent).toBe('GIFsmos');
+ expect(getByTestId('Header-logo').firstChild.src).toContain(
+ 'gifsmos-logo.svg'
+ );
  expect(getByTestId('Header-help').textContent).toMatch('Paste');
  });
 });

src/components/Preview.css

@@ -10,6 +10,7 @@
 }
 
 .Preview-expanded {
+ z-index: 1;
  transform: translateX(0);
  transition: 0.2s transform;
 }

src/components/Sidebar.css

@@ -1,5 +1,6 @@
 .Sidebar {
  position: absolute;
+ z-index: 2;
  top: 60px;
  left: 0;
  bottom: 0;

src/containers/AppContainer.js

@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import App from '../components/App';
+
+const mapStateToProps = (state, ownProps) => {
+ const { expandedPane } = state.ui;
+
+ return {
+ pane: expandedPane.toLowerCase()
+ };
+};
+
+const AppContainer = connect(mapStateToProps)(App);
+
+export default AppContainer;

src/index.js

@@ -4,7 +4,7 @@ import { createStore, applyMiddleware } from 'redux';
 import { Provider } from 'react-redux';
 import thunkMiddleware from 'redux-thunk';
 import rootReducer from './reducers';
-import App from './components/App';
+import AppContainer from './containers/AppContainer';
 import panes from './constants/pane-types';
 import { togglePane } from './actions';
 import greet from './lib/dev-greeting';
@@ -16,7 +16,7 @@ const closePane = () => store.dispatch(togglePane(panes.NONE));
 
 ReactDOM.render(
  <Provider store={store}>
- <App onEscape={closePane} />
+ <AppContainer onEscape={closePane} />
  </Provider>,
  document.getElementById('root')
 );

src/lib/calculator.js

@@ -2,7 +2,6 @@ let calculator;
 
 function initializeCalculator(desmos, calcContainer, calcOptions) {
  calculator = desmos.GraphingCalculator(calcContainer.current, calcOptions);
- window.calculator = calculator;
  return calculator;
 }