diff options
author | Volpeon <git@volpeon.ink> | 2022-03-26 14:40:11 +0100 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2022-03-26 14:40:11 +0100 |
commit | e4255279ff72e5438d297888d808851cdf2178ed (patch) | |
tree | 52fbae2c67f65376eae97025b433038d9f4a0e35 /tpl/views | |
parent | Split demo in :target views (diff) | |
download | iro-design-e4255279ff72e5438d297888d808851cdf2178ed.tar.gz iro-design-e4255279ff72e5438d297888d808851cdf2178ed.tar.bz2 iro-design-e4255279ff72e5438d297888d808851cdf2178ed.zip |
Lots of updates, especially dialog
Diffstat (limited to 'tpl/views')
-rw-r--r-- | tpl/views/dialog.pug | 34 | ||||
-rw-r--r-- | tpl/views/divider.pug (renamed from tpl/views/rule.pug) | 16 | ||||
-rw-r--r-- | tpl/views/list-group.pug | 8 | ||||
-rw-r--r-- | tpl/views/text-field.pug | 5 |
4 files changed, 47 insertions, 16 deletions
diff --git a/tpl/views/dialog.pug b/tpl/views/dialog.pug index 6aaead5..0b6f8e7 100644 --- a/tpl/views/dialog.pug +++ b/tpl/views/dialog.pug | |||
@@ -18,10 +18,40 @@ mixin view-dialog | |||
18 | 18 | ||
19 | .c-box | 19 | .c-box |
20 | +backdrop | 20 | +backdrop |
21 | +dialog('Lorem ipsum')(noRule=true) | 21 | +dialog('Tags') |
22 | +slot('sidebar-header') | ||
23 | +div-heading('sm')(class='o-dialog__label')= '#channel' | ||
24 | +slot('sidebar') | ||
25 | +menu(style={ 'min-width': '10em' }) | ||
26 | +menu-item(icon='bookmark')= 'Bookmark' | ||
27 | +menu-item(icon='tags', selected=true)= 'Tags' | ||
28 | +menu-item(icon='hash')= 'achannel' | ||
29 | +slot('body') | ||
30 | p.u-mt-0= loremIpsum | ||
31 | |||
32 | .c-box | ||
33 | +backdrop | ||
34 | +dialog('#channel') | ||
35 | +slot('sidebar') | ||
36 | +menu(style={ 'min-width': '10em' }) | ||
37 | +menu-item(icon='bookmark')= 'Bookmark' | ||
38 | +menu-item(icon='tags', selected=true)= 'Tags' | ||
39 | +menu-item(icon='hash')= 'achannel' | ||
40 | +slot('body') | ||
41 | p.u-mt-0= loremIpsum | ||
42 | |||
43 | .c-box | ||
44 | +backdrop | ||
45 | +dialog | ||
46 | +slot('header') | ||
47 | .l-card.l-card--flush | ||
48 | .l-card__block.l-flex | ||
49 | +action-button(quiet=true icon='chevron-left') | ||
50 | +action-button(quiet=true icon='chevron-right') | ||
51 | .l-card__block.l-card__block--main | ||
52 | +div-heading('sm')= 'Tags' | ||
22 | +slot('sidebar') | 53 | +slot('sidebar') |
23 | +menu(style={ 'min-width': '10em' }) | 54 | +menu(style={ 'min-width': '10em' }) |
24 | +menu-header= '#channel' | ||
25 | +menu-item(icon='bookmark')= 'Bookmark' | 55 | +menu-item(icon='bookmark')= 'Bookmark' |
26 | +menu-item(icon='tags', selected=true)= 'Tags' | 56 | +menu-item(icon='tags', selected=true)= 'Tags' |
27 | +menu-item(icon='hash')= 'achannel' | 57 | +menu-item(icon='hash')= 'achannel' |
diff --git a/tpl/views/rule.pug b/tpl/views/divider.pug index 495c804..8c3ec0c 100644 --- a/tpl/views/rule.pug +++ b/tpl/views/divider.pug | |||
@@ -1,21 +1,21 @@ | |||
1 | mixin view-rule | 1 | mixin view-divider |
2 | +view('rule', 'Rule') | 2 | +view('divider', 'Divider') |
3 | .c-box | 3 | .c-box |
4 | +div-heading('lg')= 'Heading' | 4 | +div-heading('lg')= 'Heading' |
5 | +rule('strong') | 5 | +divider('strong') |
6 | p= loremIpsum | 6 | p= loremIpsum |
7 | 7 | ||
8 | .c-box | 8 | .c-box |
9 | +div-heading('sm')= 'Heading' | 9 | +div-heading('sm')= 'Heading' |
10 | +rule('medium') | 10 | +divider('medium') |
11 | p= loremIpsum | 11 | p= loremIpsum |
12 | 12 | ||
13 | .c-box | 13 | .c-box |
14 | +div-heading('xs')= 'Heading' | 14 | +div-heading('xs')= 'Heading' |
15 | +rule('faint') | 15 | +divider('faint') |
16 | p= loremIpsum | 16 | p= loremIpsum |
17 | 17 | ||
18 | .c-box | 18 | .c-box |
19 | +rule('strong')= 'Strong' | 19 | +divider('strong')= 'Strong' |
20 | +rule('medium')= 'Medium' | 20 | +divider('medium')= 'Medium' |
21 | +rule('faint')= 'Faint' | 21 | +divider('faint')= 'Faint' |
diff --git a/tpl/views/list-group.pug b/tpl/views/list-group.pug index 970f0fb..9acef31 100644 --- a/tpl/views/list-group.pug +++ b/tpl/views/list-group.pug | |||
@@ -9,7 +9,7 @@ mixin view-list-group | |||
9 | 9 | ||
10 | .c-box | 10 | .c-box |
11 | +list-group | 11 | +list-group |
12 | +list-group-item(action=true)= 'First item' | 12 | +list-group-item(interactive=true)= 'First item' |
13 | +list-group-item(action=true)= 'Second item' | 13 | +list-group-item(interactive=true)= 'Second item' |
14 | +list-group-item(action=true)= 'Third item' | 14 | +list-group-item(interactive=true)= 'Third item' |
15 | +list-group-item(action=true)= 'Fourth item' | 15 | +list-group-item(interactive=true)= 'Fourth item' |
diff --git a/tpl/views/text-field.pug b/tpl/views/text-field.pug index 0ba84be..262195d 100644 --- a/tpl/views/text-field.pug +++ b/tpl/views/text-field.pug | |||
@@ -14,9 +14,10 @@ mixin view-text-field | |||
14 | +text-field(value='Incorrect input' pattern='a+' required=true disabled=true) | 14 | +text-field(value='Incorrect input' pattern='a+' required=true disabled=true) |
15 | br | 15 | br |
16 | div | 16 | div |
17 | +text-field(placeholder='Just landed in L.A.') | 17 | +text-field(placeholder='Just landed in L.A.' class="u-p-50") |
18 | +slot('pre') | 18 | +slot('pre') |
19 | +action-button(quiet=true selected=true class='l-card__block')= 'Volpeon' | 19 | +action-button(quiet=true class='l-card__block')= 'Volpeon' |
20 | +divider('vertical')(class='u-ml-50') | ||
20 | +slot('post') | 21 | +slot('post') |
21 | +action-button(quiet=true icon='smile' class='l-card__block') | 22 | +action-button(quiet=true icon='smile' class='l-card__block') |
22 | +action-button(quiet=true icon='send' class='l-card__block') | 23 | +action-button(quiet=true icon='send' class='l-card__block') |