From 679b9b108101b67ad56b4fdf35ec2bd0568d8d84 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Thu, 9 Nov 2023 15:44:54 +0100
Subject: Renamed "bubble" to "message", added message group merging
---
src/layouts/_bubble-group.scss | 109 -------------------------------
src/layouts/_message-group.scss | 138 ++++++++++++++++++++++++++++++++++++++++
2 files changed, 138 insertions(+), 109 deletions(-)
delete mode 100644 src/layouts/_bubble-group.scss
create mode 100644 src/layouts/_message-group.scss
(limited to 'src/layouts')
diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss
deleted file mode 100644
index e4bc666..0000000
--- a/src/layouts/_bubble-group.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('bubble-group') {
- @include iro.props-store((
- --dims: (
- --spacing-x: fn.global-dim(--size --225),
- --spacing-y: fn.global-dim(--size --150),
- --arrow-size: fn.global-dim(--size --100),
-
- --compact: (
- --spacing-x: fn.global-dim(--size --225),
- --spacing-y: fn.global-dim(--size --50),
- )
- )
- ), 'dims');
-
- @include iro.bem-layout(iro.props-namespace()) {
- display: grid;
- grid-template-columns: auto 1fr;
- grid-auto-rows: auto;
- grid-template-areas: 'avatar bubble' 'avatar .';
- align-items: flex-start;
- gap: 0 fn.dim(--spacing-x);
-
- @include iro.bem-elem('avatar') {
- grid-area: avatar;
- }
-
- @include iro.bem-elem('bubble') {
- grid-column: bubble;
- box-sizing: border-box;
- min-width: 0;
- max-width: 100%;
-
- &::before {
- 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;
- }
-
- @include iro.bem-next-twin-elem {
- margin-top: fn.dim(--spacing-y);
- }
- }
-
- @include iro.bem-modifier('right') {
- @include iro.bem-elem('bubble') {
- &::before {
- right: calc(-1 * fn.dim(--arrow-size));
- left: auto;
- border-right-color: transparent;
- border-left-color: fn.global-color(--bg);
- }
- }
- }
-
- @include iro.bem-modifier('compact') {
- gap: 0 fn.dim(--compact --spacing-x);
-
- @include iro.bem-modifier('left') {
- justify-items: start;
- }
-
- @include iro.bem-modifier('right') {
- justify-items: end;
- }
-
- @include iro.bem-elem('bubble') {
- @include iro.bem-next-twin-elem {
- margin-top: fn.dim(--compact --spacing-y);
- }
- }
- }
-
- @include iro.bem-modifier('right') {
- grid-template-columns: 1fr auto;
- grid-template-areas: 'bubble avatar' '. avatar';
- }
-
- @include iro.bem-modifier('no-avatar') {
- grid-template-columns: 1fr;
- grid-template-areas: 'bubble';
-
- @include iro.bem-elem('avatar') {
- display: none;
- }
- }
-
- @include iro.bem-modifier('arrow') {
- @include iro.bem-elem('bubble') {
- &::before {
- display: block;
- }
-
- @include iro.bem-next-twin-elem {
- &::before {
- display: none;
- }
- }
- }
- }
- }
-}
diff --git a/src/layouts/_message-group.scss b/src/layouts/_message-group.scss
new file mode 100644
index 0000000..d95c9e8
--- /dev/null
+++ b/src/layouts/_message-group.scss
@@ -0,0 +1,138 @@
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+
+@use '../objects/message';
+
+@include iro.props-namespace('message-group') {
+ @include iro.props-store((
+ --dims: (
+ --spacing-x: fn.global-dim(--size --225),
+ --spacing-y: fn.global-dim(--size --150),
+ --arrow-size: fn.global-dim(--size --100),
+
+ --compact: (
+ --spacing-x: fn.global-dim(--size --225),
+ --spacing-y: fn.global-dim(--size --50),
+ )
+ )
+ ), 'dims');
+
+ @include iro.bem-layout(iro.props-namespace()) {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ grid-auto-rows: auto;
+ grid-template-areas: 'avatar message' 'avatar .';
+ align-items: flex-start;
+ gap: 0 fn.dim(--spacing-x);
+
+ @include iro.bem-elem('avatar') {
+ grid-area: avatar;
+ height: 0;
+ }
+
+ @include iro.bem-elem('message') {
+ grid-column: message;
+ box-sizing: border-box;
+ min-width: 0;
+ max-width: 100%;
+
+ &::before {
+ 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;
+ }
+
+ @include iro.bem-next-twin-elem {
+ margin-top: fn.dim(--spacing-y);
+ }
+ }
+
+ @include iro.bem-modifier('right') {
+ @include iro.bem-elem('message') {
+ &::before {
+ right: calc(-1 * fn.dim(--arrow-size));
+ left: auto;
+ border-right-color: transparent;
+ border-left-color: fn.global-color(--bg);
+ }
+ }
+ }
+
+ @include iro.bem-modifier('compact') {
+ gap: 0 fn.dim(--compact --spacing-x);
+
+ @include iro.bem-modifier('left') {
+ justify-items: start;
+ }
+
+ @include iro.bem-modifier('right') {
+ justify-items: end;
+ }
+
+ @include iro.bem-elem('message') {
+ @include iro.bem-next-twin-elem {
+ margin-top: fn.dim(--compact --spacing-y);
+ }
+ }
+ }
+
+ @include iro.bem-modifier('right') {
+ grid-template-columns: 1fr auto;
+ grid-template-areas: 'message avatar' '. avatar';
+ }
+
+ @include iro.bem-modifier('no-avatar') {
+ grid-template-columns: 1fr;
+ grid-template-areas: 'message';
+
+ @include iro.bem-elem('avatar') {
+ display: none;
+ }
+ }
+
+ @include iro.bem-modifier('arrow') {
+ @include iro.bem-elem('message') {
+ &::before {
+ display: block;
+ }
+
+ @include iro.bem-next-twin-elem {
+ &::before {
+ display: none;
+ }
+ }
+ }
+ }
+
+ & + & {
+ @include iro.bem-modifier('merge') {
+ margin-top: fn.dim(--spacing-y);
+
+ @include iro.bem-elem('avatar') {
+ visibility: hidden;
+ }
+
+ @include iro.bem-modifier('compact') {
+ margin-top: fn.dim(--compact --spacing-y);
+ }
+
+ @include iro.bem-elem('merge-hide') {
+ display: none;
+ }
+
+ @include iro.bem-modifier('arrow') {
+ @include iro.bem-elem('message') {
+ &::before {
+ display: none;
+ }
+ }
+ }
+ }
+ }
+ }
+}
--
cgit v1.2.3-70-g09d2