A music player that connects to your cloud/distributed storage.
Improve UI.List
+54
-10
+1
-1
elm.json
+1
-1
elm.json
···
19
19
"elm/svg": "1.0.1",
20
20
"elm/time": "1.0.0",
21
21
"elm/url": "1.0.0",
22
+
"elm/virtual-dom": "1.0.2",
22
23
"elm-community/list-extra": "8.1.0",
23
24
"elm-community/maybe-extra": "5.0.0",
24
25
"icidasset/elm-binary": "1.3.0",
···
36
37
"elm/file": "1.0.1",
37
38
"elm/parser": "1.1.0",
38
39
"elm/random": "1.0.0",
39
-
"elm/virtual-dom": "1.0.2",
40
40
"elm-explorations/test": "1.2.0",
41
41
"fredcy/elm-parseint": "2.0.1",
42
42
"jinjor/elm-xml-parser": "2.0.0",
+35
-8
src/Applications/UI/List.elm
+35
-8
src/Applications/UI/List.elm
···
1
-
module UI.List exposing (view)
1
+
module UI.List exposing (Action, Item, view)
2
2
3
3
import Chunky exposing (..)
4
-
import Color
4
+
import Color exposing (Color)
5
5
import Color.Ext as Color
6
6
import Css exposing (px, solid)
7
-
import Html.Styled as Html exposing (Html)
7
+
import Html.Styled as Html exposing (Html, fromUnstyled)
8
8
import Html.Styled.Attributes exposing (css, style)
9
+
import Html.Styled.Events exposing (onClick)
9
10
import Tachyons.Classes as T
10
11
import UI.Kit
12
+
import VirtualDom
11
13
12
14
13
15
14
16
-- 🌳
15
17
16
18
19
+
type alias Action msg =
20
+
{ icon : Color -> Int -> VirtualDom.Node msg
21
+
, msg : msg
22
+
}
23
+
24
+
17
25
type alias Item msg =
18
26
{ label : String
19
-
, actions : List (Html msg)
27
+
, actions : List (Action msg)
20
28
}
21
29
22
30
···
26
34
27
35
view : List (Item msg) -> Html msg
28
36
view =
29
-
List.map item >> chunk [ T.f6, T.lh_copy ]
37
+
List.map item >> brick [ css listStyles ] [ T.lh_title ]
30
38
31
39
32
40
···
36
44
37
45
38
46
item : Item msg -> Html msg
39
-
item { label } =
47
+
item { label, actions } =
40
48
brick
41
49
[ css itemStyles ]
42
-
[]
43
-
[ Html.text label ]
50
+
[ T.flex, T.fw6, T.items_center, T.pv3 ]
51
+
[ chunk
52
+
[ T.flex_grow_1 ]
53
+
[ Html.text label ]
54
+
, chunk
55
+
[ T.flex, T.items_center ]
56
+
(List.map
57
+
(\{ icon, msg } ->
58
+
brick
59
+
[ onClick msg, style "line-height" "0" ]
60
+
[ T.pointer ]
61
+
[ fromUnstyled (icon UI.Kit.colors.text 16) ]
62
+
)
63
+
actions
64
+
)
65
+
]
44
66
45
67
46
68
47
69
-- 🖼
70
+
71
+
72
+
listStyles : List Css.Style
73
+
listStyles =
74
+
[ Css.fontSize (px 13) ]
48
75
49
76
50
77
itemStyles : List Css.Style
+18
-1
src/Applications/UI/Sources.elm
+18
-1
src/Applications/UI/Sources.elm
···
3
3
import Chunky exposing (..)
4
4
import Dict.Ext as Dict
5
5
import Html.Styled as Html exposing (Html, text)
6
+
import Material.Icons.Action as Icons
6
7
import Material.Icons.Content as Icons
7
8
import Material.Icons.Navigation as Icons
8
9
import Material.Icons.Notification as Icons
···
47
48
-- Collection
48
49
-----------------------------------------
49
50
| AddToCollection Source
51
+
| RemoveFromCollection String
50
52
-----------------------------------------
51
53
-- Children
52
54
-----------------------------------------
···
71
73
|> Return2.withNoCmd
72
74
|> Return3.withReply [ UI.Reply.SaveHypaethralUserData ]
73
75
76
+
RemoveFromCollection sourceId ->
77
+
model.collection
78
+
|> List.filter (.id >> (/=) sourceId)
79
+
|> (\c -> { model | collection = c })
80
+
|> Return2.withNoCmd
81
+
|> Return3.withReply [ UI.Reply.SaveHypaethralUserData ]
82
+
74
83
-----------------------------------------
75
84
-- Children
76
85
-----------------------------------------
···
137
146
-- List
138
147
-------
139
148
, model.collection
140
-
|> List.map (\s -> { label = Dict.fetch "name" "" s.data, actions = [] })
149
+
|> List.map (\s -> { label = Dict.fetch "name" "" s.data, actions = sourceActions s })
141
150
|> UI.List.view
142
151
]
143
152
]
153
+
154
+
155
+
sourceActions : Source -> List (UI.List.Action Msg)
156
+
sourceActions source =
157
+
[ { icon = Icons.close
158
+
, msg = RemoveFromCollection source.id
159
+
}
160
+
]