Moves page layout to new template. (#6)

Author: chriscox

src/PageLayout.tsx

@@ -0,0 +1,35 @@
+/** @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";
+
+/** Returns a stateless page layout template. */
+export function PageLayout(props: any) {
+  return (
+    <div className="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+      <header className="mdl-layout__header">
+        <div className="mdl-layout__header-row">
+          <img src="remixer.svg" alt="Remixer Remote" />
+        </div>
+      </header>
+      <main className="mdl-layout__content">
+        <div className="page-content">
+          {props.children}
+        </div>
+      </main>
+    </div>
+  );
+}

src/RemoteController.tsx

@@ -23,6 +23,7 @@ import { remixer } from "../node_modules/material-remixer/src/core/Remixer";
 import { ConstraintType, DataType } from "../node_modules/material-remixer/src/lib/Constants";
 import { LocalStorage } from "../node_modules/material-remixer/src/lib/LocalStorage";
 import { OverlayController } from "../node_modules/material-remixer/src/ui/OverlayController";
+import { PageLayout } from "./PageLayout";
 import { Variable } from "../node_modules/material-remixer/src/core/variables/Variable";
 
 /** The globally exposed library MDL exposes as `window['componentHandler']`. */
@@ -116,15 +117,17 @@ class RemoteController {
     }
   }
 
-  /** Renders the OverlayController component to the DOM. */
+  /** Renders the remote controller to the DOM. */
    private redraw(): void {
      const overlayWrapper = document.getElementById("remixer-remote");
      ReactDOM.render(
-       <OverlayController
-         wrapperElement={overlayWrapper}
-         variables={this.variables}
-         updateVariable={this.updateVariable.bind(this)}
-       />,
+       <PageLayout>
+         <OverlayController
+           wrapperElement={overlayWrapper}
+           variables={this.variables}
+           updateVariable={this.updateVariable.bind(this)}
+         />
+       </PageLayout>,
        overlayWrapper,
      );
 

src/remote-style.css

@@ -27,6 +27,10 @@ body {
   padding: 0 40px 0 40px;
 }
 
+.mdl-layout__header-row img {
+  height: 32px;
+}
+
 .page-content {
   padding: 40px;
 }