| <style include="cr-shared-style scanning-shared scanning-fonts"> |
| #appTitle { |
| @apply --scanning-section-title-font; |
| color: var(--scanning-section-title-text-color); |
| margin-bottom: 16px; |
| margin-inline-end: 0; |
| margin-inline-start: 32px; |
| margin-top: 0; |
| width: 68px; |
| } |
| |
| #moreSettingsButton { |
| @apply --scanning-more-settings-font; |
| --ink-color: var(--menu-text-color); |
| --paper-ripple-opacity: 0; |
| align-items: center; |
| background: none; |
| border: none; |
| border-radius: initial; |
| box-shadow: none; |
| color: var(--scanning-more-settings-text-color); |
| display: flex; |
| height: unset; |
| margin-bottom: 8px; |
| margin-inline-end: 40px; |
| margin-inline-start: 32px; |
| margin-top: 0; |
| padding-inline: 0; |
| text-transform: none; |
| width: 280px; |
| } |
| |
| #moreSettingsButton:focus { |
| outline: none; |
| } |
| |
| #moreSettingsButton > iron-icon { |
| height: 20px; |
| width: 20px; |
| } |
| |
| #moreSettingsButton > span { |
| flex: 1; |
| } |
| |
| #more-settings-line-separator { |
| border-bottom: var(--cr-separator-line); |
| margin-bottom: 8px; |
| margin-inline-end: 40px; |
| margin-inline-start: 32px; |
| margin-top: 8px; |
| width: 280px; |
| } |
| |
| #scanningContainer { |
| box-sizing: border-box; |
| display: block; |
| margin: 0 auto; |
| position: relative; |
| width: var(--container-width); |
| } |
| |
| .left-panel { |
| margin-inline-end: var(--left-panel-margin-inline-end); |
| margin-inline-start: var(--left-panel-margin-inline-start); |
| width: var(--left-panel-width); |
| } |
| |
| .panel-container { |
| display: flex; |
| margin-top: var(--panel-container-margin-top); |
| } |
| |
| .right-panel { |
| margin-inline-end: var(--right-panel-margin-inline-end); |
| margin-inline-start: var(--right-panel-margin-inline-start); |
| padding-inline-end: var(--right-panel-padding-inline-end); |
| padding-inline-start: var(--right-panel-padding-inline-start); |
| width: 352px; |
| } |
| |
| /* Align with Print Preview and use lighter box-shadows compared to the |
| * default styling. */ |
| #cr-container-shadow-top, |
| #cr-container-shadow-bottom { |
| box-shadow: inset 0 5px 3px -3px rgba(0, 0, 0, .2); |
| margin-inline-end: 40px; |
| margin-inline-start: 32px; |
| } |
| |
| #settingsSection { |
| display: flex; |
| flex-direction: column; |
| height: calc(100vh - var(--panel-container-margin-top)); |
| } |
| |
| #container { |
| flex: 1; |
| max-height: 445px; |
| overflow: overlay; |
| } |
| |
| .scan-button-container { |
| display: flex; |
| justify-content: flex-end; |
| margin-bottom: 32px; |
| margin-inline-end: 40px; |
| margin-inline-start: 32px; |
| margin-top: 32px; |
| width: 280px; |
| } |
| |
| #toast { |
| bottom: 0; |
| left: 0; |
| } |
| |
| #toastDiv { |
| align-items: center; |
| display: flex; |
| min-width: 280px; |
| } |
| |
| #toastInfoIcon { |
| fill: var(--google-red-refresh-300); |
| margin-inline-end: 10px; |
| margin-inline-start: -8px; |
| } |
| |
| #toastText { |
| color: var(--google-grey-200); |
| } |
| |
| #getHelpDiv { |
| flex: 1; |
| margin-inline-start: 10px; |
| text-align: right; |
| } |
| |
| #getHelpLink { |
| color: var(--google-blue-refresh-300); |
| text-decoration: none; |
| } |
| |
| cr-dialog::part(dialog) { |
| width: 340px; |
| } |
| |
| cr-dialog [slot=title] { |
| font-weight: 500; |
| padding-bottom: 12px; |
| } |
| |
| #dialogInfoIcon { |
| display: block; |
| fill: var(--google-red-600); |
| margin-bottom: 14px; |
| } |
| </style> |
| <div id="scanningContainer"> |
| <div class="panel-container"> |
| <div class="left-panel"> |
| <scan-preview id="scanPreview" app-state="[[appState_]]" |
| object-urls="[[objectUrls_]]" page-number="[[pageNumber_]]" |
| progress-percent="[[progressPercent_]]"></scan-preview> |
| </div> |
| <div class="right-panel"> |
| <div id="settingsSection" hidden="[[showDoneSection_]]"> |
| <h1 id="appTitle">[[i18n('appTitle')]]</h1> |
| <div id="container" show-bottom-shadow> |
| <template is="dom-if" if="[[!showDoneSection_]]"> |
| <scanner-select id="scannerSelect" scanners="[[scanners_]]" |
| loaded="[[scannersLoaded_]]" |
| disabled="[[settingsDisabled_]]" |
| selected-scanner-id="{{selectedScannerId}}"></scanner-select> |
| <source-select id="sourceSelect" sources="[[capabilities_.sources]]" |
| disabled="[[settingsDisabled_]]" |
| selected-source="{{selectedSource}}"></source-select> |
| <scan-to-select id="scanToSelect" |
| disabled="[[settingsDisabled_]]" |
| selected-file-path="{{selectedFilePath}}"> |
| </scan-to-select> |
| <file-type-select id="fileTypeSelect" |
| disabled="[[settingsDisabled_]]" |
| selected-file-type="{{selectedFileType}}"></file-type-select> |
| <div id="more-settings-line-separator"></div> |
| <cr-button id="moreSettingsButton" on-click="toggleClicked_" |
| aria-expanded="[[opened]]" |
| disabled="[[settingsDisabled_]]"> |
| <span>[[i18n('moreSettings')]]</span> |
| <iron-icon icon="[[getArrowIcon_(opened)]]"> |
| </iron-icon> |
| </cr-button> |
| <iron-collapse id="collapse" opened="{{opened}}"> |
| <color-mode-select id="colorModeSelect" |
| color-modes="[[capabilities_.colorModes]]" |
| disabled="[[settingsDisabled_]]" |
| selected-color-mode="{{selectedColorMode}}"> |
| </color-mode-select> |
| <page-size-select id="pageSizeSelect" |
| page-sizes="[[selectedSourcePageSizes_]]" |
| disabled="[[settingsDisabled_]]" |
| selected-page-size="{{selectedPageSize}}"> |
| </page-size-select> |
| <resolution-select id="resolutionSelect" |
| resolutions="[[capabilities_.resolutions]]" |
| disabled="[[settingsDisabled_]]" |
| selected-resolution="{{selectedResolution}}"> |
| </resolution-select> |
| </iron-collapse> |
| </template> |
| </div> |
| <div class="scan-button-container"> |
| <cr-button id="scanButton" class="action-button" on-click="onScanClick_" |
| disabled$="[[settingsDisabled_]]" |
| hidden$="[[showCancelButton_]]"> |
| [[i18n('scanButtonText')]] |
| </cr-button> |
| <cr-button id="cancelButton" on-click="onCancelClick_" |
| hidden$="[[!showCancelButton_]]" |
| disabled$="[[cancelButtonDisabled_]]"> |
| [[i18n('cancelButtonText')]] |
| </cr-button> |
| </div> |
| </div> |
| <template is="dom-if" if="[[showDoneSection_]]"> |
| <scan-done-section page-number="[[pageNumber_]]" |
| on-done-click="onDoneClick_" on-file-not-found="onFileNotFound_" |
| last-scanned-file-path="[[lastScannedFilePath_]]"> |
| </scan-done-section> |
| </template> |
| </div> |
| </div> |
| <cr-toast id="toast" duration="5000"> |
| <div id="toastDiv"> |
| <iron-icon id="toastInfoIcon" icon="cr:info-outline" |
| hidden="[[!showToastInfoIcon_]]"></iron-icon> |
| <span id="toastText">[[i18n(toastMessageKey_)]]</span> |
| <div id="getHelpDiv"> |
| <a id="getHelpLink" target="_blank" |
| href="http://support.google.com/chromebook?p=chrome_scanning" |
| hidden="[[!showToastHelpLink_]]"> |
| [[i18n('getHelpLinkText')]]</a> |
| </div> |
| </div> |
| </cr-toast> |
| <cr-dialog id="scanFailedDialog"> |
| <div slot="title"> |
| <iron-icon id="dialogInfoIcon" icon="cr:info-outline" aria-hidden="true"> |
| </iron-icon> |
| [[i18n('scanFailedDialogTitleText')]] |
| </div> |
| <div slot="body"> |
| [[i18n('scanFailedDialogBodyText')]] |
| </div> |
| <div slot="button-container"> |
| <cr-button class="cancel-button" on-click="onDialogGetHelpClick_"> |
| [[i18n('getHelpLinkText')]] |
| </cr-button> |
| <cr-button id="okButton" class="action-button" |
| on-click="onDialogOkClick_"> |
| [[i18n('okButtonLabel')]] |
| </cr-button> |
| </div> |
| </cr-dialog> |
| </div> |
