{"action":"created","comment":{"url":"https://api.github.com/repos/callemall/material-ui/pulls/comments/47410794","id":47410794,"diff_hunk":"@@ -0,0 +1,79 @@\n+import React from 'react';\n+import {AppBar} from 'material-ui';\n+\n+import IconButton from 'icon-button';\n+import MoreVertIcon from 'svg-icons/navigation/more-vert';\n+import ArrowBack from 'svg-icons/navigation/arrow-back';\n+\n+const AppBarWaterfallExample = React.createClass({\n+\n+  render() {\n+    return (\n+      <AppBar\n+        position=\"waterfall\"\n+        waterfall={{\n+          minHeight: 64,\n+          maxHeight: 210,\n+          children: this.getWaterfallChildren(),\n+          onHeightChange: this.onHeightChange,\n+        }}\n+        title={\n+          <div\n+            ref={el => { this.titleEl = el; }}>\n+            Waterfall AppBar\n+          </div>\n+        }\n+        iconElementLeft={\n+          <IconButton onClick={this.onBackClick}>\n+            <ArrowBack />\n+          </IconButton>\n+        }\n+        iconElementRight={\n+          <IconButton>\n+            <MoreVertIcon/>\n+          </IconButton>\n+        }\n+        />\n+    );\n+  },\n+\n+  getWaterfallChildren() {\n+    let styles = this.getStyles();\n+    return (\n+      <div\n+        style={{overflow: 'hidden'}}>\n+        <img\n+          ref={el => { this.logoEl = el; }}\n+          style={styles.logo}\n+          src=\"images/material-ui-logo.svg\"/>\n+      </div>\n+    );\n+  },\n+\n+  onHeightChange({height, minHeight, maxHeight}) {\n+    let interpolation = (height - minHeight) / (maxHeight - minHeight);\n+\n+    // For best performance, we will directly modify style on DOM elements","path":"docs/src/app/components/examples/app-bar-waterfall-example.jsx","position":56,"original_position":56,"commit_id":"42068dc3d53861e5286ca81302a0083c73ab4396","original_commit_id":"42068dc3d53861e5286ca81302a0083c73ab4396","user":{"login":"subjectix","id":8528759,"avatar_url":"https://avatars.githubusercontent.com/u/8528759?v=3","gravatar_id":"","url":"https://api.github.com/users/subjectix","html_url":"https://github.com/subjectix","followers_url":"https://api.github.com/users/subjectix/followers","following_url":"https://api.github.com/users/subjectix/following{/other_user}","gists_url":"https://api.github.com/users/subjectix/gists{/gist_id}","starred_url":"https://api.github.com/users/subjectix/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/subjectix/subscriptions","organizations_url":"https://api.github.com/users/subjectix/orgs","repos_url":"https://api.github.com/users/subjectix/repos","events_url":"https://api.github.com/users/subjectix/events{/privacy}","received_events_url":"https://api.github.com/users/subjectix/received_events","type":"User","site_admin":false},"body":"yeah, providing the both ways to do it seems like a good idea :+1: Thanks","created_at":"2015-12-11T22:01:52Z","updated_at":"2015-12-11T22:01:52Z","html_url":"https://github.com/callemall/material-ui/pull/1321#discussion_r47410794","pull_request_url":"https://api.github.com/repos/callemall/material-ui/pulls/1321","_links":{"self":{"href":"https://api.github.com/repos/callemall/material-ui/pulls/comments/47410794"},"html":{"href":"https://github.com/callemall/material-ui/pull/1321#discussion_r47410794"},"pull_request":{"href":"https://api.github.com/repos/callemall/material-ui/pulls/1321"}}},"pull_request":{"url":"https://api.github.com/repos/callemall/material-ui/pulls/1321","id":41418306,"html_url":"https://github.com/callemall/material-ui/pull/1321","diff_url":"https://github.com/callemall/material-ui/pull/1321.diff","patch_url":"https://github.com/callemall/material-ui/pull/1321.patch","issue_url":"https://api.github.com/repos/callemall/material-ui/issues/1321","number":1321,"state":"open","locked":false,"title":"[AppBar] waterfall behaviour","user":{"login":"igorbt","id":1198924,"avatar_url":"https://avatars.githubusercontent.com/u/1198924?v=3","gravatar_id":"","url":"https://api.github.com/users/igorbt","html_url":"https://github.com/igorbt","followers_url":"https://api.github.com/users/igorbt/followers","following_url":"https://api.github.com/users/igorbt/following{/other_user}","gists_url":"https://api.github.com/users/igorbt/gists{/gist_id}","starred_url":"https://api.github.com/users/igorbt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/igorbt/subscriptions","organizations_url":"https://api.github.com/users/igorbt/orgs","repos_url":"https://api.github.com/users/igorbt/repos","events_url":"https://api.github.com/users/igorbt/events{/privacy}","received_events_url":"https://api.github.com/users/igorbt/received_events","type":"User","site_admin":false},"body":"Implemented a type of AppBar position / behavior that basically transition AppBar from an initial height (maxHeight) to a minimum height while scrolling, with possibility of controlling transitions of AppBar children to create nice effects (check example in the docs and screens below). \r\n\r\n![1](https://cloud.githubusercontent.com/assets/1198924/9026442/f9a6aa76-3937-11e5-9da0-abfa7c3b972f.png)\r\n![2](https://cloud.githubusercontent.com/assets/1198924/9026444/fd6d19e2-3937-11e5-96ef-929cc4079f9d.png)\r\n![3](https://cloud.githubusercontent.com/assets/1198924/9026445/00343516-3938-11e5-9847-13eb17b2504b.png)\r\n![4](https://cloud.githubusercontent.com/assets/1198924/9026447/02dffcdc-3938-11e5-9315-c5f8e3d4502d.png)\r\n\r\nI named it waterfall, because of a similarity with [Polymer's paper-header-element](https://elements.polymer-project.org/elements/paper-header-panel) waterfall mode.\r\n\r\nChanged implementation of fixed position. Now AppCanvas don't set anymore position fixed on a child AppBar. Instead, AppBar should specify it's position (witch, by default is \"fixed\").\r\n\r\nAlso, AppBar now takes care by itself of creating a spacer div when in position fixed (or waterfall), so that there's no need of putting margins/paddings on the static contents that is below AppBar.\r\n\r\nI needed a full-page example for demo in docs, this is why I made a new route for this.","created_at":"2015-08-02T14:02:24Z","updated_at":"2015-12-11T22:01:52Z","closed_at":null,"merged_at":null,"merge_commit_sha":"2a04e4549b328ebcaf56ac924891c2c7b21a238e","assignee":null,"milestone":null,"commits_url":"https://api.github.com/repos/callemall/material-ui/pulls/1321/commits","review_comments_url":"https://api.github.com/repos/callemall/material-ui/pulls/1321/comments","review_comment_url":"https://api.github.com/repos/callemall/material-ui/pulls/comments{/number}","comments_url":"https://api.github.com/repos/callemall/material-ui/issues/1321/comments","statuses_url":"https://api.github.com/repos/callemall/material-ui/statuses/42068dc3d53861e5286ca81302a0083c73ab4396","head":{"label":"igorbt:waterfall-appbar","ref":"waterfall-appbar","sha":"42068dc3d53861e5286ca81302a0083c73ab4396","user":{"login":"igorbt","id":1198924,"avatar_url":"https://avatars.githubusercontent.com/u/1198924?v=3","gravatar_id":"","url":"https://api.github.com/users/igorbt","html_url":"https://github.com/igorbt","followers_url":"https://api.github.com/users/igorbt/followers","following_url":"https://api.github.com/users/igorbt/following{/other_user}","gists_url":"https://api.github.com/users/igorbt/gists{/gist_id}","starred_url":"https://api.github.com/users/igorbt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/igorbt/subscriptions","organizations_url":"https://api.github.com/users/igorbt/orgs","repos_url":"https://api.github.com/users/igorbt/repos","events_url":"https://api.github.com/users/igorbt/events{/privacy}","received_events_url":"https://api.github.com/users/igorbt/received_events","type":"User","site_admin":false},"repo":{"id":39329005,"name":"material-ui","full_name":"igorbt/material-ui","owner":{"login":"igorbt","id":1198924,"avatar_url":"https://avatars.githubusercontent.com/u/1198924?v=3","gravatar_id":"","url":"https://api.github.com/users/igorbt","html_url":"https://github.com/igorbt","followers_url":"https://api.github.com/users/igorbt/followers","following_url":"https://api.github.com/users/igorbt/following{/other_user}","gists_url":"https://api.github.com/users/igorbt/gists{/gist_id}","starred_url":"https://api.github.com/users/igorbt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/igorbt/subscriptions","organizations_url":"https://api.github.com/users/igorbt/orgs","repos_url":"https://api.github.com/users/igorbt/repos","events_url":"https://api.github.com/users/igorbt/events{/privacy}","received_events_url":"https://api.github.com/users/igorbt/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/igorbt/material-ui","description":"React Components that Implement Google's Material Design.","fork":true,"url":"https://api.github.com/repos/igorbt/material-ui","forks_url":"https://api.github.com/repos/igorbt/material-ui/forks","keys_url":"https://api.github.com/repos/igorbt/material-ui/keys{/key_id}","collaborators_url":"https://api.github.com/repos/igorbt/material-ui/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/igorbt/material-ui/teams","hooks_url":"https://api.github.com/repos/igorbt/material-ui/hooks","issue_events_url":"https://api.github.com/repos/igorbt/material-ui/issues/events{/number}","events_url":"https://api.github.com/repos/igorbt/material-ui/events","assignees_url":"https://api.github.com/repos/igorbt/material-ui/assignees{/user}","branches_url":"https://api.github.com/repos/igorbt/material-ui/branches{/branch}","tags_url":"https://api.github.com/repos/igorbt/material-ui/tags","blobs_url":"https://api.github.com/repos/igorbt/material-ui/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/igorbt/material-ui/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/igorbt/material-ui/git/refs{/sha}","trees_url":"https://api.github.com/repos/igorbt/material-ui/git/trees{/sha}","statuses_url":"https://api.github.com/repos/igorbt/material-ui/statuses/{sha}","languages_url":"https://api.github.com/repos/igorbt/material-ui/languages","stargazers_url":"https://api.github.com/repos/igorbt/material-ui/stargazers","contributors_url":"https://api.github.com/repos/igorbt/material-ui/contributors","subscribers_url":"https://api.github.com/repos/igorbt/material-ui/subscribers","subscription_url":"https://api.github.com/repos/igorbt/material-ui/subscription","commits_url":"https://api.github.com/repos/igorbt/material-ui/commits{/sha}","git_commits_url":"https://api.github.com/repos/igorbt/material-ui/git/commits{/sha}","comments_url":"https://api.github.com/repos/igorbt/material-ui/comments{/number}","issue_comment_url":"https://api.github.com/repos/igorbt/material-ui/issues/comments{/number}","contents_url":"https://api.github.com/repos/igorbt/material-ui/contents/{+path}","compare_url":"https://api.github.com/repos/igorbt/material-ui/compare/{base}...{head}","merges_url":"https://api.github.com/repos/igorbt/material-ui/merges","archive_url":"https://api.github.com/repos/igorbt/material-ui/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/igorbt/material-ui/downloads","issues_url":"https://api.github.com/repos/igorbt/material-ui/issues{/number}","pulls_url":"https://api.github.com/repos/igorbt/material-ui/pulls{/number}","milestones_url":"https://api.github.com/repos/igorbt/material-ui/milestones{/number}","notifications_url":"https://api.github.com/repos/igorbt/material-ui/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/igorbt/material-ui/labels{/name}","releases_url":"https://api.github.com/repos/igorbt/material-ui/releases{/id}","created_at":"2015-07-19T09:37:52Z","updated_at":"2015-07-19T09:37:53Z","pushed_at":"2015-12-10T23:13:51Z","git_url":"git://github.com/igorbt/material-ui.git","ssh_url":"git@github.com:igorbt/material-ui.git","clone_url":"https://github.com/igorbt/material-ui.git","svn_url":"https://github.com/igorbt/material-ui","homepage":"http://material-ui.com","size":28436,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"callemall:master","ref":"master","sha":"0e358b9e06775db0231d1c2be1fe1b9e7ada62eb","user":{"login":"callemall","id":1262264,"avatar_url":"https://avatars.githubusercontent.com/u/1262264?v=3","gravatar_id":"","url":"https://api.github.com/users/callemall","html_url":"https://github.com/callemall","followers_url":"https://api.github.com/users/callemall/followers","following_url":"https://api.github.com/users/callemall/following{/other_user}","gists_url":"https://api.github.com/users/callemall/gists{/gist_id}","starred_url":"https://api.github.com/users/callemall/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/callemall/subscriptions","organizations_url":"https://api.github.com/users/callemall/orgs","repos_url":"https://api.github.com/users/callemall/repos","events_url":"https://api.github.com/users/callemall/events{/privacy}","received_events_url":"https://api.github.com/users/callemall/received_events","type":"Organization","site_admin":false},"repo":{"id":23083156,"name":"material-ui","full_name":"callemall/material-ui","owner":{"login":"callemall","id":1262264,"avatar_url":"https://avatars.githubusercontent.com/u/1262264?v=3","gravatar_id":"","url":"https://api.github.com/users/callemall","html_url":"https://github.com/callemall","followers_url":"https://api.github.com/users/callemall/followers","following_url":"https://api.github.com/users/callemall/following{/other_user}","gists_url":"https://api.github.com/users/callemall/gists{/gist_id}","starred_url":"https://api.github.com/users/callemall/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/callemall/subscriptions","organizations_url":"https://api.github.com/users/callemall/orgs","repos_url":"https://api.github.com/users/callemall/repos","events_url":"https://api.github.com/users/callemall/events{/privacy}","received_events_url":"https://api.github.com/users/callemall/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/callemall/material-ui","description":"React Components that Implement Google's Material Design.","fork":false,"url":"https://api.github.com/repos/callemall/material-ui","forks_url":"https://api.github.com/repos/callemall/material-ui/forks","keys_url":"https://api.github.com/repos/callemall/material-ui/keys{/key_id}","collaborators_url":"https://api.github.com/repos/callemall/material-ui/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/callemall/material-ui/teams","hooks_url":"https://api.github.com/repos/callemall/material-ui/hooks","issue_events_url":"https://api.github.com/repos/callemall/material-ui/issues/events{/number}","events_url":"https://api.github.com/repos/callemall/material-ui/events","assignees_url":"https://api.github.com/repos/callemall/material-ui/assignees{/user}","branches_url":"https://api.github.com/repos/callemall/material-ui/branches{/branch}","tags_url":"https://api.github.com/repos/callemall/material-ui/tags","blobs_url":"https://api.github.com/repos/callemall/material-ui/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/callemall/material-ui/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/callemall/material-ui/git/refs{/sha}","trees_url":"https://api.github.com/repos/callemall/material-ui/git/trees{/sha}","statuses_url":"https://api.github.com/repos/callemall/material-ui/statuses/{sha}","languages_url":"https://api.github.com/repos/callemall/material-ui/languages","stargazers_url":"https://api.github.com/repos/callemall/material-ui/stargazers","contributors_url":"https://api.github.com/repos/callemall/material-ui/contributors","subscribers_url":"https://api.github.com/repos/callemall/material-ui/subscribers","subscription_url":"https://api.github.com/repos/callemall/material-ui/subscription","commits_url":"https://api.github.com/repos/callemall/material-ui/commits{/sha}","git_commits_url":"https://api.github.com/repos/callemall/material-ui/git/commits{/sha}","comments_url":"https://api.github.com/repos/callemall/material-ui/comments{/number}","issue_comment_url":"https://api.github.com/repos/callemall/material-ui/issues/comments{/number}","contents_url":"https://api.github.com/repos/callemall/material-ui/contents/{+path}","compare_url":"https://api.github.com/repos/callemall/material-ui/compare/{base}...{head}","merges_url":"https://api.github.com/repos/callemall/material-ui/merges","archive_url":"https://api.github.com/repos/callemall/material-ui/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/callemall/material-ui/downloads","issues_url":"https://api.github.com/repos/callemall/material-ui/issues{/number}","pulls_url":"https://api.github.com/repos/callemall/material-ui/pulls{/number}","milestones_url":"https://api.github.com/repos/callemall/material-ui/milestones{/number}","notifications_url":"https://api.github.com/repos/callemall/material-ui/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/callemall/material-ui/labels{/name}","releases_url":"https://api.github.com/repos/callemall/material-ui/releases{/id}","created_at":"2014-08-18T19:11:54Z","updated_at":"2015-12-11T21:54:05Z","pushed_at":"2015-12-11T18:27:25Z","git_url":"git://github.com/callemall/material-ui.git","ssh_url":"git@github.com:callemall/material-ui.git","clone_url":"https://github.com/callemall/material-ui.git","svn_url":"https://github.com/callemall/material-ui","homepage":"http://www.material-ui.com","size":38897,"stargazers_count":12382,"watchers_count":12382,"language":"JavaScript","has_issues":true,"has_downloads":true,"has_wiki":true,"has_pages":true,"forks_count":1997,"mirror_url":null,"open_issues_count":442,"forks":1997,"open_issues":442,"watchers":12382,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/callemall/material-ui/pulls/1321"},"html":{"href":"https://github.com/callemall/material-ui/pull/1321"},"issue":{"href":"https://api.github.com/repos/callemall/material-ui/issues/1321"},"comments":{"href":"https://api.github.com/repos/callemall/material-ui/issues/1321/comments"},"review_comments":{"href":"https://api.github.com/repos/callemall/material-ui/pulls/1321/comments"},"review_comment":{"href":"https://api.github.com/repos/callemall/material-ui/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/callemall/material-ui/pulls/1321/commits"},"statuses":{"href":"https://api.github.com/repos/callemall/material-ui/statuses/42068dc3d53861e5286ca81302a0083c73ab4396"}}}}