diff options
Diffstat (limited to 'tensorflow/tensorboard/components/tf-collapsable-pane')
3 files changed, 125 insertions, 0 deletions
diff --git a/tensorflow/tensorboard/components/tf-collapsable-pane/demo/index.html b/tensorflow/tensorboard/components/tf-collapsable-pane/demo/index.html new file mode 100644 index 0000000000..8906b0f3da --- /dev/null +++ b/tensorflow/tensorboard/components/tf-collapsable-pane/demo/index.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="../tf-collapsable-pane.html"> + </head> + <body> + <style> + </style> + <tf-collapsable-pane name="foo"> + <h1>This is content inside the pane.</h1> + </tf-collapsable-pane> + </body> + <script> + + </script> +</html> diff --git a/tensorflow/tensorboard/components/tf-collapsable-pane/index.html b/tensorflow/tensorboard/components/tf-collapsable-pane/index.html new file mode 100644 index 0000000000..032e5be8c8 --- /dev/null +++ b/tensorflow/tensorboard/components/tf-collapsable-pane/index.html @@ -0,0 +1,18 @@ +<!doctype html> +<html> +<head> + + <title>tf-collapsable-pane</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="../../bower_components/iron-component-page/iron-component-page.html"> + +</head> +<body> + + <iron-component-page></iron-component-page> + +</body> +</html> 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> |