chrome/browser/resources/md_extensions/kiosk_dialog.html

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

<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/cr.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="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="item_behavior.html">
<link rel="import" href="kiosk_browser_proxy.html">

<dom-module id="extensions-kiosk-dialog">
  <template>
    <style include="cr-shared-style paper-button-style cr-icons">
      #add-kiosk-app {
        margin-bottom: 10px;
        margin-top: 20px;
      }

      #add-kiosk-app cr-input {
        width: 350px;
      }

      #add-kiosk-app paper-button {
        margin-inline-start: 10px;
      }

      #kiosk-apps-list {
        border: 1px solid var(--paper-grey-300);
        padding: 10px;
      }

      .list-item {
        align-items: center;
        border-bottom: 1px solid var(--paper-grey-300);
        display: flex;
        justify-content: space-between;
        padding: 5px;
      }

      .list-item:last-of-type {
        border-bottom: none;
      }

      .list-item:hover {
        background-color: var(--paper-grey-300);
      }

      .item-icon {
        vertical-align: middle;
        width: 25px;
      }

      .item-controls {
        visibility: hidden;
      }

      .list-item:hover .item-controls {
        visibility: visible;
      }
    </style>
    <cr-dialog id="dialog" close-text="$i18n{close}"
        ignore-enter-key>
      <div slot="title">$i18n{manageKioskApp}</div>
      <div slot="body">
        <div id="kiosk-apps-list">
          <template is="dom-repeat" items="[[apps_]]">
            <div class="list-item">
              <div class="item-name">
                <img class="item-icon" src="[[item.iconURL]]"
                    alt$="[[appOrExtension(
                        data.type,
                        '$i18nPolymer{appIcon}',
                        '$i18nPolymer{extensionIcon}')]]">
                [[item.name]]
                <span hidden="[[!item.autoLaunch]]">
                  $i18n{kioskAutoLaunch}
                </span>
              </div>
              <div class="item-controls">
                <paper-button hidden="[[!canEditAutoLaunch_]]"
                    on-click="onAutoLaunchButtonTap_">
                  [[getAutoLaunchButtonLabel_(item.autoLaunch,
                      '$i18nPolymer{kioskDisableAutoLaunch}',
                      '$i18nPolymer{kioskEnableAutoLaunch}')]]
                </paper-button>
                <paper-icon-button-light class="icon-delete-gray">
                  <button on-click="onDeleteAppTap_"></button>
                </paper-icon-button-light>
              </div>
            </div>
          </template>
        </div>
        <div id="add-kiosk-app">
          <cr-input id="add-input" label="$i18n{kioskAddApp}"
              placeholder="$i18n{kioskAddAppHint}" value="{{addAppInput_}}"
              invalid="[[errorAppId_]]" on-keydown="clearInputInvalid_"
              error-message="[[getErrorMessage_(
                  '$i18nPolymer{kioskInvalidApp}', errorAppId_)]]">
            <paper-button id="add-button" on-click="onAddAppTap_"
                disabled="[[!addAppInput_]]" slot="suffix">
              $i18n{add}
            </paper-button>
          </cr-input>
        </div>
        <cr-checkbox disabled="[[!canEditBailout_]]" id="bailout"
            on-change="onBailoutChanged_" checked="[[bailoutDisabled_]]"
            hidden="[[!canEditAutoLaunch_]]">
          $i18n{kioskDisableBailout}
        </cr-checkbox>
      </div>
      <div slot="button-container">
        <paper-button class="action-button" on-click="onDoneTap_">
          $i18n{done}
        </paper-button>
      </div>
    </cr-dialog>
    <cr-dialog id="confirm-dialog" close-text="$i18n{close}"
        ignore-enter-key on-close="stopPropagation_">
      <div slot="title">$i18n{kioskDisableBailoutWarningTitle}</div>
      <div slot="body">$i18n{kioskDisableBailoutWarningBody}</div>
      <div slot="button-container">
        <paper-button class="cancel-button"
            on-click="onBailoutDialogCancelTap_">
          $i18n{cancel}
        </paper-button>
        <paper-button class="action-button"
            on-click="onBailoutDialogConfirmTap_">
          $i18n{confirm}
        </paper-button>
      </div>
    </cr-dialog>
  </template>
  <script src="kiosk_dialog.js"></script>
</dom-module>