chromium/chrome/browser/resources/ash/settings/os_a11y_page/facegaze_actions_add_dialog.html

<style include="os-settings-icons settings-shared iron-flex">
  :host {
    --dialog-horizontal-padding: 24px;
  }

  cr-dialog [slot=title] {
    padding-inline-end: var(--dialog-horizontal-padding);
    padding-inline-start: var(--dialog-horizontal-padding);
    padding-top: var(--dialog-horizontal-padding);
  }

  cr-dialog [slot=header] {
    padding-inline-end: var(--dialog-horizontal-padding);
    padding-inline-start: var(--dialog-horizontal-padding);
  }

  cr-dialog [slot=body] {
    padding-inline-end: var(--dialog-horizontal-padding);
    padding-inline-start: var(--dialog-horizontal-padding);
  }

  cr-dialog [slot=button-container] {
    padding-bottom: 20px;
    padding-inline-end: var(--dialog-horizontal-padding);
    padding-inline-start: var(--dialog-horizontal-padding);
    padding-top: 20px;
  }

  .centered-message {
    align-items: center;
    color: var(--md-loading-message-color);
    display: flex;
    flex: 1;
    font: var(--cros-button-1-font);
    height: 100%;
    justify-content: center;
  }

  #dialogBody {
    display: flex;
    flex-direction: column;
    height: 336px;
    overflow: auto;
    padding-inline-end: 0;
    padding-inline-start: 0;
  }

  iron-icon[icon='settings:check-circle'] {
    --iron-icon-fill-color: var(--cr-link-color);
    margin-inline-end: 26px;
  }

  iron-list > div:not(.selected):hover {
    background-color: var(--cros-menu-item-bg-color-focus);
  }

  [scrollable] iron-list > :not(.no-outline):focus {
    background-color: var(--cros-menu-item-bg-color-focus);
  }

  [scrollable] iron-list > .selected:not(.no-outline):focus {
    background-color: transparent;
  }

  .list-item {
    color: var(--cros-text-color-primary);
    min-height: 36px;
  }

  .padded {
    padding-inline-end: var(--dialog-horizontal-padding);
    padding-inline-start: var(--dialog-horizontal-padding);
  }

  paper-ripple {
    color: var(--cros-menu-item-ripple-color);
  }

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

  #sliderContainer {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }

  #sliderContainer .slider-button {
    margin-inline-start: -8px;
    margin-inline-end: -8px;
  }

  #faceGazeGestureThresholdSlider {
    flex: 1;
    max-width: 200px;
  }

  #faceGazeGestureCount {
    text-align: center;
  }

</style>

<cr-dialog id="dialog" close-text="$i18n{close}" show-on-attach>
  <template is="dom-if" if="[[showSelectAction_]]" restamp>
    <div slot="title">$i18n{faceGazeActionsDialogTitle}</div>
    <div id="dialogBody" slot="body" scrollable>
      <iron-list id="faceGazeAvailableActionsList"
          scroll-target="dialogBody"
          items="[[displayedActions_]]" selection-enabled
          selected-item="{{selectedAction_}}">
        <template>
          <!-- |selected| is a property of iron-list -->
          <div class$="list-item padded [[getItemClass_(selected)]]"
              tabindex$="[[tabIndex]]">
            <paper-ripple></paper-ripple>
            <div class="flex padded" aria-hidden="true">
              [[getActionDisplayText_(item)]]
            </div>
            <iron-icon icon="settings:check-circle" hidden="[[!selected]]">
            </iron-icon>
          </div>
        </template>
      </iron-list>
    </div>
    <div slot="button-container">
      <cr-button class="cancel-button" on-click="onCancelButtonClick_">
        $i18n{cancel}
      </cr-button>
      <cr-button id="faceGazeAddActionNextButton"
          class="next-button" on-click="onNextButtonClick_"
          disabled="[[disableActionNextButton_]]">
        $i18n{next}
      </cr-button>
    </div>
  </template>

  <template is="dom-if" if="[[showSelectGesture_]]" restamp>
    <div slot="title">[[localizedSelectGestureTitle_]]</div>
    <div slot="header">
      $i18n{faceGazeActionsDialogSelectGestureSubtitle}
    </div>
    <div id="dialogBody" slot="body" scrollable>
      <iron-list id="faceGazeAvailableGesturesList"
          scroll-target="dialogBody"
          items="[[displayedGestures_]]" selection-enabled
          selected-item="{{selectedGesture_}}">
        <template>
          <!-- |selected| is a property of iron-list -->
          <div class$="list-item padded [[getItemClass_(selected)]]"
              tabindex$="[[tabIndex]]">
            <paper-ripple></paper-ripple>
            <div class="flex padded" aria-hidden="true">
              [[getGestureDisplayText_(item)]]
            </div>
            <iron-icon icon="settings:check-circle" hidden="[[!selected]]">
            </iron-icon>
          </div>
        </template>
      </iron-list>
    </div>
    <div slot="button-container" class="justify-space-between">
      <div id="leftBtnGroup">
        <template is="dom-if" if="[[displayGesturePreviousButton_]]" restamp>
          <cr-button
              id="faceGazeGesturePreviousButton"
              class="button" on-click="onPreviousButtonClick_">
            $i18n{faceGazePrevious}
          </cr-button>
        </template>
      </div>
      <div id="rightBtnGroup">
        <cr-button class="cancel-button" on-click="onCancelButtonClick_">
          $i18n{cancel}
        </cr-button>
        <cr-button id="faceGazeGestureNextButton"
            class="next-button" on-click="onNextButtonClick_"
            disabled="[[disableGestureNextButton_]]">
          $i18n{next}
        </cr-button>
      </div>
    </div>
  </template>

  <!-- TODO(b:341770753): Build custom webcam component for setting the gesture threshold. -->
  <template is="dom-if" if="[[showGestureThreshold_]]" restamp>
    <div slot="title">[[localizedGestureThresholdTitle_]]</div>
    <div slot="header">
      $i18n{faceGazeActionsDialogGestureThresholdSubtitle}
    </div>
    <div slot="body">
      <div id="sliderContainer">
        <cr-icon-button
            id="faceGazeGestureThresholdDecrementButton"
            iron-icon="os-settings:chevron-left"
            class="slider-button"
            on-click="onDecreaseThresholdButtonClick_">
        </cr-icon-button>
        <cr-slider
            id="faceGazeGestureThresholdSlider"
            label_="$i18n{faceGazeActionsDialogGestureThresholdKnobLabel}"
            value="[[gestureThresholdValue_]]"
            on-cr-slider-value-changed="onThresholdSliderChanged_"
            key-press-slider-increment="5"
            min="1" max="100">
        </cr-slider>
        <cr-icon-button
            id="faceGazeGestureThresholdIncrementButton"
            iron-icon="os-settings:chevron-right"
            class="slider-button"
            on-click="onIncreaseThresholdButtonClick_">
        </cr-icon-button>
      </div>
      <div id="faceGazeGestureCount" class="start settings-box-text">
        [[localizedGestureCountLabel_]]
      </div>
    </div>
    <div slot="button-container" class="justify-space-between">
      <div id="leftBtnGroup">
        <template is="dom-if" if="[[displayThresholdPreviousButton_]]" restamp>
          <cr-button id="faceGazeThresholdPreviousButton"
              class="button" on-click="onPreviousButtonClick_">
            $i18n{faceGazePrevious}
          </cr-button>
        </template>
      </div>
      <div id="rightBtnGroup">
        <cr-button class="cancel-button" on-click="onCancelButtonClick_">
          $i18n{cancel}
        </cr-button>
        <cr-button id="faceGazeActionDialogSaveButton"
            class="next-button"
            on-click="onSaveButtonClick_">
          $i18n{save}
        </cr-button>
      </div>
    </div>
  </template>
</cr-dialog>