/
px-tile.html
248 lines (224 loc) · 10.5 KB
/
px-tile.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!--
Copyright (c) 2018, General Electric
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!--
Relative paths assume component is being run from inside an app or another component, where dependencies are flat
siblings. When this component is run from its own repo (e.g. tests, examples), we assume the server is started with
'gulp serve' (or similar server setup) to enable correct finding of bower dependencies for local runs.
-->
<link rel="import" href="../polymer/polymer.html" />
<link rel="import" href="px-tile-action-buttons.html"/>
<link rel="import" href="css/px-tile-styles.html">
<!--
Px-tile is a highly customizable component for displaying text and an image or other component. Example use cases include contact cards, work orders, inspections, media tiles, or an overview of a device.
### Note
There are two `<slot>` elements in which you can add custom content - `thumbnail` and `footer`.
Since these `<slot>` elements are used to display custom content, you are responsible for styling that content accordingly.
Make sure the content follows Predix design guidelines.
### Usage
#### Example: Thumbnail Image
```
<px-tile
main-title="title text"
subtitle="subtitle text"
description="description text"
overlay-description="overlay description text"
hoverable>
<div slot="thumbnail">
<img src="../turbine.jpg" />
</div>
<div slot="footer">Footer Content Here</div>
</px-tile>
```
#### Example: Displaying a Predix Chart
```
<px-tile
main-title="title text"
subtitle="subtitle text"
description="description text"
overlay-description="overlay description text"
action-buttons='{"items":[{"id":"1","label":"Return","size":"small"},{"id":"2","label":"Scrap","size":"small"},{"id":"3","label":"Download","size":"small","type":"bare","buttonIcon":true,"icon":"px-utl:download"}]}'
hoverable>
<div slot="thumbnail" class="px-simple-horizontal-bar-chart">
<px-simple-horizontal-bar-chart
id="default-chart"
width="auto"
height="160"
chart-data="[100,200,300,400,500,360]"
colors='["#123453","#234784","#345453","#467564","#578785","#578756"]'
domain-max="500"
legend-labels='[
"No Action", "Scheduled Maintenance", "Sensor Repair",
"Unplanned Maintenance", "Ops Changes", "Forced Outage", "eight"
]'>
</px-simple-horizontal-bar-chart>
</div>
<div slot="footer">Footer Content Here</div>
</px-tile>
```
### Action Buttons Configuration
The `actionButtons` property expects a configuration object in the following format.
The `items` array specifies the configuration of each button, and the `maxButtons` property
determines how many buttons to display in the tile - if more buttons are defined, they will
be placed into an overflow dropdown menu instead. The first button configuration with `isPrimary`
set as true will be considered the main button for the tile, and will be displayed in the title/header
area of the tile - all others will be placed in the bottom of the tile.
```
{
"items": [
{
"id": "1",
"label": "Return",
"size": "small"
},
{
"id": "2",
"label": "Scrap",
"size": "small"
},
{
"id": "3",
"label": "Download",
"size": "small",
"type": "bare",
"buttonIcon": true,
"icon": "px-utl:download",
"isPrimary": true
}
],
"maxButtons": "2"
}
```
Each button definition in the `items` array can have the following properties:
Object Key| Value Type | Options | Default
:----|:----|:---|:---
`id` | String | |
`label` | String | |
`size` | String | `small, regular, large, huge, full` | regular
`type` | String | `primary, secondary, call to action, tertiary, bare, bare primary` | secondary
`buttonIcon` | Boolean | `true, false` | false
`icon` | String | See https://www.predix-ui.com/#/elements/px-icon-set |
`isPrimary` | Boolean | `true, false` | false
### Styling
The following custom properties are also available for styling:
Custom property | Description | Default
:----------------|:-------------|:----------
`--px-tile-width` | Width of the whole tile | `20rem`
`--px-tile-height` | Height of the whole tile | `20rem`
`--px-tile-thumbnail-width` | Width of the thumbnail portion | `20rem`
`--px-tile-thumbnail-height` | Height of the thumbnail portion | `11.66667rem`
`--px-tile-thumbnail-background-color` | Background color of the thumbnail portion | `white`
`--px-tile-background-color` | Background color of the tile | `lightgray`
`--px-tile-about-min-height` | Height of the about bottom bar | `inherit`
`--px-tile-about-padding` | Padding of the about bottom bar | `inherit`
`--px-tile-about-right` | Right of the about bottom bar | `inherit`
`--px-tile-about-bottom` | Bottom of the about bottom bar | `inherit`
`--px-tile-text-background-color` | Background color of the the bottom bar of the tile | `lightgray`
`--px-tile-title-color` | Text color for title in the bottom bar | `darkslategray`
`--px-tile-subtitle-color` | Text color for subtitle in the bottom bar | `gray`
`--px-tile-text-color` | Text color for the description text in the bottom bar | `darkslategray`
`--px-tile-action-buttons-position` | Position of action buttons | `inherit`
`--px-tile-action-buttons-right` | Right position of action buttons | `inherit`
`--px-tile-action-buttons-bottom` | Bottom position of action buttons | `inherit`
`--px-tile-overlay-desc-line-height` | Line Height of overlay description text | `1rem`
`--px-tile-overlay-desc-font-size` | Font Size of overlay description text | `0.8rem`
`--px-tile-overlay-background-color` | Background color for the overlay of a hoverable tile | `black`
`--px-tile-overlay-text-color` | Text color for the overlay of a hoverable tile | `white`
`--px-tile-overlay-action-buttons-position` | Position of overlay action buttons | `inherit`
`--px-tile-overlay-action-buttons-bottom` | Bottom position of overlay action buttons | `inherit`
`--px-tile-overlay-action-buttons-right` | Right position of overlay action buttons | `inherit`
`--px-tile-overlay-width` | Width of overlay action buttons | `inherit`
`--px-tile-desc-text-height` | Multi-line truncation effect for description text with the specified rem value | `2rem`
`--px-tile-text-height` | Height of the about section (bottom section) | `8.333rem`
@element px-tile
@blurb A tile component with two states and a sliding animation.
@homepage index.html
@demo index.html
-->
<dom-module id="px-tile">
<template>
<style include="px-tile-styles"></style>
<div class="tile__container">
<div id="tile" class="tile shadow-component">
<div id="thumbnail" class="thumbnail">
<slot name="thumbnail"></slot>
</div>
<template is="dom-if" if="{{_hasData}}">
<div id="tile-text-wrapper" class="tile-text-wrapper tile-text-adjust">
<template is="dom-if" if="{{_hasTitleSubtitleActionBtn}}">
<div class="title-container">
<template is="dom-if" if="{{_hasTitleActionBtn}}">
<div class="title flex flex--justify">
<template is="dom-if" if="{{mainTitle}}">
<span class="epsilon truncate title-span">{{mainTitle}}</span>
</template>
<span></span> <!-- empty span to right align primary action button -->
<template is="dom-if" if="{{_hasPrimaryBtn}}">
<px-tile-action-buttons id="pxTilePrimaryBtns" action-buttons="{{actionButtons}}" primary="true"></px-tile-action-buttons>
</template>
</div>
</template>
<template is="dom-if" if="{{subtitle}}">
<div class="subtitle zeta truncate"><span class="subtitle-span">{{subtitle}}</span></div>
</template>
</div>
</template>
<template is="dom-if" if="{{description}}">
<div class="text zeta"><div class="block-with-text">{{description}}</div></div>
</template>
<template is="dom-if" if="{{_hasActionButtons}}">
<div class="action-buttons-wrapper">
<px-tile-action-buttons id="pxActionButtons" action-buttons="{{actionButtons}}"></px-tile-action-buttons>
</div>
</template>
</div>
</template>
</div>
<div id="overlay" class$="overlay {{_getClass(_hovered)}}">
<div class="flex flex--col flex--justify full-height">
<div class="overlay-top-content">
<div class="header-wrapper">
<template is="dom-if" if="{{_hasTitleActionBtn}}">
<div class="title flex flex--justify">
<template is="dom-if" if="{{mainTitle}}">
<span class="epsilon truncate title-span">{{mainTitle}}</span>
</template>
<span></span> <!-- empty span to right align primary action button -->
<template is="dom-if" if="{{_hasPrimaryBtn}}">
<px-tile-action-buttons id="pxOverlayTitleButton" action-buttons="{{actionButtons}}" primary="true" overlay="true" hover-text-color="{{_hoverTextColor}}"></px-tile-action-buttons>
</template>
</div>
</template>
<template is="dom-if" if="{{subtitle}}">
<div class="subtitle zeta truncate"><span class="subtitle-span">{{subtitle}}</span></div>
</template>
</div>
<template is="dom-if" if="{{overlayDescription}}">
<div class="text zeta">{{overlayDescription}}</div>
</template>
</div>
<div class="footer-container">
<div class="footer">
<slot name="footer"></slot>
</div>
<template is="dom-if" if="{{_hasActionButtons}}">
<div class="action-overlay-btns">
<px-tile-action-buttons id="pxOverlayActionButtons" action-buttons="{{actionButtons}}" overlay="true" hover-text-color="{{_hoverTextColor}}"></px-tile-action-buttons>
</div>
</template>
</div>
</div>
</div>
</div>
</template>
</dom-module>
<script src="dist/px-tile.js"></script>