Improved bubbles

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 @@
 mixin bubble-group(user)
     -
-        let first = true 
-
-    mixin bubble-group-bubble(time)
-        +bubble(time, first ? user : undefined)(class='l-bubble-group__bubble')
-            block
-        -
-            first = false
-
-    -
         let classes = {
-            'l-bubble-group': true
+            'l-bubble-group':          true,
+            'l-bubble-group--compact': attributes.compact,
+            'l-bubble-group--arrow':   attributes.arrow
         }
         if (attributes.class) {
             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 @@
-mixin bubble(time, user)
+mixin bubble(user)
+    - const slots = {}
+
+    mixin slot(key)
+        - slots[key] = block
+
     -
+        block ? block() : undefined
+
         let classes = {
-            'o-bubble': true,
-            't-raised':         true
+            'o-bubble':          true,
+            'o-bubble--compact': attributes.compact,
+            't-raised':          !attributes.theme
         }
         if (attributes.class) {
             classes[attributes.class] = true
         }
+        if (attributes.theme) {
+            classes[attributes.theme] = true
+        }
 
     article(class=classes)
-        if user
-            header.o-bubble__user
+        if slots.header
+            header.o-bubble__header
+                - slots.header()
+        else if user
+            header.o-bubble__header
                 strong= user
-        span.s-colored-links
-            block
-        small.o-bubble__time
-            = time
-            if attributes.scope
-                = ' '
-                +icon(attributes.scope)
+        div.o-bubble__body.s-colored-links
+            - slots.body()
+            if slots.time
+                small.o-bubble__time
+                    - slots.time()
+        if slots.footer
+            footer.o-bubble__footer
+                - 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 @@
 mixin view-bubble-group
     +view('bubble-group', 'Bubble group')
-        .c-box.l-overflow(style='max-height: 13em')
+        .c-box.l-overflow(style='max-height: 15em')
+            +bubble-group('Volpeon')(compact=true arrow=true)
+                +bubble('Volpeon')(compact=true class='l-bubble-group__bubble')
+                    +slot('body')= 'Compact bubbles test'
+                    +slot('time')= '12:34'
+                +bubble()(compact=true class='l-bubble-group__bubble')
+                    +slot('body')= loremIpsum
+                    +slot('time')= '12:35'
+                +bubble()(compact=true class='l-bubble-group__bubble')
+                    +slot('body')= 'qwertzuiop'
+                    +slot('time')= '12:36'
+                +bubble()(compact=true class='l-bubble-group__bubble')
+                    +slot('body')= '🐈️🦊️'
+                    +slot('time')= '12:38'
+                +bubble()(compact=true class='l-bubble-group__bubble')
+                    +slot('body')= loremIpsum
+                    +slot('time')= '12:39'
+
+        .c-box.l-overflow(style='max-height: 15em')
             +bubble-group('Volpeon')
-                +bubble-group-bubble('12:34')= loremIpsum
-                +bubble-group-bubble('12:35')= loremIpsum
-                +bubble-group-bubble('12:36')= loremIpsum
-                +bubble-group-bubble('12:38')= loremIpsum
-                +bubble-group-bubble('12:39')= loremIpsum
+                +bubble()(class='l-bubble-group__bubble')
+                    +slot('header')
+                        .l-card.l-card--flush
+                            .l-card__block.l-card__block--main
+                                strong= 'Volpeon'
+                                small.u-ml-100= '@volpeon@mk.vulpes.one'
+                            small.l-card__block
+                                = '5 minutes ago'
+                                +icon('lock')(class='u-ml-100')
+                    +slot('body')= 'Full width bubbles test'
+                +bubble()(class='l-bubble-group__bubble')
+                    +slot('body')= loremIpsum
+                +bubble()(class='l-bubble-group__bubble')
+                    +slot('body')= 'qwertzuiop'
+                +bubble()(class='l-bubble-group__bubble')
+                    +slot('body')= '🐈️🦊️'
+                +bubble()(class='l-bubble-group__bubble')
+                    +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 @@
 mixin view-bubble
     +view('bubble', 'Bubble')
         .c-box
-            +bubble('12:34', 'Volpeon')= loremIpsum
+            +bubble('Volpeon')(compact=true)
+                +slot('body')= loremIpsum
+                +slot('time')
+                    = '12:34'
+                    +icon('lock')(class='u-ml-100')
+
+        .c-box.u-themed.t-hi
+            +bubble()(compact=true theme='t-def')
+                +slot('body')= loremIpsum
 
         .c-box
-            +bubble('12:34', 'Volpeon')(scope='lock')= loremIpsum
+            +bubble()
+                +slot('header')
+                    .l-card.l-card--flush
+                        .l-card__block.l-card__block--main
+                            strong= 'Volpeon'
+                            small.u-ml-100= '@volpeon@mk.vulpes.one'
+                        small.l-card__block
+                            = '5 minutes ago'
+                            +icon('lock')(class='u-ml-100')
+                +slot('body')= loremIpsum