ui/webui/resources/cr_elements/chromeos/cr_picture/cr_picture_list.html

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

<link rel="import" href="../../icons.html">
<link rel="import" href="../../shared_style_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys/iron-a11y-keys.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-selector.html">
<link rel="import" href="cr_picture_types.html">
<link rel="import" href="cr_png_behavior.html">

<dom-module id="cr-picture-list">
  <template>
    <style include="cr-shared-style">
      :host {
        display: inline-block;
        margin-top: -6px;
      }

      img {
        border-radius: 50%;
        height: 64px;
        margin: 6px;
        vertical-align: top;
        width: 64px;
      }

      img.iron-selected {
        border: 2px solid rgba(66, 133, 244, 0.6);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.17);
        margin: 4px;
        outline: none;
      }

      iron-icon {
        --iron-icon-fill-color: var(--google-grey-500);
        --iron-icon-height: 24px;
        --iron-icon-width: 24px;
        background-color: rgb(237, 237, 237);
        border: 0;
        border-radius: 50%;
        margin: 6px;
        padding: 20px;
        position: static;
      }

      iron-icon.iron-selected {
        border: 2px solid rgba(66, 133, 244, 0.6);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.17);
        margin: 4px;
        outline: none;
      }

      #container {
        outline: none;
      }
    </style>

    <div id="container">
      <iron-a11y-keys keys="up down left right space enter"
          on-keys-pressed="onKeysPressed_">
      </iron-a11y-keys>
      <iron-selector id="selector" on-iron-activate="onIronActivate_"
          on-selected-item-changed="onSelectedItemChanged_"
          selected-item="{{selectedItem}}" role="radiogroup">
        <!-- Selects the camera as the picture source. -->
        <iron-icon id="cameraImage" role="radio"
            data-type$="[[selectionTypesEnum_.CAMERA]]"
            icon="cr:camera-alt" title="[[takePhotoLabel]]"
            hidden="[[!cameraPresent]]">
        </iron-icon>
        <template is="dom-if" if="[[chooseFileLabel]]">
          <!-- Selects the file picker as the picture source. -->
          <iron-icon data-type$="[[selectionTypesEnum_.FILE]]" role="radio"
              icon="cr:folder" title="[[chooseFileLabel]]">
          </iron-icon>
        </template>
        <!-- Shows and selects the current profile picture. -->
        <img id="profileImage" role="radio"
            data-type$="[[selectionTypesEnum_.PROFILE]]"
            data-url$="[[profileImageUrl_]]"
            src="[[getImgSrc_(profileImageUrl_)]]"
            hidden="[[!profileImageUrl_]]"
            srcset="[[getImgSrc2x_(profileImageUrl_)]]"
            title="[[profileImageLabel]]">
        <!-- Shows and selects the previously selected ('old') picture. -->
        <img id="oldImage" role="radio"
            data-type$="[[selectionTypesEnum_.OLD]]"
            data-image-index$="[[oldImageIndex_]]"
            data-url$="[[oldImageUrl_]]"
            src="[[getImgSrc_(oldImageUrl_)]]" hidden="[[!oldImageUrl_]]"
            title="[[oldImageLabel]]">
        <!-- Shows the list of available images to select from. -->
        <template is="dom-repeat" items="[[defaultImages]]">
          <img role="radio"
              data-type$="[[selectionTypesEnum_.DEFAULT]]"
              data-index$="[[index]]" data-image-index$="[[item.index]]"
              data-url$="[[item.url]]"
              src="[[getImgSrc_(item.url)]]"
              srcset="[[getImgSrc2x_(item.url)]]" title="[[item.title]]">
        </template>
      </iron-selector>
    </div>
  </template>
  <script src="cr_picture_list.js"></script>
</dom-module>