ui/webui/resources/cr_elements/chromeos/network/cr_network_icon.html

<link rel="import" href="../../../html/polymer.html">

<link rel="import" href="../../chromeos/network/cr_onc_types.html">
<link rel="import" href="../../chromeos/network/network_icons.html">
<link rel="import" href="../../hidden_style_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">

<dom-module id="cr-network-icon">
  <template>
    <style include="cr-hidden-style">
      :host {
        display: inline-flex;
        overflow: hidden;
        padding: 2px;
        position: relative;
      }

      #icon {
        height: 20px;
        opacity: .65;  /* Equivalent to #5a5a5a */
        width: 20px;
      }

      /* Upper-left corner */
      #technology {
        --iron-icon-fill-color: #5a5a5a;
        height: 20px;
        left: 0;
        position: absolute;
        top: 1px;
        width: 20px;
      }

      /* Lower-right corner */
      #secure {
        --iron-icon-fill-color: #5a5a5a;
        height: 8px;
        left: 16px;
        position: absolute;
        top: 16px;
        width: 8px;
      }

      /* Images */
      #icon.ethernet {
        background: url(ethernet.svg);
      }

      #icon.vpn {
        background: url(vpn.svg);
      }

      /* Wi-Fi images */
      #icon.wifi-not-connected {
        background: url(wifi_0_with_x.svg);
      }

      #icon.wifi-no-network,
      #icon.wifi-0 {
        background: url(wifi_0.svg);
      }

      #icon.wifi-1 {
        background: url(wifi_1.svg);
      }

      #icon.wifi-2 {
        background: url(wifi_2.svg);
      }

      #icon.wifi-3 {
        background: url(wifi_3.svg);
      }

      #icon.wifi-4 {
        background: url(wifi_4.svg);
      }

      #icon.wifi-off {
        background: url(wifi_off.svg);
      }

      #icon.wifi-connecting {
        animation: wifi-levels 750ms infinite;
        animation-direction: alternate;
        animation-timing-function: steps(4, end);
      }

      @keyframes wifi-levels {
        0% { background: url(wifi_0.svg); }
        25% { background: url(wifi_1.svg); }
        50% { background: url(wifi_2.svg); }
        75% { background: url(wifi_3.svg); }
        100% { background: url(wifi_4.svg); }
      }

      /* Cellular images */
      #icon.cellular-not-connected {
        background: url(cellular_0_with_x.svg);
      }

      #icon.cellular-no-network,
      #icon.cellular-0 {
        background: url(cellular_0.svg);
      }

      #icon.cellular-1 {
        background: url(cellular_1.svg);
      }

      #icon.cellular-2 {
        background: url(cellular_2.svg);
      }

      #icon.cellular-3 {
        background: url(cellular_3.svg);
      }

      #icon.cellular-4 {
        background: url(cellular_4.svg);
      }

      #icon.cellular-off {
        background: url(cellular_off.svg);
      }

      #icon.cellular-connecting {
        animation: cellular-levels 750ms infinite;
        animation-direction: alternate;
        animation-timing-function: steps(4, end);
      }

      @keyframes cellular-levels {
        0% { background: url(cellular_0.svg); }
        25% { background: url(cellular_1.svg); }
        50% { background: url(cellular_2.svg); }
        75% { background: url(cellular_3.svg); }
        100% { background: url(cellular_4.svg); }
      }
    </style>
    <div id="icon" class$="[[getIconClass_(networkState, isListItem)]]">
    </div>
    <iron-icon id="technology" hidden="[[!showTechnology_(networkState)]]"
        icon="[[getTechnology_(networkState)]]">
    </iron-icon>
    <iron-icon id="secure" hidden="[[!showSecure_(networkState)]]"
        icon="network8:badge-secure">
    </iron-icon>
  </template>
  <script src="cr_network_icon.js"></script>
</dom-module>