A music player that connects to your cloud/distributed storage.
Remove `Html.Styled` from notifications
+51
-56
+20
-56
src/Applications/UI/Notifications.elm
+20
-56
src/Applications/UI/Notifications.elm
···
1
1
module UI.Notifications exposing (Model, dismiss, show, showWithModel, view)
2
2
3
-
import Chunky.Styled exposing (..)
3
+
import Chunky exposing (..)
4
4
import Conditional exposing (ifThenElse)
5
5
import Css
6
6
import Css.Classes as C
7
7
import Css.Global
8
-
import Html exposing (Html)
8
+
import Html exposing (Html, text)
9
+
import Html.Attributes exposing (class, rel)
9
10
import Html.Ext exposing (onDoubleTap, onTap)
10
-
import Html.Styled exposing (text)
11
-
import Html.Styled.Attributes exposing (css, fromUnstyled, rel)
12
-
import Html.Styled.Lazy
11
+
import Html.Lazy
13
12
import Notifications exposing (..)
14
13
import Process
15
14
import Task
···
84
83
view collection =
85
84
collection
86
85
|> List.reverse
87
-
|> List.map (Html.Styled.Lazy.lazy notificationView)
88
-
|> brick
89
-
[ css containerStyles ]
90
-
[ C.absolute
86
+
|> List.map (Html.Lazy.lazy notificationView)
87
+
|> Html.div
88
+
[ class "notifications"
89
+
90
+
--
91
+
, C.absolute
91
92
, C.bottom_0
92
93
, C.flex
93
94
, C.flex_col
···
99
100
, C.text_sm
100
101
, C.z_50
101
102
]
102
-
|> Html.Styled.toUnstyled
103
-
104
103
105
104
106
-
-- TODO: Remove .Styled.Html
107
-
108
-
109
-
notificationView : Notification Msg -> Html.Styled.Html Msg
105
+
notificationView : Notification Msg -> Html Msg
110
106
notificationView notification =
111
107
let
112
108
kind =
···
121
117
dismissMsg =
122
118
DismissNotification { id = id }
123
119
in
124
-
brick
120
+
Html.div
125
121
[ if options.sticky then
126
-
fromUnstyled (onDoubleTap dismissMsg)
122
+
onDoubleTap dismissMsg
127
123
128
124
else
129
-
fromUnstyled (onTap dismissMsg)
125
+
onTap dismissMsg
130
126
131
127
--
132
128
, rel (String.fromInt id)
133
-
]
134
-
[ C.duration_200
129
+
130
+
--
131
+
, C.duration_200
135
132
, C.max_w_xs
136
133
, C.mt_2
137
134
, C.p_4
···
167
164
else
168
165
C.opacity_100
169
166
]
170
-
[ chunk
167
+
[ Html.div
171
168
[ C.mt_px, C.pt_px ]
172
-
[ Html.Styled.fromUnstyled (contents notification) ]
169
+
[ contents notification ]
173
170
174
171
--
175
172
, if options.sticky && kind /= Warning then
176
-
chunk
173
+
Html.div
177
174
[ C.cursor_pointer
178
175
, C.italic
179
176
, C.mt_2
···
186
183
else
187
184
nothing
188
185
]
189
-
190
-
191
-
192
-
-- 🖼
193
-
194
-
195
-
containerStyles : List Css.Style
196
-
containerStyles =
197
-
[ Css.fontSize (Css.px 13)
198
-
, Css.lineHeight (Css.num 1.35)
199
-
200
-
--
201
-
, Css.Global.descendants
202
-
[ Css.Global.a
203
-
[ Css.borderBottom3 (Css.px 1) Css.solid (Css.rgba 255 255 255 0.45)
204
-
, Css.color Css.inherit
205
-
, Css.display Css.inlineBlock
206
-
, Css.fontWeight (Css.int 600)
207
-
, Css.textDecoration Css.none
208
-
]
209
-
, Css.Global.p
210
-
[ Css.margin Css.zero
211
-
, Css.padding Css.zero
212
-
]
213
-
, Css.Global.em
214
-
[ Css.borderBottom3 (Css.px 1) Css.solid (Css.rgba 255 255 255 0.45)
215
-
, Css.fontWeight Css.inherit
216
-
]
217
-
, Css.Global.strong
218
-
[ Css.fontWeight (Css.int 600)
219
-
]
220
-
]
221
-
]
+1
src/Css/Application.css
+1
src/Css/Application.css
+30
src/Css/Notifications.css
+30
src/Css/Notifications.css
···
1
+
.notifications {
2
+
font-size: 13px;
3
+
line-height: 1.35;
4
+
5
+
& a,
6
+
& em {
7
+
border-bottom: 1px solid rgba(255, 255, 255, 0.45);
8
+
display: inline-block;
9
+
}
10
+
11
+
& a {
12
+
color: inherit;
13
+
font-weight: 600;
14
+
text-decoration: none;
15
+
}
16
+
17
+
& p {
18
+
margin: 0;
19
+
padding: 0;
20
+
}
21
+
22
+
& em {
23
+
font-weight: inherit;
24
+
}
25
+
26
+
& strong {
27
+
font-weight: 600;
28
+
}
29
+
30
+
}