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/index.pug | 16 +++++++++------- 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 +++++++++++++++++++++----------- tpl/views/dialog.pug | 34 ++++++++++++++++++++++++++++++++-- tpl/views/divider.pug | 21 +++++++++++++++++++++ tpl/views/list-group.pug | 8 ++++---- tpl/views/rule.pug | 21 --------------------- tpl/views/text-field.pug | 5 +++-- 14 files changed, 147 insertions(+), 73 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 create mode 100644 tpl/views/divider.pug delete mode 100644 tpl/views/rule.pug (limited to 'tpl') diff --git a/tpl/index.pug b/tpl/index.pug index 400ec64..14bfa10 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -7,7 +7,7 @@ include layouts/container.pug include objects/heading.pug -include objects/rule.pug +include objects/divider.pug include objects/badge.pug include objects/button.pug include objects/text-field.pug @@ -27,14 +27,16 @@ include objects/lightbox.pug include objects/list-group.pug include objects/table.pug include objects/alert.pug +include objects/header.pug +include objects/sidebar.pug mixin view(id, title) - views.push({ id, title }); - +container(padX=true padY=true narrow=true)(class='c-view' id=id) + +container(padX=true padY=true narrow=true class='c-view' id=id) +h1-heading('xl')= title - +rule('medium') + +divider('medium') block mixin user-card(name, hue) @@ -47,7 +49,7 @@ mixin user-card(name, hue) = name include views/heading.pug -include views/rule.pug +include views/divider.pug include views/colored-links.pug include views/badge.pug include views/button.pug @@ -80,9 +82,9 @@ html script(src="script.js") body - .c-content + .c-content.l-overflow +view-heading - +view-rule + +view-divider +view-colored-links +view-badge +view-button @@ -104,7 +106,7 @@ html +view-table +view-alert - .c-sidebar + +sidebar(class='c-sidebar') +menu each view in views +menu-item(tag='a' href='#' + view.id)= view.title 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 diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug index 6aaead5..0b6f8e7 100644 --- a/tpl/views/dialog.pug +++ b/tpl/views/dialog.pug @@ -18,10 +18,40 @@ mixin view-dialog .c-box +backdrop - +dialog('Lorem ipsum')(noRule=true) + +dialog('Tags') + +slot('sidebar-header') + +div-heading('sm')(class='o-dialog__label')= '#channel' + +slot('sidebar') + +menu(style={ 'min-width': '10em' }) + +menu-item(icon='bookmark')= 'Bookmark' + +menu-item(icon='tags', selected=true)= 'Tags' + +menu-item(icon='hash')= 'achannel' + +slot('body') + p.u-mt-0= loremIpsum + + .c-box + +backdrop + +dialog('#channel') + +slot('sidebar') + +menu(style={ 'min-width': '10em' }) + +menu-item(icon='bookmark')= 'Bookmark' + +menu-item(icon='tags', selected=true)= 'Tags' + +menu-item(icon='hash')= 'achannel' + +slot('body') + p.u-mt-0= loremIpsum + + .c-box + +backdrop + +dialog + +slot('header') + .l-card.l-card--flush + .l-card__block.l-flex + +action-button(quiet=true icon='chevron-left') + +action-button(quiet=true icon='chevron-right') + .l-card__block.l-card__block--main + +div-heading('sm')= 'Tags' +slot('sidebar') +menu(style={ 'min-width': '10em' }) - +menu-header= '#channel' +menu-item(icon='bookmark')= 'Bookmark' +menu-item(icon='tags', selected=true)= 'Tags' +menu-item(icon='hash')= 'achannel' diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug new file mode 100644 index 0000000..8c3ec0c --- /dev/null +++ b/tpl/views/divider.pug @@ -0,0 +1,21 @@ +mixin view-divider + +view('divider', 'Divider') + .c-box + +div-heading('lg')= 'Heading' + +divider('strong') + p= loremIpsum + + .c-box + +div-heading('sm')= 'Heading' + +divider('medium') + p= loremIpsum + + .c-box + +div-heading('xs')= 'Heading' + +divider('faint') + p= loremIpsum + + .c-box + +divider('strong')= 'Strong' + +divider('medium')= 'Medium' + +divider('faint')= 'Faint' diff --git a/tpl/views/list-group.pug b/tpl/views/list-group.pug index 970f0fb..9acef31 100644 --- a/tpl/views/list-group.pug +++ b/tpl/views/list-group.pug @@ -9,7 +9,7 @@ mixin view-list-group .c-box +list-group - +list-group-item(action=true)= 'First item' - +list-group-item(action=true)= 'Second item' - +list-group-item(action=true)= 'Third item' - +list-group-item(action=true)= 'Fourth item' + +list-group-item(interactive=true)= 'First item' + +list-group-item(interactive=true)= 'Second item' + +list-group-item(interactive=true)= 'Third item' + +list-group-item(interactive=true)= 'Fourth item' diff --git a/tpl/views/rule.pug b/tpl/views/rule.pug deleted file mode 100644 index 495c804..0000000 --- a/tpl/views/rule.pug +++ /dev/null @@ -1,21 +0,0 @@ -mixin view-rule - +view('rule', 'Rule') - .c-box - +div-heading('lg')= 'Heading' - +rule('strong') - p= loremIpsum - - .c-box - +div-heading('sm')= 'Heading' - +rule('medium') - p= loremIpsum - - .c-box - +div-heading('xs')= 'Heading' - +rule('faint') - p= loremIpsum - - .c-box - +rule('strong')= 'Strong' - +rule('medium')= 'Medium' - +rule('faint')= 'Faint' diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug index 0ba84be..262195d 100644 --- a/tpl/views/text-field.pug +++ b/tpl/views/text-field.pug @@ -14,9 +14,10 @@ mixin view-text-field +text-field(value='Incorrect input' pattern='a+' required=true disabled=true) br div - +text-field(placeholder='Just landed in L.A.') + +text-field(placeholder='Just landed in L.A.' class="u-p-50") +slot('pre') - +action-button(quiet=true selected=true class='l-card__block')= 'Volpeon' + +action-button(quiet=true class='l-card__block')= 'Volpeon' + +divider('vertical')(class='u-ml-50') +slot('post') +action-button(quiet=true icon='smile' class='l-card__block') +action-button(quiet=true icon='send' class='l-card__block') -- cgit v1.2.3-54-g00ecf