A music player that connects to your cloud/distributed storage.
Add some basic UI pieces
+155
-8
+6
-1
src/Applications/UI.elm
+6
-1
src/Applications/UI.elm
···
25
25
import UI.Page as Page
26
26
import UI.Ports as Ports
27
27
import UI.Reply as Reply exposing (Reply(..))
28
+
import UI.Settings
28
29
import UI.Sources
29
30
import Url exposing (Url)
30
31
···
241
242
(UI.Navigation.global
242
243
[ ( Page.Index, "Tracks" )
243
244
, ( Page.Sources Sources.Index, "Sources" )
245
+
, ( Page.Settings, "Settings" )
244
246
]
245
247
)
246
248
model.page
···
251
253
, block
252
254
[ style "max-width" (String.fromFloat UI.Kit.insulationWidth ++ "px") ]
253
255
[ T.bg_white
254
-
, T.br1
256
+
, T.br2
255
257
, T.flex_grow_1
256
258
, T.overflow_hidden
257
259
, T.w_100
···
264
266
Page.NotFound ->
265
267
-- TODO
266
268
text "Page not found."
269
+
270
+
Page.Settings ->
271
+
UI.Settings.view model
267
272
268
273
Page.Sources subPage ->
269
274
UI.Sources.view model subPage
+54
-1
src/Applications/UI/Kit.elm
+54
-1
src/Applications/UI/Kit.elm
···
1
-
module UI.Kit exposing (colorKit, colors, defaultFont, headerFont, insulationWidth)
1
+
module UI.Kit exposing (canister, colorKit, colors, defaultFont, h1, headerFont, insulationWidth, intro)
2
2
3
+
import Chunky exposing (..)
3
4
import Color
5
+
import Html exposing (Html)
6
+
import Html.Attributes exposing (style)
7
+
import Tachyons.Classes as T
4
8
5
9
6
10
···
65
69
insulationWidth : Float
66
70
insulationWidth =
67
71
840
72
+
73
+
74
+
75
+
-- Nodes
76
+
77
+
78
+
canister : List (Html msg) -> Html msg
79
+
canister children =
80
+
chunk
81
+
[ T.mh1, T.ph3 ]
82
+
children
83
+
84
+
85
+
h1 : String -> Html msg
86
+
h1 text =
87
+
slab
88
+
Html.h1
89
+
[ style "background-color" (Color.toCssString colorKit.base06)
90
+
, style "font-size" "11.25px"
91
+
, style "letter-spacing" "0.25px"
92
+
, style "top" "-1px"
93
+
]
94
+
[ T.br2
95
+
, T.br__bottom
96
+
, T.dt
97
+
, T.fw7
98
+
, T.lh_copy
99
+
, T.ma0
100
+
, T.ph2
101
+
, T.pv1
102
+
, T.relative
103
+
, T.ttu
104
+
, T.white
105
+
]
106
+
[ Html.text text ]
107
+
108
+
109
+
intro : Html msg -> Html msg
110
+
intro child =
111
+
slab
112
+
Html.p
113
+
[ style "color" (Color.toCssString colorKit.base05)
114
+
, style "line-height" "1.75em"
115
+
]
116
+
[ T.f6
117
+
, T.mv3
118
+
, T.pv1
119
+
]
120
+
[ child ]
+5
src/Applications/UI/Page.elm
+5
src/Applications/UI/Page.elm
···
11
11
12
12
type Page
13
13
= Index
14
+
| Settings
14
15
| Sources Sources.Page
15
16
--
16
17
| NotFound
···
36
37
NotFound ->
37
38
"/404"
38
39
40
+
Settings ->
41
+
"/settings"
42
+
39
43
-----------------------------------------
40
44
-- Sources
41
45
-----------------------------------------
···
52
56
oneOf
53
57
[ map Index top
54
58
, map NotFound (s "404")
59
+
, map Settings (s "settings")
55
60
56
61
-- Sources
57
62
, map (Sources Sources.Index) (s "sources")
+56
src/Applications/UI/Settings.elm
+56
src/Applications/UI/Settings.elm
···
1
+
module UI.Settings exposing (view)
2
+
3
+
import Chunky exposing (..)
4
+
import Html exposing (Html, text)
5
+
import Material.Icons.Action as Icons
6
+
import Material.Icons.Communication as Icons
7
+
import Tachyons.Classes as T
8
+
import UI.Core
9
+
import UI.Kit
10
+
import UI.Navigation exposing (..)
11
+
import UI.Page as Page
12
+
13
+
14
+
15
+
-- 🗺
16
+
17
+
18
+
view : UI.Core.Model -> Html UI.Core.Msg
19
+
view =
20
+
index
21
+
22
+
23
+
24
+
-- PAGES
25
+
26
+
27
+
index : UI.Core.Model -> Html UI.Core.Msg
28
+
index model =
29
+
chunk
30
+
[]
31
+
[ -----------------------------------------
32
+
-- Navigation
33
+
-----------------------------------------
34
+
UI.Navigation.local
35
+
[ ( Icon Icons.import_export
36
+
, Label "Import / Export" Shown
37
+
, PerformMsg UI.Core.Bypass
38
+
)
39
+
, ( Icon Icons.exit_to_app
40
+
, Label "Sign out" Shown
41
+
, PerformMsg UI.Core.Bypass
42
+
)
43
+
]
44
+
model.page
45
+
46
+
-----------------------------------------
47
+
-- Content
48
+
-----------------------------------------
49
+
, UI.Kit.canister
50
+
[ UI.Kit.h1 "Settings"
51
+
, [ text "Changes are automatically saved."
52
+
]
53
+
|> Html.span []
54
+
|> UI.Kit.intro
55
+
]
56
+
]
+21
-1
src/Applications/UI/Sources.elm
+21
-1
src/Applications/UI/Sources.elm
···
6
6
import Material.Icons.Navigation as Icons
7
7
import Material.Icons.Notification as Icons
8
8
import Sources exposing (..)
9
+
import Tachyons.Classes as T
9
10
import UI.Core
11
+
import UI.Kit
10
12
import UI.Navigation exposing (..)
11
13
import UI.Page as Page
12
14
···
30
32
index model =
31
33
chunk
32
34
[]
33
-
[ UI.Navigation.local
35
+
[ -----------------------------------------
36
+
-- Navigation
37
+
-----------------------------------------
38
+
UI.Navigation.local
34
39
[ ( Icon Icons.add
35
40
, Label "Add a new source" Shown
36
41
, GoToPage (Page.Sources Sources.Index)
···
41
46
)
42
47
]
43
48
model.page
49
+
50
+
-----------------------------------------
51
+
-- Content
52
+
-----------------------------------------
53
+
, UI.Kit.canister
54
+
[ UI.Kit.h1 "Sources"
55
+
, [ text "A source is a place where your music is stored."
56
+
, lineBreak
57
+
, text "By connecting a source, the application will scan it and keep a list of all the music in it."
58
+
, lineBreak
59
+
, text "It will not copy anything."
60
+
]
61
+
|> Html.span []
62
+
|> UI.Kit.intro
63
+
]
44
64
]
+6
-1
src/Library/Chunky.elm
+6
-1
src/Library/Chunky.elm
···
1
-
module Chunky exposing (block, chunk, empty, raw, slab)
1
+
module Chunky exposing (block, chunk, empty, lineBreak, raw, slab)
2
2
3
3
{-| Chunks, blocks and slabs.
4
4
···
58
58
empty : Html msg
59
59
empty =
60
60
Html.text ""
61
+
62
+
63
+
lineBreak : Html msg
64
+
lineBreak =
65
+
Html.br [] []