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 |