| OLD | NEW |
| (Empty) |
| 1 // Copyright (c) 2016, the Dart project authors. Please see the AUTHORS file | |
| 2 // for details. All rights reserved. Use of this source code is governed by a | |
| 3 // BSD-style license that can be found in the LICENSE file. | |
| 4 | |
| 5 import 'dart:html'; | |
| 6 | |
| 7 import 'package:observatory/app.dart'; | |
| 8 import 'package:observatory/repositories.dart'; | |
| 9 import 'package:observatory/src/elements/helpers/tag.dart'; | |
| 10 import 'package:observatory/src/elements/shims/binding.dart'; | |
| 11 import 'package:observatory/src/elements/nav/notify.dart'; | |
| 12 | |
| 13 @bindable | |
| 14 class NavNotifyElementWrapper extends HtmlElement { | |
| 15 static const binder = const Binder<NavNotifyElementWrapper>(const { | |
| 16 'notifications': #notifications, 'notifyOnPause': #notifyOnPause | |
| 17 }); | |
| 18 | |
| 19 static const tag = const Tag<NavNotifyElementWrapper>('nav-notify'); | |
| 20 | |
| 21 NotificationRepository _notifications; | |
| 22 bool _notifyOnPause = true; | |
| 23 | |
| 24 NotificationRepository get notifications => _notifications; | |
| 25 bool get notifyOnPause => _notifyOnPause; | |
| 26 | |
| 27 set notifications(NotificationRepository value) { | |
| 28 _notifications = value; | |
| 29 render(); | |
| 30 } | |
| 31 set notifyOnPause(bool value) { | |
| 32 _notifyOnPause = value; | |
| 33 render(); | |
| 34 } | |
| 35 | |
| 36 NavNotifyElementWrapper.created() : super.created() { | |
| 37 binder.registerCallback(this); | |
| 38 createShadowRoot(); | |
| 39 render(); | |
| 40 } | |
| 41 | |
| 42 @override | |
| 43 void attached() { | |
| 44 super.attached(); | |
| 45 render(); | |
| 46 } | |
| 47 | |
| 48 void render() { | |
| 49 shadowRoot.children = []; | |
| 50 if (_notifications == null) { | |
| 51 return; | |
| 52 } | |
| 53 | |
| 54 shadowRoot.children = [ | |
| 55 new StyleElement() | |
| 56 ..text = '''nav-notify-wrapped > div { | |
| 57 float: right; | |
| 58 } | |
| 59 nav-notify-wrapped > div > div { | |
| 60 display: block; | |
| 61 position: absolute; | |
| 62 top: 98%; | |
| 63 right: 0; | |
| 64 margin: 0; | |
| 65 padding: 0; | |
| 66 width: auto; | |
| 67 z-index: 1000; | |
| 68 background: none; | |
| 69 } | |
| 70 | |
| 71 /* nav-exception & nav-event */ | |
| 72 | |
| 73 nav-exception > div, nav-event > div { | |
| 74 position: relative; | |
| 75 padding: 16px; | |
| 76 margin-top: 10px; | |
| 77 margin-right: 10px; | |
| 78 padding-right: 25px; | |
| 79 width: 500px; | |
| 80 color: #ddd; | |
| 81 background: rgba(0,0,0,.6); | |
| 82 border: solid 2px white; | |
| 83 box-shadow: 0 0 5px black; | |
| 84 border-radius: 5px; | |
| 85 animation: fadein 1s; | |
| 86 } | |
| 87 | |
| 88 nav-exception *, nav-event * { | |
| 89 color: #ddd; | |
| 90 font-size: 12px; | |
| 91 } | |
| 92 | |
| 93 nav-exception > div > a, nav-event > div > a { | |
| 94 color: white; | |
| 95 text-decoration: none; | |
| 96 } | |
| 97 | |
| 98 nav-exception > div > a:hover, nav-event > div > a:hover { | |
| 99 text-decoration: underline; | |
| 100 } | |
| 101 | |
| 102 nav-exception > div > div { | |
| 103 margin-left:20px; | |
| 104 white-space: pre | |
| 105 } | |
| 106 | |
| 107 nav-exception > div > button, nav-event > div > button { | |
| 108 background: transparent; | |
| 109 border: none; | |
| 110 position: absolute; | |
| 111 display: block; | |
| 112 top: 4px; | |
| 113 right: 4px; | |
| 114 height: 18px; | |
| 115 width: 18px; | |
| 116 line-height: 16px; | |
| 117 border-radius: 9px; | |
| 118 color: white; | |
| 119 font-size: 18px; | |
| 120 cursor: pointer; | |
| 121 text-align: center; | |
| 122 } | |
| 123 | |
| 124 nav-exception > div > button:hover, nav-event > div > button:hover { | |
| 125 background: rgba(255,255,255,0.5); | |
| 126 }''', | |
| 127 new NavNotifyElement(_notifications, notifyOnPause: notifyOnPause, | |
| 128 queue: ObservatoryApplication.app.queue) | |
| 129 ]; | |
| 130 } | |
| 131 } | |
| OLD | NEW |