From a08dee14bcc07ee31175265cb586e857d44fb12e Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 27 Mar 2022 18:52:27 +0200 Subject: Improved bubbles --- src/_apply-vars.scss | 10 ++++++++++ src/_declare-vars.scss | 2 +- src/layouts/_bubble-group.scss | 21 ++++++++++++++------- src/objects/_bubble.scss | 22 +++++++++++++++------ tpl/objects/bubble-group.pug | 13 +++---------- tpl/objects/bubble.pug | 39 ++++++++++++++++++++++++++------------ tpl/views/bubble-group.pug | 43 ++++++++++++++++++++++++++++++++++++------ tpl/views/bubble.pug | 21 +++++++++++++++++++-- 8 files changed, 127 insertions(+), 44 deletions(-) diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss index 0bdc3a8..052eeb0 100644 --- a/src/_apply-vars.scss +++ b/src/_apply-vars.scss @@ -25,6 +25,16 @@ @include iro.props-assign('palette-dark'); } +@include iro.bem-theme('def') { + @include iro.props-assign('colors'); + @include iro.props-assign('palette-light'); + + @media (prefers-color-scheme: dark) { + @include iro.props-assign('colors-dark'); + @include iro.props-assign('palette-dark'); + } +} + @include iro.bem-theme('hi') { @include iro.props-assign('colors'); @include iro.props-assign('palette-light-hi'); diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss index 883b753..c28cbb2 100644 --- a/src/_declare-vars.scss +++ b/src/_declare-vars.scss @@ -187,7 +187,7 @@ @include iro.props-store(( --colors: ( - --gray: fn.gray-palette(6%), + --gray: fn.gray-palette(5%), ), ), 'palette-dark-hi'); diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss index 4db70d0..7593881 100644 --- a/src/layouts/_bubble-group.scss +++ b/src/layouts/_bubble-group.scss @@ -14,7 +14,6 @@ grid-template-columns: auto 1fr; grid-auto-rows: auto; grid-template-areas: 'avatar bubble'; - justify-items: start; align-items: flex-start; gap: fn.dim(--spacing-y) fn.dim(--spacing-x); @@ -23,16 +22,24 @@ position: sticky; top: 0; justify-self: end; - - @include iro.bem-next-elem('bubble') { - &::before { - display: block; - } - } } @include iro.bem-elem('bubble') { grid-column: bubble; } + + @include iro.bem-modifier('compact') { + justify-items: start; + } + + @include iro.bem-modifier('arrow') { + @include iro.bem-elem('avatar') { + @include iro.bem-next-elem('bubble') { + &::before { + display: block; + } + } + } + } } } diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss index 26746fe..41b26ff 100644 --- a/src/objects/_bubble.scss +++ b/src/objects/_bubble.scss @@ -10,15 +10,24 @@ @include iro.props-store(( --dims: ( - --pad-x: fn.global-dim(--size --150), - --pad-y: fn.global-dim(--size --85), + --pad-x: fn.global-dim(--size --200), + --pad-y: fn.global-dim(--size --150), --rounding: 3px, --arrow-size: fn.global-dim(--size --100), + --spacing: fn.global-dim(--size --100), + + --compact: ( + --pad-x: fn.global-dim(--size --150), + --pad-y: fn.global-dim(--size --85), + ), ) ), 'dims'); @include iro.bem-object(iro.props-namespace()) { + display: flex; position: relative; + flex-direction: column; + gap: fn.dim(--spacing); padding: fn.dim(--pad-y) fn.dim(--pad-x); border-radius: fn.dim(--rounding); background-color: fn.global-color(--bg); @@ -34,15 +43,16 @@ border-bottom-color: transparent; border-left-color: transparent; } - - @include iro.bem-elem('user') { - display: block; - } @include iro.bem-elem('time') { margin-left: 1em; float: right; transform: translate(.2em, .2em); } + + @include iro.bem-modifier('compact') { + gap: 0; + padding: fn.dim(--compact --pad-y) fn.dim(--compact --pad-x); + } } } 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 -- cgit v1.2.3-70-g09d2