summaryrefslogtreecommitdiffstats
path: root/tpl/views
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2023-11-09 15:44:54 +0100
committerVolpeon <git@volpeon.ink>2023-11-09 15:44:54 +0100
commit679b9b108101b67ad56b4fdf35ec2bd0568d8d84 (patch)
tree1b097e9f90627ca401174c738a8d754e8f2cce6b /tpl/views
parentSimplified bubble arrows (diff)
downloadiro-design-679b9b108101b67ad56b4fdf35ec2bd0568d8d84.tar.gz
iro-design-679b9b108101b67ad56b4fdf35ec2bd0568d8d84.tar.bz2
iro-design-679b9b108101b67ad56b4fdf35ec2bd0568d8d84.zip
Renamed "bubble" to "message", added message group merging
Diffstat (limited to 'tpl/views')
-rw-r--r--tpl/views/bubble-group.pug59
-rw-r--r--tpl/views/message-group.pug110
-rw-r--r--tpl/views/message.pug (renamed from tpl/views/bubble.pug)12
3 files changed, 116 insertions, 65 deletions
diff --git a/tpl/views/bubble-group.pug b/tpl/views/bubble-group.pug
deleted file mode 100644
index dcdbe73..0000000
--- a/tpl/views/bubble-group.pug
+++ /dev/null
@@ -1,59 +0,0 @@
1mixin view-bubble-group
2 +view('bubble-group', 'Bubble group')
3 .c-box.l-overflow(style='resize: vertical')
4 +bubble-group('Volpeon')(compact=true arrow=true left=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='resize: vertical')
22 +bubble-group('Volpeon')(compact=true right=true)
23 strong= 'Volpeon'
24 +bubble()(compact=true class='l-bubble-group__bubble')
25 +slot('body')= 'Compact bubbles test'
26 +slot('time')= '12:34'
27 +bubble()(compact=true class='l-bubble-group__bubble')
28 +slot('body')= loremIpsum
29 +slot('time')= '12:35'
30 +bubble()(compact=true class='l-bubble-group__bubble')
31 +slot('body')= 'qwertzuiop'
32 +slot('time')= '12:36'
33 +bubble()(compact=true class='l-bubble-group__bubble')
34 +slot('body')= '🐈️🦊️'
35 +slot('time')= '12:38'
36 +bubble()(compact=true class='l-bubble-group__bubble')
37 +slot('body')= loremIpsum
38 +slot('time')= '12:39'
39
40 .c-box.l-overflow(style='resize: vertical')
41 +bubble-group('Volpeon')
42 +bubble()(class='l-bubble-group__bubble')
43 +slot('header')
44 .l-media.l-media--flush
45 .l-media__block.l-media__block--main
46 strong= 'Volpeon'
47 small.u-ml-100= '@volpeon@mk.vulpes.one'
48 small.l-media__block
49 = '5 minutes ago'
50 +icon('lock')(class='u-ml-100')
51 +slot('body')= 'Full width bubbles test'
52 +bubble()(class='l-bubble-group__bubble')
53 +slot('body')= loremIpsum
54 +bubble()(class='l-bubble-group__bubble')
55 +slot('body')= 'qwertzuiop'
56 +bubble()(class='l-bubble-group__bubble')
57 +slot('body')= '🐈️🦊️'
58 +bubble()(class='l-bubble-group__bubble')
59 +slot('body')= loremIpsum
diff --git a/tpl/views/message-group.pug b/tpl/views/message-group.pug
new file mode 100644
index 0000000..3d1166f
--- /dev/null
+++ b/tpl/views/message-group.pug
@@ -0,0 +1,110 @@
1mixin sample-message-group
2 +message-group('Volpeon')&attributes(attributes)
3 +message()(theme=attributes.theme group=true compact=attributes.compact)
4 +slot('header')
5 strong= 'Volpeon'
6 +slot('body')
7 block
8 +slot('time')= '12:34'
9
10mixin view-message-group
11 +view('message-group', 'Message group')
12 .c-box.l-overflow(style='resize: vertical')
13 +message-group('Volpeon')
14 +message('Volpeon')(group=true)
15 +slot('body')= 'Inline messages test'
16 +slot('time')= '12:35'
17 +message()(group=true)
18 +slot('body')= loremIpsum
19 +slot('time')= '12:35'
20 +message()(group=true)
21 +slot('body')= 'qwertzuiop'
22 +slot('time')= '12:35'
23 +message()(group=true)
24 +slot('body')= '🐈️🦊️'
25 +slot('time')= '12:35'
26 +message()(group=true)
27 +slot('body')= loremIpsum
28 +slot('time')= '12:35'
29
30 .c-box.l-overflow(style='resize: vertical')
31 +message-group('Volpeon')(compact=true arrow=true left=true)
32 +message('Volpeon')(theme='t-up' compact=true group=true)
33 +slot('body')= 'Compact bubble messages test'
34 +slot('time')= '12:34'
35 +message()(theme='t-up' compact=true group=true)
36 +slot('body')= loremIpsum
37 +slot('time')= '12:35'
38 +message()(theme='t-up' compact=true group=true)
39 +slot('body')= 'qwertzuiop'
40 +slot('time')= '12:36'
41 +message()(theme='t-up' compact=true group=true)
42 +slot('body')= '🐈️🦊️'
43 +slot('time')= '12:38'
44 +message()(theme='t-up' compact=true group=true)
45 +slot('body')= loremIpsum
46 +slot('time')= '12:39'
47
48 .c-box.l-overflow(style='resize: vertical')
49 +message-group('Volpeon')(compact=true right=true)
50 strong.l-message-group__message= 'Volpeon'
51 +message()(theme='t-up' compact=true group=true)
52 +slot('body')= 'Compact bubble messages test'
53 +slot('time')= '12:34'
54 +message()(theme='t-up' compact=true group=true)
55 +slot('body')= loremIpsum
56 +slot('time')= '12:35'
57 +message()(theme='t-up' compact=true group=true)
58 +slot('body')= 'qwertzuiop'
59 +slot('time')= '12:36'
60 +message()(theme='t-up' compact=true group=true)
61 +slot('body')= '🐈️🦊️'
62 +slot('time')= '12:38'
63 +message()(theme='t-up' compact=true group=true)
64 +slot('body')= loremIpsum
65 +slot('time')= '12:39'
66
67 .c-box.l-overflow(style='resize: vertical')
68 +message-group('Volpeon')
69 +message()(theme='t-up' group=true)
70 +slot('header')
71 .l-media.l-media--flush
72 .l-media__block.l-media__block--main
73 strong= 'Volpeon'
74 small.u-ml-100= '@volpeon@mk.vulpes.one'
75 small.l-media__block
76 = '5 minutes ago'
77 +icon('lock')(class='u-ml-100')
78 +slot('body')= 'Full width bubble messages test'
79 +message()(theme='t-up' group=true)
80 +slot('body')= loremIpsum
81 +message()(theme='t-up' group=true)
82 +slot('body')= 'qwertzuiop'
83 +message()(theme='t-up' group=true)
84 +slot('body')= '🐈️🦊️'
85 +message()(theme='t-up' group=true)
86 +slot('body')= loremIpsum
87
88 .c-box.l-overflow(style='resize: vertical')
89 +sample-message-group()(merge=false)= 'Inline message group merging'
90 +sample-message-group()(merge=true)= 'qwertzuiop'
91 +sample-message-group()(merge=true)= '🐈️🦊️'
92 +sample-message-group()(merge=true)= loremIpsum
93
94 .c-box.l-overflow(style='resize: vertical')
95 +sample-message-group()(theme='t-up' merge=false)= 'Bubble message group merging'
96 +sample-message-group()(theme='t-up' merge=true)= 'qwertzuiop'
97 +sample-message-group()(theme='t-up' merge=true)= '🐈️🦊️'
98 +sample-message-group()(theme='t-up' merge=true)= loremIpsum
99
100 .c-box.l-overflow(style='resize: vertical')
101 +sample-message-group()(theme='t-up' merge=false compact=true arrow=true left=true)= 'Bubble message group merging'
102 +sample-message-group()(theme='t-up' merge=true compact=true arrow=true left=true)= 'qwertzuiop'
103 +sample-message-group()(theme='t-up' merge=true compact=true arrow=true left=true)= '🐈️🦊️'
104 +sample-message-group()(theme='t-up' merge=true compact=true arrow=true left=true)= loremIpsum
105
106 .c-box.l-overflow(style='resize: vertical')
107 +sample-message-group()(theme='t-up' merge=false compact=true arrow=true right=true)= 'Bubble message group merging'
108 +sample-message-group()(theme='t-up' merge=true compact=true arrow=true right=true)= 'qwertzuiop'
109 +sample-message-group()(theme='t-up' merge=true compact=true arrow=true right=true)= '🐈️🦊️'
110 +sample-message-group()(theme='t-up' merge=true compact=true arrow=true right=true)= loremIpsum
diff --git a/tpl/views/bubble.pug b/tpl/views/message.pug
index 84d0912..f256e41 100644
--- a/tpl/views/bubble.pug
+++ b/tpl/views/message.pug
@@ -1,22 +1,22 @@
1mixin view-bubble 1mixin view-message
2 +view('bubble', 'Bubble') 2 +view('message', 'Message')
3 .c-box 3 .c-box
4 +bubble('Volpeon')(compact=true) 4 +message('Volpeon')(compact=true theme='t-up')
5 +slot('body')= loremIpsum 5 +slot('body')= loremIpsum
6 +slot('time') 6 +slot('time')
7 = '12:34' 7 = '12:34'
8 +icon('lock')(class='u-ml-100') 8 +icon('lock')(class='u-ml-100')
9 9
10 .c-box 10 .c-box
11 +bubble('Volpeon')(compact=true, highlight=true) 11 +message('Volpeon')(compact=true highlight=true theme='t-up')
12 +slot('body')= loremIpsum 12 +slot('body')= loremIpsum
13 13
14 .c-box.u-themed.t-hi 14 .c-box.u-themed.t-hi
15 +bubble()(compact=true theme='t-def') 15 +message()(compact=true bubble=true theme='t-def')
16 +slot('body')= loremIpsum 16 +slot('body')= loremIpsum
17 17
18 .c-box.l-overflow(style='resize: vertical') 18 .c-box.l-overflow(style='resize: vertical')
19 +bubble('Volpeon')(avatar=true) 19 +message('Volpeon')(avatar=true theme='t-up')
20 +slot('header') 20 +slot('header')
21 .l-media.l-media--flush 21 .l-media.l-media--flush
22 .l-media__block.l-media__block--main 22 .l-media__block.l-media__block--main
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-21 21:05:16 +0000