From 03bb4268367dcd3b2d327d3834e2047a56687a86 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 26 Jun 2024 21:47:55 +0200 Subject: Menus --- tpl/objects/action-menu.pug | 35 --------------------------------- tpl/objects/menu.pug | 11 +++++++++++ tpl/objects/popover.pug | 12 ++++++++++++ tpl/objects/side-nav.pug | 48 +++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 71 insertions(+), 35 deletions(-) delete mode 100644 tpl/objects/action-menu.pug create mode 100644 tpl/objects/popover.pug create mode 100644 tpl/objects/side-nav.pug (limited to 'tpl/objects') diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug deleted file mode 100644 index be9d86d..0000000 --- a/tpl/objects/action-menu.pug +++ /dev/null @@ -1,35 +0,0 @@ -include icon.pug -include status-indicator.pug - -mixin action-menu - .o-action-menu.u-p-static.t-up - block - -mixin action-menu-item - button.o-action-menu__item(disabled=attributes.disabled) - .l-media.l-media--flush - .l-media__block.o-action-menu__icon-slot - if attributes.icon - if attributes.iconIsStatus - +status-indicator(attributes.icon)(class='o-action-menu__icon') - else - +icon(attributes.icon)(class='o-action-menu__icon') - .l-media__block.l-media__block--main - block - .l-media__block.o-action-menu__icon-slot - if attributes.postIcon - +icon(attributes.postIcon)(class='o-action-menu__icon') - -mixin action-menu-separator - .o-action-menu__separator - -mixin action-menu-slot - - - let classes = { - 'o-action-menu__slot ': true, - } - if (attributes.class) { - classes[attributes.class] = true; - } - div(class=classes) - block diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug index 1dd38ef..a8b20d7 100644 --- a/tpl/objects/menu.pug +++ b/tpl/objects/menu.pug @@ -46,3 +46,14 @@ mixin menu-header mixin menu-separator .o-menu__separator + +mixin menu-slot + - + let classes = { + 'o-menu__slot ': true, + } + if (attributes.class) { + classes[attributes.class] = true; + } + div(class=classes) + block diff --git a/tpl/objects/popover.pug b/tpl/objects/popover.pug new file mode 100644 index 0000000..ba93a81 --- /dev/null +++ b/tpl/objects/popover.pug @@ -0,0 +1,12 @@ +mixin popover + - + let classes = { + 'o-popover': true, + 'u-p-static': true, + } + if (attributes.class) { + classes[attributes.class] = true; + } + + div(class=classes, style=styles) + block diff --git a/tpl/objects/side-nav.pug b/tpl/objects/side-nav.pug new file mode 100644 index 0000000..511f298 --- /dev/null +++ b/tpl/objects/side-nav.pug @@ -0,0 +1,48 @@ +include icon.pug +include status-indicator.pug +include action-button.pug + +mixin side-nav + - + let classes = { + 'o-side-nav': true, + } + if (attributes.class) { + classes[attributes.class] = true; + } + + div(class=classes)&attributes(attributes) + block + +mixin side-nav-item + - + let classes = { + 'o-side-nav__item': true, + 'l-media': true, + 'l-media--75': true, + 'o-side-nav__header': attributes.header, + 'is-selected': attributes.selected, + } + if (attributes.class) { + classes[attributes.class] = true; + } + + #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes) + if attributes.icon + .l-media__block.o-side-nav__icon-slot + if attributes.iconIsStatus + +status-indicator(attributes.icon)(class='o-side-nav__icon') + else + +icon(attributes.icon)(class='o-side-nav__icon') + .l-media__block.l-media__block--main&attributes({ class: attributes.contentClass }) + block + if attributes.postIcon + .l-media__block.o-side-nav__icon-slot + +icon(attributes.postIcon)(class='o-side-nav__icon') + +mixin side-nav-header + header.o-side-nav__header + block + +mixin side-nav-separator + .o-side-nav__separator -- cgit v1.2.3-70-g09d2