Chromium Code Reviews Chromium Code Reviews
Issue 138703009:
Hookup the page-indicator and progress-bar elements in the PDF extension. (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src| OLD | NEW |
|---|---|
| 1 <!DOCTYPE HTML> | 1 <!DOCTYPE HTML> |
| 2 <!-- NOTE: index.html/index.js are automatically generated from index.in.html | 2 <!-- NOTE: index.html/index.js are automatically generated from index.in.html |
| 3 using the command: vulcanize --csp index.in.html -o index.html | 3 using the command: vulcanize --csp index.in.html -o index.html |
| 4 index.html/index.js SHOULD NOT be modified manually. | 4 index.html/index.js SHOULD NOT be modified manually. |
| 5 TODO(raymes): Get rid of the need for vulcanize once HTMLImports is | 5 TODO(raymes): Get rid of the need for vulcanize once HTMLImports is |
| 6 working properly in polymer. --> | 6 working properly in polymer. --> |
| 7 <html i18n-values="dir:textdirection"> | 7 <html i18n-values="dir:textdirection"> |
| 8 <head> | 8 <head> |
| 9 <meta charset="utf-8"> | 9 <meta charset="utf-8"> |
| 10 <script src="polymer_loader.js"></script> | 10 <script src="polymer_loader.js"></script> |
| 11 | 11 |
| 12 | 12 |
| 13 | 13 |
| 14 | 14 |
| 15 | |
| 16 | |
|
koz (OOO until 15th September)
2014/02/10 22:38:02
nit: extra newlines?
raymes
2014/02/10 23:58:37
This file is generated from index.in.html
| |
| 15 <!-- | 17 <!-- |
| 16 Copyright 2013 The Polymer Authors. All rights reserved. | 18 Copyright 2013 The Polymer Authors. All rights reserved. |
| 17 Use of this source code is governed by a BSD-style | 19 Use of this source code is governed by a BSD-style |
| 18 license that can be found in the LICENSE file. | 20 license that can be found in the LICENSE file. |
| 19 --> | 21 --> |
| 20 | 22 |
| 21 <!-- <link rel="import" href="../polymer-dev/polymer.html"> --> | 23 <!-- <link rel="import" href="../polymer-dev/polymer.html"> --> |
| 22 <!-- | 24 <!-- |
| 23 Copyright 2013 The Polymer Authors. All rights reserved. | 25 Copyright 2013 The Polymer Authors. All rights reserved. |
| 24 Use of this source code is governed by a BSD-style | 26 Use of this source code is governed by a BSD-style |
| (...skipping 212 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 237 :host(.latchable.polymer-selected:host), | 239 :host(.latchable.polymer-selected:host), |
| 238 :host(:active:host) { | 240 :host(:active:host) { |
| 239 background-color: rgb(75, 103, 156); | 241 background-color: rgb(75, 103, 156); |
| 240 background-image: none; | 242 background-image: none; |
| 241 } | 243 } |
| 242 </style> | 244 </style> |
| 243 <div id="icon"></div> | 245 <div id="icon"></div> |
| 244 </template> | 246 </template> |
| 245 | 247 |
| 246 </polymer-element> | 248 </polymer-element> |
| 249 | |
| 250 <polymer-element name="viewer-page-indicator" attributes="text" assetpath="html_ office/elements/viewer-page-indicator/"> | |
| 251 <template> | |
| 252 <style>/* Copyright 2013 The Chromium Authors. All rights reserved. | |
| 253 * Use of this source code is governed by a BSD-style license that can be | |
| 254 * found in the LICENSE file. */ | |
| 255 | |
| 256 :host { | |
| 257 -webkit-transition: opacity 400ms ease-in-out; | |
| 258 position: fixed; | |
| 259 right: 0; | |
| 260 } | |
| 261 | |
| 262 #text { | |
| 263 background-color: rgba(0, 0, 0, 0.5); | |
| 264 border-radius: 5px; | |
| 265 color: white; | |
| 266 float: left; | |
| 267 font-family: sans-serif; | |
| 268 font-size: 12px; | |
| 269 font-weight: bold; | |
| 270 line-height: 48px; | |
| 271 text-align: center; | |
| 272 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); | |
| 273 width: 62px; | |
| 274 } | |
| 275 | |
| 276 #triangle-right { | |
| 277 border-bottom: 6px solid transparent; | |
| 278 border-left: 8px solid rgba(0, 0, 0, 0.5); | |
| 279 border-top: 6px solid transparent; | |
| 280 display: inline; | |
| 281 float: left; | |
| 282 height: 0; | |
| 283 margin-top: 18px; | |
| 284 width: 0; | |
| 285 }</style> | |
| 286 <div id="text">{{text}}</div> | |
| 287 <div id="triangle-right"></div> | |
| 288 </template> | |
| 289 | |
| 290 </polymer-element> | |
| 291 | |
| 292 <polymer-element name="viewer-progress-bar" attributes="progress text numSegment s" assetpath="html_office/elements/viewer-progress-bar/"> | |
| 293 <template> | |
| 294 <style>/* Copyright 2013 The Chromium Authors. All rights reserved. | |
| 295 * Use of this source code is governed by a BSD-style license that can be | |
| 296 * found in the LICENSE file. */ | |
| 297 | |
| 298 :host { | |
| 299 -webkit-transition: opacity 400ms ease-in-out; | |
| 300 background: rgb(29, 39, 57); | |
| 301 border-radius: 5px; | |
| 302 bottom: 26px; | |
|
koz (OOO until 15th September)
2014/02/10 22:38:02
Would it be better to not have the position of thi
raymes
2014/02/10 23:58:37
These are the defaults in the polymer element (whi
| |
| 303 box-shadow: 0 1px 2px gray, 0 3px 3px rgba(0, 0, 0, .2); | |
| 304 height: auto; | |
| 305 left: 26px; | |
| 306 position: fixed; | |
| 307 width: auto; | |
| 308 } | |
| 309 | |
| 310 .scaler { | |
| 311 -webkit-transform: scale(0.25); | |
| 312 -webkit-transform-origin: 0 0; | |
| 313 float: left; | |
| 314 height: 44px; | |
| 315 margin: 8px; | |
| 316 width: 44px; | |
| 317 } | |
| 318 | |
| 319 #segments { | |
| 320 border-radius: 50%; | |
| 321 height: 176px; | |
| 322 list-style: none; | |
| 323 margin: 0; | |
| 324 overflow: hidden; | |
| 325 padding: 0; | |
| 326 position: absolute; | |
| 327 width: 176px; | |
| 328 } | |
| 329 | |
| 330 .segment { | |
| 331 -webkit-transform-origin: 0 100%; | |
| 332 background: rgb(227, 234, 249); | |
| 333 box-shadow: 0 0 0 6px rgb(29, 39, 57) inset; | |
| 334 height: 50%; | |
| 335 overflow: hidden; | |
| 336 position: absolute; | |
| 337 right: 0; | |
| 338 top: 0; | |
| 339 width: 50%; | |
| 340 } | |
| 341 | |
| 342 .center-circle { | |
| 343 background-color: rgb(29, 39, 57); | |
| 344 border-radius: 50%; | |
| 345 height: 80px; | |
| 346 left: 44px; | |
| 347 margin: 0; | |
| 348 padding: 0; | |
| 349 position: absolute; | |
| 350 top: 44px; | |
| 351 width: 80px; | |
| 352 } | |
| 353 | |
| 354 #text { | |
| 355 color: rgb(227, 234, 249); | |
| 356 float: left; | |
| 357 font-family: sans-serif; | |
| 358 font-size: 16px; | |
| 359 font-weight: bold; | |
| 360 line-height: 58px; | |
| 361 margin-right: 10px; | |
| 362 margin-top: 1px; | |
| 363 } | |
| 364 </style> | |
| 365 <div class="scaler"> | |
| 366 <ul id="segments"></ul> | |
| 367 <div class="center-circle"></div> | |
| 368 </div> | |
| 369 <div id="text">{{text}}</div> | |
| 370 </template> | |
| 371 | |
| 372 </polymer-element> | |
| 247 <style> | 373 <style> |
| 248 body { | 374 body { |
| 249 background-color: #ccc; | 375 background-color: #ccc; |
| 250 margin: 0; | 376 margin: 0; |
| 251 } | 377 } |
| 252 viewer-toolbar { | 378 viewer-toolbar { |
| 253 z-index: 2; | 379 z-index: 2; |
| 254 } | 380 } |
| 381 viewer-page-indicator { | |
| 382 z-index: 2; | |
| 383 } | |
| 384 viewer-progress-bar { | |
| 385 z-index: 2; | |
| 386 } | |
| 255 object { | 387 object { |
| 256 z-index: 1; | 388 z-index: 1; |
| 257 } | 389 } |
| 258 </style> | 390 </style> |
| 259 </head> | 391 </head> |
| 260 <body> | 392 <body> |
| 261 | 393 |
| 394 <viewer-page-indicator id="page-indicator"></viewer-page-indicator> | |
| 395 <viewer-progress-bar id="progress-bar"></viewer-progress-bar> | |
| 396 | |
| 262 <viewer-toolbar id="toolbar"> | 397 <viewer-toolbar id="toolbar"> |
| 263 <polymer-selector> | 398 <polymer-selector> |
| 264 <viewer-button id="fit-to-page-button" src="button_fit_page.png" latchable=" true"> | 399 <viewer-button id="fit-to-page-button" src="button_fit_page.png" latchable=" true"> |
| 265 </viewer-button> | 400 </viewer-button> |
| 266 <viewer-button id="fit-to-width-button" src="button_fit_width.png" latchable ="true"> | 401 <viewer-button id="fit-to-width-button" src="button_fit_width.png" latchable ="true"> |
| 267 </viewer-button> | 402 </viewer-button> |
| 268 <viewer-button id="zoom-in-button" src="button_zoom_in.png"> | 403 <viewer-button id="zoom-in-button" src="button_zoom_in.png"> |
| 269 </viewer-button> | 404 </viewer-button> |
| 270 <viewer-button id="zoom-out-button" src="button_zoom_out.png"> | 405 <viewer-button id="zoom-out-button" src="button_zoom_out.png"> |
| 271 </viewer-button> | 406 </viewer-button> |
| 272 </polymer-selector> | 407 </polymer-selector> |
| 273 <viewer-button id="save-button" src="button_save.png"></viewer-button> | 408 <viewer-button id="save-button" src="button_save.png"></viewer-button> |
| 274 <viewer-button id="print-button" src="button_print.png"></viewer-button> | 409 <viewer-button id="print-button" src="button_print.png"></viewer-button> |
| 275 </viewer-toolbar> | 410 </viewer-toolbar> |
| 276 | 411 |
| 277 | 412 |
| 278 <script src="index.js"></script> | 413 <script src="index.js"></script> |
| 279 </body> | 414 </body> |
| 280 <script src="pdf.js"></script> | 415 <script src="pdf.js"></script> |
| 281 </html> | 416 </html> |
| OLD | NEW |
