lock_screen_network.html | Explore in Territory

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

<!doctype html>
<html dir="$i18n{textdirection}" lang="$i18n{language}">

<head>
  <meta charset="utf-8">
  <title>$i18n{titleText}</title>

  <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
  <link rel="stylesheet" href="chrome://resources/chromeos/colors/cros_styles.css">
  <script type="module" src="chrome://lock-network/lock_screen_network.js">
  </script>

  <dom-module id="lock-screen-network-ui">
    <template>
      <style>
        ::part(dialog) {
          /* The HTML dialog should fill the entire system dialog. */
          display: flex;
          height: 100%;
          width: 100%;
        }

        [slot='body'] {
          height: 100%;
          overflow-x: hidden;
          padding-inline-start: 64px;
          padding-top: 64px;
        }

        [slot='header'] {
          flex: 1;
          padding-bottom: 0;
          padding-inline-end: 64px;
          padding-inline-start: 64px;
          padding-top: 64px;
        }

        #title {
          color: var(--cros-text-color-primary);
          font-size: 28px;
          font-weight: 400;
          margin: 0;
          padding-top: 20px;
        }

        #subtitle {
          color: var(--cros-text-color-secondary);
          font-size: 13px;
          font-weight: 400;
          margin: 0;
          padding-top: 8px;
        }

        [slot='button-container'] {
          bottom: 10px;
          position: absolute;
          right: 20px;
        }

        .button-group > cr-button {
          margin-inline-start: 10px;
        }

        #global-policy {
          white-space: pre-wrap;
        }

        #select-div {
          display: flex;
          max-height: 300px;
          overflow-y: scroll;
          width: 100%;
        }

        cr-button {
          border-radius: 16px;
        }

        network-select {
          flex: 1;
        }
      </style>

      <cr-dialog id="dialog" exportparts="dialog">
        <div slot="header">
          <svg id="title-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
            <path d="M1.333 12L4 14.667c6.627-6.627 17.373-6.627 24 0L30.667 12c-8.1-8.1-21.234-8.1-29.334 0zM12 22.667l4 4 4-4c-2.207-2.207-5.793-2.207-8 0zm-5.333-5.334L9.333 20c3.68-3.68 9.654-3.68 13.334 0l2.666-2.667c-5.153-5.153-13.513-5.153-18.666 0z"></path>
          </svg>
          <div id="title">
            $i18n{lockScreenNetworkTitle}
          </div>
          <div id="subtitle">
            $i18n{lockScreenNetworkSubtitle}
          </div>
        </div>
        <div slot="body">
          <div id="select-div">
            <network-select
                on-network-item-selected="onNetworkItemSelected"
                on-custom-item-selected="onCustomItemSelected">
            </network-select>
          </div>
        </div>
        <div slot="button-container" class="flex layout horizontal">
          <cr-button id="cancelButton" class="cancel-button"
              on-click="onCloseClick">
            $i18n{lockScreenCancelButton}
          </cr-button>
        </div>
      </cr-dialog>
    </template>
  </dom-module>
</head>

<body>
  <lock-screen-network-ui id="network-ui"></lock-screen-network-ui>
</body>

</html>
chromium/chrome/browser/resources/chromeos/lock_screen_reauth/lock_screen_network.html
