From ac04c0bb55f51dd18daaf6813c47a0db8525180f Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 28 Jan 2023 09:34:19 +0100 Subject: Added overflow button --- tpl/index.pug | 3 +++ tpl/objects/action-button.pug | 4 +--- tpl/objects/overflow-button.pug | 22 ++++++++++++++++++++++ tpl/views/overflow-button.pug | 10 ++++++++++ 4 files changed, 36 insertions(+), 3 deletions(-) create mode 100644 tpl/objects/overflow-button.pug create mode 100644 tpl/views/overflow-button.pug (limited to 'tpl') diff --git a/tpl/index.pug b/tpl/index.pug index 1f4f522..15929cf 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -17,6 +17,7 @@ include objects/checkbox.pug include objects/switch.pug include objects/form.pug include objects/action-button.pug +include objects/overflow-button.pug include objects/status-indicator.pug include objects/avatar.pug include objects/action-menu.pug @@ -65,6 +66,7 @@ include views/checkbox.pug include views/switch.pug include views/form.pug include views/action-button.pug +include views/overflow-button.pug include views/status-indicator.pug include views/avatar.pug include views/action-menu.pug @@ -108,6 +110,7 @@ html +view-switch +view-form +view-action-button + +view-overflow-button +view-status-indicator +view-avatar +view-action-menu diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug index f99d789..e11e4a5 100644 --- a/tpl/objects/action-button.pug +++ b/tpl/objects/action-button.pug @@ -19,6 +19,4 @@ mixin action-button if attributes.icon +icon(attributes.icon)(block=!block) = ' ' - if block - span.o-action-button__label - block + block diff --git a/tpl/objects/overflow-button.pug b/tpl/objects/overflow-button.pug new file mode 100644 index 0000000..f52f12b --- /dev/null +++ b/tpl/objects/overflow-button.pug @@ -0,0 +1,22 @@ +include icon.pug + +mixin overflow-button + - + let classes = { + 'o-overflow-button': true, + 'u-d-block': attributes.block, + 'is-selected': attributes.selected + } + if (attributes.class) { + classes[attributes.class] = true; + } + + let href = attributes.disabled ? null : '#'; + + a(class=classes href=href) + .o-overflow-button__inside + if attributes.icon + +icon(attributes.icon)(block=!block) + = ' ' + .o-overflow-button__outside + block diff --git a/tpl/views/overflow-button.pug b/tpl/views/overflow-button.pug new file mode 100644 index 0000000..112aaab --- /dev/null +++ b/tpl/views/overflow-button.pug @@ -0,0 +1,10 @@ +mixin view-overflow-button + +view('overflow-button', 'Overflow button') + .c-box + +overflow-button(icon='trash')= '123' + = ' ' + +overflow-button(icon='trash' selected=true)= 'Delete' + = ' ' + +overflow-button(icon='trash' disabled=true)= 'Disabled' + = ' ' + +overflow-button(icon='trash' selected=true disabled=true)= 'Selected + disabled' -- cgit v1.2.3-70-g09d2