Fijn

Comment component: Buttons 

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

    <div class="d-flex d-flex align-items-center justify-content-between">

        <div class="mr-3 d-inline-flex">
            <div tabindex="0" class="a-avatar bg-brown rounded-circle d-inline-flex justify-content-center align-items-center" data-content="">
                MV
                <img src="../../img/mv.jpg" alt="Avatar" class="cover">
            </div>

            <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>

    </div>

    <span class="mb-2">

        <div class="d-flex flex-wrap">
            <label class="flex-grow-1"></label>
            <textarea name="textArea" class="form-control" placeholder="">Jappy @Marcella Ik heb er nog een keer naar gekeken maar ik wil hem toch nog een beetje herzien</textarea>

        </div>

    </span>

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

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

            Annuleren

        </button>

        <span class="ml-3">
            <button type="button" class="btn btn-sm btn-primary -iconRight">

                Opslaan

            </button>
        </span>

    </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": false,
  "buttons": true,
  "readonly": false,
  "comment": true,
  "text": "Jappy @Marcella Ik heb er nog een keer naar gekeken maar ik wil hem toch nog een beetje herzien",
  "placeholder": false,
  "border": true,
  "notice": false,
  "paragraph": false,
  "disabled": false
}

No notes defined.