From bdd534a2fea536f4143d29dd26138a4705c1f825 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Tue, 8 Mar 2022 22:00:33 +0100
Subject: Improved dialog
---
tpl/index.pug | 28 +++++++++++++++++++++-------
tpl/objects/dialog.pug | 36 ++++++++++++++++++++++++++++++------
tpl/objects/menu.pug | 7 ++++++-
3 files changed, 57 insertions(+), 14 deletions(-)
(limited to 'tpl')
diff --git a/tpl/index.pug b/tpl/index.pug
index 623a513..98aec2e 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -533,16 +533,30 @@ html
+box
+backdrop
+dialog('Lorem ipsum')
- = loremIpsum
+ +slot('body')
+ = loremIpsum
+box
+backdrop
- +dialog('Lorem ipsum')
- p.u-mt-0= loremIpsum
- p= loremIpsum
- p= loremIpsum
- p= loremIpsum
- p= loremIpsum
+ +dialog('Lorem ipsum')(bodyClass='l-overflow')
+ +slot('body')
+ p.u-mt-0= loremIpsum
+ p= loremIpsum
+ p= loremIpsum
+ p= loremIpsum
+ p= loremIpsum
+
+ +box
+ +backdrop
+ +dialog('Lorem ipsum')(noRule=true)
+ +slot('sidebar')
+ +menu(style={ 'min-width': '10em' })
+ +menu-header= '#channel'
+ +menu-item(icon='bookmark', selected=true)= 'Bookmark'
+ +menu-item(icon='tags')= 'Tags'
+ +slot('body')
+ p.u-mt-0= loremIpsum
+
//-----------------------------------------
diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug
index 0ee52df..3a47b2f 100644
--- a/tpl/objects/dialog.pug
+++ b/tpl/objects/dialog.pug
@@ -4,15 +4,39 @@ include heading.pug
include action-button.pug
mixin dialog(title)
- .o-dialog.t-raised
+ - const slots = {}
+
+ mixin slot(key)
+ - slots[key] = block
+
+ -
+ block ? block() : undefined
+
+ let classes = {
+ 'o-dialog': true,
+ 't-raised': true,
+ 'o-dialog--split': !!slots.sidebar,
+ }
+
+ let bodyClass = {
+ 'o-dialog__body': true
+ }
+ if (attributes.bodyClass) {
+ bodyClass[attributes.bodyClass] = true;
+ }
+
+ div(class=classes)
+ if slots.sidebar
+ .o-dialog__sidebar
+ - slots.sidebar()
header.o-dialog__header
+div-heading('lg')(class='o-dialog__title')
= title
- +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn')
- +rule('medium')(class='o-dialog__rule')
- section.o-dialog__body
- block
+ section(class=bodyClass)
+ +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn')
+ if slots.body
+ - slots.body()
footer.o-dialog__footer.l-button-group
+a-button(outline=true)= 'Cancel'
= ' '
- +a-button(outline=true variant='primary')= 'Continue'
+ +a-button(variant='accent')= 'Continue'
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
index 0a654ce..84321d7 100644
--- a/tpl/objects/menu.pug
+++ b/tpl/objects/menu.pug
@@ -3,7 +3,12 @@ include status-indicator.pug
include action-button.pug
mixin menu
- .o-menu
+ -
+ let classes = {
+ 'o-menu': true,
+ }
+
+ div(class=classes)&attributes(attributes)
block
mixin menu-item
--
cgit v1.2.3-70-g09d2