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.