1 files changed, 50 insertions, 0 deletions
diff --git a/tensorflow/tensorboard/components/tf-dashboard-common/tf-dashboard-layout.html b/tensorflow/tensorboard/components/tf-dashboard-common/tf-dashboard-layout.html
new file mode 100644
index 0000000000..89c51342fe
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-dashboard-common/tf-dashboard-layout.html
@@ -0,0 +1,50 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="scrollbar-style.html">
+<link rel="import" href="tensorboard-color.html">
+<!--
+Generic layout for a dashboard.
+-->
+<dom-module id="tf-dashboard-layout">
+  <template>
+    <div id="sidebar">
+      <content select=".sidebar"></content>
+    </div>
+
+    <div id="center" class="scrollbar">
+      <content select=".center"></content>
+    </div>
+    <style include="scrollbar-style"></style>
+    <style>
+      #sidebar {
+        width: inherit;
+        height: 100%;
+        background-color: var(--tb-grey-darker);
+        background-image: linear-gradient(to right, var(--tb-grey-lighter), var(--tb-grey-lighter));
+        overflow: ellipsis;
+        padding-left: 10px;
+        padding-right: 10px;
+        flex-grow: 0;
+        flex-shrink: 0;
+      }
+
+      #center {
+        margin: 0 10px;
+        height: 100%;
+        overflow-y: scroll;
+        padding-right: 12px;
+        flex-grow: 1;
+        flex-shrink: 1;
+      }
+      :host {
+        display: flex;
+        flex-direction: row;
+        height: 100%;
+      }
+    </style>
+  </template>
+  <script>
+    Polymer({
+      is: "tf-dashboard-layout",
+    });
+  </script>
+</dom-module>