Index: ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.html |
diff --git a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.html b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..1ea425b74f39bed3e14adc1039bb06eaeb982553 |
--- /dev/null |
+++ b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.html |
@@ -0,0 +1,60 @@ |
+<link rel="import" href="chrome://resources/html/polymer.html"> |
+<link rel="import" href="chrome://resources/cr_elements/icons.html"> |
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html"> |
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html"> |
+ |
+<dom-module id="cr-toolbar-selection-overlay"> |
+ <template> |
+ <style> |
+ :host { |
+ -webkit-padding-start: var(--cr-toolbar-field-margin, 0); |
+ height: 56px; |
+ display: flex; |
+ } |
+ |
+ #overlay-content { |
+ align-items: center; |
+ display: flex; |
+ flex: 1; |
+ margin: 0 auto; |
+ max-width: var(--selection-overlay-max-width, initial); |
+ padding: 0 var(--selection-overlay-padding, 24px); |
+ } |
+ |
+ paper-button { |
+ font-weight: 500; |
+ } |
+ |
+ #number-selected { |
+ flex: 1; |
+ } |
+ |
+ button { |
+ -webkit-margin-end: 24px; |
+ -webkit-margin-start: 2px; |
+ height: 36px; |
+ width: 36px; |
+ } |
+ |
+ button iron-icon { |
+ height: 20px; |
+ width: 20px; |
+ } |
+ </style> |
+ <div id="overlay-content"> |
+ <button is="paper-icon-button-light" |
+ on-tap="onClearSelectionTap_" |
+ title="[[cancelLabel]]"> |
+ <iron-icon icon="cr:clear"></iron-icon> |
+ </button> |
+ <div id="number-selected">[[selectionLabel]]</div> |
+ <paper-button on-tap="onClearSelectionTap_"> |
+ [[cancelLabel]] |
+ </paper-button> |
+ <paper-button on-tap="onDeleteTap_"> |
+ [[deleteLabel]] |
+ </paper-button> |
+ </div> |
+ </template> |
+ <script src="cr_toolbar_selection_overlay.js"></script> |
+</dom-module> |