blob: dc8592fc98cbf053cc3b3d0b242559e4a16f67ca [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.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-list/iron-list.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
<dom-module id="bluetooth-dialog">
<template>
<style include="cr-hidden-style iron-flex">
dialog {
@apply(--bluetooth-dialog-style);
}
#pairing {
margin-bottom: 10px;
}
#pairing paper-input {
text-align: center;
}
#pinDiv {
margin-top: 10px;
}
.dialog-message {
margin-bottom: 10px;
}
div.contents {
height: 250px;
}
/* .display indicates a displayed pin code or passkey. */
span.display {
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 0 0 1px #222;
color: #222;
font-size: 123.08%; /* 16px / 13px */
height: 38px;
line-height: 38px;
margin: 0 5px;
padding: 0 15px;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
span.display.next {
background: rgb(77, 144, 254);
border: 2px solid rgb(77, 144, 254);
box-shadow: none;
color: #fff;
}
span.display.untyped {
border: 1px solid #d4d4d4;
box-shadow: 0 0 0 1px #888;
color: #666;
}
/* .confirm indicates a confirmation passkey. */
span.confirm {
color: #999;
font-size: 153.85%; /* 20px / 13px */
font-weight: 600; /* semibold */
margin: 0 20px;
}
</style>
<!-- TODO(stevenjb/dschuyler): Find a solution to support i18n{} here -->
<dialog is="cr-dialog" id="dialog" no-cancel="[[noCancel]]"
close-text="[[i18n('close')]]" on-cancel="onDialogCanceled_"
on-closed="onDialogCanceled_">
<div slot="title">[[dialogTitle]]</div>
<div slot="body">
<div class="contents layout vertical center center-justified">
<template is="dom-if" if="[[!errorMessage_]]">
<div id="pairing" class="layout vertical center center-justified">
<div class="dialog-message">
[[getMessage_(pairingDevice, pairingEvent_)]]
</div>
<div hidden$="[[!showEnterPincode_(pairingEvent_)]]">
<paper-input id="pincode" minlength="1" maxlength="16"
type="text" auto-validate value="{{pinOrPass_}}">
</paper-input>
</div>
<div hidden$="[[!showEnterPasskey_(pairingEvent_)]]">
<paper-input id="passkey" minlength="6" maxlength="6"
type="text" auto-validate value="{{pinOrPass_}}">
</paper-input>
</div>
<div id="pinDiv" class="layout horizontal center center-justified"
hidden="[[!showDisplayPassOrPin_(pairingEvent_)]]">
<template is="dom-repeat" items="[[digits_]]">
<span class$="[[getPinClass_(index, pairingEvent_)]]">
[[getPinDigit_(index, pairingEvent_)]]
</span>
</template>
<span class$="[[getPinClass_(-1, pairingEvent_)]]"
hidden="[[showAcceptReject_(pairingEvent_)]]">
[[i18n('bluetoothEnterKey')]]
</span>
</div>
</div>
</template>
<template is="dom-if" if="[[errorMessage_]]">
<div class="layout vertical center center-justified">
<div class="dialog-message">[[errorMessage_]]</div>
</div>
</template>
</div>
</div>
<div slot="button-container">
<template is="dom-if" if="[[!errorMessage_]]">
<paper-button hidden$="[[!showAcceptReject_(pairingEvent_)]]"
on-tap="onAcceptTap_">[[i18n('bluetoothAccept')]]</paper-button>
<paper-button hidden$="[[!showAcceptReject_(pairingEvent_)]]"
on-tap="onRejectTap_">[[i18n('bluetoothReject')]]</paper-button>
<paper-button hidden$="[[!showConnect_(pairingEvent_)]]"
disabled="[[!enableConnect_(pairingEvent_, pinOrPass_)]]"
on-tap="onConnectTap_">[[i18n('bluetoothPair')]]</paper-button>
<paper-button
hidden$="[[!showDismiss_(pairingDevice, pairingEvent_)]]"
on-tap="close">[[i18n('ok')]]</paper-button>
<paper-button hidden$="[[showDismiss_(pairingDevice, pairingEvent_)]]"
on-tap="onCancelTap_">
[[i18n('cancel')]]
</paper-button>
</template>
<template is="dom-if" if="[[errorMessage_]]">
<paper-button on-tap="close">[[i18n('ok')]]</paper-button>
</template>
</div>
</dialog>
</template>
<script src="bluetooth_dialog.js"></script>
</dom-module>