A music player that connects to your cloud/distributed storage.
Setup sources state
+175
-80
+62
-40
src/Applications/UI.elm
+62
-40
src/Applications/UI.elm
···
8
8
import Color
9
9
import Html exposing (Html, div, section, text)
10
10
import Html.Attributes exposing (style)
11
-
import Html.Events
12
11
import Html.Lazy
13
12
import Json.Encode
14
13
import Replying exposing (return)
···
63
62
64
63
-- Children
65
64
, backdrop = UI.Backdrop.initialModel
65
+
, sources = UI.Sources.initialModel
66
66
}
67
67
-----------------------------------------
68
68
-- Initial command
···
111
111
, msg = sub
112
112
}
113
113
114
+
SourcesMsg sub ->
115
+
updateChild
116
+
{ mapCmd = SourcesMsg
117
+
, mapModel = \child -> { model | sources = child }
118
+
, update = UI.Sources.update
119
+
}
120
+
{ model = model.sources
121
+
, msg = sub
122
+
}
123
+
114
124
-----------------------------------------
115
125
-- Brain
116
126
-----------------------------------------
···
198
208
view : Model -> Browser.Document Msg
199
209
view model =
200
210
{ title = "Diffuse"
201
-
, body = [ root model ]
211
+
, body = [ body model ]
202
212
}
203
213
204
214
205
-
root : Model -> Html Msg
206
-
root model =
207
-
section
208
-
[ style "color" (Color.toCssString UI.Kit.colors.text) ]
215
+
body : Model -> Html Msg
216
+
body model =
217
+
root
209
218
[ -----------------------------------------
210
219
-- Backdrop
211
220
-----------------------------------------
212
-
Html.map BackdropMsg (UI.Backdrop.view model.backdrop)
221
+
model.backdrop
222
+
|> Html.Lazy.lazy UI.Backdrop.view
223
+
|> Html.map BackdropMsg
213
224
214
225
-----------------------------------------
215
226
-- Content
216
227
-----------------------------------------
217
-
, chunk
218
-
[ T.flex
219
-
, T.flex_column
220
-
, T.items_center
221
-
, T.justify_center
222
-
, T.min_vh_100
223
-
, T.ph3
224
-
, T.relative
225
-
, T.z_1
226
-
]
228
+
, content
227
229
(if model.isLoading then
228
-
[ Html.map never Svg.Elements.spinner ]
230
+
[ spinner ]
229
231
230
232
else if model.isAuthenticated then
231
233
defaultScreen model
···
250
252
-----------------------------------------
251
253
-- Main
252
254
-----------------------------------------
253
-
, block
254
-
[ style "max-width" (String.fromFloat UI.Kit.insulationWidth ++ "px") ]
255
-
[ T.bg_white
256
-
, T.br2
257
-
, T.flex
258
-
, T.flex_column
259
-
, T.flex_grow_1
260
-
, T.overflow_hidden
261
-
, T.w_100
262
-
]
263
-
(case model.page of
264
-
Page.Index ->
265
-
-- TODO: Tracks
266
-
[ empty ]
255
+
, case model.page of
256
+
Page.Index ->
257
+
-- TODO: Tracks
258
+
empty
267
259
268
-
Page.NotFound ->
269
-
-- TODO
270
-
[ text "Page not found." ]
260
+
Page.NotFound ->
261
+
-- TODO
262
+
text "Page not found."
271
263
272
-
Page.Settings ->
273
-
UI.Settings.view model
264
+
Page.Settings ->
265
+
UI.Settings.view model
274
266
275
-
Page.Sources subPage ->
276
-
UI.Sources.view model subPage
277
-
)
267
+
Page.Sources subPage ->
268
+
model.sources
269
+
|> Html.Lazy.lazy2 UI.Sources.view subPage
270
+
|> Html.map SourcesMsg
278
271
279
272
-----------------------------------------
280
273
-- Controls
···
284
277
[ T.h4 ]
285
278
[]
286
279
]
280
+
281
+
282
+
283
+
-- 🗺 ~ Bits
284
+
285
+
286
+
root : List (Html msg) -> Html msg
287
+
root =
288
+
section
289
+
[ style "color" (Color.toCssString UI.Kit.colors.text) ]
290
+
291
+
292
+
content : List (Html msg) -> Html msg
293
+
content =
294
+
chunk
295
+
[ T.flex
296
+
, T.flex_column
297
+
, T.items_center
298
+
, T.justify_center
299
+
, T.min_vh_100
300
+
, T.ph3
301
+
, T.relative
302
+
, T.z_1
303
+
]
304
+
305
+
306
+
spinner : Html msg
307
+
spinner =
308
+
Html.map never Svg.Elements.spinner
+3
src/Applications/UI/Core.elm
+3
src/Applications/UI/Core.elm
···
7
7
import Json.Encode as Json
8
8
import UI.Backdrop
9
9
import UI.Page exposing (Page)
10
+
import UI.Sources
10
11
import Url exposing (Url)
11
12
12
13
···
33
34
-- Children
34
35
-----------------------------------------
35
36
, backdrop : UI.Backdrop.Model
37
+
, sources : UI.Sources.Model
36
38
}
37
39
38
40
···
48
50
-- Children
49
51
-----------------------------------------
50
52
| BackdropMsg UI.Backdrop.Msg
53
+
| SourcesMsg UI.Sources.Msg
51
54
-----------------------------------------
52
55
-- Brain
53
56
-----------------------------------------
+44
-3
src/Applications/UI/Kit.elm
+44
-3
src/Applications/UI/Kit.elm
···
1
-
module UI.Kit exposing (canister, colorKit, colors, defaultFont, h1, h2, headerFont, insulationWidth, intro)
1
+
module UI.Kit exposing (canister, colorKit, colors, defaultFont, h1, h2, headerFont, insulationWidth, intro, logoBackdrop, vessel)
2
2
3
3
import Chunky exposing (..)
4
4
import Color
···
75
75
-- Nodes
76
76
77
77
78
+
button : Html msg -> Html msg
79
+
button child =
80
+
slab
81
+
Html.button
82
+
[]
83
+
[]
84
+
[ child ]
85
+
86
+
78
87
canister : List (Html msg) -> Html msg
79
-
canister children =
88
+
canister =
80
89
chunk
81
90
[ T.mh1, T.ph3 ]
82
-
children
83
91
84
92
85
93
h1 : String -> Html msg
···
132
140
, T.pv1
133
141
]
134
142
[ child ]
143
+
144
+
145
+
logoBackdrop : Html msg
146
+
logoBackdrop =
147
+
block
148
+
[ style "background-image" "url(/images/diffuse__icon-dark.svg)"
149
+
, style "background-position" "-43.5% 98px"
150
+
, style "background-repeat" "no-repeat"
151
+
, style "background-size" "cover"
152
+
, style "height" "0"
153
+
, style "left" "100%"
154
+
, style "opacity" "0.025"
155
+
, style "padding-top" "100%"
156
+
, style "transform" "rotate(90deg)"
157
+
, style "transform-origin" "left top"
158
+
, style "width" "105vh"
159
+
]
160
+
[ T.absolute, T.top_0 ]
161
+
[]
162
+
163
+
164
+
vessel : List (Html msg) -> Html msg
165
+
vessel =
166
+
block
167
+
[ style "max-width" (String.fromFloat insulationWidth ++ "px") ]
168
+
[ T.bg_white
169
+
, T.br2
170
+
, T.flex
171
+
, T.flex_column
172
+
, T.flex_grow_1
173
+
, T.overflow_hidden
174
+
, T.w_100
175
+
]
+2
-2
src/Applications/UI/Page.elm
+2
-2
src/Applications/UI/Page.elm
···
46
46
Sources Sources.Index ->
47
47
"/sources"
48
48
49
-
Sources (Sources.New _) ->
49
+
Sources Sources.New ->
50
50
"/sources/new"
51
51
52
52
···
63
63
64
64
-- Sources
65
65
, map (Sources Sources.Index) (s "sources")
66
-
, map (Sources <| Sources.New Sources.newForm) (s "sources" </> s "new")
66
+
, map (Sources Sources.New) (s "sources" </> s "new")
67
67
]
+2
-3
src/Applications/UI/Settings.elm
+2
-3
src/Applications/UI/Settings.elm
···
15
15
-- 🗺
16
16
17
17
18
-
view : UI.Core.Model -> List (Html UI.Core.Msg)
18
+
view : UI.Core.Model -> Html UI.Core.Msg
19
19
view =
20
-
index
20
+
UI.Kit.vessel << index
21
21
22
22
23
23
···
39
39
, PerformMsg UI.Core.Bypass
40
40
)
41
41
]
42
-
model.page
43
42
44
43
-----------------------------------------
45
44
-- Content
+51
-20
src/Applications/UI/Sources.elm
+51
-20
src/Applications/UI/Sources.elm
···
1
-
module UI.Sources exposing (view)
1
+
module UI.Sources exposing (Model, Msg(..), initialModel, update, view)
2
2
3
3
import Chunky exposing (..)
4
4
import Html exposing (Html, text)
5
5
import Material.Icons.Content as Icons
6
6
import Material.Icons.Navigation as Icons
7
7
import Material.Icons.Notification as Icons
8
+
import Replying exposing (R3D3)
8
9
import Sources exposing (..)
9
10
import Tachyons.Classes as T
10
-
import UI.Core
11
11
import UI.Kit
12
12
import UI.Navigation exposing (..)
13
13
import UI.Page as Page
14
+
import UI.Reply exposing (Reply(..))
15
+
16
+
17
+
18
+
-- 🌳
19
+
20
+
21
+
type alias Model =
22
+
{ form : Sources.Form }
23
+
24
+
25
+
initialModel : Model
26
+
initialModel =
27
+
{ form = Sources.newForm
28
+
}
29
+
30
+
31
+
32
+
-- 📣
33
+
34
+
35
+
type Msg
36
+
= Bypass
37
+
38
+
39
+
update : Msg -> Model -> R3D3 Model Msg Reply
40
+
update msg model =
41
+
( model
42
+
, Cmd.none
43
+
, Nothing
44
+
)
14
45
15
46
16
47
17
48
-- 🗺
18
49
19
50
20
-
view : UI.Core.Model -> Sources.Page -> List (Html UI.Core.Msg)
21
-
view model page =
51
+
view : Sources.Page -> Model -> Html Msg
52
+
view page =
22
53
case page of
23
54
Index ->
24
-
index model
55
+
UI.Kit.vessel << index
25
56
26
-
New form ->
27
-
new form model
57
+
New ->
58
+
UI.Kit.vessel << new
28
59
29
60
30
61
31
62
-- INDEX
32
63
33
64
34
-
index : UI.Core.Model -> List (Html UI.Core.Msg)
65
+
index : Model -> List (Html Msg)
35
66
index model =
36
67
[ -----------------------------------------
37
68
-- Navigation
···
39
70
UI.Navigation.local
40
71
[ ( Icon Icons.add
41
72
, Label "Add a new source" Shown
42
-
, GoToPage (Page.Sources <| New newForm)
73
+
, GoToPage (Page.Sources New)
43
74
)
44
75
, ( Icon Icons.sync
45
76
, Label "Process sources" Shown
46
-
, PerformMsg UI.Core.Bypass
77
+
, PerformMsg Bypass
47
78
)
48
79
]
49
-
model.page
50
80
51
81
-----------------------------------------
52
82
-- Content
···
69
99
-- NEW
70
100
71
101
72
-
new : Form -> UI.Core.Model -> List (Html UI.Core.Msg)
73
-
new form =
74
-
case form.step of
102
+
new : Model -> List (Html Msg)
103
+
new model =
104
+
case model.form.step of
75
105
Where ->
76
-
newWhere form
106
+
newWhere model.form
77
107
78
108
_ ->
79
-
always [ empty ]
109
+
[ empty ]
80
110
81
111
82
-
newWhere : Form -> UI.Core.Model -> List (Html UI.Core.Msg)
83
-
newWhere { context } model =
112
+
newWhere : Form -> List (Html Msg)
113
+
newWhere { context } =
84
114
[ -----------------------------------------
85
115
-- Navigation
86
116
-----------------------------------------
···
90
120
, GoToPage (Page.Sources Sources.Index)
91
121
)
92
122
]
93
-
model.page
94
123
95
124
-----------------------------------------
96
125
-- Content
···
100
129
, T.flex_grow_1
101
130
, T.items_center
102
131
, T.justify_center
132
+
, T.overflow_hidden
103
133
, T.relative
104
134
]
105
-
[ UI.Kit.h2 "Where is your music stored?"
135
+
[ UI.Kit.logoBackdrop
136
+
, UI.Kit.h2 "Where is your music stored?"
106
137
]
107
138
]