summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-03-27 18:52:27 +0200
committerVolpeon <git@volpeon.ink>2022-03-27 18:52:27 +0200
commita08dee14bcc07ee31175265cb586e857d44fb12e (patch)
tree4d1d4cfdb09d76d395d37b06983bd212eb44aeb6 /tpl
parentUpdate (diff)
downloadiro-design-a08dee14bcc07ee31175265cb586e857d44fb12e.tar.gz
iro-design-a08dee14bcc07ee31175265cb586e857d44fb12e.tar.bz2
iro-design-a08dee14bcc07ee31175265cb586e857d44fb12e.zip
Improved bubbles
Diffstat (limited to 'tpl')
-rw-r--r--tpl/objects/bubble-group.pug13
-rw-r--r--tpl/objects/bubble.pug39
-rw-r--r--tpl/views/bubble-group.pug43
-rw-r--r--tpl/views/bubble.pug21
4 files changed, 86 insertions, 30 deletions
diff --git a/tpl/objects/bubble-group.pug b/tpl/objects/bubble-group.pug
index c2e502a..2b960f0 100644
--- a/tpl/objects/bubble-group.pug
+++ b/tpl/objects/bubble-group.pug
@@ -1,16 +1,9 @@
1mixin bubble-group(user) 1mixin bubble-group(user)
2 - 2 -
3 let first = true
4
5 mixin bubble-group-bubble(time)
6 +bubble(time, first ? user : undefined)(class='l-bubble-group__bubble')
7 block
8 -
9 first = false
10
11 -
12 let classes = { 3 let classes = {
13 'l-bubble-group': true 4 'l-bubble-group': true,
5 'l-bubble-group--compact': attributes.compact,
6 'l-bubble-group--arrow': attributes.arrow
14 } 7 }
15 if (attributes.class) { 8 if (attributes.class) {
16 classes[attributes.class] = true 9 classes[attributes.class] = true
diff --git a/tpl/objects/bubble.pug b/tpl/objects/bubble.pug
index a79f119..681661c 100644
--- a/tpl/objects/bubble.pug
+++ b/tpl/objects/bubble.pug
@@ -1,21 +1,36 @@
1mixin bubble(time, user) 1mixin bubble(user)
2 - const slots = {}
3
4 mixin slot(key)
5 - slots[key] = block
6
2 - 7 -
8 block ? block() : undefined
9
3 let classes = { 10 let classes = {
4 'o-bubble': true, 11 'o-bubble': true,
5 't-raised': true 12 'o-bubble--compact': attributes.compact,
13 't-raised': !attributes.theme
6 } 14 }
7 if (attributes.class) { 15 if (attributes.class) {
8 classes[attributes.class] = true 16 classes[attributes.class] = true
9 } 17 }
18 if (attributes.theme) {
19 classes[attributes.theme] = true
20 }
10 21
11 article(class=classes) 22 article(class=classes)
12 if user 23 if slots.header
13 header.o-bubble__user 24 header.o-bubble__header
25 - slots.header()
26 else if user
27 header.o-bubble__header
14 strong= user 28 strong= user
15 span.s-colored-links 29 div.o-bubble__body.s-colored-links
16 block 30 - slots.body()
17 small.o-bubble__time 31 if slots.time
18 = time 32 small.o-bubble__time
19 if attributes.scope 33 - slots.time()
20 = ' ' 34 if slots.footer
21 +icon(attributes.scope) 35 footer.o-bubble__footer
36 - slots.footer()
diff --git a/tpl/views/bubble-group.pug b/tpl/views/bubble-group.pug
index 6f057c0..ec7d025 100644
--- a/tpl/views/bubble-group.pug
+++ b/tpl/views/bubble-group.pug
@@ -1,9 +1,40 @@
1mixin view-bubble-group 1mixin view-bubble-group
2 +view('bubble-group', 'Bubble group') 2 +view('bubble-group', 'Bubble group')
3 .c-box.l-overflow(style='max-height: 13em') 3 .c-box.l-overflow(style='max-height: 15em')
4 +bubble-group('Volpeon')(compact=true arrow=true)
5 +bubble('Volpeon')(compact=true class='l-bubble-group__bubble')
6 +slot('body')= 'Compact bubbles test'
7 +slot('time')= '12:34'
8 +bubble()(compact=true class='l-bubble-group__bubble')
9 +slot('body')= loremIpsum
10 +slot('time')= '12:35'
11 +bubble()(compact=true class='l-bubble-group__bubble')
12 +slot('body')= 'qwertzuiop'
13 +slot('time')= '12:36'
14 +bubble()(compact=true class='l-bubble-group__bubble')
15 +slot('body')= '🐈️🦊️'
16 +slot('time')= '12:38'
17 +bubble()(compact=true class='l-bubble-group__bubble')
18 +slot('body')= loremIpsum
19 +slot('time')= '12:39'
20
21 .c-box.l-overflow(style='max-height: 15em')
4 +bubble-group('Volpeon') 22 +bubble-group('Volpeon')
5 +bubble-group-bubble('12:34')= loremIpsum 23 +bubble()(class='l-bubble-group__bubble')
6 +bubble-group-bubble('12:35')= loremIpsum 24 +slot('header')
7 +bubble-group-bubble('12:36')= loremIpsum 25 .l-card.l-card--flush
8 +bubble-group-bubble('12:38')= loremIpsum 26 .l-card__block.l-card__block--main
9 +bubble-group-bubble('12:39')= loremIpsum 27 strong= 'Volpeon'
28 small.u-ml-100= '@volpeon@mk.vulpes.one'
29 small.l-card__block
30 = '5 minutes ago'
31 +icon('lock')(class='u-ml-100')
32 +slot('body')= 'Full width bubbles test'
33 +bubble()(class='l-bubble-group__bubble')
34 +slot('body')= loremIpsum
35 +bubble()(class='l-bubble-group__bubble')
36 +slot('body')= 'qwertzuiop'
37 +bubble()(class='l-bubble-group__bubble')
38 +slot('body')= '🐈️🦊️'
39 +bubble()(class='l-bubble-group__bubble')
40 +slot('body')= loremIpsum
diff --git a/tpl/views/bubble.pug b/tpl/views/bubble.pug
index 037398f..5e53f5b 100644
--- a/tpl/views/bubble.pug
+++ b/tpl/views/bubble.pug
@@ -1,7 +1,24 @@
1mixin view-bubble 1mixin view-bubble
2 +view('bubble', 'Bubble') 2 +view('bubble', 'Bubble')
3 .c-box 3 .c-box
4 +bubble('12:34', 'Volpeon')= loremIpsum 4 +bubble('Volpeon')(compact=true)
5 +slot('body')= loremIpsum
6 +slot('time')
7 = '12:34'
8 +icon('lock')(class='u-ml-100')
9
10 .c-box.u-themed.t-hi
11 +bubble()(compact=true theme='t-def')
12 +slot('body')= loremIpsum
5 13
6 .c-box 14 .c-box
7 +bubble('12:34', 'Volpeon')(scope='lock')= loremIpsum 15 +bubble()
16 +slot('header')
17 .l-card.l-card--flush
18 .l-card__block.l-card__block--main
19 strong= 'Volpeon'
20 small.u-ml-100= '@volpeon@mk.vulpes.one'
21 small.l-card__block
22 = '5 minutes ago'
23 +icon('lock')(class='u-ml-100')
24 +slot('body')= loremIpsum