Den Haag Design System

Chatbox 

<div class="chatbox">
    <div class="card">
        <div class="user-avatar">
            <div class="user-avatar__oval user-avatar__oval--user">DW</div>
            <div class="user-avatar__content">
                <div class="user-avatar__name">D. Willemsen</div>
                <div class="user-avatar__date">17 juli</div>
            </div>
        </div>
        <div class="card__text">
            Goedemorgen D. Willemsen, bedankt voor het document. Er ontbreekt nog een document. U heeft het bewijsdocument
            niet toegevoegd. Zou u dit kunnen opsturen? Alvast bedankt.
        </div>
        <div class="file-thumbnail">
            <div class="file-thumbnail__header">
                <div class="file-thumbnail__name">Bestand 1</div>
            </div>
            <div class="file-thumbnail__primary-button">
                <a href="/download-link" class="button button--secondary button--sm">
                    <span aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" class="icon">
                            <g>
                                <polygon points="14,10.1 14,14 2,14 2,10 0,10 0,14 0,15.9 0,16 14,16 16,16 16,14 16,10.1" />
                                <polygon points="8,12.1 8,12 8,12.1 8.2,11.9 13.3,7.6 12,6.1 11,7 9,8.6 9,0 7,0 7,8.6 5,7 4,6.1 2.7,7.6 7.8,11.9" />
                            </g>
                        </svg>
                    </span>
                    <span>Download bestand 1</span>
                </a>
            </div>
            <div class="file-thumbnail__meta-info">
                <span>PDF</span>
                <span>123 KB</span>
                <span>23-10-2017</span>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="user-avatar">
            <div class="user-avatar__oval user-avatar__oval--employee">DW</div>
            <div class="user-avatar__content">
                <div class="user-avatar__name">D. Willemsen</div>
                <div class="user-avatar__date">17 juli</div>
            </div>
        </div>
        <div class="card__text">
            Goedemorgen D. Willemsen, bedankt voor het document. Er ontbreekt nog een document. U heeft het bewijsdocument
            niet toegevoegd. Zou u dit kunnen opsturen? Alvast bedankt.
        </div>
        <div class="file-thumbnail">
            <div class="file-thumbnail__header">
                <div class="file-thumbnail__name">Bestand 1</div>
            </div>
            <div class="file-thumbnail__primary-button">
                <a href="/download-link" class="button button--secondary button--sm">
                    <span aria-hidden="true"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" class="icon">
                            <g>
                                <polygon points="14,10.1 14,14 2,14 2,10 0,10 0,14 0,15.9 0,16 14,16 16,16 16,14 16,10.1" />
                                <polygon points="8,12.1 8,12 8,12.1 8.2,11.9 13.3,7.6 12,6.1 11,7 9,8.6 9,0 7,0 7,8.6 5,7 4,6.1 2.7,7.6 7.8,11.9" />
                            </g>
                        </svg>
                    </span>
                    <span>Download bestand 1</span>
                </a>
            </div>
            <div class="file-thumbnail__meta-info">
                <span>PDF</span>
                <span>123 KB</span>
                <span>23-10-2017</span>
            </div>
        </div>
    </div>

    <div class="chatbox__submit">
        <!--TODO textbox component maken-->
        <div class="chatbox__submit__title">Schrijf uw bericht</div>
        <div class="formtextarea">
            <textarea name="comment" id="" rows="10" maxlength="500"></textarea>
            <div class="extratext" title="Aantal karakters over:"></div>
        </div>
        <!--TODO bestanden toevoegen-->
        <div class="chatbox__submit__files">
            <div class="chatbox__submit__files__title">Bestand toevoegen</div>
            <div class="chatbox__submit__files__text">U kunt maximaal 2 bestanden toevoegen per bericht.</div>
            <div class="chatbox__submit__files__list">
                <div class="file-thumbnail">
                    <div class="file-thumbnail__header">
                        <div class="file-thumbnail__name">Bestand 1</div>
                    </div>
                    <div class="file-thumbnail__meta-info">
                        <span>PDF</span>
                        <span>123 KB</span>
                        <span>23-10-2017</span>
                    </div>
                </div>
                <div class="file-thumbnail">
                    <div class="file-thumbnail__header">
                        <div class="file-thumbnail__name">Bestand 1</div>
                    </div>
                    <div class="file-thumbnail__meta-info">
                        <span>PDF</span>
                        <span>123 KB</span>
                        <span>23-10-2017</span>
                    </div>
                </div>
            </div>
            <button type="button" class="button button--primary">Verzenden</button>
        </div>
    </div>
</div>
 
<div class="chatbox">
  {{> @card type='user'}}
  {{> @card type='employee'}}

  <div class="chatbox__submit">
    <!--TODO textbox component maken-->
    <div class="chatbox__submit__title">Schrijf uw bericht</div>
    <div class="formtextarea">
      <textarea name="comment" id="" rows="10" maxlength="500"></textarea>
      <div class="extratext" title="Aantal karakters over:"></div>
    </div>
    <!--TODO bestanden toevoegen-->
    <div class="chatbox__submit__files">
      <div class="chatbox__submit__files__title">Bestand toevoegen</div>
      <div class="chatbox__submit__files__text">U kunt maximaal 2 bestanden toevoegen per bericht.</div>
      <div class="chatbox__submit__files__list">
        {{> @file-thumbnail--upload }}
        {{> @file-thumbnail--upload }}
      </div>
      {{> @button modifier='button--primary' text='Verzenden'}}
    </div>
  </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    .chatbox {

  $parent: &;

  .card {
    margin-top: $space-s;
  }

  .button--primary {
    margin-top: $space-m;
  }

  .extratext {
    float: right;
  }

  .file-thumbnail {
    padding: 0;
    margin: $space-m 0 $space-m 0;
  }

  .chatbox__submit {
    background: $white-dark;
    margin-top: $space-m;
    padding: $space-m;

    &__title {
      font-weight: $fw-bold;
    }

    &__files {
      margin-top: $space-m;

      &__title {
        font-weight: $fw-bold;
      }

      &__list {
        margin-top: $space-m;
      }
    }

  }
}
  • URL: /components/raw/chatbox/_chatbox.scss
  • Filesystem Path: src/components/01-componenten/chatbox/_chatbox.scss
  • Size: 553 Bytes
  • Content: 
    /**
 *
 * @param {Element} element
 */
export default function TextareaWithCounter (element) {

  // Only the one with maxlength and counter feedback element.
  var textareaElements = element.querySelectorAll('textarea[maxlength]');
  var feedbackElements = element.getElementsByClassName('extratext');

  if (textareaElements.length !== 1 || feedbackElements.length !== 1) {
    return;
  }

  var component = {
    // Elements
    textareaElement: textareaElements[0],
    feedbackElement: feedbackElements[0],

    // Properties
    maxlength: 0,
    counter: 0,
    helpText: '',

    // Methods
    setFeedback: setFeedback,
  };

  component.maxlength = Number(
    component.textareaElement.getAttribute('maxlength'));
  component.helpText = component.feedbackElement.getAttribute('title').trim();

  // Remove: accessibility anti-pattern.
  component.feedbackElement.removeAttribute('title');

  component.setFeedback();

  component.textareaElement.addEventListener('keyup', function () {
    component.setFeedback();
  });
}

function setFeedback () {
  var currentLength = this.textareaElement.value.length;

  this.feedbackElement.innerHTML = this.helpText + ' ' +
    (this.maxlength - currentLength);

  if (currentLength > this.maxlength) {
    this.feedbackElement.classList.add('error-message');
  } else {
    this.feedbackElement.classList.remove('error-message');
  }
}
  • URL: /components/raw/chatbox/chatbox.js
  • Filesystem Path: src/components/01-componenten/chatbox/chatbox.js
  • Size: 1.4 KB

Omschrijving

Omschrijving volgt nog van UX.