From 943ee062fe2c0344165e28f4d612176878159133 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 21 Jul 2025 16:03:52 +0200 Subject: Consolidating button, action-button and badge; change design to have some 3D components --- tpl/objects/action-button.pug | 14 +++++---- tpl/views/action-button.pug | 68 +++++++++++++++++++++++++++++++++++-------- tpl/views/button.pug | 4 +++ 3 files changed, 68 insertions(+), 18 deletions(-) (limited to 'tpl') diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug index e9b6fe3..0ab084e 100644 --- a/tpl/objects/action-button.pug +++ b/tpl/objects/action-button.pug @@ -3,12 +3,14 @@ include icon.pug mixin action-button - let classes = { - 'o-action-button': true, - 'u-d-block': attributes.block, - 'o-action-button--quiet': attributes.quiet, - 'o-action-button--pill': attributes.pill, - 'o-action-button--icon': !!attributes.icon && !block, - 'is-selected': attributes.selected + 'o-action-button': true, + 'u-d-block': attributes.block, + 'o-action-button--secondary': attributes.secondary, + 'o-action-button--quiet': attributes.quiet, + 'o-action-button--pill': attributes.pill, + 'o-action-button--badge': attributes.badge, + 'o-action-button--icon': !!attributes.icon && !block, + 'is-selected': attributes.selected, } if (attributes.theme) { classes['o-action-button--' + attributes.theme] = true diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug index 8fbf9ea..025bd78 100644 --- a/tpl/views/action-button.pug +++ b/tpl/views/action-button.pug @@ -8,8 +8,8 @@ mixin view-action-button +action-button(size='lg')= 'Idle' = ' ' +action-button(size='xl')= 'Idle' - - .c-box + br + br +action-button(icon='trash' size='sm') = ' ' +action-button(icon='trash') @@ -17,6 +17,15 @@ mixin view-action-button +action-button(icon='trash' size='lg') = ' ' +action-button(icon='trash' size='xl') + br + br + +action-button(icon='user' size='sm')= 'Idle' + = ' ' + +action-button(icon='user')= 'Idle' + = ' ' + +action-button(icon='user' size='lg')= 'Idle' + = ' ' + +action-button(icon='user' size='xl')= 'Idle' .c-box +action-button(pill=true size='sm')= 'Idle' @@ -26,8 +35,8 @@ mixin view-action-button +action-button(pill=true size='lg')= 'Idle' = ' ' +action-button(pill=true size='xl')= 'Idle' - - .c-box + br + br +action-button(pill=true icon='trash' size='sm') = ' ' +action-button(pill=true icon='trash') @@ -35,6 +44,15 @@ mixin view-action-button +action-button(pill=true icon='trash' size='lg') = ' ' +action-button(pill=true icon='trash' size='xl') + br + br + +action-button(pill=true icon='user' size='sm')= 'Idle' + = ' ' + +action-button(pill=true icon='user')= 'Idle' + = ' ' + +action-button(pill=true icon='user' size='lg')= 'Idle' + = ' ' + +action-button(pill=true icon='user' size='xl')= 'Idle' .c-box +action-button= 'Label' @@ -42,8 +60,15 @@ mixin view-action-button +action-button(icon='trash')= 'Label' = ' ' +action-button(icon='trash') - - .c-box + br + br + +action-button(secondary=true)= 'Label' + = ' ' + +action-button(secondary=true icon='trash')= 'Label' + = ' ' + +action-button(secondary=true icon='trash') + br + br +action-button(quiet=true)= 'Label' = ' ' +action-button(quiet=true icon='trash')= 'Label' @@ -58,8 +83,8 @@ mixin view-action-button +action-button(disabled=true)= 'Disabled' = ' ' +action-button(selected=true disabled=true)= 'Selected + disabled' - - .c-box + br + br +action-button(quiet=true )= 'Idle' = ' ' +action-button(quiet=true selected=true)= 'Selected' @@ -76,8 +101,8 @@ mixin view-action-button +action-button(pill=true disabled=true)= 'Disabled' = ' ' +action-button(pill=true selected=true disabled=true)= 'Selected + disabled' - - .c-box + br + br +action-button(pill=true quiet=true)= 'Idle' = ' ' +action-button(pill=true quiet=true selected=true)= 'Selected' @@ -86,6 +111,25 @@ mixin view-action-button = ' ' +action-button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled' + each theme, i in ['accent', 'positive', 'negative', 'warning'] + .c-box + +action-button(theme=theme)= 'Idle' + = ' ' + +action-button(theme=theme selected=true)= 'Selected' + = ' ' + +action-button(theme=theme disabled=true)= 'Disabled' + = ' ' + +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled' + br + br + +action-button(theme=theme quiet=true)= 'Idle' + = ' ' + +action-button(theme=theme quiet=true selected=true)= 'Selected' + = ' ' + +action-button(theme=theme quiet=true disabled=true)= 'Disabled' + = ' ' + +action-button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled' + each theme in ['static-black', 'static-white'] - const bg = theme.startsWith('static-black') ? 500 : 1000; @@ -98,8 +142,8 @@ mixin view-action-button +action-button(theme=theme disabled=true)= 'Disabled' = ' ' +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled' - - .c-box(style=`background-color: var(--colors--blue-static--${bg});`) + br + br +action-button(theme=theme quiet=true)= 'Idle' = ' ' +action-button(theme=theme quiet=true selected=true)= 'Selected' diff --git a/tpl/views/button.pug b/tpl/views/button.pug index edd8ef6..da7531b 100644 --- a/tpl/views/button.pug +++ b/tpl/views/button.pug @@ -34,6 +34,7 @@ mixin view-button +a-button(outline=true)= 'Button' +a-button(outline=true disabled=true)= 'Button' br + br .l-button-group +a-button(icon='trash') +a-button(disabled=true icon='trash') @@ -48,6 +49,7 @@ mixin view-button +a-button(variant=theme outline=true)= 'Button' +a-button(variant=theme outline=true disabled=true)= 'Button' br + br .l-button-group +a-button(variant=theme icon='trash') +a-button(variant=theme disabled=true icon='trash') @@ -65,6 +67,7 @@ mixin view-button +a-button(variant=theme outline=true)= 'Button' +a-button(variant=theme outline=true disabled=true)= 'Button' br + br .l-button-group +a-button(variant=theme icon='trash') +a-button(variant=theme disabled=true icon='trash') @@ -78,6 +81,7 @@ mixin view-button +a-button(variant=theme primary=true outline=true)= 'Button' +a-button(variant=theme primary=true outline=true disabled=true)= 'Button' br + br .l-button-group +a-button(variant=theme primary=true icon='trash') +a-button(variant=theme primary=true disabled=true icon='trash') -- cgit v1.2.3-70-g09d2