chrome/browser/resources/settings/people_page/change_picture.html

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

<link rel="import" href="chrome://resources/cr_elements/chromeos/cr_picture/cr_picture_list.html">
<link rel="import" href="chrome://resources/cr_elements/chromeos/cr_picture/cr_picture_pane.html">
<link rel="import" href="chrome://resources/cr_elements/chromeos/cr_picture/cr_picture_types.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/util.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="../i18n_setup.html">
<link rel="import" href="../route.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="change_picture_browser_proxy.html">

<dom-module id="settings-change-picture">
  <template>
    <style>
      :host {
        --cr-toolbar-height: 56px;
        /* #headerLine height + padding */
        --cr-settings-header-height: calc(62px + 1.34em);
        --title-height: 2em;
        --title-padding: 16px;
        display: block;
        min-height: 328px;
      }

      #title {
        -webkit-margin-start: 20px;
        height: var(--title-height);
        padding-top: var(--title-padding);
      }

      #container {
        -webkit-margin-start: 20px;
        align-items: flex-start;
        display: flex;
        position: absolute;
        top: calc(var(--cr-settings-header-height) +
                  var(--title-padding) +
                  var(--title-height));
      }

      #picturePane {
        --cr-picture-image-size: 192px;
        -webkit-margin-end: 24px;
        flex-shrink: 0;
        height: 288px;
        margin-top: 6px;
        position: relative;
        width: 288px;
      }

      #authorCredit {
        color: var(--paper-grey-500);
        display: flex;
        flex-direction: column;
        margin-top: 20px;
      }

      #pictureList {
        -webkit-margin-end: 16px;
        /* TODO(reveman): Find a way to have height align to viewport
           without using fixed position. */
        height: calc(100vh -
            var(--cr-toolbar-height) -
            var(--cr-settings-header-height) -
            var(--title-padding) -
            var(--title-height));
        margin-top: 0;
        min-height: 332px;
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
      }

    </style>
    <div id="title">$i18n{changePicturePageDescription}</div>
    <div id="container">
      <div>
        <cr-picture-pane id="picturePane"
            camera-present="[[cameraPresent_]]",
            image-src="[[getImageSrc_(selectedItem_)]]"
            image-type="[[getImageType_(selectedItem_)]]"
            discard-image-label="$i18n{discardPhoto}"
            preview-alt-text="$i18n{previewAltText}"
            take-photo-label="$i18n{takePhoto}"
            capture-video-label="$i18n{captureVideo}"
            switch-mode-to-camera-label="$i18n{switchModeToCamera}"
            switch-mode-to-video-label="$i18n{switchModeToVideo}"
            camera-video-mode-enabled="[[cameraVideoModeEnabled_]]">
        </cr-picture-pane>
        <div id="authorCredit"
            hidden="[[!isAuthorCreditShown_(selectedItem_)]]">
          [[getAuthorCredit_(selectedItem_, defaultImages_)]]
          <a href="[[getAuthorWebsite_(selectedItem_, defaultImages_)]]"
              target="_blank">
            [[getAuthorWebsite_(selectedItem_, defaultImages_)]]
          </a>
        </div>
      </div>
      <cr-picture-list id="pictureList"
          camera-present="[[cameraPresent_]]"
          default-images="[[getDefaultImages_(defaultImages_,
              firstDefaultImageIndex_)]]"
          selected-item="{{selectedItem_}}"
          choose-file-label="$i18n{chooseFile}"
          old-image-label="$i18n{oldPhoto}"
          profile-image-label="$i18n{profilePhoto}"
          take-photo-label="$i18n{takePhoto}"
          capture-video-label="$i18n{captureVideo}">
      </cr-picture-list>
    </div>
  </template>
  <script src="change_picture.js"></script>
</dom-module>