OLD | NEW |
---|---|
1 <link rel="import" href="chrome://resources/html/assert.html"> | 1 <link rel="import" href="chrome://resources/html/assert.html"> |
2 <link rel="import" href="chrome://resources/html/cr.html"> | 2 <link rel="import" href="chrome://resources/html/cr.html"> |
3 <link rel="import" href="chrome://resources/html/i18n_behavior.html"> | 3 <link rel="import" href="chrome://resources/html/i18n_behavior.html"> |
4 <link rel="import" href="chrome://resources/html/load_time_data.html"> | 4 <link rel="import" href="chrome://resources/html/load_time_data.html"> |
5 <link rel="import" href="chrome://resources/html/polymer.html"> | 5 <link rel="import" href="chrome://resources/html/polymer.html"> |
6 <link rel="import" href="chrome://extensions/icons.html"> | 6 <link rel="import" href="chrome://extensions/icons.html"> |
7 <link rel="import" href="chrome://extensions/item_source.html"> | 7 <link rel="import" href="chrome://extensions/item_source.html"> |
8 <link rel="import" href="chrome://extensions/strings.html"> | 8 <link rel="import" href="chrome://extensions/strings.html"> |
9 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.h tml"> | 9 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.h tml"> |
10 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/communicatio n-icons.html"> | 10 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/communicatio n-icons.html"> |
(...skipping 13 matching lines...) Expand all Loading... | |
24 align-self: flex-start; | 24 align-self: flex-start; |
25 display: flex; | 25 display: flex; |
26 padding: 6px; | 26 padding: 6px; |
27 } | 27 } |
28 | 28 |
29 #icon { | 29 #icon { |
30 height: 36px; | 30 height: 36px; |
31 width: 36px; | 31 width: 36px; |
32 } | 32 } |
33 | 33 |
34 #card, | 34 #card { |
35 #card-wrapper { | 35 @apply(--shadow-elevation-2dp); |
36 min-height: 154px; | 36 background: white; |
37 display: flex; | |
michaelpg
2017/02/23 04:22:08
Is there any convention you're using for when to u
Devlin
2017/02/23 19:09:21
I always use the raw css unless someone expresses
| |
38 flex-direction: column; | |
39 font-size: 13px; | |
40 height: 160px; | |
37 width: 400px; | 41 width: 400px; |
38 } | 42 } |
39 | 43 |
40 #card-wrapper { | 44 #card.dev-mode { |
41 @apply(--shadow-elevation-2dp); | 45 height: 208px; |
42 background: white; | |
43 } | |
44 | |
45 #card { | |
46 display: flex; | |
47 flex-direction: column; | |
48 font-size: 13px; | |
49 } | 46 } |
50 | 47 |
51 #card.disabled { | 48 #card.disabled { |
52 opacity: 0.6; | 49 opacity: 0.6; |
53 } | 50 } |
54 | 51 |
55 #main { | 52 #main { |
56 display: flex; | 53 display: flex; |
57 flex-grow: 1; | 54 flex-grow: 1; |
58 padding: 16px; | 55 padding: 16px 20px 17px; |
59 } | 56 } |
60 | 57 |
61 #content { | 58 #content { |
62 -webkit-margin-start: 24px; | 59 -webkit-margin-start: 24px; |
60 display: flex; | |
61 flex-direction: column; | |
63 width: 100%; | 62 width: 100%; |
64 } | 63 } |
65 | 64 |
66 #name-and-version { | 65 #name-and-version { |
66 line-height: 15px; | |
67 margin-bottom: 4px; | 67 margin-bottom: 4px; |
68 } | 68 } |
69 | 69 |
70 #name { | 70 #name { |
71 -webkit-margin-end: 8px; | 71 -webkit-margin-end: 8px; |
72 color: var(--paper-grey-800); | 72 color: #333; |
73 } | 73 } |
74 | 74 |
75 #description { | 75 #description, |
76 #warnings { | |
77 flex-grow: 1; | |
76 margin-bottom: 8px; | 78 margin-bottom: 8px; |
77 } | 79 } |
78 | 80 |
81 #description, | |
79 #version, | 82 #version, |
80 #extension-id, | 83 #extension-id, |
81 #inspect-views, | 84 #inspect-views, |
82 #button-strip { | 85 #button-strip { |
83 color: var(--paper-grey-600); | 86 color: var(--paper-grey-600); |
84 } | 87 } |
85 | 88 |
86 #description, | 89 #description, |
87 #extension-id, | 90 #extension-id, |
88 #inspect-views { | 91 #inspect-views { |
89 line-height: 20px; | 92 line-height: 20px; |
90 } | 93 } |
91 | 94 |
92 #inspect-views paper-button { | 95 #inspect-views paper-button { |
93 color: var(--google-blue-700); | 96 color: var(--google-blue-700); |
97 height: 20px; | |
98 padding: 0; | |
99 text-transform: none; | |
94 } | 100 } |
95 | 101 |
96 #button-strip { | 102 #button-strip { |
97 border-top: 1px solid var(--paper-grey-400); | 103 border-top: 1px solid var(--paper-grey-400); |
104 box-sizing: border-box; | |
105 height: 48px; | |
106 padding: 8px 20px 8px 4px; | |
michaelpg
2017/02/23 04:22:08
make RTL-friendly
Devlin
2017/02/23 19:09:21
Done.
| |
98 } | 107 } |
99 | 108 |
100 #source-indicator { | 109 #source-indicator { |
101 align-items: center; | 110 -webkit-margin-start: 30px; |
102 align-self: flex-end; | 111 margin-top: 30px; |
103 border-radius: 0 2px; | |
104 color: var(--paper-grey-800); | |
105 display: flex; | |
106 min-height: 32px; | |
107 padding: 0 8px; | |
108 position: absolute; | 112 position: absolute; |
109 white-space: nowrap; | |
110 } | 113 } |
111 | 114 |
112 #source-indicator iron-icon { | 115 #source-indicator iron-icon { |
113 height: 16px; | 116 height: 22px; |
114 width: 16px; | 117 width: 22px; |
115 } | 118 } |
116 | 119 |
117 #source-indicator span { | 120 #source-indicator-text { |
118 -webkit-margin-end: 8px; | 121 -webkit-margin-start: 11px; /* To align with the center of the icon. */ |
122 background: black; | |
123 border-radius: 2px; | |
124 color: white; | |
119 display: none; | 125 display: none; |
126 margin-top: 8px; | |
127 opacity: 0.6; | |
128 padding: 8px 12px; | |
129 position: absolute; | |
130 transform: translateX(-50%); /* Move back 50% of width so that the | |
michaelpg
2017/02/23 04:22:08
nit: two spaces after ; (as above)
Devlin
2017/02/23 19:09:21
Done.
| |
131 text and icon share an x-center. */ | |
120 } | 132 } |
121 | 133 |
122 #source-indicator:hover { | 134 #source-indicator:hover #source-indicator-text { |
123 background-color: var(--paper-grey-700); | |
124 color: white; | |
125 } | |
126 | |
127 #source-indicator:hover span { | |
128 display: block; | 135 display: block; |
129 } | 136 } |
130 | 137 |
131 paper-button, | 138 paper-button, |
132 paper-toggle-button { | 139 paper-toggle-button { |
133 cursor: pointer; | 140 cursor: pointer; |
134 } | 141 } |
135 | 142 |
136 #button-strip paper-button { | 143 #button-strip paper-button { |
137 align-items: center; | 144 align-items: center; |
138 display: flex; | 145 display: flex; |
139 margin: 4px; | 146 margin: 0 4px; |
140 min-height: 32px; | 147 min-height: 32px; |
141 padding: 0 12px; | 148 padding: 0 12px; |
142 text-transform: uppercase; | 149 text-transform: uppercase; |
143 } | 150 } |
144 | 151 |
145 #enable-toggle { | 152 .action-button { |
146 -webkit-margin-end: 16px; | 153 color: var(--google-blue-500); |
147 } | 154 } |
148 | 155 |
149 .warning { | 156 #warnings { |
150 align-items: center; | 157 color: var(--google-red-700); |
151 display: flex; | |
152 font-size: 13px; | |
153 justify-content: space-between; | |
154 padding: 12px 16px; | |
155 } | |
156 | |
157 .warning paper-button { | |
158 -webkit-margin-start: 12px; | |
159 align-items: center; | |
160 display: flex; | |
161 text-transform: uppercase; | |
162 } | |
163 | |
164 .severe.warning { | |
165 background-color: var(--paper-red-50); | |
166 color: var(--paper-red-700); | |
167 } | |
168 | |
169 .mild.warning { | |
170 background-color: var(--paper-yellow-50); | |
171 color: var(--paper-grey-600); | |
172 } | 158 } |
173 | 159 |
174 #blacklisted-warning:empty { | 160 #blacklisted-warning:empty { |
175 display: none; | 161 display: none; |
176 } | 162 } |
177 </style> | 163 </style> |
178 <div id="card-wrapper" class$="[[computeClasses_(data.state)]]"> | 164 <div id="card" class$="[[computeClasses_(data.state, inDevMode)]]"> |
179 <div id="card"> | 165 <div id="main"> |
180 <template is="dom-if" | 166 <template is="dom-if" |
181 if="[[computeSourceIndicatorIcon_(data.*)]]"> | 167 if="[[computeSourceIndicatorIcon_(data.*)]]"> |
182 <div id="source-indicator"> | 168 <div id="source-indicator"> |
183 <span>[[computeSourceIndicatorText_(data.*)]]</span> | |
184 <iron-icon icon="[[computeSourceIndicatorIcon_(data.*)]]"> | 169 <iron-icon icon="[[computeSourceIndicatorIcon_(data.*)]]"> |
185 </iron-icon> | 170 </iron-icon> |
171 <div id="source-indicator-text"> | |
172 [[computeSourceIndicatorText_(data.*)]] | |
173 </div> | |
186 </div> | 174 </div> |
187 </template> | 175 </template> |
188 <div id="main"> | 176 <div id="icon-wrapper"> |
189 <div id="icon-wrapper"> | 177 <img alt="" id="icon" src="[[data.iconUrl]]"> |
190 <img alt="" id="icon" src="[[data.iconUrl]]"> | 178 </div> |
179 <div id="content"> | |
180 <div id="name-and-version" class="layout horizontal center"> | |
181 <div id="name">[[data.name]]</div> | |
182 <template is="dom-if" if="[[inDevMode]]"> | |
183 <span id="version">[[data.version]]</span> | |
184 </template> | |
191 </div> | 185 </div> |
192 <div id="content"> | 186 <div id="description" hidden$="[[hasWarnings_(data.*)]]"> |
193 <div id="name-and-version" class="layout horizontal center"> | 187 [[data.description]] |
194 <div id="name">[[data.name]]</div> | 188 </div> |
195 <template is="dom-if" if="[[inDevMode]]"> | 189 <div id="warnings" hidden$="[[!hasWarnings_(data.*)]]"> |
196 <span id="version">[[data.version]]</span> | 190 <div id="suspicious-warning" |
197 </template> | 191 hidden$="[[!data.disableReasons.suspiciousInstall]]"> |
192 $i18n{itemSuspiciousInstall} | |
198 </div> | 193 </div> |
199 <div id="description">[[data.description]]</div> | 194 <div id="corrupted-warning" |
200 <template is="dom-if" if="[[inDevMode]]"> | 195 hidden$="[[!data.disableReasons.corruptInstall]]"> |
201 <div id="extension-id">[[data.id]]</div> | 196 $i18n{itemCorruptInstall} |
202 <div id="inspect-views"> | 197 </div> |
203 <span>$i18n{itemInspectViews}</span> | 198 <div id="blacklisted-warning"><!-- No whitespace |
204 <template is="dom-repeat" items="[[data.views]]"> | 199 -->[[data.blacklistText]]<!-- so we can use :empty in css. |
205 <paper-button on-tap="onInspectTap_"> | 200 --></div> |
206 [[computeInspectLabel_(item)]] | 201 </div> |
207 </paper-button> | 202 <template is="dom-if" if="[[inDevMode]]"> |
208 </template> | 203 <div id="extension-id">[[data.id]]</div> |
209 </div> | 204 <template is="dom-if" |
205 if="[[computeInspectViewsHidden_(data.views)]]"> | |
michaelpg
2017/02/23 04:22:08
should this have a !, since it shows if it's not h
Devlin
2017/02/23 19:09:21
Yes, done. Funnily enough, my boolean dyslexia ca
| |
206 <div id="inspect-views"> | |
207 <span>$i18n{itemInspectViews}</span> | |
208 <paper-button on-tap="onInspectTap_"> | |
209 [[computeFirstInspectLabel_(data.views)]] | |
210 </paper-button> | |
211 <paper-button | |
212 hidden$="[[computeExtraViewsHidden_(data.views)]]" | |
213 on-tap="onExtraInspectTap_"> | |
214 [[computeExtraInspectLabel_(data.views)]] | |
215 </paper-button> | |
210 </div> | 216 </div> |
211 </template> | 217 </template> |
212 </div> | 218 </template> |
213 </div> | |
214 <div id="button-strip" class="layout horizontal"> | |
215 <div class="layout flex horizontal center"> | |
216 <paper-button id="details-button" on-tap="onDetailsTap_"> | |
217 $i18n{itemDetails} | |
218 </paper-button> | |
219 <paper-button id="errors-button" on-tap="onErrorsTap_" | |
220 hidden$="[[computeErrorsHidden_(data.*)]]"> | |
221 $i18n{itemErrors} | |
222 </paper-button> | |
223 <paper-button id="remove-button" on-tap="onRemoveTap_"> | |
224 $i18n{itemRemove} | |
225 </paper-button> | |
226 </div> | |
227 <paper-toggle-button id="enable-toggle" | |
228 checked="[[isEnabled_(data.state)]]" on-change="onEnableChange_"> | |
229 </paper-toggle-button> | |
230 </div> | 219 </div> |
231 </div> | 220 </div> |
232 <template is="dom-if" if="[[hasWarnings_(data.*)]]"> | 221 <div id="button-strip" class="layout horizontal"> |
233 <div id="suspicious-warning" class="warning mild" | 222 <div class="layout flex horizontal center"> |
234 hidden$="[[!data.disableReasons.suspiciousInstall]]"> | 223 <paper-button id="details-button" on-tap="onDetailsTap_"> |
235 $i18n{itemSuspiciousInstall} | 224 $i18n{itemDetails} |
236 </div> | 225 </paper-button> |
237 <div id="corrupted-warning" class="warning severe" | 226 <paper-button id="remove-button" on-tap="onRemoveTap_"> |
238 hidden$="[[!data.disableReasons.corruptInstall]]"> | 227 $i18n{itemRemove} |
239 <span>$i18n{itemCorruptInstall}</span> | 228 </paper-button> |
240 <paper-button id="repair-button" on-tap="onRepairTap_"> | 229 <paper-button id="errors-button" on-tap="onErrorsTap_" |
241 $i18n{itemRepair} | 230 hidden$="[[computeErrorsHidden_(data.*)]]"> |
231 $i18n{itemErrors} | |
242 </paper-button> | 232 </paper-button> |
243 </div> | 233 </div> |
244 <div id="blacklisted-warning" class="warning severe"><!-- No whitespace | 234 <paper-button id="repair-button" class="action-button" |
245 -->[[data.blacklistText]]<!-- ... so we can use :empty in css | 235 on-tap="onRepairTap_" |
246 --></div> | 236 hidden$="[[!data.disableReasons.corruptInstall]]"> |
247 </template> | 237 $i18n{itemRepair} |
238 </paper-button> | |
239 <paper-button id="reload-button" on-tap="onReloadTap_" | |
240 class="action-button" | |
241 hidden$="[[!isTerminated_(data.state)]]"> | |
242 $i18n{itemReload} | |
243 </paper-button> | |
244 <paper-toggle-button id="enable-toggle" class="action-button" | |
245 checked="[[isEnabled_(data.state)]]" on-change="onEnableChange_" | |
246 hidden$="[[!showEnableToggle_(data.*)]]"> | |
247 </paper-toggle-button> | |
248 </div> | |
248 </div> | 249 </div> |
249 </template> | 250 </template> |
250 <script src="chrome://extensions/item.js"></script> | 251 <script src="chrome://extensions/item.js"></script> |
251 </dom-module> | 252 </dom-module> |
OLD | NEW |