oobe_screens_list.html

<!-- Copyright 2022 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->


<!--
  OOBE polymer element which is used to show a list of optional screens
  that would be displayed in CHOOBE.
  It has all styling for the screen_item element and can display
  for each screen : Icon and a title.
-->

<style include="oobe-dialog-host-styles cros-color-overrides">
  :host {
    --cr-card-button-height: 150px;
  }

  #screensList {
    overflow-y: auto;
    width: 100%;
  }

  .screen-title {
    color: var(--cros-sys-on_surface);
    font: var(--cros-body-1-font);
  }

  .screen-subtitle {
    color: var(--cros-sys-on_surface_variant);
    font: var(--cros-body-2-font);
  }

  .screen-item {
    background-color: var(--cros-sys-base_elevated);
    border-radius: 16px;
    height: 80px;
    margin-bottom: 16px;
    padding: 0;
    transition: color 250ms linear, background-color 250ms linear;
    width: 100%;
  }

  .screen-icon  {
    align-items: center;
    align-self: center;
    display: flex;
    height: 32px;
    margin-inline-end: 16px;
    margin-inline-start: 16px ;
    width: 32px;
  }

  .text-container {
    display: block;
    flex-direction: column;
    justify-content: center;
    margin-inline-end: 16px;
  }

  .screen-item:focus {
    border: 2px solid var(--cros-sys-focus_ring);
  }

  .screen-item[checked=true] {
    background-color: var(--cros-sys-primary_container);
  }

  .screen-item[checked=true] .screen-title {
    color: var(--cros-sys-on_surface);
  }

  .screen-item[checked=true] .screen-subtitle {
    color: var(--cros-sys-on_surface_variant);
  }

  .info-icon {
    align-self: center;
    margin-inline-end: 30px;
    margin-inline-start: auto;
  }

  .screen-item[visited] {
    --cros-sys-inverse_primary : var(--cros-color-secondary-light);
    --cros-sys-primary : var(--cros-color-secondary-light);
    background-color: var(--cros-button-background-color-primary-disabled);
  }

  :root.jelly-enabled .screen-item[visited] {
    --cros-sys-inverse_primary : var(--cros-sys-secondary-light);
    --cros-sys-primary : var(--cros-sys-secondary-light);
    background-color: var(--cros-sys-hover_on_subtle);
  }

  .screen-item[visited] .screen-title {
    color: var(--cros-sys-on_surface);
  }

  .screen-item[visited] .screen-subtitle {
    color: var(--cros-sys-on_surface_variant);
  }

  .screen-item[disabled] {
    --cros-sys-inverse_primary : var(--cros-sys-disabled);
    --cros-sys-primary : var(--cros-sys-disabled);
    background-color: var(--disabled-bg-action);
  }

  :root.jelly-enabled .screen-item[disabled] {
    --cros-sys-inverse_primary : var(--cros-sys-disabled);
    --cros-sys-primary : var(--cros-sys-disabled);
    background-color: var(--cros-sys-disabled_container);
  }

  .screen-item[disabled] .screen-title {
    color: var(--cros-sys-disabled);
  }

  .screen-item[disabled] .screen-subtitle {
    color:  var(--cros-sys-disabled);
  }

</style>
<div id="screensList">
  <template is="dom-repeat" items="{{screensList_}}" as="screen">
    <cr-button id="[[getScreenID(screen.screenID)]]"
        visited$="[[isScreenVisited(screen.selected , screen.is_completed)]]"
        disabled="[[isScreenDisabled(screen.is_revisitable , screen.is_completed)]]"
        class="screen-item"
        role="checkbox"
        aria-checked="[[screen.selected]]"
        aria-label$="[[getAriaLabelToggleButtons_(locale,
                  screen.title ,
                  screen.subtitle ,
                  screen.is_synced ,
                  screen.is_completed,
                  screen.screenID)]]"
        on-click="onClick_">
      <div class="flex horizontal layout">
        <div class="icon">
          <iron-icon class="screen-icon" icon="[[screen.icon]]"></iron-icon>
        </div>
        <div class="text-container" aria-hidden="true">
          <div class="screen-title"> [[i18nDynamic(locale, screen.title)]]</div>
          <div class="screen-subtitle">[[getSubtitle_(locale, screen.subtitle,
                                              screen.screenID )]]</div>
        </div>
        <div class="info-icon" aria-hidden="true">
          <iron-icon hidden="[[isSyncedIconHidden(screen.is_synced ,
                                            screen.is_completed ,
                                            screen.selected)]]"
              id="sync" icon="oobe-20:sync"></iron-icon>
          <iron-icon hidden="[[!screen.selected]]"
              id="selected" icon="oobe-20:selected"></iron-icon>
        </div>
      </div>
    </cr-button>
  </template>
</div>