Improved bubble group customization

5 files changed, 44 insertions, 7 deletions

diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss
index 9336b44..6ee5c2e 100644
--- a/src/layouts/_bubble-group.scss
+++ b/src/layouts/_bubble-group.scss
@@ -32,8 +32,20 @@
         }
         
         @include iro.bem-modifier('compact') {
-            justify-items: start;
-            gap:           fn.dim(--compact --spacing-y) fn.dim(--compact --spacing-x);
+            gap: fn.dim(--compact --spacing-y) fn.dim(--compact --spacing-x);
+        
+            @include iro.bem-modifier('left') {
+                justify-items: start;
+            }
+        
+            @include iro.bem-modifier('right') {
+                justify-items: end;
+            }
+        }
+        
+        @include iro.bem-modifier('right') {
+            grid-template-columns: 1fr auto;
+            grid-template-areas:   'bubble avatar';
         }
         
         @include iro.bem-modifier('arrow') {
@@ -44,6 +56,20 @@
                     }
                 }
             }
+        
+            @include iro.bem-modifier('right') {
+                @include iro.bem-elem('avatar') {
+                    @include iro.bem-next-elem('bubble') {
+                        &::before {
+                            display: none;
+                        }
+
+                        &::after {
+                            display: block;
+                        }
+                    }
+                }
+            }
         }
     }
 }
diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss
index fc2044b..477f475 100644
--- a/src/objects/_bubble.scss
+++ b/src/objects/_bubble.scss
@@ -29,15 +29,24 @@
         background-color: fn.global-color(--bg);
         color:            fn.global-color(--fg);
 
-        &::before {
+        &::before,
+        &::after {
             content:             '';
             display:             none;
             position:            absolute;
             top:                 0;
-            left:                calc(-1 * fn.dim(--arrow-size));
             border:              fn.dim(--arrow-size) solid fn.global-color(--bg);
             border-bottom-color: transparent;
-            border-left-color:   transparent;
+        }
+
+        &::before {
+            left:              calc(-1 * fn.dim(--arrow-size));
+            border-left-color: transparent;
+        }
+
+        &::after {
+            right:              calc(-1 * fn.dim(--arrow-size));
+            border-right-color: transparent;
         }
 
         @include iro.bem-modifier('highlight') {
diff --git a/tpl/objects/bubble-group.pug b/tpl/objects/bubble-group.pug
index e6a6d19..4fcb1a4 100644
--- a/tpl/objects/bubble-group.pug
+++ b/tpl/objects/bubble-group.pug
@@ -3,6 +3,8 @@ mixin bubble-group(user)
         let classes = {
             'l-bubble-group':          true,
             'l-bubble-group--compact': attributes.compact,
+            'l-bubble-group--left':    attributes.left,
+            'l-bubble-group--right':   attributes.right,
             'l-bubble-group--arrow':   attributes.arrow
         }
         if (attributes.class) {
diff --git a/tpl/objects/bubble.pug b/tpl/objects/bubble.pug
index 5782ca5..6a3ea8b 100644
--- a/tpl/objects/bubble.pug
+++ b/tpl/objects/bubble.pug
@@ -35,7 +35,7 @@ mixin bubble(user)
         span.s-links.s-links--colored
             - slots.body()
         if slots.time
-            small.o-bubble__time
+            small.o-bubble__suffix
                 - slots.time()
         if slots.footer
             footer.o-bubble__footer
diff --git a/tpl/views/bubble-group.pug b/tpl/views/bubble-group.pug
index 8464bc7..ce00067 100644
--- a/tpl/views/bubble-group.pug
+++ b/tpl/views/bubble-group.pug
@@ -1,7 +1,7 @@
 mixin view-bubble-group
     +view('bubble-group', 'Bubble group')
         .c-box.l-overflow(style='resize: vertical')
-            +bubble-group('Volpeon')(compact=true arrow=true)
+            +bubble-group('Volpeon')(compact=true arrow=true left=true)
                 +bubble('Volpeon')(compact=true class='l-bubble-group__bubble')
                     +slot('body')= 'Compact bubbles test'
                     +slot('time')= '12:34'