summaryrefslogtreecommitdiff
path: root/chromium/ui/webui/resources/cr_components/chromeos/network/network_nameservers.html
blob: 5b0a1a7799449456329fa9afa406e6132a72b0de (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<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/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_group/cr_radio_group.html">
<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_indicator.html">
<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_network_behavior.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="network_shared_css.html">

<dom-module id="network-nameservers">
  <template>
    <style include="network-shared md-select iron-flex">
      a {
        margin-inline-start: 4px;
      }

      cr-input {
        margin-bottom: 4px;
        /* Aligns with the start of cr-radio-button's text. */
        margin-inline-start: 38px;
      }

      cr-radio-group {
        --cr-radio-group-item-padding: 12px;
        width: 100%;
      }

      .nameservers {
        /* Aligns with the start of cr-radio-button's text. */
        margin-inline-start: 38px;
      }

      .nameservers:not([changeable]) {
        opacity: var(--cr-disabled-opacity);
      }

      #radioGroupDiv {
        align-items: center;
        display: block;
        padding-inline-end: var(--cr-section-padding);
        padding-inline-start: var(--cr-section-padding);
      }

      cr-policy-indicator {
        /* Aligns with the other policy indicators. */
        margin-inline-end: calc(var(--settings-control-label-spacing) + 34px);
      }
    </style>

    <div class="property-box">
      <div class="start">
        [[i18n('networkNameservers')]]
      </div>
      <cr-policy-indicator indicator-type="[[getPolicyIndicatorType_(
          networkProperties, 'NameServersConfigType')]]">
      </cr-policy-indicator>
    </div>
    <div id="radioGroupDiv">
      <cr-radio-group id="nameserverType" class="layout vertical"
          selected="[[nameserversType_]]"
          on-selected-changed="onTypeChange_"
          aria-label="[[i18n('networkNameservers')]]">
        <!-- Automatic nameservers -->
        <cr-radio-button name="automatic" disabled="[[!canChangeConfigType_]]">
          [[i18n('networkNameserversAutomatic')]]
        </cr-radio-button>
        <template is="dom-if" if="[[showNameservers_(nameserversType_,
            'automatic', nameservers_)]]">
          <div class="nameservers" changeable$="[[canChangeConfigType_]]">
            [[getNameserversString_(nameservers_)]]
          </div>
        </template>

        <!-- Google nameservers -->
        <cr-radio-button name="google" disabled="[[!canChangeConfigType_]]">
          [[i18n('networkNameserversGoogle')]]
          <template is="dom-if"
              if="[[i18nExists('networkGoogleNameserversLearnMoreUrl')]]">
            <a href="[[i18n('networkGoogleNameserversLearnMoreUrl')]]"
                target="_blank" on-tap="doNothing_">
              [[i18n('networkNameserversLearnMore')]]
            </a>
          </template>
        </cr-radio-button>
        <template is="dom-if" if="[[showNameservers_(nameserversType_,
            'google', nameservers_)]]">
          <div class$="nameservers">
            [[getNameserversString_(nameservers_)]]
          </div>
        </template>

        <!-- Custom nameservers -->
        <cr-radio-button name="custom" disabled="[[!canChangeConfigType_]]">
          [[i18n('networkNameserversCustom')]]
        </cr-radio-button>
        <template is="dom-if" if="[[showNameservers_(nameserversType_,
            'custom')]]">
          <div class="property-box single-column two-line">
            <template is="dom-repeat" items="[[nameservers_]]">
              <cr-input id="nameserver[[index]]" value="[[item]]"
                  on-change="onValueChange_"
                  disabled="[[!canEditCustomNameServers_(editable,
                      nameserversType_, networkProperties)]]">
              </cr-input>
            </template>
          </div>
        </template>
      </cr-radio-group>
    </div>

  </template>
  <script src="network_nameservers.js"></script>
</dom-module>