diff options
Diffstat (limited to 'tpl/views')
-rw-r--r-- | tpl/views/bubble-group.pug | 59 | ||||
-rw-r--r-- | tpl/views/message-group.pug | 110 | ||||
-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 @@ | |||
1 | mixin 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 @@ | |||
1 | mixin 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 | |||
10 | mixin 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 @@ | |||
1 | mixin view-bubble | 1 | mixin 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 |