| OLD | NEW |
|---|
| (Empty) |
| 1 <!-- | |
| 2 // Copyright 2015 The Chromium Authors. All rights reserved. | |
| 3 // Use of this source code is governed by a BSD-style license that can be | |
| 4 // found in the LICENSE file. | |
| 5 --> | |
| 6 <import src="sky-element.sky" /> | |
| 7 <import src="material-element.sky" /> | |
| 8 <import src="sky-icon.sky" /> | |
| 9 | |
| 10 <sky-element attributes="icon:string"> | |
| 11 <template> | |
| 12 <style> | |
| 13 :host { | |
| 14 display: flex; | |
| 15 flex-direction: row; | |
| 16 align-items: center; | |
| 17 height: 48px; | |
| 18 -webkit-user-select: none; | |
| 19 } | |
| 20 #background { | |
| 21 display: flex; | |
| 22 flex-direction: row; | |
| 23 align-items: center; | |
| 24 height: 100%; | |
| 25 flex: 1; | |
| 26 } | |
| 27 #background[highlight] { | |
| 28 background: rgba(153, 153, 153, 0.4); | |
| 29 } | |
| 30 sky-icon { | |
| 31 padding: 0px 16px; | |
| 32 } | |
| 33 #label { | |
| 34 font-family: 'Roboto Medium', 'Helvetica'; | |
| 35 color: #212121; | |
| 36 padding: 0px 16px; | |
| 37 flex: 1; | |
| 38 } | |
| 39 </style> | |
| 40 <div id="background"> | |
| 41 <sky-icon size="24" /> | |
| 42 <div id="label"> | |
| 43 <content /> | |
| 44 </div> | |
| 45 </div> | |
| 46 </template> | |
| 47 <script> | |
| 48 import "dart:sky"; | |
| 49 | |
| 50 @Tagname('sky-menu-item') | |
| 51 class SkyMenuItem extends MaterialElement { | |
| 52 SkyIcon _icon; | |
| 53 Element _label; | |
| 54 | |
| 55 SkyMenuItem() { | |
| 56 addEventListener('pointerdown', _handlePointerDown); | |
| 57 addEventListener('pointerup', _handlePointerUp); | |
| 58 addEventListener('pointercancel', _handlePointerUp); | |
| 59 } | |
| 60 | |
| 61 void shadowRootReady() { | |
| 62 _icon = shadowRoot.querySelector('sky-icon'); | |
| 63 _icon.type = "${icon}_grey600"; | |
| 64 } | |
| 65 | |
| 66 void iconChanged(String oldValue, String newValue) { | |
| 67 if (_icon != null) | |
| 68 _icon.type = "${newValue}_grey600"; | |
| 69 } | |
| 70 | |
| 71 void _handlePointerDown(Event event) { | |
| 72 shadowRoot.getElementById('background').setAttribute('highlight', ''); | |
| 73 } | |
| 74 | |
| 75 void _handlePointerUp(Event event) { | |
| 76 shadowRoot.getElementById('background').removeAttribute('highlight'); | |
| 77 } | |
| 78 } | |
| 79 | |
| 80 _init(script) => register(script, SkyMenuItem); | |
| 81 </script> | |
| 82 </sky-element> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1132063007:
Rationalize Dart mojo and sky package structure (Closed)
Base URL: https://github.com/domokit/mojo.git@master