Improved dialog

3 files changed, 57 insertions, 14 deletions

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