Chromium Code Reviews Chromium Code Reviews
Issue 2898303004:
[MD Bookmarks] Add toasts. (Closed)
| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <link rel="import" href="chrome://resources/html/polymer.html"> | |
| 2 | |
| 3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-butt on.html"> | |
| 4 <link rel="import" href="chrome://bookmarks/shared_style.html"> | |
| 5 | |
| 6 <dom-module id="bookmarks-toast-manager"> | |
| 7 <template> | |
| 8 <style include="shared-style"> | |
| 9 #content { | |
| 10 flex: 1; | |
| 11 margin-right: 32px; | |
| 12 overflow: hidden; | |
| 13 text-overflow: ellipsis; | |
| 14 white-space: nowrap; | |
| 15 } | |
| 16 | |
| 17 paper-button { | |
| 18 color: var(--google-blue-300); | |
| 19 font-weight: 500; | |
| 20 height: 32px; | |
| 21 margin: 0; | |
| 22 min-width: 52px; | |
| 23 padding: 8px; | |
| 24 } | |
| 25 | |
| 26 #toast { | |
| 27 align-items: center; | |
| 28 background-color: #323232; | |
| 29 border-radius: 4px; | |
| 30 bottom: 0; | |
| 31 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.28); | |
| 32 box-sizing: border-box; | |
| 33 color: #fff; | |
| 34 display: flex; | |
| 35 margin: 24px; | |
| 36 max-width: 568px; | |
| 37 min-height: 52px; | |
| 38 min-width: 288px; | |
| 39 opacity: 0; | |
| 40 padding: 0 24px; | |
| 41 position: fixed; | |
| 42 transform: translateY(100px); | |
| 43 transition: transform 300ms, opacity 300ms; | |
| 44 white-space: nowrap; | |
| 45 } | |
| 46 | |
| 47 :host([open_]) #toast { | |
| 48 opacity: 1; | |
| 49 transform: translateY(0); | |
| 50 } | |
| 51 </style> | |
| 52 <div id="toast"> | |
|
tsergeant
2017/06/05 01:25:40
paper-toast integrates with iron-a11y-announcer to
calamity
2017/06/06 04:44:05
Done.
| |
| 53 <div id="content"></div> | |
| 54 <paper-button id="button" hidden$="[[!showUndo_]]" on-tap="onUndoTap_"> | |
| 55 $i18n{undo} | |
| 56 </paper-button> | |
| 57 </divn> | |
| 58 </template> | |
| 59 <script src="chrome://bookmarks/toast_manager.js"></script> | |
| 60 </dom-module> | |
| OLD | NEW |
