From e4255279ff72e5438d297888d808851cdf2178ed Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 26 Mar 2022 14:40:11 +0100 Subject: Lots of updates, especially dialog --- tpl/objects/action-button.pug | 2 +- tpl/objects/dialog.pug | 29 ++++++++++++++++++----------- tpl/objects/divider.pug | 12 ++++++++++++ tpl/objects/header.pug | 12 ++++++++++++ tpl/objects/list-group.pug | 4 ++-- tpl/objects/rule.pug | 12 ------------ tpl/objects/sidebar.pug | 12 ++++++++++++ tpl/objects/text-field.pug | 32 +++++++++++++++++++++----------- 8 files changed, 78 insertions(+), 37 deletions(-) create mode 100644 tpl/objects/divider.pug create mode 100644 tpl/objects/header.pug delete mode 100644 tpl/objects/rule.pug create mode 100644 tpl/objects/sidebar.pug (limited to 'tpl/objects') diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug index 0467bd7..f99d789 100644 --- a/tpl/objects/action-button.pug +++ b/tpl/objects/action-button.pug @@ -4,7 +4,7 @@ mixin action-button - let classes = { 'o-action-button': true, - 'o-action-button--block': attributes.block, + 'u-d-block': attributes.block, 'o-action-button--quiet': attributes.quiet, 'o-action-button--round': attributes.round, 'is-selected': attributes.selected diff --git a/tpl/objects/dialog.pug b/tpl/objects/dialog.pug index 2823e41..2474cc3 100644 --- a/tpl/objects/dialog.pug +++ b/tpl/objects/dialog.pug @@ -1,7 +1,6 @@ -include rule.pug -include button.pug include heading.pug -include action-button.pug +include header.pug +include sidebar.pug mixin dialog(title) - const slots = {} @@ -13,9 +12,7 @@ mixin dialog(title) block ? block() : undefined let classes = { - 'o-dialog': true, - 't-raised': true, - 'o-dialog--split': !!slots.sidebar, + 'o-dialog': true, } let bodyClass = { @@ -26,16 +23,26 @@ mixin dialog(title) } div(class=classes) + if slots['sidebar-header'] + +header(class='o-dialog__sidebar-header') + - slots['sidebar-header']() + if slots.sidebar - .o-dialog__sidebar + +sidebar(class='o-dialog__sidebar') - slots.sidebar() - header.o-dialog__header - +div-heading('md')(class='o-dialog__title') - = title - +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn') + + +header(class='o-dialog__header') + if slots.header + - slots.header() + else + if title + +div-heading('sm')(class='o-dialog__label')= title + +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn') + section(class=bodyClass) if slots.body - slots.body() + footer.o-dialog__footer.l-button-group +a-button(outline=true)= 'Cancel' = ' ' diff --git a/tpl/objects/divider.pug b/tpl/objects/divider.pug new file mode 100644 index 0000000..094df07 --- /dev/null +++ b/tpl/objects/divider.pug @@ -0,0 +1,12 @@ +mixin divider(level) + - + let classes = { + 'o-divider': true, + 'o-divider--labelled': !!block, + ['o-divider--' + level]: true + } + + div(class=classes)&attributes(attributes) + if block + .o-divider__label + block diff --git a/tpl/objects/header.pug b/tpl/objects/header.pug new file mode 100644 index 0000000..4518afc --- /dev/null +++ b/tpl/objects/header.pug @@ -0,0 +1,12 @@ +mixin header + - + let classes = { + 'o-header': true + } + if (attributes.class) { + classes[attributes.class] = true; + } + + header(class=classes) + .o-header__content.t-lowered + block diff --git a/tpl/objects/list-group.pug b/tpl/objects/list-group.pug index 36be264..ad3c212 100644 --- a/tpl/objects/list-group.pug +++ b/tpl/objects/list-group.pug @@ -5,8 +5,8 @@ mixin list-group mixin list-group-item - let classes = { - 'o-list-group__item': true, - 'o-list-group__item--action': attributes.action, + 'o-list-group__item': true, + 'o-list-group__item--interactive': attributes.interactive, } div(class=classes) diff --git a/tpl/objects/rule.pug b/tpl/objects/rule.pug deleted file mode 100644 index b2f3a38..0000000 --- a/tpl/objects/rule.pug +++ /dev/null @@ -1,12 +0,0 @@ -mixin rule(level) - - - let classes = { - 'o-rule': true, - 'o-rule--labelled': !!block, - ['o-rule--' + level]: true - } - - div(class=classes)&attributes(attributes) - if block - .o-rule__label - block diff --git a/tpl/objects/sidebar.pug b/tpl/objects/sidebar.pug new file mode 100644 index 0000000..caa0f1f --- /dev/null +++ b/tpl/objects/sidebar.pug @@ -0,0 +1,12 @@ +mixin sidebar + - + let classes = { + 'o-sidebar': true + } + if (attributes.class) { + classes[attributes.class] = true; + } + + aside(class=classes) + .o-sidebar__content.l-overflow + block diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug index cbdb8c4..673aa27 100644 --- a/tpl/objects/text-field.pug +++ b/tpl/objects/text-field.pug @@ -10,23 +10,33 @@ mixin text-field block ? block() : undefined let classes = { - 'o-text-field': true, - 'o-text-field--ext': attributes.ext, - 'is-invalid': attributes.invalid, - 'is-disabled': attributes.disabled, - 'l-card': !!block, - 'l-card--flush': !!block, - 'l-card--gapless': !!block + 'o-text-field': true, + 'o-text-field--extended': !!block, + 'is-invalid': attributes.invalid, + 'is-disabled': attributes.disabled, + 'l-card': !!block, + 'l-card--flush': !!block, + 'l-card--gapless': !!block + } + if (attributes.class) { + classes[attributes.class] = true; + } + + const attr = { + placeholder: attributes.placeholder, + disabled: attributes.disabled } div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) if !!block if slots.pre - - slots.pre() - input.o-text-field__native.l-card__block.l-card__block--main&attributes(attributes) + .u-d-contents.t-raised + - slots.pre() + input.o-text-field__native.l-card__block.l-card__block--main&attributes(attr) if slots.post - - slots.post() + .u-d-contents.t-raised + - slots.post() .o-text-field__bg else - input.o-text-field__native&attributes(attributes) + input.o-text-field__native&attributes(attr) .o-text-field__bg -- cgit v1.2.3-54-g00ecf