Commit 8749e547 authored by michaelpg's avatar michaelpg Committed by Commit bot

Show Pages in chrome://md-settings

Add cr-settings-a11y-page and cr-settings-downloads-page to
md-settings.

Follow-up to http://crrev.com/1007803003.

Screenshot: http://i.imgur.com/qT28Xqo.png (colors are a bit off due to chromoting, will upload another tomorrow)

BUG=464979
R=stevenjb@chromium.org,jhawkins@chromium.org

Review URL: https://codereview.chromium.org/1013833003

Cr-Commit-Position: refs/heads/master@{#321194}
parent 20f498cc
......@@ -2,19 +2,6 @@
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
.sub-label {
-webkit-margin-start: 10px;
color: rgba(0, 0, 0, .5);
}
core-label {
margin: 10px;
}
cr-checkbox {
-webkit-margin-end: 10px;
}
.autoclick-delay-label {
-webkit-margin-end: 0;
-webkit-margin-start: 40px;
......
......@@ -2,77 +2,83 @@
<link rel="import" href="chrome://resources/polymer/core-label/core-label.html">
<link rel="import" href="chrome://resources/polymer/core-menu/core-menu.html">
<link rel="import" href="chrome://resources/polymer/paper-item/paper-item.html">
<link rel="import" href="chrome://resources/polymer/paper-shadow/paper-shadow.html">
<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dropdown_menu/cr_dropdown_menu.html">
<link rel="import" href="chrome://md-settings/settings_page/settings_page_header.html">
<polymer-element name="cr-settings-a11y-page" layout vertical>
<polymer-element name="cr-settings-a11y-page">
<template>
<link rel="stylesheet" href="chrome://md-settings/settings_page/settings_page.css">
<link rel="stylesheet" href="a11y_page.css">
<core-label horizontal layout>
<cr-checkbox checked="{{prefs.settings.a11y.enableMenu}}" for>
</cr-checkbox>
<span>Show accessibility options in the system menu</span>
</core-label>
<core-label horizontal layout>
<cr-checkbox checked="{{prefs.settings.a11y.largeCursorEnabled}}" for>
</cr-checkbox>
<span>Show large mouse cursor</span>
</core-label>
<core-label horizontal layout>
<cr-checkbox checked="{{prefs.settings.a11y.highContrastEnabled}}" for>
</cr-checkbox>
<span>Use high contrast mode</span>
</core-label>
<core-label horizontal layout>
<cr-checkbox checked="{{prefs.settings.a11y.stickyKeysEnabled}}" for>
</cr-checkbox>
<span>Enable sticky keys</span>
<span class="sub-label">
(to perform keyboard shortcuts by typing them sequentially)
</span>
</core-label>
<core-label horizontal layout>
<cr-checkbox checked="{{prefs.settings.accessibility}}" for>
</cr-checkbox>
<span>Enable ChromeVox</span>
<span class="sub-label">
(spoken feedback)
</span>
</core-label>
<core-label horizontal layout>
<cr-checkbox checked="{{prefs.settings.a11y.screenMagnifier}}" for>
</cr-checkbox>
<span>Enable screen magnifier</span>
</core-label>
<core-label horizontal layout>
<cr-checkbox checked="{{prefs.settings.touchpad.enableTapDragging}}" for>
</cr-checkbox>
<span>Enable tap dragging</span>
</core-label>
<core-label horizontal layout>
<cr-checkbox checked="{{prefs.settings.a11y.autoclick}}" for>
</cr-checkbox>
<span>Automatically click when the mouse pointer stops</span>
</core-label>
<core-label horizontal layout center class="autoclick-delay-label"
hidden?="{{!prefs.settings.a11y.autoclick}}">
<span>Delay before click:</span>
<cr-dropdown-menu class="autoclick-dropdown">
<core-menu class="menu" valueAttr="value" selectedAttribute=""
selected="{{prefs.settings.a11y.autoclickDelayMs}}">
<paper-item value="200">extremely short</paper-item>
<paper-item value="400">very short</paper-item>
<paper-item value="600">short</paper-item>
<paper-item value="800">long</paper-item>
<paper-item value="1000">very long</paper-item>
</core-menu>
</cr-dropdown-menu>
</core-label>
<core-label horizontal layout>
<cr-checkbox checked="{{prefs.settings.a11y.virtualKeyboard}}" for>
</cr-checkbox>
<span>Enable on-screen keyboard</span>
</core-label>
<paper-shadow layout vertical cross-fade>
<cr-settings-page-header page="{{}}"></cr-settings-page-header>
<core-label horizontal layout>
<cr-checkbox checked="{{prefs.settings.a11y.enableMenu}}" for>
</cr-checkbox>
<span>Show accessibility options in the system menu</span>
</core-label>
<core-label horizontal layout>
<cr-checkbox checked="{{prefs.settings.a11y.largeCursorEnabled}}" for>
</cr-checkbox>
<span>Show large mouse cursor</span>
</core-label>
<core-label horizontal layout>
<cr-checkbox checked="{{prefs.settings.a11y.highContrastEnabled}}" for>
</cr-checkbox>
<span>Use high contrast mode</span>
</core-label>
<core-label horizontal layout>
<cr-checkbox checked="{{prefs.settings.a11y.stickyKeysEnabled}}" for>
</cr-checkbox>
<span>Enable sticky keys</span>
<span class="sub-label">
(to perform keyboard shortcuts by typing them sequentially)
</span>
</core-label>
<core-label horizontal layout>
<cr-checkbox checked="{{prefs.settings.accessibility}}" for>
</cr-checkbox>
<span>Enable ChromeVox</span>
<span class="sub-label">
(spoken feedback)
</span>
</core-label>
<core-label horizontal layout>
<cr-checkbox checked="{{prefs.settings.a11y.screenMagnifier}}" for>
</cr-checkbox>
<span>Enable screen magnifier</span>
</core-label>
<core-label horizontal layout>
<cr-checkbox checked="{{prefs.settings.touchpad.enableTapDragging}}" for>
</cr-checkbox>
<span>Enable tap dragging</span>
</core-label>
<core-label horizontal layout>
<cr-checkbox checked="{{prefs.settings.a11y.autoclick}}" for>
</cr-checkbox>
<span>Automatically click when the mouse pointer stops</span>
</core-label>
<core-label horizontal layout center class="autoclick-delay-label"
hidden?="{{!prefs.settings.a11y.autoclick}}">
<span>Delay before click:</span>
<cr-dropdown-menu class="autoclick-dropdown">
<core-menu class="menu" valueAttr="value" selectedAttribute=""
selected="{{prefs.settings.a11y.autoclickDelayMs}}">
<paper-item value="200">extremely short</paper-item>
<paper-item value="400">very short</paper-item>
<paper-item value="600">short</paper-item>
<paper-item value="800">long</paper-item>
<paper-item value="1000">very long</paper-item>
</core-menu>
</cr-dropdown-menu>
</core-label>
<core-label horizontal layout>
<cr-checkbox checked="{{prefs.settings.a11y.virtualKeyboard}}" for>
</cr-checkbox>
<span>Enable on-screen keyboard</span>
</core-label>
</paper-shadow>
</template>
<script src="a11y_page.js"></script>
</polymer-element>
......@@ -2,14 +2,6 @@
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
core-label {
margin: 10px;
}
cr-checkbox {
-webkit-margin-end: 10px;
}
cr-input {
width: 300px;
}
......
<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
<link rel="import" href="chrome://resources/polymer/core-label/core-label.html">
<link rel="import" href="chrome://resources/polymer/paper-input/paper-input.html">
<link rel="import" href="chrome://resources/polymer/paper-shadow/paper-shadow.html">
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.
html">
<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.
html">
<link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
<polymer-element name="cr-settings-downloads-page" layout vertical>
<polymer-element name="cr-settings-downloads-page">
<template>
<link rel="stylesheet" href="chrome://md-settings/settings_page/settings_page.css">
<link rel="stylesheet" href="downloads_page.css">
<div horizontal layout center>
<core-label horizontal layout center>
<span class="location-label">Download location:</span>
<cr-input id="downloadsPath" floatingLabel="false"
value="{{prefs.settings.download.defaultDirectory}}" readonly for>
</cr-input>
<paper-shadow layout vertical cross-fade>
<cr-settings-page-header page="{{}}"></cr-settings-page-header>
<div horizontal layout center>
<core-label horizontal layout center>
<span class="location-label">Download location:</span>
<cr-input id="downloadsPath" floatingLabel="false"
value="{{prefs.settings.download.defaultDirectory}}" readonly for>
</cr-input>
</core-label>
<cr-button id="changeDownloadsPath"
on-click="{{selectDownloadLocation}}">Change</cr-button>
</div>
<core-label horizontal layout>
<cr-checkbox checked="{{prefs.settings.download.promptForDownload}}" for>
</cr-checkbox>
<span>Ask where to save each file before downloading</span>
</core-label>
<cr-button id="changeDownloadsPath"
on-click="{{selectDownloadLocation}}">Change</cr-button>
</div>
<core-label horizontal layout>
<cr-checkbox checked="{{prefs.settings.download.promptForDownload}}" for>
</cr-checkbox>
<span>Ask where to save each file before downloading</span>
</core-label>
</paper-shadow>
</template>
<script src="downloads_page.js"></script>
</polymer-element>
......@@ -2,6 +2,7 @@
<link rel="import" href="chrome://resources/polymer/core-menu/core-menu.html">
<link rel="import" href="chrome://resources/polymer/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/paper-item/paper-item.html">
<link rel="import" href="chrome://resources/polymer/paper-shadow/paper-shadow.html">
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_collapse/cr_collapse.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dropdown_menu/cr_dropdown_menu.html">
......@@ -12,7 +13,7 @@
<polymer-element name="cr-settings-dummy-page">
<template>
<link rel="stylesheet" href="chrome://md-settings/settings_page/settings_page.css">
<section layout vertical cross-fade>
<paper-shadow layout vertical cross-fade>
<cr-settings-page-header page="{{}}"></cr-settings-page-header>
<div class="main">
<section>
......@@ -54,7 +55,7 @@
<cr-input label="Enter Something!"></cr-input>
</section>
</div>
</section>
</paper-shadow>
</template>
<script src="dummy_page.js"></script>
</polymer-element>
......@@ -12,12 +12,11 @@
box-sizing: border-box;
height: 100%;
overflow: auto;
padding-top: 5px;
}
paper-shadow {
background-color: white;
margin: 0 20px;
#pageContainer {
-webkit-margin-end: 20px;
-webkit-margin-start: 20px;
}
::content core-icon-button {
......
......@@ -2,19 +2,22 @@
<link rel="import" href="chrome://resources/polymer/core-animated-pages/core-animated-pages.html">
<link rel="import" href="chrome://resources/polymer/core-transition/core-transition.html">
<link rel="import" href="chrome://resources/polymer/paper-shadow/paper-shadow.html">
<link rel="import" href="chrome://md-settings/a11y_page/a11y_page.html">
<link rel="import" href="chrome://md-settings/downloads_page/downloads_page.html">
<link rel="import" href="chrome://md-settings/dummy_page/dummy_page.html">
<polymer-element name="cr-settings-main">
<template>
<link rel="stylesheet" href="settings_main.css">
<div id="outer">
<paper-shadow>
<content select="core-icon-button"></content>
<core-animated-pages id="pageContainer" selected="{{selectedPageId}}"
valueattr="PAGE_ID" transitions="cross-fade">
<cr-settings-dummy-page prefs="{{prefs}}"></cr-settings-dummy-page>
</core-animated-pages>
</paper-shadow>
<content select="core-icon-button"></content>
<core-animated-pages id="pageContainer" selected="{{selectedPageId}}"
valueattr="PAGE_ID" transitions="cross-fade">
<cr-settings-a11y-page prefs="{{prefs}}"></cr-settings-a11y-page>
<cr-settings-downloads-page prefs="{{prefs}}">
</cr-settings-downloads-page>
<cr-settings-dummy-page prefs="{{prefs}}"></cr-settings-dummy-page>
</core-animated-pages>
</div>
</template>
<script src="settings_main.js"></script>
......
......@@ -6,15 +6,30 @@
* @fileoverview
* Common styles for Settings pages.
*/
:host {
-webkit-margin-start: 40px;
-webkit-padding-end: 20px;
-webkit-padding-start: 40px;
:host > paper-shadow {
-webkit-padding-start: 80px;
background-color: white;
padding-bottom: 40px;
padding-top: 40px;
}
:host cr-settings-page-header {
cr-settings-page-header {
margin-bottom: 30px;
min-height: 24px;
}
core-label {
-webkit-margin-end: 10px;
-webkit-margin-start: 0;
margin-bottom: 10px;
margin-top: 10px;
}
.sub-label {
-webkit-margin-start: 10px;
color: rgba(0, 0, 0, .5);
}
cr-checkbox {
-webkit-margin-end: 10px;
}
......@@ -69,6 +69,15 @@
<structure name="IDR_SETTINGS_CR_SETTINGS_UI_JS"
file="settings_ui/settings_ui.js"
type="chrome_html" />
<structure name="IDR_SETTINGS_DOWNLOADS_PAGE_CSS"
file="downloads_page/downloads_page.css"
type="chrome_html" />
<structure name="IDR_SETTINGS_DOWNLOADS_PAGE_JS"
file="downloads_page/downloads_page.js"
type="chrome_html" />
<structure name="IDR_SETTINGS_DOWNLOADS_PAGE_HTML"
file="downloads_page/downloads_page.html"
type="chrome_html" />
<structure name="IDR_SETTINGS_DUMMY_PAGE_HTML"
file="dummy_page/dummy_page.html"
type="chrome_html" />
......
......@@ -9,3 +9,7 @@
font-family: Roboto;
height: 100%;
}
cr-settings-main core-icon-button {
z-index: 10;
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment