1 files changed, 90 insertions, 0 deletions
diff --git a/tensorflow/tensorboard/components/tf-collapsable-pane/tf-collapsable-pane.html b/tensorflow/tensorboard/components/tf-collapsable-pane/tf-collapsable-pane.html
new file mode 100644
index 0000000000..c06d40a2ec
--- /dev/null
+++ b/tensorflow/tensorboard/components/tf-collapsable-pane/tf-collapsable-pane.html
@@ -0,0 +1,90 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/iron-collapse/iron-collapse.html">
+
+<dom-module id="tf-collapsable-pane">
+  <template>
+    <button
+      class="heading"
+      on-tap="togglePane"
+      open-button$="[[opened]]"
+    >
+    <span class="name">[[name]]</span>
+    <span class="hackpadding"></span>
+    <span class="count">
+      (<span>[[count]]</span>)
+    </span>
+  </button>
+    <iron-collapse opened="[[opened]]">
+      <div class="content">
+        <template is="dom-if" if="[[opened]]" restamp="[[restamp]]">
+          <content></content>
+        </template>
+      </div>
+    </iron-collapse>
+    <style>
+      .heading {
+        margin-top: 10px;
+        padding-left: 15px;
+        background-color: #f3f3f3;
+        border: 1px solid #dedede;
+        border-radius: 5px;
+        font-size: 18px;
+        cursor: pointer;
+        -webkit-tap-highlight-color: rgba(0,0,0,0);
+        width: 100%;
+        height: 30px;
+        box-sizing: border-box;
+        font-size: 16px;
+        display: inline-flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        line-height: 1;
+        padding-top: 2px;
+        padding-bottom: 2px;
+      }
+
+      .content {
+        padding: 15px;
+        border: 1px solid #dedede;
+        border-top: none;
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+      }
+      [open-button] {
+        border-bottom-left-radius: 0px !important;
+        border-bottom-right-radius: 0px !important;
+      }
+      .name {
+        flex-grow: 0;
+      }
+      .count {
+        flex-grow: 0;
+        float: right;
+        font-size: 12px;
+      }
+      .hackpadding {
+        /* An obnoxious hack, but I can't get justify-content: space-between to work */
+        flex-grow: 1;
+      }
+    </style>
+  </template>
+  <script>
+    Polymer({
+      is: "tf-collapsable-pane",
+      properties: {
+        opened: {type: Boolean, value: false},
+        restamp: {type: Boolean, value: true},
+        name: {type: String, observer: "hide"},
+        count: {type: Number},
+      },
+      hide: function() {
+        this.opened = false;
+      },
+      togglePane: function() {
+        this.opened = !this.opened;
+      }
+    });
+  </script>
+
+</dom-module>