| 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 |
| 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 pointer-events: none; |
| 259 position: fixed; |
| 260 right: 0; |
| 261 } |
| 262 |
| 263 #text { |
| 264 background-color: rgba(0, 0, 0, 0.5); |
| 265 border-radius: 5px; |
| 266 color: white; |
| 267 float: left; |
| 268 font-family: sans-serif; |
| 269 font-size: 12px; |
| 270 font-weight: bold; |
| 271 line-height: 48px; |
| 272 text-align: center; |
| 273 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); |
| 274 width: 62px; |
| 275 } |
| 276 |
| 277 #triangle-right { |
| 278 border-bottom: 6px solid transparent; |
| 279 border-left: 8px solid rgba(0, 0, 0, 0.5); |
| 280 border-top: 6px solid transparent; |
| 281 display: inline; |
| 282 float: left; |
| 283 height: 0; |
| 284 margin-top: 18px; |
| 285 width: 0; |
| 286 }</style> |
| 287 <div id="text">{{text}}</div> |
| 288 <div id="triangle-right"></div> |
| 289 </template> |
| 290 |
| 291 </polymer-element> |
| 292 |
| 293 <polymer-element name="viewer-progress-bar" attributes="progress text numSegment
s" assetpath="html_office/elements/viewer-progress-bar/"> |
| 294 <template> |
| 295 <style>/* Copyright 2013 The Chromium Authors. All rights reserved. |
| 296 * Use of this source code is governed by a BSD-style license that can be |
| 297 * found in the LICENSE file. */ |
| 298 |
| 299 :host { |
| 300 -webkit-transition: opacity 400ms ease-in-out; |
| 301 background: rgb(29, 39, 57); |
| 302 border-radius: 5px; |
| 303 bottom: 26px; |
| 304 box-shadow: 0 1px 2px gray, 0 3px 3px rgba(0, 0, 0, .2); |
| 305 height: auto; |
| 306 left: 26px; |
| 307 pointer-events: none; |
| 308 position: fixed; |
| 309 width: auto; |
| 310 } |
| 311 |
| 312 .scaler { |
| 313 -webkit-transform: scale(0.25); |
| 314 -webkit-transform-origin: 0 0; |
| 315 float: left; |
| 316 height: 44px; |
| 317 margin: 8px; |
| 318 width: 44px; |
| 319 } |
| 320 |
| 321 #segments { |
| 322 border-radius: 50%; |
| 323 height: 176px; |
| 324 list-style: none; |
| 325 margin: 0; |
| 326 overflow: hidden; |
| 327 padding: 0; |
| 328 position: absolute; |
| 329 width: 176px; |
| 330 } |
| 331 |
| 332 .segment { |
| 333 -webkit-transform-origin: 0 100%; |
| 334 background: rgb(227, 234, 249); |
| 335 box-shadow: 0 0 0 6px rgb(29, 39, 57) inset; |
| 336 height: 50%; |
| 337 overflow: hidden; |
| 338 position: absolute; |
| 339 right: 0; |
| 340 top: 0; |
| 341 width: 50%; |
| 342 } |
| 343 |
| 344 .center-circle { |
| 345 background-color: rgb(29, 39, 57); |
| 346 border-radius: 50%; |
| 347 height: 80px; |
| 348 left: 44px; |
| 349 margin: 0; |
| 350 padding: 0; |
| 351 position: absolute; |
| 352 top: 44px; |
| 353 width: 80px; |
| 354 } |
| 355 |
| 356 #text { |
| 357 color: rgb(227, 234, 249); |
| 358 float: left; |
| 359 font-family: sans-serif; |
| 360 font-size: 16px; |
| 361 font-weight: bold; |
| 362 line-height: 58px; |
| 363 margin-right: 10px; |
| 364 margin-top: 1px; |
| 365 } |
| 366 </style> |
| 367 <div class="scaler"> |
| 368 <ul id="segments"></ul> |
| 369 <div class="center-circle"></div> |
| 370 </div> |
| 371 <div id="text">{{text}}</div> |
| 372 </template> |
| 373 |
| 374 </polymer-element> |
| 247 <style> | 375 <style> |
| 248 body { | 376 body { |
| 249 background-color: #ccc; | 377 background-color: #ccc; |
| 250 margin: 0; | 378 margin: 0; |
| 251 } | 379 } |
| 252 viewer-toolbar { | 380 viewer-toolbar { |
| 381 visibility: hidden; |
| 382 z-index: 3; |
| 383 } |
| 384 viewer-page-indicator { |
| 385 visibility: hidden; |
| 386 z-index: 3; |
| 387 } |
| 388 viewer-progress-bar { |
| 389 z-index: 3; |
| 390 } |
| 391 viewer-error-screen { |
| 392 visibility: hidden; |
| 253 z-index: 2; | 393 z-index: 2; |
| 254 } | 394 } |
| 255 #plugin { | 395 #plugin { |
| 256 height: 100%; | 396 height: 100%; |
| 257 position: fixed; | 397 position: fixed; |
| 258 width: 100%; | 398 width: 100%; |
| 259 z-index: 1; | 399 z-index: 1; |
| 260 } | 400 } |
| 261 #sizer { | 401 #sizer { |
| 262 position: absolute; | 402 position: absolute; |
| 263 z-index: 0; | 403 z-index: 0; |
| 264 } | 404 } |
| 265 </style> | 405 </style> |
| 266 </head> | 406 </head> |
| 267 <body> | 407 <body> |
| 268 | 408 |
| 269 <div id="sizer"></div> | 409 <div id="sizer"></div> |
| 410 <viewer-page-indicator id="page-indicator"></viewer-page-indicator> |
| 411 <viewer-progress-bar id="progress-bar"></viewer-progress-bar> |
| 270 | 412 |
| 271 <viewer-toolbar id="toolbar"> | 413 <viewer-toolbar id="toolbar"> |
| 272 <polymer-selector> | 414 <polymer-selector> |
| 273 <viewer-button id="fit-to-page-button" src="button_fit_page.png" latchable="
"> | 415 <viewer-button id="fit-to-page-button" src="button_fit_page.png" latchable="
"> |
| 274 </viewer-button> | 416 </viewer-button> |
| 275 <viewer-button id="fit-to-width-button" src="button_fit_width.png" latchable
=""> | 417 <viewer-button id="fit-to-width-button" src="button_fit_width.png" latchable
=""> |
| 276 </viewer-button> | 418 </viewer-button> |
| 277 <viewer-button id="zoom-in-button" src="button_zoom_in.png"> | 419 <viewer-button id="zoom-in-button" src="button_zoom_in.png"> |
| 278 </viewer-button> | 420 </viewer-button> |
| 279 <viewer-button id="zoom-out-button" src="button_zoom_out.png"> | 421 <viewer-button id="zoom-out-button" src="button_zoom_out.png"> |
| 280 </viewer-button> | 422 </viewer-button> |
| 281 </polymer-selector> | 423 </polymer-selector> |
| 282 <viewer-button id="save-button" src="button_save.png"></viewer-button> | 424 <viewer-button id="save-button" src="button_save.png"></viewer-button> |
| 283 <viewer-button id="print-button" src="button_print.png"></viewer-button> | 425 <viewer-button id="print-button" src="button_print.png"></viewer-button> |
| 284 </viewer-toolbar> | 426 </viewer-toolbar> |
| 285 | 427 |
| 286 | 428 |
| 287 <script src="index.js"></script> | 429 <script src="index.js"></script> |
| 288 </body> | 430 </body> |
| 289 <script src="pdf.js"></script> | 431 <script src="pdf.js"></script> |
| 290 </html> | 432 </html> |
| OLD | NEW |
|---|
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