1 files changed, 110 insertions, 0 deletions

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 @@
+mixin sample-message-group
+    +message-group('Volpeon')&attributes(attributes)
+        +message()(theme=attributes.theme group=true compact=attributes.compact)
+            +slot('header')
+                strong= 'Volpeon'
+            +slot('body')
+                block
+            +slot('time')= '12:34'
+
+mixin view-message-group
+    +view('message-group', 'Message group')
+        .c-box.l-overflow(style='resize: vertical')
+            +message-group('Volpeon')
+                +message('Volpeon')(group=true)
+                    +slot('body')= 'Inline messages test'
+                    +slot('time')= '12:35'
+                +message()(group=true)
+                    +slot('body')= loremIpsum
+                    +slot('time')= '12:35'
+                +message()(group=true)
+                    +slot('body')= 'qwertzuiop'
+                    +slot('time')= '12:35'
+                +message()(group=true)
+                    +slot('body')= '🐈️🦊️'
+                    +slot('time')= '12:35'
+                +message()(group=true)
+                    +slot('body')= loremIpsum
+                    +slot('time')= '12:35'
+
+        .c-box.l-overflow(style='resize: vertical')
+            +message-group('Volpeon')(compact=true arrow=true left=true)
+                +message('Volpeon')(theme='t-up' compact=true group=true)
+                    +slot('body')= 'Compact bubble messages test'
+                    +slot('time')= '12:34'
+                +message()(theme='t-up' compact=true group=true)
+                    +slot('body')= loremIpsum
+                    +slot('time')= '12:35'
+                +message()(theme='t-up' compact=true group=true)
+                    +slot('body')= 'qwertzuiop'
+                    +slot('time')= '12:36'
+                +message()(theme='t-up' compact=true group=true)
+                    +slot('body')= '🐈️🦊️'
+                    +slot('time')= '12:38'
+                +message()(theme='t-up' compact=true group=true)
+                    +slot('body')= loremIpsum
+                    +slot('time')= '12:39'
+
+        .c-box.l-overflow(style='resize: vertical')
+            +message-group('Volpeon')(compact=true right=true)
+                strong.l-message-group__message= 'Volpeon'
+                +message()(theme='t-up' compact=true group=true)
+                    +slot('body')= 'Compact bubble messages test'
+                    +slot('time')= '12:34'
+                +message()(theme='t-up' compact=true group=true)
+                    +slot('body')= loremIpsum
+                    +slot('time')= '12:35'
+                +message()(theme='t-up' compact=true group=true)
+                    +slot('body')= 'qwertzuiop'
+                    +slot('time')= '12:36'
+                +message()(theme='t-up' compact=true group=true)
+                    +slot('body')= '🐈️🦊️'
+                    +slot('time')= '12:38'
+                +message()(theme='t-up' compact=true group=true)
+                    +slot('body')= loremIpsum
+                    +slot('time')= '12:39'
+
+        .c-box.l-overflow(style='resize: vertical')
+            +message-group('Volpeon')
+                +message()(theme='t-up' group=true)
+                    +slot('header')
+                        .l-media.l-media--flush
+                            .l-media__block.l-media__block--main
+                                strong= 'Volpeon'
+                                small.u-ml-100= '@volpeon@mk.vulpes.one'
+                            small.l-media__block
+                                = '5 minutes ago'
+                                +icon('lock')(class='u-ml-100')
+                    +slot('body')= 'Full width bubble messages test'
+                +message()(theme='t-up' group=true)
+                    +slot('body')= loremIpsum
+                +message()(theme='t-up' group=true)
+                    +slot('body')= 'qwertzuiop'
+                +message()(theme='t-up' group=true)
+                    +slot('body')= '🐈️🦊️'
+                +message()(theme='t-up' group=true)
+                    +slot('body')= loremIpsum
+
+        .c-box.l-overflow(style='resize: vertical')
+            +sample-message-group()(merge=false)= 'Inline message group merging'
+            +sample-message-group()(merge=true)= 'qwertzuiop'
+            +sample-message-group()(merge=true)= '🐈️🦊️'
+            +sample-message-group()(merge=true)= loremIpsum
+
+        .c-box.l-overflow(style='resize: vertical')
+            +sample-message-group()(theme='t-up' merge=false)= 'Bubble message group merging'
+            +sample-message-group()(theme='t-up' merge=true)= 'qwertzuiop'
+            +sample-message-group()(theme='t-up' merge=true)= '🐈️🦊️'
+            +sample-message-group()(theme='t-up' merge=true)= loremIpsum
+
+        .c-box.l-overflow(style='resize: vertical')
+            +sample-message-group()(theme='t-up' merge=false compact=true arrow=true left=true)= 'Bubble message group merging'
+            +sample-message-group()(theme='t-up' merge=true compact=true arrow=true left=true)= 'qwertzuiop'
+            +sample-message-group()(theme='t-up' merge=true compact=true arrow=true left=true)= '🐈️🦊️'
+            +sample-message-group()(theme='t-up' merge=true compact=true arrow=true left=true)= loremIpsum
+
+        .c-box.l-overflow(style='resize: vertical')
+            +sample-message-group()(theme='t-up' merge=false compact=true arrow=true right=true)= 'Bubble message group merging'
+            +sample-message-group()(theme='t-up' merge=true compact=true arrow=true right=true)= 'qwertzuiop'
+            +sample-message-group()(theme='t-up' merge=true compact=true arrow=true right=true)= '🐈️🦊️'
+            +sample-message-group()(theme='t-up' merge=true compact=true arrow=true right=true)= loremIpsum