| <link rel="import" href="../../../html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html"> |
| <link rel="import" href="../../../html/i18n_behavior.html"> |
| <link rel="import" href="../../../cr_elements/cr_input/cr_input.html"> |
| <link rel="import" href="base_page.html"> |
| <link rel="import" href="cellular_setup_delegate.html"> |
| <link rel="import" href="cellular_setup_icons.html"> |
| |
| <dom-module id="activation-code-page"> |
| <template> |
| <style include="iron-positioning"> |
| :host([expanded_]) #pageBody { |
| height: 340px; |
| transition-duration: 200ms; |
| } |
| :host(:not([expanded_])) #pageBody { |
| height: 282px; |
| transition-duration: 150ms; |
| } |
| |
| :host([expanded_]) #esimQrCodeDetection { |
| height: 190px; |
| transition-duration: 200ms; |
| } |
| :host(:not([expanded_])) #esimQrCodeDetection { |
| height: 140px; |
| transition-duration: 150ms; |
| } |
| |
| :host cr-button { |
| --ripple-opacity: 0; |
| } |
| |
| #esimQrCodeDetection { |
| background-color: var(--google-grey-refresh-100); |
| border-radius: 4px; |
| margin: 20px 0 20px 0; |
| overflow: hidden; |
| position: relative; |
| } |
| |
| paper-spinner-lite { |
| height: 20px; |
| margin-inline-end: 6px; |
| margin-top: 6px; |
| width: 20px; |
| } |
| |
| cr-button { |
| border: none; |
| box-shadow: none; |
| } |
| |
| cr-button:hover { |
| background-color: transparent; |
| } |
| |
| cr-button[disabled] { |
| background-color: transparent; |
| } |
| |
| .animate { |
| transition-property: height; |
| transition-timing-function: cubic-bezier(0.00, 0.00, 0.20, 1.00); |
| } |
| |
| .center { |
| left: 50%; |
| position: absolute; |
| top: 50%; |
| transform: translateY(-50%) translateX(-50%); |
| } |
| |
| .width-92 { |
| width: 92%; |
| } |
| |
| .label { |
| font-weight: 500; |
| } |
| |
| .button-image { |
| margin-inline-end: 8px; |
| } |
| |
| .scan-finish-image { |
| position: absolute; |
| } |
| |
| .scan-finish-message { |
| padding-inline-end: 0; |
| padding-inline-start: 30px; |
| } |
| |
| .scan-finish-message:hover { |
| cursor: default; |
| } |
| |
| .scan-error-header { |
| --iron-icon-fill-color: #D93025; |
| } |
| |
| .scan-error-message { |
| color: var(--google-red-600); |
| } |
| |
| .blue-icon { |
| --iron-icon-fill-color: #1A73E8; |
| } |
| |
| .hidden { |
| visibility: hidden; |
| } |
| |
| #scanSucessHeader { |
| --iron-icon-fill-color: #1E8E3E; |
| margin-bottom: 8px; |
| } |
| |
| #scanSuccessMessage { |
| color: green; |
| font-size: medium; |
| } |
| |
| #scanFailureHeader { |
| margin-bottom: 4px; |
| } |
| |
| #useCameraAgainButton { |
| display: block; |
| font-weight: 500; |
| text-align: center; |
| } |
| |
| #tryAgainButton { |
| display: block; |
| text-align: center; |
| } |
| |
| #switchCameraButton { |
| background-color: rgba(0, 0, 0, 0.04); |
| border-radius: 4px; |
| color: var(--google-grey-refresh-300); |
| margin: 8px; |
| padding: 8px; |
| position: absolute; |
| right: 0; |
| z-index: 2; |
| } |
| |
| #switchCameraButton iron-icon { |
| filter: brightness(2.1); |
| --iron-icon-fill-color: #5F6368; |
| } |
| |
| #loadingMessage { |
| bottom: 0; |
| color: var(--google-grey-refresh-500); |
| font-size: var(--cr-form-field-label-font-size); |
| letter-spacing: .4px; |
| line-height: var(--cr-form-field-label-line-height); |
| position: absolute; |
| } |
| |
| #video { |
| height: inherit; |
| transform: rotateY(180deg); |
| } |
| |
| #pageBody { |
| margin-top: -20px; |
| } |
| |
| #startScanningButton { |
| max-width: 470px; |
| min-width: 345px; |
| text-align: center; |
| width: auto; |
| } |
| </style> |
| <base-page> |
| <div slot="page-body" id="pageBody" class="animate"> |
| <span aria-live="polite"> |
| [[getDescription_(showNoProfilesMessage, cameraCount_ )]] |
| </span> |
| <template is="dom-if" |
| if="[[isScanningAvailable_(cameraCount_, qrCodeDetector_.*)]]" restamp> |
| <div id="esimQrCodeDetection" class="animate"> |
| <cr-button id="switchCameraButton" |
| on-click="onSwitchCameraButtonPressed_" |
| hidden$="[[isUiElementHidden_(UiElement.SWITCH_CAMERA, state_, cameraCount_)]]" |
| disabled="[[isUiElementDisabled_(UiElement.SWITCH_CAMERA, state_, showBusy)]]"> |
| <iron-icon class="button-image" icon="cellular-setup:switch-camera"></iron-icon> |
| [[i18n('switchCamera')]] |
| </cr-button> |
| <video id="video" autoplay muted |
| hidden$="[[isUiElementHidden_(UiElement.VIDEO, state_)]]"> |
| </video> |
| <div class="center blue-icon" id="startScanningContainer" |
| hidden$="[[isUiElementHidden_(UiElement.START_SCANNING, state_)]]"> |
| <cr-button class="label" |
| id="startScanningButton" |
| on-click="startScanning_" |
| disabled="[[isUiElementDisabled_(UiElement.START_SCANNING, state_, showBusy)]]"> |
| <iron-icon class="button-image" icon="cellular-setup:camera"></iron-icon> |
| [[i18n('useCamera')]] |
| </cr-button> |
| </div> |
| <div class="center" id="scanFinishContainer" |
| hidden$="[[isUiElementHidden_(UiElement.SCAN_FINISH, state_)]]"> |
| <div> |
| <div id="scanSuccessContainer" |
| hidden$="[[isUiElementHidden_(UiElement.SCAN_SUCCESS, state_)]]"> |
| <div id=scanSucessHeader |
| hidden$="[[isUiElementHidden_(UiElement.CODE_DETECTED, state_)]]"> |
| <iron-icon class="scan-finish-image" icon="cellular-setup:checked"></iron-icon> |
| <span class="label scan-finish-message" id="scanSuccessMessage"> |
| [[i18n('scanQRCodeSuccess')]] |
| </span> |
| </div> |
| <div id="scanInstallFailureHeader" class="scan-error-header" |
| hidden$="[[isUiElementHidden_(UiElement.SCAN_INSTALL_FAILURE, state_)]]"> |
| <iron-icon class="scan-finish-image" icon="cellular-setup:error"></iron-icon> |
| <span class="label scan-finish-message scan-error-message"> |
| [[i18n('scanQrCodeInvalid')]] |
| </span> |
| </div> |
| <cr-button id="useCameraAgainButton" class$="[[getUseCameraAgainClass_(showBusy)]]" |
| on-click="startScanning_" |
| disabled="[[isUiElementDisabled_(UiElement.SCAN_SUCCESS, state_, showBusy)]]"> |
| <iron-icon class="button-image" icon="cellular-setup:camera"></iron-icon> |
| [[i18n('qrCodeUseCameraAgain')]] |
| </cr-button> |
| </div> |
| <div id="scanFailureContainer" |
| hidden$="[[isUiElementHidden_(UiElement.SCAN_FAILURE, state_)]]"> |
| <div id="scanFailureHeader" class="scan-error-header"> |
| <iron-icon class="scan-finish-image" icon="cellular-setup:error"></iron-icon> |
| <span class="label scan-finish-message scan-error-message"> |
| [[i18n('scanQrCodeError')]] |
| </span> |
| </div> |
| <cr-button id="tryAgainButton" class="blue-icon" |
| on-click="startScanning_" |
| disabled="[[isUiElementDisabled_(UiElement.SCAN_FAILURE, state_, showBusy)]]"> |
| <iron-icon class="button-image" icon="cellular-setup:try-again"></iron-icon> |
| [[i18n('qrCodeRetry')]] |
| </cr-button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </template> |
| <div id="activationCodeContainer" class$="[[computeActivationCodeClass_( |
| cameraCount_, qrCodeDetector_.*)]]"> |
| <cr-input id="activationCode" |
| label="[[i18n('activationCode')]]" |
| value="{{activationCode}}" |
| disabled="[[showBusy]]" |
| on-keydown="onKeyDown_" |
| invalid="[[shouldActivationCodeInputBeInvalid_(state_)]]" |
| error-message="[[i18n('scanQrCodeInvalid')]]"> |
| <template is="dom-if" if="[[showBusy]]"> |
| <div slot="suffix"> |
| <paper-spinner-lite active> |
| </paper-spinner-lite> |
| </div> |
| </template> |
| </cr-input> |
| <div id="loadingMessage" hidden$="[[!showBusy]]"> |
| [[i18n('scanQrCodeLoading')]] |
| </div> |
| </div> |
| </div> |
| </base-page> |
| </template> |
| <script src="activation_code_page.js"></script> |
| </dom-module> |
