Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(675)

Unified Diff: third_party/polymer/components/paper-dropdown-menu/paper-dropdown-menu.html

Issue 864173009: Add paper-dropdown and paper-dropdown-menu and run reproduce.sh (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Rebase Created 5 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: third_party/polymer/components/paper-dropdown-menu/paper-dropdown-menu.html
diff --git a/third_party/polymer/components/core-dropdown-menu/core-dropdown-menu.html b/third_party/polymer/components/paper-dropdown-menu/paper-dropdown-menu.html
similarity index 60%
copy from third_party/polymer/components/core-dropdown-menu/core-dropdown-menu.html
copy to third_party/polymer/components/paper-dropdown-menu/paper-dropdown-menu.html
index c06f4c0fcbd953fd816fd33d3c2f839ade4b7f7b..adcca1b53bc02eb19529f52a4510a89b7c4cf135 100644
--- a/third_party/polymer/components/core-dropdown-menu/core-dropdown-menu.html
+++ b/third_party/polymer/components/paper-dropdown-menu/paper-dropdown-menu.html
@@ -9,52 +9,92 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<!--
-`core-dropdown-menu` works together with `core-dropdown` and `core-selector` to
+`paper-dropdown-menu` works together with `paper-dropdown` and `core-menu` to
implement a drop-down menu. The currently selected item is displayed in the
control. If no item is selected, the `label` is displayed instead.
The child element with the class `dropdown` will be used as the drop-down
-menu. It should be a `core-dropdown` or other overlay element. You should
+menu. It should be a `paper-dropdown` or other overlay element. You should
also provide a `core-selector` or other selector element, such as `core-menu`,
-in the drop-down.
+in the drop-down. You should apply the class `menu` to the selector element.
Example:
- <core-dropdown-menu label="Choose a pastry">
- <core-dropdown class="dropdown">
- <core-selector>
- <core-item label="Croissant"></core-item>
- <core-item label="Donut"></core-item>
- <core-item label="Financier"></core-item>
- <core-item label="Madeleine"></core-item>
- </core-selector>
- </core-dropdown>
- </core-dropdown-menu>
-
-@group Polymer Core Elements
-@element core-dropdown-menu
+ <paper-dropdown-menu label="Your favorite pastry">
+ <paper-dropdown class="dropdown">
+ <core-menu class="menu">
+ <paper-item>Croissant</paper-item>
+ <paper-item>Donut</paper-item>
+ <paper-item>Financier</paper-item>
+ <paper-item>Madeleine</paper-item>
+ </core-menu>
+ </paper-dropdown>
+ </paper-dropdown-menu>
+
+This example renders a drop-down menu with 4 options.
+
+@group Paper Elements
+@element paper-dropdown-menu
@extends core-dropdown-base
@status unstable
@homepage github.io
-->
+<!--
+Fired when an item's selection state is changed. This event is fired both
+when an item is selected or deselected. The `isSelected` detail property
+contains the selection state.
+
+@event core-select
+@param {Object} detail
+ @param {boolean} detail.isSelected true for selection and false for deselection
+ @param {Object} detail.item the item element
+-->
<link href="../polymer/polymer.html" rel="import">
+
<link href="../core-a11y-keys/core-a11y-keys.html" rel="import">
<link href="../core-dropdown/core-dropdown-base.html" rel="import">
<link href="../core-focusable/core-focusable.html" rel="import">
<link href="../core-icon/core-icon.html" rel="import">
<link href="../core-icons/core-icons.html" rel="import">
-
-<polymer-element name="core-dropdown-menu" extends="core-dropdown-base" relative layout inline horizontal center tabindex="0">
+<link href="../paper-shadow/paper-shadow.html" rel="import">
+
+<style shim-shadowdom>
+ html /deep/ #paper-dropdown-menu-dropdown {
+ margin: 12px;
+ overflow: visible;
+ }
+
+ html /deep/ #paper-dropdown-menu-dropdown #menu {
+ padding: 8px 0;
+ margin: 0;
+ }
+
+ html /deep/ #paper-dropdown-menu-dropdown .menu-container {
+ overflow: auto;
+ max-height: 100%;
+ max-width: 100%;
+ }
+</style>
+
+<polymer-element name="paper-dropdown-menu" extends="core-dropdown-base" relative layout inline horizontal center tabindex="0">
<template>
<style>
:host {
- background-color: #fff;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -webkit-user-select: none;
+ user-select: none;
+ cursor: pointer;
+ padding: 0.5em 0 0.25em;
+ margin: 0.75em 0;
+ border-bottom: 1px solid #757575;
+ outline: none;
}
- :host([disabled]) {
- color: #a8a8a8;
+ #label, #arrow {
+ color: #757575;
}
#label {

Powered by Google App Engine
This is Rietveld 408576698