Skip to content

Commit 80b175b

Browse files
joshuafcolejoshuafcole
authored
Merge pull request #27 from Kodowa/feature/ui-components
Feature/ui components
2 parents 176db80 + cdfe6af commit 80b175b

File tree

18 files changed

+1691
-289
lines changed

18 files changed

+1691
-289
lines changed

‎assets/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<title>Eve</title>
55
<link rel="stylesheet" type="text/css" href="/assets/css/ionicons.min.css">
6-
<link rel="stylesheet" type="text/css" href="/assets/css/base.css">
6+
<link rel="stylesheet" type="text/css" href="/dist/libraries.css">
77
</head>
88
<body>
99
<script src="/dist/eve-native-bundle.js"></script>

‎examples/db-explorer.eve‎

Lines changed: 98 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,38 @@
44

55
~~~ eve
66
commit
7-
[#init stage: 1]
8-
[#ui/column #db-explorer/root | children:
7+
[#ui/row #db-explorer/root | children:
98
[#ui/row #db-explorer/query-box | children:
10-
[#token-completer #db-explorer/query placeholder: "search..." | completion-pattern: [#db-explorer/pattern]]
9+
[#ui/token-completer #db-explorer/query placeholder: "search..." | completion-pattern: [#db-explorer/pattern]]
1110
[#ui/button #db-explorer/query-button icon: "ios-search-strong"]]
1211
[#ui/row #db-explorer/card-list]]
1312
end
1413
~~~
1514

16-
Draw each matching record as a record card.
15+
Draw each matching record as a record symbol.
1716
~~~ eve
1817
search
1918
[#db-explorer/root record]
2019
card-list = [#db-explorer/card-list]
2120
bind
22-
card-list.children += [#record-card/card #db-explorer/card record]
21+
card-list.children += [#db-explorer/record-symbol record]
2322
end
2423
~~~
2524

2625
If no records are specified, show any record.
26+
~~~ eve
27+
search
28+
not([#db-explorer/completion-record])
29+
root = [#db-explorer/root]
30+
record = if r = [#pet] then r
31+
if r = [#person] then r
32+
if r = [#company] then r
33+
bind
34+
root.record += record
35+
end
36+
~~~
37+
38+
2739
// ~~~ eve
2840
// search
2941
// lookup[entity: record]
@@ -36,6 +48,41 @@ If no records are specified, show any record.
3648
// end
3749
// ~~~
3850

51+
## Record Symbol
52+
53+
~~~ eve
54+
search
55+
symbol = [#db-explorer/record-symbol record]
56+
bind
57+
symbol <- [#html/div record | children:
58+
[#ui/text sort: 1 text: "⬢"]]
59+
end
60+
~~~
61+
62+
If a record symbol is open, inject its card.
63+
~~~ eve
64+
search
65+
symbol = [#db-explorer/record-symbol record]
66+
root = [#db-explorer/root open: record]
67+
bind
68+
symbol.children +=
69+
[#record-card/card #db-explorer/card record sort: 2]
70+
end
71+
~~~
72+
73+
74+
Clicking a record symbol opens its card.
75+
~~~ eve
76+
search
77+
[#html/event/click element: [#db-explorer/record-symbol record]]
78+
root = [#db-explorer/root]
79+
commit
80+
// root.open += record // @FIXME: Why doesn't this work if we do + and -
81+
root.open := record
82+
end
83+
~~~
84+
85+
3986

4087
## Record Card
4188

@@ -47,7 +94,7 @@ search
4794
count = gather/count[for:container.children]
4895

4996
commit
50-
container.children += [#record-card/card record: value]
97+
container.children += [#record-card/card #db-explorer/card record: value]
5198
end
5299
~~~
53100

@@ -63,9 +110,12 @@ end
63110

64111
~~~ eve
65112
search
66-
[#html/event/click element: [#db-explorer/close-card card]]
113+
[#html/event/click element: [#db-explorer/close-card card: [record]]]
114+
root = [#db-explorer/root]
67115
commit
68-
card := none
116+
// root.open -= record // @FIXME Why doesn't this work if we do + and -
117+
// [#html/div text: "CLOSED {{record}}"]
118+
root.open := none
69119
end
70120
~~~
71121

@@ -81,7 +131,7 @@ search
81131
not(string/contains[text: query.value substring: " "])
82132
[tag]
83133
bind
84-
query.completion += [text: "#{{tag}}" value: tag]
134+
query.completion += [value: tag text: "#{{tag}}"]
85135
end
86136
~~~
87137

@@ -92,7 +142,7 @@ search
92142
not(string/contains[text: query.value substring: " "])
93143
lookup[attribute]
94144
bind
95-
query.completion += [text: attribute value: attribute]
145+
query.completion += [value: attribute text: attribute]
96146
end
97147
~~~
98148

@@ -102,7 +152,7 @@ search
102152
query = [#db-explorer/query]
103153
[#db-explorer/completion-record record: [tag]]
104154
bind
105-
query.completion += [text: "#{{tag}}" value: tag]
155+
query.completion += [value: tag text: "#{{tag}}"]
106156
end
107157
~~~
108158

@@ -113,7 +163,7 @@ search
113163
[#db-explorer/completion-record record]
114164
lookup[entity: record attribute]
115165
bind
116-
query.completion += [text: attribute value: attribute]
166+
query.completion += [value: attribute text: attribute]
117167
end
118168
~~~
119169

@@ -150,6 +200,7 @@ If the token doesn't start with `#`, it's an attribute.
150200
search
151201
[#db-explorer/tokens-to-pattern pattern token]
152202
not(1 = string/index-of[text: token substring: "#"])
203+
token != ""
153204
bind
154205
pattern.attribute += [attribute: token]
155206
end
@@ -192,21 +243,10 @@ search
192243
block = [#db-explorer/completer record-var]
193244
bind
194245
value-var = [#eve/compiler/variable completion-pattern attribute]
195-
block.constraint += [#eve/compiler/scan entity: record-var attribute value: value-var]
246+
block.constraint += [#eve/compiler/scan entity: record-var attribute: attribute.attribute value: value-var]
196247
end
197248
~~~
198249

199-
DEBUG
200-
~~~ eve
201-
search
202-
[#db-explorer/completion-record record]
203-
bind
204-
[#ui/text text: record]
205-
end
206-
~~~
207-
208-
209-
210250
When the search button is clicked, parse the current search string into a search block.
211251
~~~ eve
212252
search
@@ -218,90 +258,78 @@ end
218258
~~~
219259

220260

221-
## Token Completer
261+
## Test
222262

223-
Token completers are autocompleters.
224263
~~~ eve
225-
search
226-
completer = [#token-completer]
227-
bind
228-
completer <- [#ui/autocomplete]
264+
commit
265+
dubdub = [#person #employee #male text: "wump" sort: 7 name: "dubdub" blarg: "crab" salary: 96 | company: kodowa friend: jubalyn]
266+
jubalyn = [#person #female name: "jubalyn" weight: 13 age: 91 coolness: 6 | friend: dubdub]
267+
kodowa = [#company #startup name: "kodowa" ceo: "chris" man-of-distinction: "josh" | employees: (dubdub, "josh", "chris", "corey", "rob")]
268+
[#pet #cat name: "blort" age: 13 | owner: dubdub]
269+
[#pet #dog name: "steve" age: 3 | owner: dubdub]
229270
end
230271
~~~
231272

232-
~~~ eve
233-
search
234-
completer = [#token-completer value]
235-
(token, 1) = eve-internal/string/split-reverse[text: value by: " "]
236-
bind
237-
completer.needle += token
238-
end
239-
~~~
273+
# DEBUG
240274

241275
~~~ eve
242-
search
243-
event = [#ui/event/select autocomplete selected]
244-
input = [#ui/autocomplete/input autocomplete]
245-
autocomplete = [#token-completer]
246-
needle-start = 0 - string/length[text: autocomplete.needle]
247-
value = string/substring[text: input.value from: 1 to: needle-start]
248-
commit
249-
input.value := "{{value}}{{selected.text}}"
250-
autocomplete.selected := selected
251-
event := none
252-
253-
end
276+
// search
277+
// root = [#db-explorer/root]
278+
// record = [#pet]
279+
// commit
280+
// root.record += record
281+
// end
254282
~~~
255283

256-
## Test
257284

258285
~~~ eve
259-
commit
260-
dubdub = [#person #employee #male text: "wump" sort: 7 name: "dubdub" blarg: "crab" salary: 96 | company: kodowa friend: jubalyn]
261-
jubalyn = [#person #female name: "jubalyn" weight: 13 age: 91 coolness: 6 | friend: dubdub]
262-
kodowa = [#company #startup name: "kodowa" ceo: "chris" man-of-distinction: "josh" | employees: (dubdub, "josh", "chris", "corey", "rob")]
263-
end
286+
// search
287+
// [#db-explorer/query completion-pattern]
288+
// root = [#db-explorer/root]
289+
// bind
290+
// root.record += completion-pattern
291+
// end
264292
~~~
265293

266294
~~~ eve
267295
search
268-
foo = [#person name: "dubdub"]
269-
commit
270-
foo <- [pet:
271-
[#pet #cat name: "blort" age: 13 | owner: foo]
272-
[#pet #dog name: "steve" age: 3 | owner: foo]]
296+
[#db-explorer/completion-record record]
297+
root = [#db-explorer/root]
298+
bind
299+
root.record += record
273300
end
274301
~~~
275302

276303

277304
~~~ eve
278305
search
279-
init = [#init stage: 1]
306+
block = [#db-explorer/completer]
280307
root = [#db-explorer/root]
281-
record = [#pet]
282-
commit
283-
root.record += record
284-
init.stage := 2
308+
bind
309+
root.record += block
285310
end
286311
~~~
287312

288-
DEBUG
289313
~~~ eve
290314
search
291-
[#db-explorer/query completion-pattern]
292-
root = [#db-explorer/root]
315+
[#db-explorer/completion-record record]
293316
bind
294-
root.record += completion-pattern
317+
[#html/div text: record]
295318
end
296319
~~~
297320

298321

299322

323+
300324
~~~ eve
301325
commit
302326
[#html/style text: "
303327
.db-explorer-root { max-width: 900px; }
304328
.db-explorer-card-list { flex-wrap: wrap; }
329+
330+
.db-explorer-query-box { align-items: center; }
331+
332+
.db-explorer-record-symbol { width: 30px height: 30px; text-align: center; margin: 20px; }
305333
"]
306334
end
307335
~~~

0 commit comments

Comments
 (0)