summaryrefslogtreecommitdiff
path: root/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_eid_popup.html
blob: b045ae54b57d7d393cad3214942312131fad6e75 (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
<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">

<dom-module id="cellular-eid-popup">
  <template>
    <style include="cr-shared-style iron-flex">
      :host {
        background-color: white;
        border-radius: 4px;
        box-shadow:  0 2px 5px rgba(0,0,0,0.18);
        margin: 34px 0 0 12px;
        position: absolute;
        width: 275px;
        z-index: 1;
      }

      .cellular-network-list-header {
        border-top: var(--cr-separator-line);
        padding: 16px 0 8px 0;
      }

      .body {
        margin-top: 6px;
      }

      .cellular-network-content {
        margin: 8px 0 8px 32px;
      }

      .cellular-not-setup {
        color: var(--google-grey-700);
        font-size: smaller;
        margin-bottom: 16px;
      }

      .header {
        display: flex;
        justify-content: space-between;
      }

      .title {
        align-self: center;
      }

      #container {
        padding: 8px 16px;
      }

      #closeBtn {
        align-self: center;
        cursor: pointer;
      }

      #qrCodeCanvas {
        width: 100%;
      }

      #eid {
        margin-top: 15px;
      }
    </style>
    <div id="container"
        class="dialog"
        tabindex="1"
        aria-labelledby="eidTitle"
        aria-describedby="eidDescription">
      <div class="header">
        <div id="eidTitle" class="title" arian-hidden="true">
          [[i18n('eidPopupTitle')]]
        </div>
        <cr-icon-button
            id="eidPopupCloseIcon"
            iron-icon="cr:close"
            title="[[i18n('closeEidPopupButtonLabel')]]"
            aria-label="[[i18n('closeEidPopupButtonLabel')]]"
            on-click="onCloseTap_">
        </cr-icon-button>
      </div>
      <div class="body">
        <div id="eidDescription" arian-hidden="true">
          [[i18n('eidPopupDescription')]]
        </div>
        <div id="eid">[[eid_]]</div>
        <canvas id="qrCodeCanvas"
            width="[[canvasSize_]]"
            height="[[canvasSize_]]">
        </canvas>
      </div>
    </div>
  </template>
  <script src="cellular_eid_popup.js"></script>
</dom-module>