A music player that connects to your cloud/distributed storage.
Add button and select to UI.Kit
+142
-23
+83
-10
src/Applications/UI/Kit.elm
+83
-10
src/Applications/UI/Kit.elm
···
1
-
module UI.Kit exposing (canister, colorKit, colors, defaultFont, h1, h2, headerFont, insulationWidth, intro, logoBackdrop, vessel)
1
+
module UI.Kit exposing (ButtonType(..), button, canister, colorKit, colors, defaultFont, h1, h2, headerFont, insulationWidth, intro, logoBackdrop, select, vessel)
2
2
3
3
import Chunky exposing (..)
4
4
import Color
5
5
import Html exposing (Html)
6
6
import Html.Attributes exposing (style)
7
+
import Html.Events exposing (onClick, onInput)
8
+
import Material.Icons.Hardware as Icons
7
9
import Tachyons.Classes as T
8
10
9
11
···
66
68
-- Space properties
67
69
68
70
71
+
borderRadius : String
72
+
borderRadius =
73
+
T.br2
74
+
75
+
69
76
insulationWidth : Float
70
77
insulationWidth =
71
78
840
···
75
82
-- Nodes
76
83
77
84
78
-
button : Html msg -> Html msg
79
-
button child =
85
+
type ButtonType
86
+
= WithIcon
87
+
| WithText
88
+
89
+
90
+
button : ButtonType -> msg -> Html msg -> Html msg
91
+
button buttonType msg child =
80
92
slab
81
93
Html.button
82
-
[]
83
-
[]
84
-
[ child ]
94
+
[ onClick msg
95
+
96
+
--
97
+
, style "border-color" (Color.toCssString colorKit.base0B)
98
+
]
99
+
[ borderRadius
100
+
, T.bw1
101
+
, T.b__solid
102
+
, T.lh_solid
103
+
, T.ph3
104
+
, T.pv2
105
+
]
106
+
[ case buttonType of
107
+
WithIcon ->
108
+
slab
109
+
Html.span
110
+
[ style "font-size" "0" ]
111
+
[ T.dib, T.v_top ]
112
+
[ child ]
113
+
114
+
WithText ->
115
+
child
116
+
]
85
117
86
118
87
119
canister : List (Html msg) -> Html msg
···
99
131
, style "letter-spacing" "0.25px"
100
132
, style "top" "-1px"
101
133
]
102
-
[ T.br2
134
+
[ borderRadius
103
135
, T.br__bottom
104
136
, T.dt
105
137
, T.fw7
···
157
189
, style "transform-origin" "left top"
158
190
, style "width" "105vh"
159
191
]
160
-
[ T.absolute, T.top_0 ]
192
+
[ T.absolute, T.top_0, T.z_0 ]
161
193
[]
162
194
163
195
196
+
select : (String -> msg) -> List (Html msg) -> Html msg
197
+
select inputHandler options =
198
+
block
199
+
[ style "border-bottom-color" (Color.toCssString colors.inputBorder)
200
+
, style "max-width" "360px"
201
+
]
202
+
[ T.bb
203
+
, T.center
204
+
, T.mb4
205
+
, T.relative
206
+
, T.w_100
207
+
]
208
+
[ slab
209
+
Html.select
210
+
[ onInput inputHandler
211
+
, style "color" (Color.toCssString colors.text)
212
+
]
213
+
[ T.bn
214
+
, T.bg_transparent
215
+
, T.db
216
+
, T.f5
217
+
, T.input_reset
218
+
, T.lh_copy
219
+
, T.ma0
220
+
, T.outline_0
221
+
, T.pv2
222
+
, T.ph0
223
+
, T.w_100
224
+
]
225
+
options
226
+
, block
227
+
[ style "font-size" "0"
228
+
, style "margin-top" "1px"
229
+
, style "top" "50%"
230
+
, style "transform" "translateY(-50%)"
231
+
]
232
+
[ T.absolute, T.right_0 ]
233
+
[ Icons.keyboard_arrow_down colorKit.base05 20 ]
234
+
]
235
+
236
+
164
237
vessel : List (Html msg) -> Html msg
165
238
vessel =
166
239
block
167
240
[ style "max-width" (String.fromFloat insulationWidth ++ "px") ]
168
-
[ T.bg_white
169
-
, T.br2
241
+
[ borderRadius
242
+
, T.bg_white
170
243
, T.flex
171
244
, T.flex_column
172
245
, T.flex_grow_1
+27
-4
src/Applications/UI/Sources.elm
+27
-4
src/Applications/UI/Sources.elm
···
2
2
3
3
import Chunky exposing (..)
4
4
import Html exposing (Html, text)
5
+
import Html.Attributes exposing (value)
5
6
import Material.Icons.Content as Icons
6
7
import Material.Icons.Navigation as Icons
7
8
import Material.Icons.Notification as Icons
8
9
import Replying exposing (R3D3)
9
10
import Sources exposing (..)
10
11
import Tachyons.Classes as T
11
-
import UI.Kit
12
+
import UI.Kit exposing (ButtonType(..), select)
12
13
import UI.Navigation exposing (..)
13
14
import UI.Page as Page
14
15
import UI.Reply exposing (Reply(..))
···
127
128
, chunk
128
129
[ T.flex
129
130
, T.flex_grow_1
130
-
, T.items_center
131
-
, T.justify_center
132
131
, T.overflow_hidden
133
132
, T.relative
134
133
]
135
134
[ UI.Kit.logoBackdrop
136
-
, UI.Kit.h2 "Where is your music stored?"
135
+
, chunk
136
+
[ T.flex
137
+
, T.flex_column
138
+
, T.flex_grow_1
139
+
, T.items_center
140
+
, T.justify_center
141
+
, T.relative
142
+
, T.z_1
143
+
]
144
+
[ UI.Kit.h2 "Where is your music stored?"
145
+
146
+
--
147
+
, [ Html.option
148
+
[ value "AmazonS3" ]
149
+
[ text "Amazon S3" ]
150
+
]
151
+
|> select (always Bypass)
152
+
|> chunky [ T.pv2, T.w_100 ]
153
+
154
+
--
155
+
, UI.Kit.button
156
+
WithIcon
157
+
Bypass
158
+
(Icons.arrow_forward UI.Kit.colorKit.base0B 17)
159
+
]
137
160
]
138
161
]
+26
-1
src/Library/Chunky.elm
+26
-1
src/Library/Chunky.elm
···
1
-
module Chunky exposing (block, chunk, empty, lineBreak, raw, slab)
1
+
module Chunky exposing (block, blocky, chunk, chunky, empty, lineBreak, raw, rawy, slab, slaby)
2
2
3
3
{-| Chunks, blocks and slabs.
4
4
···
24
24
typ (List.append [ Tachyons.classes classes ] attributes) children
25
25
26
26
27
+
slaby :
28
+
(List (Html.Attribute msg) -> List (Html msg) -> Html msg)
29
+
-> List (Html.Attribute msg)
30
+
-> List String
31
+
-> Html msg
32
+
-> Html msg
33
+
slaby a b c =
34
+
List.singleton >> slab a b c
35
+
36
+
27
37
28
38
-- 2
29
39
···
33
43
slab Html.div
34
44
35
45
46
+
blocky : List (Html.Attribute msg) -> List String -> Html msg -> Html msg
47
+
blocky a b =
48
+
List.singleton >> block a b
49
+
50
+
36
51
37
52
-- 3
38
53
···
41
56
chunk =
42
57
block []
43
58
59
+
60
+
chunky : List String -> Html msg -> Html msg
61
+
chunky a =
62
+
List.singleton >> chunk a
44
63
45
64
65
+
46
66
-- 4
47
67
48
68
49
69
raw : List (Html msg) -> Html msg
50
70
raw =
51
71
chunk []
72
+
73
+
74
+
rawy : Html msg -> Html msg
75
+
rawy =
76
+
List.singleton >> raw
52
77
53
78
54
79
+6
-8
src/Static/Css/Application.css
+6
-8
src/Static/Css/Application.css
···
11
11
12
12
13
13
14
-
/**
15
-
** Backdrop
16
-
**
17
-
*/
14
+
/************
15
+
* Backdrop *
16
+
************/
18
17
19
18
@keyframes fadeIn {
20
19
from { opacity: 0; }
···
23
22
24
23
25
24
26
-
/**
27
-
** Spinner
28
-
**
29
-
*/
25
+
/***********
26
+
* Spinner *
27
+
***********/
30
28
31
29
.spinner {
32
30
animation: spinner-rotator 1.4s linear infinite;