basic showing

Author: shepmaster

ui/frontend/Header.tsx

@@ -178,11 +178,62 @@ interface HeaderProps {
   wasmAvailable: boolean;
 }
 
+import { Manager, Target, Popper, Arrow } from 'react-popper';
+
+const Header2 = () => (
+  <div className="header2">
+    <button>BUILD</button>
+    <Manager>
+      <Target>
+        <button>...</button>
+      </Target>
+      <Popper className="popper" placement="bottom">
+        <Arrow className="popper__arrow" />
+        <div className="popper__content"><BuildMenu /></div>
+      </Popper>
+    </Manager>
+  </div>
+);
+
+const BuildMenu = () => (
+  <div className="build-options">
+    <h1 className="build-options__title">What do you want to do?</h1>
+    <BuildOption
+      name="Build"
+      description="No bells and whistles, regular build coming right up :D"
+    />
+    <BuildOption
+      name="ASM"
+      description="Build and show the resulting assembly code."
+    />
+    <BuildOption
+      name="LLVM IR"
+      description="Build and show the resulting LLVM IR, LLVM's intermediate representation."
+    />
+    <BuildOption
+      name="MIR"
+      description="Build and show the resulting MIR, Rust's intermediate representation."
+    />
+    <BuildOption
+      name="WASM"
+      description="Build a WebAssembly module for web browsers, in the .WAT textual representation.
+        Note: WASM currently requires using the Nightly channel, selecting this option will switch to Nightly."
+    />
+    </div>
+);
+
+const BuildOption = ({name, description}) => (
+    <button className="build-option">
+      <span className="build-option__name">{name}</span>
+      <span className="build-option__description">{description}</span>
+    </button>
+    );
+
 const mapStateToProps = (state: State) => {
-  const { configuration: { channel, mode } } = state;
+  const {configuration: {channel, mode } } = state;
 
   return {
-    channel,
+      channel,
     mode,
     crateType: getCrateType(state),
     tests: runAsTest(state),
@@ -195,22 +246,22 @@ const mapStateToProps = (state: State) => {
 };
 
 const mapDispatchToProps = ({
-  changeChannel,
-  changeMode,
-  clippy: performClippy,
-  compileToAssembly: performCompileToAssembly,
-  compileToLLVM: performCompileToLLVM,
-  compileToMir: performCompileToMir,
-  compileToWasm: performCompileToWasm,
-  execute: performExecute,
-  format: performFormat,
-  gistSave: performGistSave,
-  toggleConfiguration,
-});
+      changeChannel,
+    changeMode,
+    clippy: performClippy,
+    compileToAssembly: performCompileToAssembly,
+    compileToLLVM: performCompileToLLVM,
+    compileToMir: performCompileToMir,
+    compileToWasm: performCompileToWasm,
+    execute: performExecute,
+    format: performFormat,
+    gistSave: performGistSave,
+    toggleConfiguration,
+  });
 
-const ConnectedHeader = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(Header);
+  const ConnectedHeader = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+  )(Header2);
 
-export default ConnectedHeader;
+  export default ConnectedHeader;

ui/frontend/index.scss

@@ -525,3 +525,70 @@ $PHI: 2.61803398875;
         opacity: 1;
     }
 }
+
+.header2 {
+  display: flex;
+}
+
+.popper {
+  z-index: 100;
+
+  $fg-color: #222;
+  $bg-color: white;
+  $arrow-size: 10px;
+
+  &__arrow {
+    position: absolute;
+    margin: $arrow-size;
+    border: $arrow-size solid transparent;
+  }
+
+  &[data-placement^="bottom"] &__arrow {
+    margin-top: 0;
+    border-top-width: 0;
+    border-bottom-color: $bg-color;
+  }
+
+  &__content {
+    background: $bg-color;
+    color: $fg-color;
+    border-radius: 2px;
+    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+    margin: $arrow-size;
+  }
+}
+
+.build-options {
+  width: 20em;
+
+  &__title {
+    font-size: medium;
+    padding: 0.5em;
+    margin: 0;
+    border-bottom: 1px solid #CCC;
+  }
+}
+
+.build-option {
+  display: flex;
+  flex-direction: column;
+  padding: 0.5em;
+
+  // Button reset
+  border: none;
+  text-align: inherit;
+  width: inherit;
+
+  &:hover {
+    background-color: aliceblue;
+  }
+
+  &__name {
+    font-weight: bold;
+    margin-bottom: 0.25em;
+  }
+
+  &__description {
+    font-size: 90%;
+  }
+}