| <link rel="import" href="chrome://resources/html/polymer.html"> |
| |
| <link rel="import" href="chrome://resources/cr_elements/chromeos/network/cr_onc_types.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_container_shadow_behavior.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_drawer/cr_drawer.html"> |
| <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.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/find_shortcut_behavior.html"> |
| <link rel="import" href="chrome://resources/html/util.html"> |
| <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html"> |
| <link rel="import" href="../os_settings_menu/os_settings_menu.html"> |
| <link rel="import" href="../os_settings_main/os_settings_main.html"> |
| <link rel="import" href="../../global_scroll_target_behavior.html"> |
| <link rel="import" href="../../i18n_setup.html"> |
| <link rel="import" href="../../icons.html"> |
| <link rel="import" href="../../settings_shared_css.html"> |
| <link rel="import" href="../../page_visibility.html"> |
| <link rel="import" href="../../prefs/prefs.html"> |
| <link rel="import" href="../../route.html"> |
| <link rel="import" href="../../settings_vars_css.html"> |
| |
| <dom-module id="os-settings-ui"> |
| <template> |
| <style include="settings-shared"> |
| :host { |
| @apply --cr-page-host; |
| @apply --layout-fit; |
| display: flex; |
| flex-direction: column; |
| --settings-menu-width: 250px; |
| /* Centered cards has a max-width of var(--cr-centered-card-max-width) |
| * and a width of a certain percentage. Therefore, to make room for the |
| * cards to be at their max width, the flex-basis of #main needs to be |
| * whatever value the percentage of would equal to the max width. */ |
| --settings-main-basis: calc(var(--cr-centered-card-max-width) / |
| var(--cr-centered-card-width-percentage)); |
| } |
| |
| cr-toolbar { |
| @apply --layout-center; |
| /* TODO(hsuregan): update for dark mode when needed. */ |
| background-color: white; |
| color: var(--cr-secondary-text-color); |
| min-height: 56px; |
| z-index: 2; |
| --cr-toolbar-left-spacer-width: var(--settings-menu-width); |
| --cr-toolbar-center-basis: var(--settings-main-basis); |
| } |
| |
| #cr-container-shadow-top { |
| /* Needs to be higher than #container's z-index to appear above |
| * scrollbars. */ |
| z-index: 2; |
| } |
| |
| #container { |
| align-items: flex-start; |
| display: flex; |
| flex: 1; |
| overflow: overlay; |
| position: relative; |
| } |
| |
| #left, |
| #main, |
| #right { |
| flex: 1 1 0; |
| } |
| |
| #left { |
| height: 100%; |
| position: sticky; |
| top: 0; |
| } |
| |
| #left os-settings-menu { |
| max-height: 100%; |
| overflow: auto; |
| overscroll-behavior: contain; |
| width: var(--settings-menu-width); |
| } |
| |
| #main { |
| flex-basis: var(--settings-main-basis); |
| height: 100%; |
| min-height: fit-content; |
| } |
| |
| /* The breakpoint of 980px was decided on by the rounded sum of |
| * var(--settings-main-basis), var(--settings-menu-width), and |
| * var(--cr-section-padding). */ |
| @media (max-width: 980px) { |
| #left, |
| #right { |
| display: none; |
| } |
| |
| #main { |
| min-width: auto; |
| /* Add some padding to make room for borders and to prevent focus |
| * indicators from being cropped. */ |
| padding: 0 3px; |
| } |
| } |
| </style> |
| <settings-prefs id="prefs" prefs="{{prefs}}"></settings-prefs> |
| <cr-toolbar page-name="$i18n{settings}" |
| clear-label="$i18n{clearSearch}" |
| search-prompt="$i18n{searchPrompt}" |
| on-cr-toolbar-menu-tap="onMenuButtonTap_" |
| spinner-active="[[toolbarSpinnerActive_]]" |
| menu-label="$i18n{menuButtonLabel}" |
| on-search-changed="onSearchChanged_" |
| role="banner" |
| narrow="{{isNarrow}}" |
| narrow-threshold="980" |
| show-menu="[[isNarrow]]"> |
| </cr-toolbar> |
| <cr-drawer id="drawer" on-close="onMenuClose_" heading="$i18n{settings}" |
| align="$i18n{textdirection}"> |
| <div class="drawer-content"> |
| <template is="dom-if" id="drawerTemplate"> |
| <os-settings-menu page-visibility="[[pageVisibility_]]" |
| show-apps="[[showApps_]]" |
| show-android-apps="[[showAndroidApps_]]" |
| show-crostini="[[showCrostini_]]" |
| show-plugin-vm="[[showPluginVm_]]" |
| show-multidevice="[[showMultidevice_]]" |
| have-play-store-app="[[havePlayStoreApp_]]" |
| on-iron-activate="onIronActivate_" |
| advanced-opened="{{advancedOpened_}}"> |
| </os-settings-menu> |
| </template> |
| </div> |
| </cr-drawer> |
| <div id="container" class="no-outline"> |
| <div id="left"> |
| <os-settings-menu page-visibility="[[pageVisibility_]]" |
| show-apps="[[showApps_]]" |
| show-android-apps="[[showAndroidApps_]]" |
| show-crostini="[[showCrostini_]]" |
| show-plugin-vm="[[showPluginVm_]]" |
| show-multidevice="[[showMultidevice_]]" |
| have-play-store-app="[[havePlayStoreApp_]]" |
| on-iron-activate="onIronActivate_" |
| advanced-opened="{{advancedOpened_}}"> |
| </os-settings-menu> |
| </div> |
| <os-settings-main id="main" prefs="{{prefs}}" |
| toolbar-spinner-active="{{toolbarSpinnerActive_}}" |
| page-visibility="[[pageVisibility_]]" |
| show-apps="[[showApps_]]" |
| show-android-apps="[[showAndroidApps_]]" |
| show-kiosk-next-shell="[[showKioskNextShell_]]" |
| show-crostini="[[showCrostini_]]" |
| show-plugin-vm="[[showPluginVm_]]" |
| show-multidevice="[[showMultidevice_]]" |
| have-play-store-app="[[havePlayStoreApp_]]" |
| advanced-toggle-expanded="{{advancedOpened_}}"> |
| </os-settings-main> |
| <!-- An additional child of the flex #container to take up space, |
| aligned with the right-hand child of the flex toolbar. --> |
| <div id="right"></div> |
| </div> |
| </template> |
| <script src="os_settings_ui.js"></script> |
| </dom-module> |