| <link rel="import" href="../../../html/polymer.html"> |
| |
| <link rel="import" href="../../shared_style_css.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html"> |
| <link rel="import" href="cr_camera.html"> |
| <link rel="import" href="cr_picture_types.html"> |
| <link rel="import" href="cr_png_behavior.html"> |
| |
| <dom-module id="cr-picture-pane"> |
| <template> |
| <style include="cr-shared-style"> |
| :host { |
| display: inline-block; |
| } |
| |
| cr-camera { |
| --cr-camera-image-size: 288px; |
| } |
| |
| #preview { |
| height: 288px; |
| } |
| |
| img { |
| background-size: 100% 100%; |
| border-top-left-radius: 2px; |
| border-top-right-radius: 2px; |
| display: block; |
| height: 288px; |
| width: 288px; |
| } |
| |
| img:not([data-show-discard]) { |
| background-color: rgba(0, 0, 0, 0.08); |
| border-radius: 2px; |
| bottom: 0; |
| height: var(--cr-picture-image-size, 228px); |
| left: 0; |
| margin: auto; |
| padding: 2px; |
| position: absolute; |
| right: 0; |
| top: 0; |
| width: var(--cr-picture-image-size, 228px); |
| } |
| |
| #discard { |
| align-items: center; |
| background-clip: content-box; |
| background-color: var(--google-blue-500); |
| border-bottom-left-radius: 2px; |
| border-bottom-right-radius: 2px; |
| display: flex; |
| height: 32px; |
| justify-content: center; |
| width: 288px; |
| } |
| |
| #discard button { |
| --iron-icon-fill-color: white; |
| border-radius: 50%; |
| margin-inline-end: 0; |
| margin-inline-start: 0; |
| } |
| </style> |
| <div id="preview" hidden="[[!showImagePreview_(cameraActive_, imageSrc)]]"> |
| <img id="image" alt="[[previewAltText]]" src="[[getImgSrc_(imageUrl)]]" |
| data-show-discard$="[[showDiscard_(imageType)]]"> |
| <div id="discard" hidden="[[!showDiscard_(imageType)]]"> |
| <paper-icon-button-light class="icon-delete-white"> |
| <button id="discardImage" |
| title="[[discardImageLabel]]" |
| on-tap="onTapDiscardImage_"> |
| </button> |
| </paper-icon-button-light> |
| </div> |
| </div> |
| <template is="dom-if" if="[[cameraActive_]]"> |
| <cr-camera id="camera" |
| take-photo-label="[[takePhotoLabel]]" |
| capture-video-label="[[captureVideoLabel]]" |
| switch-mode-to-camera-label="[[switchModeToCameraLabel]]" |
| switch-mode-to-video-label="[[switchModeToVideoLabel]]" |
| video-mode-enabled="[[cameraVideoModeEnabled]]"> |
| </cr-camera> |
| </template> |
| </template> |
| <script src="cr_picture_pane.js"></script> |
| </dom-module> |