blob: 0f8bc18aa145e1e84568b7110028db2ed1371333 [file] [log] [blame]
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/md_select_css.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/paper-input/paper-input-container.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
<link rel="import" href="network_shared_css.html">
<dom-module id="network-nameservers">
<template>
<style include="network-shared md-select iron-flex">
a {
-webkit-margin-start: 4px;
}
paper-input-container {
-webkit-padding-start: 28px;
width: 200px;
}
paper-radio-button {
--paper-radio-button-ink-size: 40px;
--paper-radio-button-label-color: inherit;
--paper-radio-button-size: 16px;
}
paper-radio-group {
--paper-radio-group-item-padding: 12px;
width: 100%;
}
.nameservers {
-webkit-margin-start: calc(var(--cr-section-indent-width) - 12px);
}
#radioGroupDiv {
-webkit-padding-end: var(--cr-section-padding);
-webkit-padding-start: var(--cr-section-padding);
align-items: center;
display: block;
}
</style>
<div class="property-box">
[[i18n('networkNameservers')]]
</div>
<div id="radioGroupDiv">
<paper-radio-group id="nameserverType" class="layout vertical"
selected="[[nameserversType_]]"
on-paper-radio-group-changed="onTypeChange_"
aria-label="[[i18n('networkNameservers')]]">
<!-- Automatic nameservers -->
<paper-radio-button name="automatic">
[[i18n('networkNameserversAutomatic')]]
</paper-radio-button>
<template is="dom-if" if="[[showNameservers_(nameserversType_,
'automatic', nameservers_)]]">
<div class="nameservers">[[getNameserversString_(nameservers_)]]</div>
</template>
<!-- Google nameservers -->
<paper-radio-button name="google">
[[i18n('networkNameserversGoogle')]]
<template is="dom-if"
if="[[i18nExists('networkGoogleNameserversLearnMoreUrl')]]">
<a href="[[i18n('networkGoogleNameserversLearnMoreUrl')]]"
target="_blank" on-tap="doNothing_">
[[i18n('networkNameserversLearnMore')]]
</a>
</template>
</paper-radio-button>
<template is="dom-if" if="[[showNameservers_(nameserversType_,
'google', nameservers_)]]">
<div class="nameservers">[[getNameserversString_(nameservers_)]]</div>
</template>
<!-- Custom nameservers -->
<paper-radio-button name="custom">
[[i18n('networkNameserversCustom')]]
</paper-radio-button>
<template is="dom-if" if="[[showNameservers_(nameserversType_,
'custom')]]">
<div class="property-box single-column two-line">
<template is="dom-repeat" items="[[nameservers_]]">
<paper-input-container no-label-float>
<input id="nameserver[[index]]" is="iron-input" value="[[item]]"
disabled="[[!canEdit_(editable, nameserversType_)]]"
on-change="onValueChange_">
</paper-input-container>
</template>
</div>
</template>
</paper-radio-group>
</div>
</template>
<script src="network_nameservers.js"></script>
</dom-module>