tpl/objects/avatar.pug


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

include ../objects/status-indicator.pug

mixin avatar
    -
        let classes = {
            'o-avatar':          true,
            'o-avatar--colored': true,
            'o-avatar--circle':  attributes.circle,
            'u-d-block':         attributes.block
        }
        if (attributes.class) {
            classes[attributes.class] = true;
        }
        if (attributes.size) {
            classes['o-avatar--' + attributes.size] = true;
        }

        let styles = {}
        if (attributes.hue) {
            styles['--avatar--colors--h'] = attributes.hue;
        }

    if attributes.href
        a(class=classes style=styles href=attributes.href)
            if attributes.status 
                +status-indicator(attributes.status)(class='o-avatar__status')
            if attributes.icon 
                .o-avatar__icon
                    +icon(attributes.icon)
            if attributes.src 
                img.o-avatar__content(src=attributes.src)
            else
                .o-avatar__content
                    block
    else
        div(class=classes style=styles)
            if attributes.status 
                +status-indicator(attributes.status)(class='o-avatar__status')
            if attributes.icon 
                .o-avatar__icon
                    +icon(attributes.icon)
            if attributes.src 
                img.o-avatar__content(src=attributes.src)
            else
                .o-avatar__content
                    block