How to use the @cycle/dom.i function in @cycle/dom

To help you get started, we’ve selected a few @cycle/dom examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github tryanzu / frontend / src / components / post / views / commentView.js View on Github external
return div({ class: { pb3: noPadding == false }, key: comment.id }, [
        div('.flex', [
            div('.flex-auto', authorView(comment, 'Comentó')),
            div([
                a(
                    '.v-mid.pointer.reply-to',
                    {
                        class: {
                            dn: isCurrentUsersComment,
                            dib: !isCurrentUsersComment,
                        },
                        dataset: {
                            id: noPadding ? comment.reply_to : comment.id,
                        },
                    },
                    [i('.icon-reply-outline'), span('.pl2', 'Responder')]
                ),
                div('.dib.v-mid', [
                    a(
                        {
                            attrs: {
                                class: classNames(
                                    'dib',
                                    'v-mid',
                                    'mh2',
                                    'btn-icon',
                                    'vote',
                                    { active: voted === -1 }
                                ),
                            },
                            dataset: {
                                id: comment.id,
github tryanzu / frontend / src / components / post / views / commentView.js View on Github external
'v-mid',
                                    'mh2',
                                    'btn-icon',
                                    'vote',
                                    { active: voted === -1 }
                                ),
                            },
                            dataset: {
                                id: comment.id,
                                type: 'comment',
                                intent: 'down',
                            },
                        },
                        [
                            span(String(comment.votes.down)),
                            voteIcon('down', i('.icon-thumbs-down')),
                        ]
                    ),
                    a(
                        {
                            attrs: {
                                class: classNames(
                                    'dib',
                                    'v-mid',
                                    'btn-icon',
                                    'vote',
                                    { active: voted === 1 }
                                ),
                            },
                            dataset: {
                                id: comment.id,
                                type: 'comment',
github tryanzu / frontend / src / components / modal / config.js View on Github external
const vdom$ = fractal.state$.debug().map((state) => {
        return div('.modal-container.config', { style:  { width: '640px' } }, [
            div('.flex', [
                nav([
                    a(img('.w3', { attrs: { src: '/images/anzu.svg', alt: 'Anzu' } })),
                    a('.active', [i('.icon-cog.mr1'), 'General']),
                    a([i('.icon-th-list-outline.mr1'), 'Categorias']),
                    a([i('.icon-lock-open.mr1'), 'Permisos']),
                    a([i('.icon-picture-outline.mr1'), 'Diseño'])
                ]),
                div('.flex-auto', [
                    h2('General'),
                    form({ attrs: { id: 'update-post' } }, [
                        div('.form-group', [
                            label('.b.form-label', 'Nombre del sitio'),
                            input('#title.form-input', { attrs: { type: 'text', placeholder: 'Ej. Comunidad de Anzu', value: state.site.name, required: true } }),
                            p('.form-input-hint', 'Mostrado alrededor del sitio, el nombre de tu comunidad.')
                        ]),
                        div('.form-group', [
                            label('.b.form-label', 'Descripción del sitio'),
                            textarea('#content.form-input', {
                                attrs: {
                                    placeholder: '...',
                                    rows: 3
                                }
github tryanzu / frontend / src / components / post / views / postActionsView.js View on Github external
}

    if (post.user_id === user.id || adminTools({ user })) {
        return div('.dropdown.dropdown-right', [
            a(
                '.dib.btn-icon.gray.ml2.dropdown-toggle',
                { attrs: { tabindex: 0 } },
                i('.icon-cog')
            ),
            ul('.menu', { style: { width: '200px' } }, [
                li(
                    '.menu-item',
                    a(
                        '.pointer.post-action',
                        { dataset: { action: 'update', id: post.id } },
                        [i('.icon-edit'), t`Editar publicación`]
                    )
                ),
                li(
                    '.menu-item',
                    a(
                        '.pointer.post-action',
                        { dataset: { action: 'delete', id: post.id } },
                        [i('.icon-trash'), t`Borrar publicación`]
                    )
                ),
            ]),
        ]);
    }

    return div([
        a('.dib.btn-icon.gray', [
github tryanzu / frontend / src / components / user.js View on Github external
return main('.profile.flex-auto', [
            section('.fade-in.tc', [
                figure(
                    '.avatar.avatar-xl',
                    { style: { borderRadius: '100%' } },
                    img({
                        attrs: {
                            src: user.image,
                            alt: `Perfil de ${user.username}`,
                        },
                    })
                ),
                h1('.ma0.mv2', `${user.username}`),
                p(user.description),
                div('.mw5.mb3.center', [
                    i('.icon-crown.gold.f5'),
                    span('.db.mb2.f5', [
                        span('.b', number(user.gaming.swords)),
                        ' / reputación',
                    ]),
                    div('.flex.items-center.mb2', [
                        span('.ph2', String(level)),
                        div(
                            '.bar.bar-sm',
                            div('.bar-item', {
                                attrs: { role: 'progressbar' },
                                style: {
                                    width: `${gapPercent}%`,
                                },
                            })
                        ),
                        span('.ph2', String(level + 1)),
github tryanzu / frontend / src / components / modal / config.js View on Github external
state.site.nav.map((link) => {
                                    return div('.input-group.mb2', [
                                        span('.input-group-addon', i('.icon-up-outline')),
                                        span('.input-group-addon', i('.icon-down-outline')),
                                        input('.form-input', { attrs: { type: 'text', placeholder: '...', value: link.name, required: true } }),
                                        input('.form-input', { attrs: { type: 'text', placeholder: '...', value: link.href, required: true } })
                                    ])
                                })
                            ),
github tryanzu / frontend / src / containers / publisher.js View on Github external
}),
                        i('.form-icon'),
                        'Mi publicación es una pregunta',
                    ])
                ),
                div(
                    '.form-group',
                    label('.form-switch.normal', [
                        input({
                            attrs: {
                                type: 'checkbox',
                                name: 'disabledComments',
                                checked: disabledComments,
                            },
                        }),
                        i('.form-icon'),
                        'No permitir comentarios en esta publicación',
                    ])
                ),
                div(
                    '.form-group',
                    label('.form-switch.normal', [
                        input({
                            attrs: {
                                type: 'checkbox',
                                name: 'pinned',
                                checked: pinned,
                            },
                        }),
                        i('.form-icon'),
                        'Publicar como importante',
                    ])
github tryanzu / frontend / src / components / modal / config.js View on Github external
state.site.nav.map((link) => {
                                    return div('.input-group.mb2', [
                                        span('.input-group-addon', i('.icon-up-outline')),
                                        span('.input-group-addon', i('.icon-down-outline')),
                                        input('.form-input', { attrs: { type: 'text', placeholder: '...', value: link.name, required: true } }),
                                        input('.form-input', { attrs: { type: 'text', placeholder: '...', value: link.href, required: true } })
                                    ])
                                })
                            ),