Skip to content

GitLab

T
tangled
Commit 3e322e05 authored by jlklein's avatar jlklein Committed by Commit bot
Browse files
Options

Add a cr-button element, a thin wrapper around paper-button. 

R=dbeam@chromium.org
BUG=

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

Cr-Commit-Position: refs/heads/master@{#318641}
parent 0120eb26
Hide whitespace changes
Inline Side-by-side
Showing with 138 additions and 18 deletions
chrome/browser/browser_resources.grd
View file @ 3e322e05
......@@ -439,6 +439,7 @@
</if>
<include name="IDR_WHISPERNET_PROXY_MANIFEST" file="resources\whispernet_proxy\manifest.json" type="BINDATA" />
<include name="IDR_MD_SETTINGS_UI_HTML" file="resources\md_settings\md_settings.html" type="BINDATA" />
<include name="IDR_MD_SETTINGS_UI_CSS" file="resources\md_settings\md_settings.css" type="BINDATA" />
</includes>
</release>
</grit>
chrome/browser/resources/md_settings/md_settings.css 0 → 100644
View file @ 3e322e05
/* Copyright 2015 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto Regular'), local('Roboto-Regular'), url(chrome://resources/roboto/roboto.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
body {
font-family: Roboto;
}
section {
margin-top: 50px;
}
cr-dropdown-menu {
width: 200px;
}
chrome/browser/resources/md_settings/md_settings.html
View file @ 3e322e05
......@@ -6,25 +6,31 @@
<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/core-menu/core-menu.html">
<link rel="import"
href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
<link rel="import"
href="chrome://resources/cr_elements/cr_collapse/cr_collapse.html">
<link rel="import"
href="chrome://resources/cr_elements/cr_toggle_button/cr_toggle_button.html">
<link rel="import"
href="chrome://resources/cr_elements/cr_dropdown_menu/cr_dropdown_menu.html">
<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
<link rel="import" href="chrome://resources/cr_elements/cr_collapse/cr_collapse.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toggle_button/cr_toggle_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dropdown_menu/cr_dropdown_menu.html">
<link rel="stylesheet" href="md_settings.css">
</head>
<body>
<header>
<h1>Settings</h1>
</header>
<div class="main">
<cr-toggle-button checked></cr-toggle-button>
<cr-checkbox checked></cr-checkbox>
<section>
<h2>cr-dropdown-menu</h2>
<cr-dropdown-menu style="width: 200px">
<h3>cr-toggle-button</h3>
<cr-toggle-button></cr-toggle-button>
<cr-toggle-button checked></cr-toggle-button>
</section>
<section>
<h3>cr-checkbox</h3>
<cr-checkbox></cr-checkbox>
<cr-checkbox checked></cr-checkbox>
</section>
<section>
<h3>cr-dropdown-menu</h3>
<cr-dropdown-menu>
<core-menu class="menu">
<paper-item>Chrome</paper-item>
<paper-item>IE</paper-item>
......@@ -41,6 +47,11 @@
<div>collapsed content</div>
</cr-collapse>
</section>
<section>
<h3>cr-button</h3>
<cr-button>Flat button</cr-button>
<cr-button raised>Raised Button</cr-button>
</section>
</div>
<script>
var collapse = document.getElementById('collapse');
......
chrome/browser/ui/webui/md_settings_ui.cc
View file @ 3e322e05
......@@ -19,6 +19,7 @@ MdSettingsUI::MdSettingsUI(content::WebUI* web_ui)
content::WebUIDataSource* html_source =
content::WebUIDataSource::Create(chrome::kChromeUIMdSettingsHost);
html_source->AddResourcePath("md_settings.css", IDR_MD_SETTINGS_UI_CSS);
html_source->SetDefaultResource(IDR_MD_SETTINGS_UI_HTML);
content::WebUIDataSource::Add(web_ui->GetWebContents()->GetBrowserContext(),
......
ui/webui/resources/cr_elements/cr_button/cr_button.css 0 → 100644
View file @ 3e322e05
/* Copyright 2015 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
:host {
display: inline-block;
vertical-align: middle;
}
ui/webui/resources/cr_elements/cr_button/cr_button.html 0 → 100644
View file @ 3e322e05
<link rel="import" href="chrome://resources/polymer/polymer/polymer.html">
<link rel="import" href="chrome://resources/polymer/paper-button/paper-button.html">
<polymer-element name="cr-button">
<template>
<link rel="stylesheet" href="cr_button.css">
<paper-button disabled="{{disabled}}" raised="{{raised}}">
<content></content>
</paper-button>
</template>
<script src="cr_button.js"></script>
</polymer-element>
ui/webui/resources/cr_elements/cr_button/cr_button.js 0 → 100644
View file @ 3e322e05
/* Copyright 2015 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
/**
* @fileoverview
* 'cr-button' is a chrome-specific wrapper around paper-button.
*
* Example:
*
* <cr-button>Press Here</cr-button>
* <cr-button raised>Raised Button</cr-button>
* <cr-button>
* <core-icon icon="favorite"></core-icon> Custom button
* </cr-button>
*
* @group Chrome Elements
* @element cr-button
*/
Polymer('cr-button', {
publish: {
/**
* If true, the button will be styled with a shadow.
*
* @attribute raised
* @type boolean
* @default false
*/
raised: {value: false, reflect: true},
/**
* If true, the button will be disabled and greyed out.
*
* @attribute disabled
* @type boolean
* @default false
*/
disabled: {value: false, reflect: true},
},
});
ui/webui/resources/cr_elements/cr_button/demo.html 0 → 100644
View file @ 3e322e05
<!doctype html>
<html>
<head>
<link href="cr_button.html" rel="import">
<link href="chrome://resources/polymer/core-icon/core-icon.html" rel="import">
<link href="chrome://resources/polymer/core-icons/core-icons.html" rel="import">
</head>
<body unresolved>
<cr-button>Flat button</cr-button>
<cr-button raised>Raised Button</cr-button>
<cr-button disabled>Disabled Button</cr-button>
<cr-button><core-icon icon="mail"></core-icon>&nbsp;Custom button</cr-button>
</body>
</html>
ui/webui/resources/cr_elements_resources.grdp
View file @ 3e322e05
<?xml version="1.0" encoding="utf-8"?>
<grit-part>
<structure name="IDR_CR_ELEMENTS_CR_BUTTON_CSS"
file="../../webui/resources/cr_elements/cr_button/cr_button.css"
type="chrome_html" />
<structure name="IDR_CR_ELEMENTS_CR_BUTTON_HTML"
file="../../webui/resources/cr_elements/cr_button/cr_button.html"
type="chrome_html" />
<structure name="IDR_CR_ELEMENTS_CR_BUTTON_JS"
file="../../webui/resources/cr_elements/cr_button/cr_button.js"
type="chrome_html" />
<structure name="IDR_CR_ELEMENTS_CR_CHECKBOX_CSS"
file="../../webui/resources/cr_elements/cr_checkbox/cr_checkbox.css"
type="chrome_html" />
......@@ -45,6 +54,12 @@
<structure name="IDR_CR_ELEMENTS_CR_ONC_DATA_JS"
file="../../webui/resources/cr_elements/cr_onc/cr_onc_data.js"
type="chrome_html" />
<structure name="IDR_CR_ELEMENTS_CR_EVENTS_HTML"
file="../../webui/resources/cr_elements/cr_events/cr_events.html"
type="chrome_html" />
<structure name="IDR_CR_ELEMENTS_CR_EVENTS_JS"
file="../../webui/resources/cr_elements/cr_events/cr_events.js"
type="chrome_html" />
<structure name="IDR_CR_ELEMENTS_CR_TOGGLE_BUTTON_CSS"
file="../../webui/resources/cr_elements/cr_toggle_button/cr_toggle_button.css"
type="chrome_html" />
......@@ -54,10 +69,4 @@
<structure name="IDR_CR_ELEMENTS_CR_TOGGLE_BUTTON_JS"
file="../../webui/resources/cr_elements/cr_toggle_button/cr_toggle_button.js"
type="chrome_html" />
<structure name="IDR_CR_ELEMENTS_CR_EVENTS_HTML"
file="../../webui/resources/cr_elements/cr_events/cr_events.html"
type="chrome_html" />
<structure name="IDR_CR_ELEMENTS_CR_EVENTS_JS"
file="../../webui/resources/cr_elements/cr_events/cr_events.js"
type="chrome_html" />
</grit-part>
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