Updates from mdl-list to flexbox for display of variable controls. Closes #86.

src/lib/Constants.ts

@@ -64,6 +64,7 @@ export const DataType = {
 
 /** CSS class and id constants. */
 export const CSS = {
+  // TODO(cjcox): Refactor out these MDL classes in favor of flexbox.
   MDL_LIST:               "mdl-list",
   MDL_LIST_ITEM:          "mdl-list__item",
   MDL_PRIMARY:            "mdl-list__item-primary-content",
@@ -73,11 +74,11 @@ export const CSS = {
   RMX_COLOR_SWATCH:       "rmx-color-swatch",
   RMX_COLOR_SWATCH_ITEM:  "rmx-color-swatch-item",
   RMX_DROPDOWN:           "rmx-dropdown",
+  RMX_LIST_ITEM:          "rmx-list-item",
   RMX_OVERLAY_FRAME:      "__remixer-overlay-frame__",
   RMX_OVERLAY_WRAPPER:    "rmx-overlay-wrapper",
   RMX_RADIO_LIST:         "rmx-radio-list",
   RMX_RADIO_LIST_ITEM:    "rmx-radio-list-item",
-  RMX_SELECTED_VALUE:     "rmx-selected-value",
   RMX_SHARE_MENU:         "rmx-share-menu",
   RMX_SLIDER:             "rmx-slider",
   RMX_SLIDER_MAX:         "rmx-slider-max-value",

src/ui/ListItem.tsx

@@ -0,0 +1,45 @@
+/** @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 properties assigned to the ListItem component.
+ * @interface
+ */
+interface IListItemProps {
+  title: string;
+  subtitle?: string;
+  inlineControl: boolean;
+  controlClass?: string;
+  children?: any;
+}
+
+/** Returns a stateless page layout template. */
+export function ListItem(props: IListItemProps) {
+  let inline = props.inlineControl ? "inline" : "";
+  return (
+    <div className={`${CSS.RMX_LIST_ITEM} ${props.controlClass} ${inline}`}>
+      <div className="meta">
+        <div className="title">{props.title}</div>
+        <div className="subtitle">{props.subtitle}</div>
+      </div>
+      <div className="control">{props.children}</div>
+    </div>
+  );
+}

src/ui/OverlayVariables.tsx

@@ -47,7 +47,7 @@ export class OverlayVariables extends React.Component<IOverlayVariableProps, voi
   /** @override */
   render() {
     return (
-      <div className={CSS.MDL_LIST}>
+      <div>
         {this.props.variables.map((variable) => {
           const Control = this.controlForVariable(variable);
           if (Control) {

src/ui/__tests__/ColorSwatchControl_test.tsx

@@ -36,7 +36,7 @@ describe("ColorSwatchControl", () => {
 
   it("have correct number of children with proper data values", () => {
     let list = TestUtils.findRenderedDOMComponentWithClass(
-      this.component, CSS.MDL_SECONDARY
+      this.component, "control"
     );
 
     expect(list.children.length).to.equal(3);

src/ui/__tests__/RadioListControl_test.tsx

@@ -35,7 +35,7 @@ describe("RadioListControl", () => {
 
   it("have correct number of children with proper data values", () => {
     let list = TestUtils.findRenderedDOMComponentWithClass(
-      this.component, CSS.MDL_SECONDARY
+      this.component, "control"
     );
 
     expect(list.children.length).to.equal(2);

src/ui/controls/ColorSwatchControl.tsx

@@ -19,6 +19,7 @@ import * as React from "react";
 import { ColorUtils } from "../../lib/ColorUtils";
 import { CSS } from "../../lib/Constants";
 import { IColorControlProps } from "./controlProps";
+import { ListItem } from "../ListItem";
 
 /**
  * A color swatch picker control consisting of a single color swatch for each
@@ -49,25 +50,21 @@ export class ColorSwatchControl extends React.Component<IColorControlProps, void
       selectedValue,
     } = this.props.variable;
     return (
-      <div className={`${CSS.RMX_COLOR_SWATCH} ${CSS.MDL_LIST_ITEM} ${CSS.MDL_TWO_LINE}`}>
-        <span className={CSS.MDL_PRIMARY}>
-          <span>{title}
-            <span className={CSS.RMX_SELECTED_VALUE}>
-              {ColorUtils.toRgbaString(selectedValue)}
-            </span>
-          </span>
-          <span className={CSS.MDL_SECONDARY}>
-            {limitedToValues.map((value: string) => (
-              <ColorSwatch
-                color={ColorUtils.toRgbaString(value)}
-                key={value}
-                isSelected={ColorUtils.areEqual(selectedValue, value)}
-                onClick={this.onClick}
-              />
-            ))}
-          </span>
-        </span>
-      </div>
+      <ListItem
+        controlClass={CSS.RMX_COLOR_SWATCH}
+        title={title}
+        subtitle={ColorUtils.toRgbaString(selectedValue)}
+        inlineControl={false}
+      >
+        {limitedToValues.map((value: string) => (
+          <ColorSwatch
+            color={ColorUtils.toRgbaString(value)}
+            key={value}
+            isSelected={ColorUtils.areEqual(selectedValue, value)}
+            onClick={this.onClick}
+          />
+        ))}
+      </ListItem>
     );
   }
 }

src/ui/controls/DropdownControl.tsx

@@ -18,6 +18,7 @@ import * as React from "react";
 
 import { CSS } from "../../lib/Constants";
 import { IStringControlProps } from "./controlProps";
+import { ListItem } from "../ListItem";
 
 /**
  * A dropdown control.
@@ -50,9 +51,12 @@ export class DropdownControl extends React.Component<IStringControlProps, void>
     const id = `${CSS.RMX_DROPDOWN}-${key}`;
 
     return (
-      <div className={`${CSS.RMX_DROPDOWN} ${CSS.MDL_LIST_ITEM}`}>
-        <span className={CSS.MDL_PRIMARY}>{title}</span>
-        <span className={CSS.MDL_SECONDARY}>
+      <ListItem
+        controlClass={CSS.RMX_DROPDOWN}
+        title={title}
+        inlineControl={true}
+      >
+        <div>
           <button id={id} className="mdl-button mdl-js-button">
             <span>
               {selectedValue}<i className="material-icons">arrow_drop_down</i>
@@ -69,8 +73,8 @@ export class DropdownControl extends React.Component<IStringControlProps, void>
               </li>
             ))}
           </ul>
-        </span>
-      </div>
+        </div>
+      </ListItem>
     );
   }
 }

src/ui/controls/RadioListControl.tsx

@@ -18,6 +18,7 @@ import * as React from "react";
 
 import { CSS } from "../../lib/Constants";
 import { IStringControlProps } from "./controlProps";
+import { ListItem } from "../ListItem";
 
 /**
  * A radio list control.
@@ -60,26 +61,27 @@ export class RadioListControl extends React.Component<IStringControlProps, void>
     const id = `${CSS.RMX_RADIO_LIST_ITEM}-${key}`;
 
     return (
-      <div className={`${CSS.RMX_RADIO_LIST} ${CSS.MDL_LIST_ITEM}`}>
-        <span className={CSS.MDL_PRIMARY}>{title}</span>
-        <span className={CSS.MDL_SECONDARY}>
-          {limitedToValues.map((value: string, i: number) => (
-            <label
-              ref={item => this.radioItems[i] = item}
-              className={`${CSS.RMX_RADIO_LIST_ITEM} mdl-radio mdl-js-radio mdl-js-ripple-effect`}
-              htmlFor={`${id}-${i}`} key={value}
-            >
-              <input type="radio" id={`${id}-${i}`}
-                className="mdl-radio__button"
-                name="options" value={value}
-                checked={selectedValue === value}
-                onChange={this.onChange}
-              />
-              <span className="mdl-radio__label">{value}</span>
-            </label>
-          ))}
-        </span>
-      </div>
+      <ListItem
+        controlClass={CSS.RMX_RADIO_LIST}
+        title={title}
+        inlineControl={true}
+      >
+        {limitedToValues.map((value: string, i: number) => (
+          <label
+            ref={item => this.radioItems[i] = item}
+            className={`${CSS.RMX_RADIO_LIST_ITEM} mdl-radio mdl-js-radio mdl-js-ripple-effect`}
+            htmlFor={`${id}-${i}`} key={value}
+          >
+            <input type="radio" id={`${id}-${i}`}
+              className="mdl-radio__button"
+              name="options" value={value}
+              checked={selectedValue === value}
+              onChange={this.onChange}
+            />
+            <span className="mdl-radio__label">{value}</span>
+          </label>
+        ))}
+      </ListItem>
     );
   }
 }

src/ui/controls/SliderControl.tsx

@@ -18,6 +18,7 @@ import * as React from "react";
 
 import { CSS } from "../../lib/Constants";
 import { IRangeControlProps } from "./controlProps";
+import { ListItem } from "../ListItem";
 
 /**
  * A slider control.
@@ -52,22 +53,22 @@ export class SliderControl extends React.Component<IRangeControlProps, void> {
     const id = `${CSS.RMX_SLIDER}-${key}`;
 
     return (
-      <div className={`${CSS.RMX_SLIDER} ${CSS.MDL_LIST_ITEM} ${CSS.MDL_TWO_LINE}`}>
-        <span className={CSS.MDL_PRIMARY}>
-          <span>{title}
-            <span className={CSS.RMX_SELECTED_VALUE}>{selectedValue}</span>
-          </span>
-          <span className={CSS.MDL_SECONDARY}>
-            <span className={CSS.RMX_SLIDER_MIN}>{minValue}</span>
-            <input id={id} type="range" className="mdl-slider mdl-js-slider"
-              min={minValue} max={maxValue} step={increment}
-              value={selectedValue}
-              onChange={this.onChange}
-            />
-            <span className={CSS.RMX_SLIDER_MAX}>{maxValue}</span>
-          </span>
-        </span>
-      </div>
+      <ListItem
+        controlClass={CSS.RMX_SLIDER}
+        title={title}
+        subtitle={selectedValue}
+        inlineControl={false}
+      >
+        <div>
+          <span className={CSS.RMX_SLIDER_MIN}>{minValue}</span>
+          <input id={id} type="range" className="mdl-slider mdl-js-slider"
+            min={minValue} max={maxValue} step={increment}
+            value={selectedValue}
+            onChange={this.onChange}
+          />
+          <span className={CSS.RMX_SLIDER_MAX}>{maxValue}</span>
+        </div>
+      </ListItem>
     );
   }
 }

src/ui/controls/SwitchControl.tsx

@@ -18,6 +18,7 @@ import * as React from "react";
 
 import { CSS } from "../../lib/Constants";
 import { IBooleanControlProps } from "./controlProps";
+import { ListItem } from "../ListItem";
 
 /**
  * A switch control.
@@ -55,23 +56,24 @@ export class SwitchControl extends React.Component<IBooleanControlProps, void> {
     const id = `${CSS.RMX_SWITCH}-${key}`;
 
     return (
-      <div className={`${CSS.RMX_SWITCH} ${CSS.MDL_LIST_ITEM}`}>
-        <span className={CSS.MDL_PRIMARY}>{title}</span>
-        <span className={CSS.MDL_SECONDARY}>
-          <label
-            ref={item => this.switchControl = item}
-            className="mdl-switch mdl-js-switch mdl-js-ripple-effect"
-            htmlFor={id}
-          >
-            <input
-              id={id} type="checkbox" className="mdl-switch__input"
-              checked={selectedValue}
-              onChange={this.onChange}
-            />
-            <span className="mdl-switch__label" />
-          </label>
-        </span>
-      </div>
+      <ListItem
+        controlClass={CSS.RMX_SWITCH}
+        title={title}
+        inlineControl={true}
+      >
+        <label
+          ref={item => this.switchControl = item}
+          className="mdl-switch mdl-js-switch mdl-js-ripple-effect"
+          htmlFor={id}
+        >
+          <input
+            id={id} type="checkbox" className="mdl-switch__input"
+            checked={selectedValue}
+            onChange={this.onChange}
+          />
+          <span className="mdl-switch__label" />
+        </label>
+      </ListItem>
     );
   }
 }

src/ui/controls/TextFieldControl.tsx

@@ -18,6 +18,7 @@ import * as React from "react";
 
 import { CSS, DataType } from "../../lib/Constants";
 import { IStringControlProps } from "./controlProps";
+import { ListItem } from "../ListItem";
 
 /**
  * A textfield control.
@@ -52,22 +53,24 @@ export class TextFieldControl extends React.Component<IStringControlProps, void>
     const pattern = isNumber ? "-?[0-9]*(\.[0-9]+)?" : ".*";
 
     return (
-      <div className={`${CSS.RMX_TEXTFIELD} ${CSS.MDL_LIST_ITEM} ${CSS.MDL_TWO_LINE}`}>
-        <span className={CSS.MDL_PRIMARY}>{title}
-          <span className={`${CSS.MDL_SECONDARY} mdl-textfield mdl-js-textfield`}>
-            <input className="mdl-textfield__input" type="text"
-              id={id}
-              pattern={pattern}
-              value={selectedValue}
-              onChange={this.onChange}
-            />
-            <label className="mdl-textfield__label" htmlFor={id}>
-              {`Enter ${isNumber ? "number" : "text"}...`}
-            </label>
-            <span className="mdl-textfield__error">Input is not a number!</span>
-          </span>
+      <ListItem
+        controlClass={CSS.RMX_TEXTFIELD}
+        title={title}
+        inlineControl={false}
+      >
+        <span className="mdl-textfield mdl-js-textfield">
+          <input className="mdl-textfield__input" type="text"
+            id={id}
+            pattern={pattern}
+            value={selectedValue}
+            onChange={this.onChange}
+          />
+          <label className="mdl-textfield__label" htmlFor={id}>
+            {`Enter ${isNumber ? "number" : "text"}...`}
+          </label>
+          <span className="mdl-textfield__error">Input is not a number!</span>
         </span>
-      </div>
+      </ListItem>
     );
   }
 }