summaryrefslogtreecommitdiffstats
path: root/tpl
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2022-02-08 18:05:15 +0100
committerVolpeon <git@volpeon.ink>2022-02-08 18:05:15 +0100
commit9fb3237247f637b55a7da6bbf2847c17c2fb2ad0 (patch)
tree44bb936cbb48e59d50ff36a0f79e696f3232ba9b /tpl
parentUpdate (diff)
downloadiro-design-9fb3237247f637b55a7da6bbf2847c17c2fb2ad0.tar.gz
iro-design-9fb3237247f637b55a7da6bbf2847c17c2fb2ad0.tar.bz2
iro-design-9fb3237247f637b55a7da6bbf2847c17c2fb2ad0.zip
Added menu
Diffstat (limited to 'tpl')
-rw-r--r--tpl/index.pug57
-rw-r--r--tpl/objects/action-menu.pug3
-rw-r--r--tpl/objects/menu.pug28
3 files changed, 86 insertions, 2 deletions
diff --git a/tpl/index.pug b/tpl/index.pug
index 4978cc0..fa9bd85 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -16,11 +16,21 @@ include objects/action-button.pug
16include objects/status-indicator.pug 16include objects/status-indicator.pug
17include objects/avatar.pug 17include objects/avatar.pug
18include objects/action-menu.pug 18include objects/action-menu.pug
19include objects/menu.pug
19 20
20mixin box 21mixin box
21 +container(padX=true padY=true inPage=true theme="raised") 22 +container(padX=true padY=true inPage=true theme="raised")
22 block 23 block
23 24
25mixin user-card(name, hue)
26 -
27 const avaName = name.slice(0, 1)
28
29 .l-card.l-card--flush
30 +avatar(block=true size='xs' class='l-card__block' hue=hue)
31 = avaName
32 = name
33
24 34
25doctype html 35doctype html
26html 36html
@@ -460,3 +470,50 @@ html
460 +action-menu-item(icon='tags')= 'Tags' 470 +action-menu-item(icon='tags')= 'Tags'
461 +action-menu-item(postIcon='chevron-right')= 'More' 471 +action-menu-item(postIcon='chevron-right')= 'More'
462 472
473 //-----------------------------------------
474
475 +h1-heading(level='xl')= 'Menu'
476 +rule(level='medium')
477
478 +box
479 div(style={ display: 'flex', gap: '2rem' })
480 +menu
481 +menu-header= 'Category 1'
482 +menu-item= 'Mark as away'
483 +menu-item= 'Delete'
484 +menu-separator
485 +menu-header= 'Category 2'
486 +menu-item(icon='bookmark')= 'Bookmark'
487 +menu-item(icon='tags')= 'Tags'
488
489 +menu
490 +menu-item
491 strong= 'Bouncer'
492 +menu-separator
493 +menu-item
494 strong= 'Libera'
495 +menu-item(icon='hash')= 'achannel'
496 +menu-item(icon='hash')= 'kitsuneirc'
497 +menu-item(icon='green' iconIsStatus=true)= 'volpeon'
498 +menu-item(icon='red' iconIsStatus=true)= 'someone'
499 +menu-separator
500 +menu-item
501 strong= 'Ergo Testnet'
502 +menu-separator
503 +menu-item
504 strong= 'NixNet'
505
506 +menu
507 +menu-header= 'Operators'
508 +menu-item
509 +user-card('volpeon', 0)
510 +menu-item
511 +user-card('curiousfox', 90)
512 +menu-separator
513 +menu-header= 'Moderators'
514 +menu-item
515 +user-card('user3567', 135)
516 +menu-item
517 +user-card('johndoe', 270)
518
519
diff --git a/tpl/objects/action-menu.pug b/tpl/objects/action-menu.pug
index 55ceacb..8c1a584 100644
--- a/tpl/objects/action-menu.pug
+++ b/tpl/objects/action-menu.pug
@@ -1,4 +1,3 @@
1include action-button.pug
2include icon.pug 1include icon.pug
3include status-indicator.pug 2include status-indicator.pug
4 3
@@ -14,7 +13,7 @@ mixin action-menu
14 block 13 block
15 14
16mixin action-menu-item 15mixin action-menu-item
17 button.o-action-menu__item.o-action-menu__item--native(disabled=attributes.disabled) 16 button.o-action-menu__item(disabled=attributes.disabled)
18 .l-card.l-card--flush 17 .l-card.l-card--flush
19 .l-card__block.o-action-menu__icon-slot 18 .l-card__block.o-action-menu__icon-slot
20 if attributes.icon 19 if attributes.icon
diff --git a/tpl/objects/menu.pug b/tpl/objects/menu.pug
new file mode 100644
index 0000000..7c9c07e
--- /dev/null
+++ b/tpl/objects/menu.pug
@@ -0,0 +1,28 @@
1include icon.pug
2include status-indicator.pug
3
4mixin menu
5 .o-menu
6 block
7
8mixin menu-item
9 button.o-menu__item(disabled=attributes.disabled)
10 .l-card.l-card--flush
11 if attributes.icon
12 .l-card__block.o-menu__icon-slot
13 if attributes.iconIsStatus
14 +status-indicator(attributes.icon)(class='o-menu__icon')
15 else
16 +icon(attributes.icon)(class='o-menu__icon')
17 .l-card__block.l-card__block--main
18 block
19 if attributes.postIcon
20 .l-card__block.o-menu__icon-slot
21 +icon(attributes.postIcon)(class='o-menu__icon')
22
23mixin menu-header
24 header.o-menu__header
25 block
26
27mixin menu-separator
28 .o-menu__separator