| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html"> |
| <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html"> |
| <link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html"> |
| <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> |
| <link rel="import" href="chrome://resources/html/event_tracker.html"> |
| <link rel="import" href="chrome://resources/html/i18n_behavior.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-button/paper-button.html"> |
| <link rel="import" href="../icons.html"> |
| <link rel="import" href="../data/destination.html"> |
| <link rel="import" href="../data/destination_store.html"> |
| <link rel="import" href="../data/invitation_store.html"> |
| <link rel="import" href="../data/user_info.html"> |
| <link rel="import" href="destination_dialog.html"> |
| <link rel="import" href="print_preview_shared_css.html"> |
| <link rel="import" href="throbber_css.html"> |
| <link rel="import" href="settings_section.html"> |
| <link rel="import" href="strings.html"> |
| |
| <dom-module id="print-preview-destination-settings"> |
| <template> |
| <style include="print-preview-shared paper-button-style throbber cr-hidden-style"> |
| paper-button { |
| margin: 2px; |
| margin-top: 8px; |
| width: 89px; |
| } |
| |
| .throbber { |
| margin-top: 6px; |
| } |
| |
| .destination-settings-box, |
| .throbber-container { |
| align-items: center; |
| display: flex; |
| overflow: hidden; |
| } |
| |
| .destination-settings-box iron-icon { |
| fill: var(--google-grey-600); |
| flex: 0; |
| margin-inline-end: 8px; |
| min-width: 20px; |
| vertical-align: middle; |
| } |
| |
| .destination-info-wrapper { |
| overflow: hidden; |
| } |
| |
| .destination-name { |
| line-height: calc(20/13 * 1em); |
| } |
| |
| .destination-location, |
| .destination-connection-status { |
| color: var(--google-grey-700); |
| font-size: calc(12/13 * 1em); |
| } |
| |
| .destination-info-wrapper > div, |
| .destination-throbber-name { |
| flex: 1; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| |
| :host([stale_]) .destination-info-wrapper { |
| opacity: 0.4; |
| } |
| </style> |
| <print-preview-settings-section> |
| <span slot="title">$i18n{destinationLabel}</span> |
| <div slot="controls"> |
| <div class="throbber-container" hidden="[[!loadingDestination_]]"> |
| <div class="throbber"></div> |
| <div class="destination-throbber-name"></div> |
| </div> |
| <div class="destination-settings-box" hidden="[[loadingDestination_]]"> |
| <iron-icon icon$="[[destination.icon]]" hidden="[[!destination]]"> |
| </iron-icon> |
| <div class="destination-info-wrapper"> |
| <div class="destination-name">[[destination.displayName]]</div> |
| <div class="destination-location">[[destination.hint]]</div> |
| <div class="destination-connection-status"> |
| [[getStatusText_(destination.connectionStatusText, |
| destination.shouldShowInvalidCertificateError)]] |
| </div> |
| </div> |
| </div> |
| </div> |
| </print-preview-settings-section> |
| <print-preview-settings-section> |
| <div slot="title"></div> |
| <div slot="controls"> |
| <paper-button |
| disabled$="[[shouldDisableButton_(destinationStore, disabled, |
| state)]]" |
| on-click="onChangeButtonClick_"> |
| $i18n{changeDestination} |
| </paper-button> |
| </div> |
| </print-preview-settings-section> |
| <cr-lazy-render id="destinationDialog"> |
| <template> |
| <print-preview-destination-dialog |
| destination-store="[[destinationStore]]" |
| invitation-store="[[invitationStore]]" |
| recent-destinations="[[recentDestinations]]" |
| user-info="{{userInfo}}" |
| show-cloud-print-promo="{{showCloudPrintPromo_}}" |
| on-close="onDialogClose_"> |
| </print-preview-destination-dialog> |
| </template> |
| </cr-lazy-render> |
| </template> |
| <script src="destination_settings.js"></script> |
| </dom-module> |