chrome/browser/resources/settings/chromeos/os_toolbar/os_toolbar.html

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

<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html">
<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/load_time_data.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-media-query.html">
<link rel="import" href="../os_settings_search_box/os_settings_search_box.html">

<dom-module id="os-toolbar">
  <template>
    <style include="cr-icons cr-hidden-style">
      :host {
        --cr-toolbar-search-field-background:
            var(--cros-toolbar-search-bg-color);
        --cr-toolbar-search-field-border-radius: 4px;
        --cr-toolbar-search-field-input-text-color:
            var(--cros-text-color-secondary);
        --cr-toolbar-search-field-input-icon-color: var(--google-grey-600);
        --cr-toolbar-search-field-input-bg-color:
            var(--cros-toolbar-bg-color);
         --cr-toolbar-search-field-prompt-color: var(--google-grey-600);
        align-items: center;
        background-color: var(--cros-toolbar-bg-color);
        color: var(--cros-text-color-secondary);
        display: flex;
        height: var(--cr-toolbar-height);
        padding-top: 8px;
      }

      :host(:not([narrow])) {
        --cr-toolbar-search-field-border-radius: 4px;
      }

      h1 {
        flex: 1;
        font-size: 123%;
        font-weight: 500;
        letter-spacing: .25px;
        line-height: normal;
        margin-inline-start: 8px;
        padding-inline-end: 12px;
      }

      #leftContent {
        position: relative;
        transition: opacity 100ms;
      }

      #leftSpacer {
        align-items: center;
        box-sizing: border-box;
        display: flex;
        /* 8px to match #rightSpacer + 6px to align with icons in menus. */
        padding-inline-start: 14px;
        width: var(--settings-menu-width);
      }

      :host([narrow]) #leftSpacer {
        width: 20px;
      }

      cr-icon-button {
        --cr-icon-button-fill-color: currentColor;
        --cr-icon-button-size: 32px;
        min-width: 32px;
      }

      #centeredContent {
        display: flex;
        flex: 1 1 0;
        justify-content: center;
      }

      #rightSpacer {
        padding-inline-end: 8px;
      }

      :host([narrow]) #centeredContent {
        position: absolute;
        width: 100%;
        /* #centeredContent should always be below #leftContent */
        z-index: -1;
      }

      :host([narrow]:not([showing-search_])) #centeredContent {
        justify-content: flex-end;
      }

      :host([has-overlay]) {
        transition: visibility var(--cr-toolbar-overlay-animation-duration);
        visibility: hidden;
      }

      :host([narrow][showing-search_]) #settingsTitle {
        display: none;
      }

      :host([showing-search_][is-search-box-cutoff_]) os-settings-search-box {
        --cr-toolbar-field-width: 80vw; /* Ensures the input is not cutoff. */
        margin-inline-start: 48px; /* No overlap with #leftContent. */
      }

      :host([showing-search_][narrow]:not([is-search-box-cutoff_]))
          os-settings-search-box {
        --cr-toolbar-field-width: 680px;
      }

      :host(:not([narrow]):not([is-search-box-cutoff_]))
          os-settings-search-box {
        --cr-toolbar-field-width: 480px;
      }

      :host(:not([narrow])) #leftContent {
        flex: 1 1 0;
      }

      :host(:not([narrow])) #centeredContent {
        flex-basis: var(--settings-main-basis);
      }

      :host([narrow][showing-search_]) #rightContent {
        display: none;
      }

      :host(:not([narrow])) #rightContent {
        flex: 1 1 0;
        text-align: end;
      }
    </style>
    <iron-media-query query="(max-width: 780px)"
        query-matches="{{isSearchBoxCutoff_}}">
    </iron-media-query>
    <div id="leftContent">
      <div id="leftSpacer">
        <template is="dom-if" if="[[showMenu]]">
          <cr-icon-button id="menuButton" class="no-overlap"
              iron-icon="cr20:menu" on-click="onMenuTap_"
              aria-label="$i18n{menuButtonLabel}"
              title="$i18n{menuButtonLabel}">
          </cr-icon-button>
        </template>
        <h1 id="settingsTitle">$i18n{settings}</h1>
      </div>
    </div>

    <div id="centeredContent" hidden$="[[!showSearch]]">
      <template is="dom-if" if="[[!newOsSettingsSearch_]]">
        <cr-toolbar-search-field id="search" narrow="[[narrow]]"
            label="$i18n{searchPrompt}" clear-label="$i18n{clearSearch}"
            spinner-active="[[spinnerActive]]"
            showing-search="{{showingSearch_}}">
        </cr-toolbar-search-field>
      </template>
      <template is="dom-if" if="[[newOsSettingsSearch_]]">
        <os-settings-search-box id="searchBox" narrow="[[narrow]]"
            showing-search="{{showingSearch_}}">
        </os-settings-search-box>
      </template>
    </div>

    <div id="rightContent">
      <div id="rightSpacer">
        <slot></slot>
      </div>
    </div>
  </template>
  <script src="os_toolbar.js"></script>
</dom-module>