Changed toolbar look and feel

src/app.global.css

@@ -145,6 +145,7 @@ body {
 }
 
 .ant-layout-sider {
+  transition: none;
   background: transparent;
 }
 

src/components/Compiler/Compiler.jsx

@@ -1,57 +1,43 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Popover, Radio } from 'antd';
+import { selectCompilerMenu } from '../../menus';
+import { ToolbarButton } from '../_ui';
 
 /**
  * 'Compiler' popover.
  */
 class Compiler extends React.Component {
+  static options = [
+    { label: 'Babel (default)', value: 'babel' },
+    { label: 'Flow', value: 'flow' },
+    // TODO that would be nice, right? :)
+    // { label: 'TypeScript', value: 'typescript' },
+  ];
+
   static propTypes = {
     compiler: PropTypes.string,
-    updateCompiler: PropTypes.func,
   };
 
-  state = { isBusy: false };
-
-  renderPopover() {
-    const options = [
-      { label: 'Babel (default)', value: 'babel' },
-      { label: 'Flow', value: 'flow' },
-      // TODO that would be nice, right? :)
-      // { label: 'TypeScript', value: 'typescript' },
-    ];
-
-    const radioStyle = {
-      display: 'block',
-    };
-
-    return (
-      <Radio.Group
-        onChange={event => this.props.updateCompiler(event.target.value)}
-        value={this.props.compiler}
-      >
-        {options.map((option, i) => (
-          <Radio key={i} style={radioStyle} value={option.value}>
-            {option.label}
-          </Radio>
-        ))}
-      </Radio.Group>
-    );
-  }
-
   render() {
     return (
-      <div>
-        <Popover
-          placement="bottom"
-          content={this.renderPopover()}
-          trigger="click"
-          onVisibleChange={isOpened => this.setState({ isOpened })}
-        >
-          Compiler
-        </Popover>
-      </div>
+      <ToolbarButton
+        dropdown
+        onClick={element => {
+          selectCompilerMenu.open(
+            {
+              options: Compiler.options,
+              compiler: this.props.compiler,
+            },
+            {
+              x: element.offsetLeft,
+              y: element.parentElement.offsetHeight,
+            }
+          );
+        }}
+      >
+        Compiler
+      </ToolbarButton>
     );
   }
 }
@@ -60,8 +46,4 @@ const mapStateToProps = state => ({
   compiler: state.project.compiler,
 });
 
-const mapDispatchToProps = dispatch => ({
-  updateCompiler: compiler => dispatch.project.updateCompiler({ compiler }),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Compiler);
+export default connect(mapStateToProps)(Compiler);

src/components/Components/Components.jsx

@@ -5,7 +5,6 @@ import { connect } from 'react-redux';
 import { Brick, BrickSelector } from '..';
 import BrickType from '../../bricks/baseBrick';
 import FileType from '../../editor/file';
-import * as utils from '../../utils';
 import './Components.css';
 
 /**
@@ -17,29 +16,9 @@ class Components extends React.Component {
     currentFile: PropTypes.instanceOf(FileType),
   };
 
-  shouldDisplayComponents = () => {
-    const currentFile = this.props.currentFile;
-    const currentFileExtension = utils.file.whichLanguage(currentFile.filePath);
-
-    switch (currentFileExtension) {
-      case 'jsx':
-      case 'js':
-      case 'tsx':
-        return true;
-
-      default:
-        return false;
-    }
-  };
-
   render() {
-    const shouldDisplayComponents = this.shouldDisplayComponents();
-
     return (
-      <div
-        className="Components"
-        style={{ opacity: shouldDisplayComponents ? 1 : 0.5 }}
-      >
+      <div className="Components">
         <BrickSelector />
 
         <div className="bricks">

src/components/EditorHeader/EditorHeader.jsx

@@ -2,8 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
-import { Layout } from 'antd';
+import { Icon, Layout } from 'antd';
 import { Compiler, Configurator, PackageManager, RecipesPicker } from '..';
+import { ToolbarButton, ToolbarButtonGroup } from '../_ui';
 import './EditorHeader.css';
 
 /**
@@ -38,8 +39,26 @@ class EditorHeader extends React.Component {
         <nav>
           {this.renderUnsavedChanges()}
           <RecipesPicker />
-          <Compiler />
-          <PackageManager />
+          <ToolbarButtonGroup>
+            <Compiler />
+            <PackageManager />
+          </ToolbarButtonGroup>
+          <ToolbarButtonGroup>
+            <ToolbarButton
+              active={!this.props.ui.isFileTreeOpened}
+              onClick={this.props.toggleIsFileTreeOpened}
+              title="Toggle File Tree"
+            >
+              <Icon type="menu-fold" className="no-margin" />
+            </ToolbarButton>
+            <ToolbarButton
+              active={!this.props.ui.isBrickSelectorOpened}
+              onClick={this.props.toggleIsBrickSelectorOpened}
+              title="Toggle Brick Selector"
+            >
+              <Icon type="menu-unfold" className="no-margin" />
+            </ToolbarButton>
+          </ToolbarButtonGroup>
           <Configurator />
         </nav>
       </Layout.Header>
@@ -50,10 +69,13 @@ class EditorHeader extends React.Component {
 const mapStateToProps = state => ({
   currentFileHasUnsavedChanges:
     state.session.currentSession.currentFileHasUnsavedChanges,
+  ui: state.ui,
 });
 
 const mapDispatchToProps = dispatch => ({
   switchProject: cwd => dispatch.project.switchProject(cwd),
+  toggleIsBrickSelectorOpened: () => dispatch.ui.toggleIsBrickSelectorOpened(),
+  toggleIsFileTreeOpened: () => dispatch.ui.toggleIsFileTreeOpened(),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(EditorHeader);

src/components/EditorHeader/EditorHeader.scss

@@ -9,7 +9,8 @@
   -webkit-user-select: none;
   user-select: none;
   padding-right: 0;
-  padding-left: 10px;
+  // padding-left: 10px;
+  padding-left: 80px;
 
   .back {
     display: inline-flex;
@@ -28,18 +29,18 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
+    height: 100%;
 
     & > * {
       border-bottom: 1px solid transparent;
       transition: border-bottom-color 250ms;
       border-left: 1px solid #eee;
       padding: 0 10px;
-      cursor: pointer;
+      -webkit-app-region: no-drag;
     }
 
-    * {
-      font-size: 11px !important;
-      font-weight: bold;
+    *:not(.ToolbarButton) {
+      font-size: 11px;
     }
 
     .unsaved-changes {

src/components/PackageManager/PackageManager.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { ToolbarButton } from '../_ui';
 import PackageManagerRenderer from '../../tools/package-managers/_base/package-manager-renderer';
 import PackageManagerType from '../../tools/package-managers/_base/package-manager';
 import './PackageManager.css';
@@ -13,15 +14,28 @@ class PackageManager extends React.Component {
     packageManager: PropTypes.instanceOf(PackageManagerType),
   };
 
+  state = {
+    loading: false,
+  };
+
+  handleBusy = () => this.setState({ loading: true });
+
+  handleIdle = () => this.setState({ loading: false });
+
   render() {
     const packageManager = this.props.packageManager;
-
     if (!packageManager) return null;
 
     return (
-      <div className="PackageManager">
-        <PackageManagerRenderer packageManager={packageManager} />
-      </div>
+      <ToolbarButton loading={this.state.loading}>
+        <div className="PackageManager">
+          <PackageManagerRenderer
+            packageManager={packageManager}
+            onBusy={this.handleBusy}
+            onIdle={this.handleIdle}
+          />
+        </div>
+      </ToolbarButton>
     );
   }
 }

src/components/PackageManager/PackageManager.scss

@@ -1,3 +1,14 @@
+.PackageManager {
+  .ant-badge-status-dot {
+    width: 4px;
+    height: 4px;
+  }
+
+  .ant-badge-status-text {
+    margin-left: 5px;
+  }
+}
+
 .PackageManagerPopover {
   width: 250px;
 

src/components/ProjectSider/ProjectSider.scss

@@ -26,6 +26,8 @@
       }
 
       &.disabled {
+        font-size: 12px;
+        line-height: 21px;
         color: #ccc;
         text-align: center;
       }