Fijn

Comment component: Add Comment Paragraph 

<div class="m-comment js-comment -border pt-4 pb-3 px-4 -addField d-flex flex-column position-relative w-100">

    <span class="mb-2">

        <p tabindex="-1" placeholder="Voeg een opmerking toe..." class="form-control cursor-text" contenteditable></p>
        <div class="popover-content">
            <div class="m-teamSelect js-teamSelect">
                <i class="m-teamSelect__noresults">No matching results</i>
                <ul class="m-teamSelect__list js-teamSelectItems list-unstyled mb-0 mt-2">

                    <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
                        <div tabindex="0" class="a-avatar bg-default rounded-circle d-inline-flex justify-content-center align-items-center" ">
    MV
    
</div>

<span class=" pl-2">Marcella Vonk
    </span></li>

    <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
        <div tabindex="0" class="a-avatar bg-turquoise rounded-circle d-inline-flex justify-content-center align-items-center" ">
    DW
    
</div>

<span class=" pl-2">Daniëlle van der Wei</span>
    </li>

    <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
        <div tabindex="0" class="a-avatar bg-pink rounded-circle d-inline-flex justify-content-center align-items-center" ">
    FA
    
</div>

<span class=" pl-2">Ferry van Asperen</span>
    </li>

    <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
        <div tabindex="0" class="a-avatar bg-green rounded-circle d-inline-flex justify-content-center align-items-center" ">
    IP
    
</div>

<span class=" pl-2">Isabel Pedersen</span>
    </li>

    <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
        <div tabindex="0" class="a-avatar bg-blue rounded-circle d-inline-flex justify-content-center align-items-center" ">
    RG
    
</div>

<span class=" pl-2">Robert Giezen</span>
    </li>

    <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
        <div tabindex="0" class="a-avatar bg-orange rounded-circle d-inline-flex justify-content-center align-items-center" ">
    JT
    
</div>

<span class=" pl-2">Jappy Toering</span>
    </li>

    <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
        <div tabindex="0" class="a-avatar bg-lightgreen rounded-circle d-inline-flex justify-content-center align-items-center" ">
    RV
    
</div>

<span class=" pl-2">Ruerd Visser</span>
    </li>

    <li class="m-teamSelect__item cursor-pointer user-select-none d-flex align-items-center pr-2 mr-2">
        <div tabindex="0" class="a-avatar bg-lightpink rounded-circle d-inline-flex justify-content-center align-items-center" ">
    RW
    
</div>

<span class=" pl-2">Robin Woudstra</span>
    </li>

    </ul>
</div>
</div>

</span>

<div class="d-flex justify-content-end w-100 mt-3">

    <button type="button" class="btn btn-sm btn-outline-dark -iconRight">

        Plaatsen

    </button>

</div>

</div>
 
<div class="m-comment js-comment{% if border and not add_field %} -border py-3 px-4{% elseif border and add_field %} -border pt-4 pb-3 px-4{% elseif paragraph %} -paragraph{% else %} pl-3 pl-md-4 pr-3 pr-md-4 pt-3 pt-md-4 pb-3 pb-md-4{% endif %}{% if add_field %} -addField{% endif %} d-flex flex-column position-relative w-100">
    {% if add_field == false %}
        <div class="d-flex d-flex align-items-center justify-content-between">
            {% if notice %}
                <div class="d-flex">
                    {% render '@avatar--image' %}
                    <div class="d-flex flex-column ml-2">
                        <span class="">{{text}}</span>
                        <span class="text-muted mt-2">20-03-2021 om 12:22, door Marcella Vonk</span>
                    </div>
                </div>
            {% else %}
                <div class="mr-3 d-inline-flex">
                    {% render '@avatar--image' %}
                    <span class="d-inline-flex">
                        <strong class="ml-2 limit-lines-1 align-self-center">Marcella Vonk</strong>
                    </span>
                    <span class="text-muted ml-2 d-none d-xs-inline-flex align-items-center">1 sec. geleden</span>
                </div>
                {% if circles %}
                    <div class="d-flex flex-row">
                        {% render '@circle--small', {icon:"edit-alt"}, true %}
                        {% render '@circle--small', {icon:"bin"}, true %}
                    </div>
                {% endif %}
            {% endif %}
        </div>
    {% endif %}
    {% if (add_field) and (border == true) %}
        {% set rows = 4 %}
    {% else %}
        {% set rows = 0 %}
    {% endif %}
    {% if notice == false %}
        <span class="mb-2">
            {% if paragraph %}
                <p tabindex="-1" placeholder="Voeg een opmerking toe..." class="form-control cursor-text{% if invalid %} is-invalid{% endif %}{% if valid %} is-valid{% endif %}"{% if disabled %} disabled{% endif %}{% if readonly %} readonly{% endif %} contenteditable></p>
                <div class="popover-content">
                    {% render "@team-select", {user_tag: true}, true %}
                </div>
            {% else %}
                {% render '@textarea-group', {label:label, invalid:invalid, valid:valid, readonly:readonly, rows:rows, comment:comment, text:text, add_field:add_field, placeholder:placeholder}, true %}
            {% endif %}
        </span>
    {% endif %}
    {% if buttons or add_field %}
        <div class="d-flex justify-content-end w-100 mt-3">
            {% set button_text = 'Plaatsen' %}
            {% if add_field == false %}
                {% set button_text = 'Annuleren' %}
            {% endif %}
            {% render '@button--border', {text:button_text, small:true}, true %}
            {% if add_field == false %}
                <span class="ml-3">
                    {% render '@button', {text:'Opslaan', small:true}, true %}
                </span>
            {% endif %}
        </div>
    {% endif %}
</div>
 
{
  "label": "",
  "circles": false,
  "add_field": true,
  "buttons": false,
  "readonly": false,
  "comment": true,
  "text": "Voeg een opmerking toe...",
  "placeholder": true,
  "border": true,
  "notice": false,
  "paragraph": true
}

No notes defined.