Commit 97f5fe0e671c4a669ac11cfe19eabb5c3dbb575f
1 parent
40eb0979
cocreation paper card controllet
Showing
1 changed file
with
142 additions
and
0 deletions
controllets/cocreation-paper-card-controllet/cocreation-paper-card-controllet.html
0 → 100644
1 | +<link rel="import" href="../../bower_components/polymer/polymer.html"/> | |
2 | +<link rel="import" href="../../bower_components/paper-card/paper-card.html"/> | |
3 | +<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"/> | |
4 | +<link rel="import" href="../../bower_components/paper-button/paper-button.html"/> | |
5 | +<link rel="import" href="../../bower_components/iron-icon/iron-icon.html"/> | |
6 | +<link rel="import" href="../../bower_components/iron-collapse/iron-collapse.html"/> | |
7 | + | |
8 | + | |
9 | +<dom-module id="cocreation-paper-card-controllet"> | |
10 | + | |
11 | + <template> | |
12 | + <style> | |
13 | + | |
14 | + iron-icon{ | |
15 | + padding-left: 5px; | |
16 | + padding-right: 5px; | |
17 | + --iron-icon-height: 16px; | |
18 | + --iron-icon-width: 16px; | |
19 | + } | |
20 | + | |
21 | + iron-icon.icon-from{ | |
22 | + --iron-icon-fill-color : #000000; | |
23 | + } | |
24 | + | |
25 | + iron-icon.icon-to{ | |
26 | + --iron-icon-fill-color : #ff0000; | |
27 | + } | |
28 | + | |
29 | + paper-card.cocreation { | |
30 | + width: 310px; | |
31 | + } | |
32 | + | |
33 | + .from, .to { | |
34 | + font-size: 13px; | |
35 | + color: #CCCCCC; | |
36 | + } | |
37 | + | |
38 | + .rate-content { | |
39 | + @apply(--layout-flex); | |
40 | + float: left; | |
41 | + width: 100%; | |
42 | + } | |
43 | + | |
44 | + .rate-header { @apply(--paper-font-headline); } | |
45 | + .rate-name { color: var(--paper-grey-600); margin: 10px 0; } | |
46 | + | |
47 | + paper-icon-button.rate-icon { | |
48 | + --iron-icon-fill-color: white; | |
49 | + --iron-icon-stroke-color: var(--paper-grey-600); | |
50 | + } | |
51 | + | |
52 | + .collapse-content { | |
53 | + width: 200px; | |
54 | + padding: 15px; | |
55 | + } | |
56 | + | |
57 | + iron-collapse.iron-collapse-over | |
58 | + { | |
59 | + position: absolute; | |
60 | + left: -1px; | |
61 | + margin:0; | |
62 | + padding:0; | |
63 | + z-index:10; | |
64 | + background-color: #FFFFFF; | |
65 | + border: solid 1px #E6E6E6; | |
66 | + border-top: none !important; | |
67 | + min-width: 310px; | |
68 | + min-height: 188px; | |
69 | + } | |
70 | + </style> | |
71 | + | |
72 | + | |
73 | + <paper-card class="cocreation"> | |
74 | + <div class="rate-content"> | |
75 | + <div class="card-content"> | |
76 | + <div class="rate-header">{{name}}</div> | |
77 | + <div class="rate-name">{{owner}}</div> | |
78 | + <div> | |
79 | + <iron-icon class="icon-from" icon="alarm"></iron-icon> | |
80 | + <span class="from">{{from}}</span> | |
81 | + <iron-icon class="icon-to" icon="alarm-off"></iron-icon> | |
82 | + <span class="to">{{to}}</span> | |
83 | + </div> | |
84 | + </div> | |
85 | + <div class="card-actions"> | |
86 | + <paper-button>Explore</paper-button> | |
87 | + <paper-icon-button icon="expand-less" on-click="_toggle" style="float:right;"> | |
88 | + </paper-icon-button> | |
89 | + <iron-collapse class="iron-collapse-over" id="more_info" no-animation> | |
90 | + <div class="collapse-content"> | |
91 | + {{goal}} | |
92 | + </div> | |
93 | + </iron-collapse> | |
94 | + </div> | |
95 | + </div> | |
96 | + </paper-card> | |
97 | + | |
98 | + </template> | |
99 | + | |
100 | + <script src="../shared_js/perfect-scrollbar/js/min/perfect-scrollbar.jquery.min.js"></script> | |
101 | + | |
102 | + <script> | |
103 | + Polymer({ | |
104 | + is: "cocreation-paper-card-controllet", | |
105 | + | |
106 | + properties: { | |
107 | + name:{ | |
108 | + type: String, | |
109 | + value: "text" | |
110 | + }, | |
111 | + owner:{ | |
112 | + type: String, | |
113 | + value: "text" | |
114 | + }, | |
115 | + from:{ | |
116 | + type: String, | |
117 | + value: "text" | |
118 | + }, | |
119 | + to:{ | |
120 | + type: String, | |
121 | + value: "text" | |
122 | + }, | |
123 | + goal:{ | |
124 | + type: String, | |
125 | + value: "text" | |
126 | + }, | |
127 | + }, | |
128 | + | |
129 | + attached: function(){ | |
130 | + }, | |
131 | + | |
132 | + _toggle: function(){ | |
133 | + var moreInfo = this.$.more_info; | |
134 | + var iconButton = Polymer.dom(event).localTarget; | |
135 | + iconButton.icon = moreInfo.opened ? 'expand-less' : 'expand-more'; | |
136 | + moreInfo.toggle(); | |
137 | + } | |
138 | + | |
139 | + }) | |
140 | + </script> | |
141 | + | |
142 | +</dom-module> | |
0 | 143 | \ No newline at end of file | ... | ... |