diff options
Diffstat (limited to 'tpl/views')
-rw-r--r-- | tpl/views/action-menu.pug | 29 | ||||
-rw-r--r-- | tpl/views/menu.pug | 8 | ||||
-rw-r--r-- | tpl/views/popover.pug | 6 | ||||
-rw-r--r-- | tpl/views/side-nav.pug | 26 |
4 files changed, 51 insertions, 18 deletions
diff --git a/tpl/views/action-menu.pug b/tpl/views/action-menu.pug index 3357caa..0546463 100644 --- a/tpl/views/action-menu.pug +++ b/tpl/views/action-menu.pug | |||
@@ -3,17 +3,18 @@ mixin view-action-menu | |||
3 | .c-box | 3 | .c-box |
4 | div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) | 4 | div(style={ display: 'flex', 'flex-direction': 'column', 'align-items': 'flex-start' }) |
5 | +action-button(quiet=true selected=true)= 'Menu' | 5 | +action-button(quiet=true selected=true)= 'Menu' |
6 | +action-menu | 6 | +popover |
7 | +action-menu-slot(class='l-media l-media--flush') | 7 | +menu |
8 | +avatar(block=true circle=true size='100' src='avatar.png' class='l-media__block') | 8 | +menu-slot(class='l-media l-media--flush') |
9 | .l-media__block.l-media__block--main | 9 | +avatar(block=true circle=true size='100' src='avatar.png' class='l-media__block') |
10 | strong.u-d-block= 'Volpeon' | 10 | .l-media__block.l-media__block--main |
11 | small.u-d-block= '@volpeon@mk.vulpes.one' | 11 | strong.u-d-block= 'Volpeon' |
12 | +action-menu-separator | 12 | small.u-d-block= '@volpeon@mk.vulpes.one' |
13 | +action-menu-item(icon='user')= 'View profile' | 13 | +menu-separator |
14 | +action-menu-item(icon='red' iconIsStatus=true)= 'Mark as away' | 14 | +menu-item(icon='user')= 'View profile' |
15 | +action-menu-separator | 15 | +menu-item(icon='red' iconIsStatus=true)= 'Mark as away' |
16 | +action-menu-item(icon='trash' disabled=true)= 'Delete' | 16 | +menu-separator |
17 | +action-menu-item(icon='bookmark')= 'Bookmark' | 17 | +menu-item(icon='trash' disabled=true)= 'Delete' |
18 | +action-menu-item(icon='tags')= 'Tags' | 18 | +menu-item(icon='bookmark')= 'Bookmark' |
19 | +action-menu-item(postIcon='chevron-right')= 'More' | 19 | +menu-item(icon='tags')= 'Tags' |
20 | +menu-item(postIcon='chevron-right')= 'More' | ||
diff --git a/tpl/views/menu.pug b/tpl/views/menu.pug index 4d7444f..c61cb92 100644 --- a/tpl/views/menu.pug +++ b/tpl/views/menu.pug | |||
@@ -20,11 +20,11 @@ mixin view-menu | |||
20 | +menu-item(header=true) | 20 | +menu-item(header=true) |
21 | = 'Libera' | 21 | = 'Libera' |
22 | +menu-item(icon='hash') | 22 | +menu-item(icon='hash') |
23 | = 'achannel' | 23 | = 'achannel ' |
24 | +badge('primary')(menu=true)= '12 ' | 24 | +badge('primary')(size='sm')= '12 ' |
25 | +menu-item(icon='hash') | 25 | +menu-item(icon='hash') |
26 | = 'kitsuneirc' | 26 | = 'kitsuneirc ' |
27 | +badge(menu=true)= '31 ' | 27 | +badge(size='sm')= '31 ' |
28 | +menu-item(icon='green' iconIsStatus=true) | 28 | +menu-item(icon='green' iconIsStatus=true) |
29 | = 'volpeon' | 29 | = 'volpeon' |
30 | +menu-item(icon='red' iconIsStatus=true) | 30 | +menu-item(icon='red' iconIsStatus=true) |
diff --git a/tpl/views/popover.pug b/tpl/views/popover.pug new file mode 100644 index 0000000..b269596 --- /dev/null +++ b/tpl/views/popover.pug | |||
@@ -0,0 +1,6 @@ | |||
1 | mixin view-popover | ||
2 | +view('popover', 'Popover') | ||
3 | .c-box | ||
4 | +action-button(quiet=true selected=true)= 'Popover' | ||
5 | +popover | ||
6 | = loremIpsum | ||
diff --git a/tpl/views/side-nav.pug b/tpl/views/side-nav.pug new file mode 100644 index 0000000..30fbcbb --- /dev/null +++ b/tpl/views/side-nav.pug | |||
@@ -0,0 +1,26 @@ | |||
1 | mixin view-side-nav | ||
2 | +view('side-nav', 'Side Nav') | ||
3 | .c-box | ||
4 | +side-nav | ||
5 | +side-nav-item= 'Section 1' | ||
6 | +side-nav-item(tag='div')= 'Section 2' | ||
7 | +side-nav-item= 'Section 3' | ||
8 | |||
9 | .c-box | ||
10 | +side-nav | ||
11 | +side-nav-item= 'Section 1' | ||
12 | +side-nav-item= 'Section 2' | ||
13 | |||
14 | +side-nav-header= 'Category 1' | ||
15 | +side-nav-item= 'Section 3' | ||
16 | +side-nav-item= 'Section 4' | ||
17 | |||
18 | +side-nav-header= 'Category 2' | ||
19 | +side-nav-item= 'Section 5' | ||
20 | +side-nav-item= 'Section 6' | ||
21 | |||
22 | .c-box | ||
23 | +side-nav | ||
24 | +side-nav-item(icon='hash')= 'Section 1' | ||
25 | +side-nav-item(tag='div' icon='bookmark')= 'Section 2' | ||
26 | +side-nav-item(icon='tags')= 'Section 3' | ||