Adds the share menu. Closes #70. (#76)

* Initial checkin Remote file.

* Progress checkin Remote controller.

* Progress checkin Remote controller.

* Progress checkin Remote controller.

* Progress checkin Remote controller.

* Progress checkin Remote controller.

* Reverts updates to radio button and switch. Change submitted via separate PR.

* Updates selectedValue when cloning.

* Fixes selectedValue float in range variable.

* Updates controlTypes that should throttle.

* Progress checkin Remote controller.

* Progress checkin Remote controller.

* Progress checkin Remote controller.

* Progress checkin Remote controller.

* Progress checkin Remote controller.

* Progress checkin Remote controller.

* Progress checkin Remote controller.

* Progress checkin Remote controller.

* Initial check-in of overlay share menu

* Final check-in.

* Final check-in.

* Progress checkin remote share menu.

* Reverts remote files changed in separate diff.

* Progress checkin remote share menu.

* Updates comments.

* Updates CSS

* Now using OverlayController state to manage share menu visibility.

* Modifies toggleShareMenu method.

src/ui/OverlayController.tsx

@@ -18,17 +18,29 @@ import * as React from "react";
 
 import { CSS, KeyCode, KeyEvent } from "../lib/Constants";
 import { Messaging } from "../lib/Messaging";
+import { OverlayShareMenu } from "./OverlayShareMenu";
 import { OverlayVariables } from "./OverlayVariables";
+import { Remote } from "../lib/Remote";
 import { Variable } from "../core/variables/Variable";
 
 /**
  * Interface for the properties assigned to the OverlayController component.
  * @interface
  */
 interface IControllerProps {
-  wrapperElement: HTMLElement;
-  variables: Variable[];
+  remote: Remote;
   updateVariable(variable: Variable, selectedValue: any): void;
+  toggleRemoteEnabled(): void;
+  variables: Variable[];
+  wrapperElement: HTMLElement;
+}
+
+/**
+ * Interface for the state assigned to the OverlayController component.
+ * @interface
+ */
+interface IControllerState {
+  shareMenuIsVisible: boolean;
 }
 
 /**
@@ -37,7 +49,12 @@ interface IControllerProps {
  * @class
  * @extends React.Component
  */
-export class OverlayController extends React.Component<IControllerProps, void> {
+export class OverlayController extends React.Component<IControllerProps, IControllerState> {
+
+  constructor(props: IControllerProps) {
+    super(props);
+    this.state = { shareMenuIsVisible: false };
+  }
 
   /** @override */
   componentDidMount() {
@@ -82,19 +99,55 @@ export class OverlayController extends React.Component<IControllerProps, void> {
     this.props.wrapperElement.classList.toggle(CSS.RMX_VISIBLE);
   }
 
+  /** Toggles the share menu visibility. */
+  toggleShareMenu = () => {
+    this.setState({
+      shareMenuIsVisible: !this.state.shareMenuIsVisible
+    });
+  }
+
   /** @override */
   render() {
+    const {
+      remote,
+      toggleRemoteEnabled,
+      updateVariable,
+      variables
+    } = this.props;
+
+    const { shareMenuIsVisible } = this.state;
+
+    let shareIcon: string = shareMenuIsVisible ? "up" : "down";
     return (
       <div className="mdl-card mdl-shadow--6dp">
-        <div className="mdl-card__title" ref="myInput">
+        <div className="mdl-card__title">
           <h2 className="mdl-card__title-text">Remixer</h2>
         </div>
-        <div className="mdl-card__supporting-text mdl-card__actions mdl-card--border">
+        <OverlayShareMenu
+          visible={shareMenuIsVisible}
+          remoteId={remote.remoteId}
+          remoteUrl={remote.remoteUrl}
+          isEnabled={remote.isEnabled}
+          toggleRemoteEnabled={toggleRemoteEnabled}
+        />
+        <div className={`mdl-card__actions mdl-card--border`}>
           <OverlayVariables
-            variables={this.props.variables}
-            updateVariable={this.props.updateVariable}
+            variables={variables}
+            updateVariable={updateVariable}
           />
         </div>
+        <div className="mdl-card__menu">
+          {remote.isEnabled ?
+            <a onClick={this.toggleShareMenu}>SHARED</a>
+            : ""
+          }
+          <button
+            className="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"
+            onClick={this.toggleShareMenu}
+          >
+            <i className="material-icons">{`keyboard_arrow_${shareIcon}`}</i>
+          </button>
+        </div>
       </div>
     );
   }

src/ui/OverlayShareMenu.tsx

@@ -0,0 +1,95 @@
+/** @license
+ *  Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ *  use this file except in compliance with the License. You may obtain a copy
+ *  of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ *  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ *  License for the specific language governing permissions and limitations
+ *  under the License.
+ */
+
+import * as React from "react";
+
+import { CSS } from "../lib/Constants";
+
+/**
+ * Interface for the overlay share menu properties.
+ * @interface
+ */
+export interface IOverlayShareMenuProps {
+  visible: boolean;
+  remoteId: string;
+  remoteUrl: string;
+  isEnabled: boolean;
+  toggleRemoteEnabled(): void;
+}
+
+/**
+ * Renders a collapsable remote share menu.
+ *
+ * @class
+ * @extends React.Component
+ */
+export class OverlayShareMenu extends React.Component<IOverlayShareMenuProps, void> {
+
+  /** @override */
+  render() {
+    const {
+      visible,
+      remoteId,
+      remoteUrl,
+      isEnabled
+    } = this.props;
+
+    let showMenu = visible ? "active" : "";
+    let status = isEnabled ? "on" : "off";
+
+    return (
+      <div
+        className={`${CSS.RMX_SHARE_MENU} mdl-card__actions ${showMenu}`}
+      >
+        <div className={CSS.MDL_LIST}>
+          <div className={`${CSS.MDL_LIST_ITEM} ${CSS.MDL_TWO_LINE} on`}>
+            <span className={CSS.MDL_PRIMARY}>
+              <span><strong>{`Sharing is ${status}`}</strong></span>
+              <span className="mdl-list__item-sub-title">
+                These values can be adjusted by anyone with the link.
+              </span>
+            </span>
+            <span className={CSS.MDL_SECONDARY}>
+              <label
+                className="mdl-switch mdl-js-switch mdl-js-ripple-effect"
+                htmlFor="share-switch"
+              >
+                <input
+                  id="share-switch" type="checkbox" className="mdl-switch__input"
+                  checked={isEnabled}
+                  onChange={this.props.toggleRemoteEnabled}
+                  />
+              </label>
+            </span>
+          </div>
+          <div className={`${CSS.MDL_LIST_ITEM} ${CSS.MDL_TWO_LINE} ${status}`}>
+            <span className={CSS.MDL_PRIMARY}>
+              <span>Link</span>
+              <span className="mdl-list__item-sub-title">
+                <a href={remoteUrl} target="_blank">{remoteUrl}</a>
+              </span>
+            </span>
+            <span className={CSS.MDL_SECONDARY}>
+              <a href={remoteUrl} target="_blank">
+                <i className="material-icons">share</i>
+              </a>
+            </span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

src/ui/render.tsx

@@ -26,6 +26,9 @@ import { Variable } from "../core/variables/Variable";
 // Get remixer variables from the current instance of remixer.
 let variables = remixer.attachedInstance.variablesArray;
 
+// The current instance of remixer remote.
+let remote = remixer.attachedInstance.remote;
+
 /**
  * Handles all control updates by setting a new selected value for the
  * variable.
@@ -42,16 +45,28 @@ function updateVariable(variable: Variable, selectedValue: any): void {
   remixer.cloneAndUpdateVariable(variable, selectedValue);
 }
 
+/** Toggles the enabled status of remote sharing. */
+function toggleRemoteEnabled(): void {
+  if (remote.isEnabled) {
+    remote.stopSharing();
+  } else {
+    remote.startSharing();
+  }
+  redraw();
+}
+
 // Renders the OverlayController component to the overlay wrapper element.
 const overlayWrapper = document.getElementById(CSS.RMX_OVERLAY_WRAPPER);
 function redraw(): void {
   variables = remixer.attachedInstance.variablesArray;
 
   ReactDOM.render(
     <OverlayController
-      wrapperElement={overlayWrapper}
-      variables={variables}
+      remote={remote}
+      toggleRemoteEnabled={toggleRemoteEnabled}
       updateVariable={updateVariable}
+      variables={variables}
+      wrapperElement={overlayWrapper}
     />,
     overlayWrapper,
   );

src/ui/styles/overlay.less

@@ -172,7 +172,22 @@
   transition: max-height @duration ease-out, opacity @duration linear;
 
   .mdl-list__item--two-line {
+    overflow: hidden;
+    transition: max-height @duration ease-out, min-height @duration ease-out, opacity @duration linear;
+  }
+
+  .mdl-list__item--two-line.on {
+    opacity: 1;
     height: auto;
+    max-height: 200px;
+  }
+
+  .mdl-list__item--two-line.off {
+    padding: 0 16px;
+    height: 0;
+    min-height: 0;
+    max-height: 0;
+    opacity: 0;
   }
 
   a, i {
@@ -184,3 +199,8 @@
   max-height: 200px;
   opacity: 1;
 }
+
+.mdl-card__menu a {
+  color: @colorMdlBlue;
+  font-weight: @fontBoldWeight;
+}