From 679b9b108101b67ad56b4fdf35ec2bd0568d8d84 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 9 Nov 2023 15:44:54 +0100 Subject: Renamed "bubble" to "message", added message group merging --- src/_layouts.scss | 2 +- src/_objects.scss | 2 +- src/layouts/_bubble-group.scss | 109 ------------------------------- src/layouts/_message-group.scss | 138 ++++++++++++++++++++++++++++++++++++++++ src/objects/_bubble.scss | 45 ------------- src/objects/_message.scss | 51 +++++++++++++++ tpl/index.pug | 12 ++-- tpl/objects/bubble-group.pug | 17 ----- tpl/objects/bubble.pug | 52 --------------- tpl/objects/message-group.pug | 19 ++++++ tpl/objects/message.pug | 54 ++++++++++++++++ tpl/views/bubble-group.pug | 59 ----------------- tpl/views/bubble.pug | 31 --------- tpl/views/message-group.pug | 110 ++++++++++++++++++++++++++++++++ tpl/views/message.pug | 31 +++++++++ 15 files changed, 411 insertions(+), 321 deletions(-) delete mode 100644 src/layouts/_bubble-group.scss create mode 100644 src/layouts/_message-group.scss delete mode 100644 src/objects/_bubble.scss create mode 100644 src/objects/_message.scss delete mode 100644 tpl/objects/bubble-group.pug delete mode 100644 tpl/objects/bubble.pug create mode 100644 tpl/objects/message-group.pug create mode 100644 tpl/objects/message.pug delete mode 100644 tpl/views/bubble-group.pug delete mode 100644 tpl/views/bubble.pug create mode 100644 tpl/views/message-group.pug create mode 100644 tpl/views/message.pug diff --git a/src/_layouts.scss b/src/_layouts.scss index cc8b1c5..26cfe3f 100644 --- a/src/_layouts.scss +++ b/src/_layouts.scss @@ -4,4 +4,4 @@ @use 'layouts/form'; @use 'layouts/flex'; @use 'layouts/overflow'; -@use 'layouts/bubble-group'; +@use 'layouts/message-group'; diff --git a/src/_objects.scss b/src/_objects.scss index faa45bd..578de0c 100644 --- a/src/_objects.scss +++ b/src/_objects.scss @@ -13,7 +13,7 @@ @use 'objects/overflow-button'; @use 'objects/status-indicator'; @use 'objects/avatar'; -@use 'objects/bubble'; +@use 'objects/message'; @use 'objects/action-menu'; @use 'objects/menu'; @use 'objects/icon-nav'; 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; + } + } + } + } + } + } +} diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss deleted file mode 100644 index d91b6d1..0000000 --- a/src/objects/_bubble.scss +++ /dev/null @@ -1,45 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@include iro.props-namespace('bubble') { - @include iro.props-store(( - --dims: ( - --pad-x: fn.global-dim(--size --200), - --pad-y: fn.global-dim(--size --150), - --rounding: 0, - - --75: ( - --pad-x: fn.global-dim(--size --150), - --pad-y: fn.global-dim(--size --85), - ), - ) - ), 'dims'); - - @include iro.props-store(( - --colors: ( - --highlight: fn.global-color(--fg-lo), - ), - ), 'colors'); - - @include iro.bem-object(iro.props-namespace()) { - position: relative; - padding: fn.dim(--pad-y) fn.dim(--pad-x); - border-radius: fn.dim(--rounding); - background-color: fn.global-color(--bg); - color: fn.global-color(--fg); - - @include iro.bem-modifier('highlight') { - box-shadow: -3px 0 0 0 fn.color(--highlight); - } - - @include iro.bem-elem('suffix') { - margin-left: 1em; - float: right; - transform: translate(.2em, .2em); - } - - @include iro.bem-modifier('75') { - padding: fn.dim(--75 --pad-y) fn.dim(--75 --pad-x); - } - } -} diff --git a/src/objects/_message.scss b/src/objects/_message.scss new file mode 100644 index 0000000..283ce26 --- /dev/null +++ b/src/objects/_message.scss @@ -0,0 +1,51 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('message') { + @include iro.props-store(( + --dims: ( + --bubble: ( + --pad-x: fn.global-dim(--size --200), + --pad-y: fn.global-dim(--size --150), + --rounding: 0, + + --75: ( + --pad-x: fn.global-dim(--size --150), + --pad-y: fn.global-dim(--size --85), + ), + ), + ) + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --highlight: fn.global-color(--fg-lo), + ), + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + @include iro.bem-elem('suffix') { + margin-left: 1em; + float: right; + } + + @include iro.bem-modifier('bubble') { + padding: fn.dim(--bubble --pad-y) fn.dim(--bubble --pad-x); + border-radius: fn.dim(--bubble --rounding); + background-color: fn.global-color(--bg); + color: fn.global-color(--fg); + + @include iro.bem-elem('suffix') { + transform: translate(.2em, .2em); + } + + @include iro.bem-modifier('highlight') { + box-shadow: -3px 0 0 0 fn.color(--highlight); + } + + @include iro.bem-modifier('75') { + padding: fn.dim(--bubble --75 --pad-y) fn.dim(--bubble --75 --pad-x); + } + } + } +} diff --git a/tpl/index.pug b/tpl/index.pug index d87fec8..de481f2 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -30,8 +30,8 @@ include objects/lightbox.pug include objects/list-group.pug include objects/table.pug include objects/alert.pug -include objects/bubble.pug -include objects/bubble-group.pug +include objects/message.pug +include objects/message-group.pug mixin view(id, title) - @@ -78,8 +78,8 @@ include views/lightbox.pug include views/list-group.pug include views/table.pug include views/alert.pug -include views/bubble.pug -include views/bubble-group.pug +include views/message.pug +include views/message-group.pug include views/emoji.pug @@ -122,8 +122,8 @@ html +view-list-group +view-table +view-alert - +view-bubble - +view-bubble-group + +view-message + +view-message-group .c-sidebar.l-overflow.u-themed.t-up.u-p-75 +menu diff --git a/tpl/objects/bubble-group.pug b/tpl/objects/bubble-group.pug deleted file mode 100644 index 4fcb1a4..0000000 --- a/tpl/objects/bubble-group.pug +++ /dev/null @@ -1,17 +0,0 @@ -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) { - classes[attributes.class] = true - } - - section(class=classes) - .l-bubble-group__avatar.u-p-sticky-top - +avatar= user.slice(0, 2) - block diff --git a/tpl/objects/bubble.pug b/tpl/objects/bubble.pug deleted file mode 100644 index 6a3ea8b..0000000 --- a/tpl/objects/bubble.pug +++ /dev/null @@ -1,52 +0,0 @@ -mixin bubble(user) - - const slots = {} - - mixin slot(key) - - slots[key] = block - - - - block ? block() : undefined - - let classes = { - 'o-bubble': true, - 'o-bubble--75': attributes.compact, - 'o-bubble--highlight': attributes.highlight, - 't-up': !attributes.theme - } - if (attributes.class) { - classes[attributes.class] = true - } - if (attributes.theme) { - classes[attributes.theme] = true - } - - let headerClasses = { - 'o-bubble__header': true, - 'u-mb-50': !attributes.compact, - } - - mixin content - if slots.header - header(class=headerClasses) - - slots.header() - else if user - header(class=headerClasses) - strong= user - span.s-links.s-links--colored - - slots.body() - if slots.time - small.o-bubble__suffix - - slots.time() - if slots.footer - footer.o-bubble__footer - - slots.footer() - - article(class=classes) - if user && attributes.avatar - .l-media.l-media--flush.l-flex--align-start - .l-media__block.u-mt-50.u-p-sticky-top - +avatar= user.slice(0, 2) - .l-media__block.l-media__block--main - +content - else - +content diff --git a/tpl/objects/message-group.pug b/tpl/objects/message-group.pug new file mode 100644 index 0000000..e5e055c --- /dev/null +++ b/tpl/objects/message-group.pug @@ -0,0 +1,19 @@ +mixin message-group(user) + - + let classes = { + 'l-message-group': true, + 'l-message-group--compact': attributes.compact, + 'l-message-group--left': attributes.left, + 'l-message-group--right': attributes.right, + 'l-message-group--arrow': attributes.arrow, + 'l-message-group--group': attributes.group, + 'l-message-group--merge': attributes.merge + } + if (attributes.class) { + classes[attributes.class] = true + } + + section(class=classes) + .l-message-group__avatar.u-p-sticky-top + +avatar= user.slice(0, 2) + block diff --git a/tpl/objects/message.pug b/tpl/objects/message.pug new file mode 100644 index 0000000..d644347 --- /dev/null +++ b/tpl/objects/message.pug @@ -0,0 +1,54 @@ +mixin message(user) + - const slots = {} + + mixin slot(key) + - slots[key] = block + + - + block ? block() : undefined + + let classes = { + 'o-message': true, + 'o-message--bubble': attributes.bubble || !!attributes.theme, + 'o-message--75': attributes.compact, + 'o-message--highlight': attributes.highlight, + 'l-message-group__message': attributes.group + } + if (attributes.class) { + classes[attributes.class] = true + } + if (attributes.theme) { + classes[attributes.theme] = true + } + + let headerClasses = { + 'o-message__header': true, + 'l-message-group__merge-hide': true, + 'u-mb-50': !attributes.compact, + } + + mixin content + if slots.header + header(class=headerClasses) + - slots.header() + else if user + header(class=headerClasses) + strong= user + span.s-links.s-links--colored + - slots.body() + if slots.time + small.o-message__suffix + - slots.time() + if slots.footer + footer.o-message__footer + - slots.footer() + + article(class=classes) + if user && attributes.avatar + .l-media.l-media--flush.l-flex--align-start + .l-media__block.u-mt-50.u-p-sticky-top + +avatar= user.slice(0, 2) + .l-media__block.l-media__block--main + +content + else + +content 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 @@ -mixin view-bubble-group - +view('bubble-group', 'Bubble group') - .c-box.l-overflow(style='resize: vertical') - +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' - +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='resize: vertical') - +bubble-group('Volpeon')(compact=true right=true) - strong= 'Volpeon' - +bubble()(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='resize: vertical') - +bubble-group('Volpeon') - +bubble()(class='l-bubble-group__bubble') - +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 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 deleted file mode 100644 index 84d0912..0000000 --- a/tpl/views/bubble.pug +++ /dev/null @@ -1,31 +0,0 @@ -mixin view-bubble - +view('bubble', 'Bubble') - .c-box - +bubble('Volpeon')(compact=true) - +slot('body')= loremIpsum - +slot('time') - = '12:34' - +icon('lock')(class='u-ml-100') - - .c-box - +bubble('Volpeon')(compact=true, highlight=true) - +slot('body')= loremIpsum - - .c-box.u-themed.t-hi - +bubble()(compact=true theme='t-def') - +slot('body')= loremIpsum - - .c-box.l-overflow(style='resize: vertical') - +bubble('Volpeon')(avatar=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') - = loremIpsum - = loremIpsum - = 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 @@ +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 diff --git a/tpl/views/message.pug b/tpl/views/message.pug new file mode 100644 index 0000000..f256e41 --- /dev/null +++ b/tpl/views/message.pug @@ -0,0 +1,31 @@ +mixin view-message + +view('message', 'Message') + .c-box + +message('Volpeon')(compact=true theme='t-up') + +slot('body')= loremIpsum + +slot('time') + = '12:34' + +icon('lock')(class='u-ml-100') + + .c-box + +message('Volpeon')(compact=true highlight=true theme='t-up') + +slot('body')= loremIpsum + + .c-box.u-themed.t-hi + +message()(compact=true bubble=true theme='t-def') + +slot('body')= loremIpsum + + .c-box.l-overflow(style='resize: vertical') + +message('Volpeon')(avatar=true theme='t-up') + +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') + = loremIpsum + = loremIpsum + = loremIpsum -- cgit v1.2.3-70-g09d2