third_party/polymer/components-chromium/core-animated-pages/demos/nested-animated-pages.html - Issue 1215543002: Remove Polymer 0.5.

Side by Side Diff: third_party/polymer/components-chromium/core-animated-pages/demos/nested-animated-pages.html

Issue 1215543002: Remove Polymer 0.5. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: fix unit test Created 5 years, 5 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

« no previous file with comments | « third_party/polymer/components-chromium/core-animated-pages/demos/nested.html ('k') | third_party/polymer/components-chromium/core-animated-pages/demos/news.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!--

2 @license

3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.

4 This code may only be used under the BSD style license found at http://polym er.github.io/LICENSE.txt

5 The complete set of authors may be found at http://polymer.github.io/AUTHORS .txt

6 The complete set of contributors may be found at http://polymer.github.io/CO NTRIBUTORS.txt

7 Code distributed by Google as part of the polymer project is also

8 subject to an additional IP rights grant found at http://polymer.github.io/P ATENTS.txt

9 -->

10 <link href="../../core-icons/core-icons.html" rel="import">

11 <link href="../../core-icon-button/core-icon-button.html" rel="import">

12 <link href="../core-animated-pages.html" rel="import">

13

14 <polymer-element name="nested-animated-pages">

15 <template>

16 <style>

17 :host {

18 display: block;

19 position: relative;

20 }

21

22 core-animated-pages {

23 position: absolute;

24 top: 0;

25 left: 0;

26 right: 0;

27 bottom: 0;

28 }

29

30 .tall-toolbar {

31 box-sizing: border-box;

32 height: 240px;

33 }

34

35 .tall-toolbar.colored {

36 fill: #fff;

37 color: #fff;

38 }

39

40 .tall-toolbar [flex] {

41 font-size: 1.5em;

42 }

43

44 core-icon-button {

45 margin: 16px;

46 }

47

48 .body {

49 background-color: #f1f1f1;

50 }

51

52 .square {

53 position: absolute;

54 width: 150px;

55 height: 150px;

56 left: 16px;

57 top: 175px;

58 }

59

60 </style>

61 <core-animated-pages id="pages" selected="{{page}}" selectedItem="{{selectedIt em}}" transitions="hero-transition" no-transition?="{{noTransition}}">

62

63 <section id="page1" cross-fade>

64 <div class="tall-toolbar colored" style="background-color:orange;" layout vertical hero-id="thing" hero?="{{page === 0 \|\| !noTransition}}">

65 <div layout horizontal center>

66 <core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button>

67 <div flex>One</div>

68 <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core- icon-button>

69 </div>

70 <div flex></div>

71 </div>

72 <div flex class="body"></div>

73 </section>

74

75 <section layout vertical id="page2" cross-fade>

76 <div class="tall-toolbar" layout vertical>

77 <div layout horizontal center>

78 <core-icon-button icon="clear" on-tap="{{back}}"></core-icon-button>

79 <div flex>Two</div>

80 <core-icon-button icon="arrow-forward" on-tap="{{transition}}"></core- icon-button>

81 </div>

82 <div flex></div>

83 </div>

84 <div flex class="body"></div>

85 <div class="square" style="background-color:orange;" hero-id="thing" hero? ="{{page === 1 \|\| !noTransition}}"></div>

86 </section>

87

88 </core-animated-pages>

89 </template>

90 <script>

91

92 Polymer({

93

94 publish: {

95 page: {value: 0}

96 },

97

98 selectedItem: null,

99 noTransition: true,

100

101 back: function() {

102 this.noTransition = true;

103 this.fire('nested-back');

104 },

105

106 transition: function() {

107 this.noTransition = false;

108 this.page = this.page === 0 ? 1 : 0;

109 }

110

111 });

112 </script>

113 </polymer-element>

OLD	NEW