Chat

<section class="chat">
    <ul class="chat__list">
        <li class="chat__message chat__message--incoming">
            <div class="chat__username">
                Admin
            </div>
            <div class="chat__message-content">
                <p class="chat__message-text">
                    Please, provide us with additional details and attach photos if possible so that we could approve your request.
                </p>
                <div class="chat__message-date">
                    2019-08-20 13:05:27
                </div>
            </div>
        </li>
        <li class="chat__message chat__message--sent">
            <div class="chat__username">
                User
            </div>
            <div class="chat__message-content chat__message-content--sent">
                <p class="chat__message-text">
                    Hello. I want to return this item because of the material, it is not as good as I expected!
                </p>
                <div class="chat__message-date">
                    2019-08-20 13:06:33
                </div>
            </div>
        </li>
    </ul>
    <div class="chat__control">
        <div class="chat__message-field">
            <div class="input ">
                <label class="
            label
            input__label
                label--hidden
            
        " for="field-id">
                    Label text
                </label>

                <textarea class="input__field input__field--textarea chat__textarea" id="field-id" name="field-name" placeholder="Message"></textarea>
            </div>

        </div>
        <div class="chat__message-send">
            <button class="button " type="button" aria-label="button">
                Send
            </button>

        </div>
    </div>
    <div class="file-upload file-upload--native button-extend">
        <div class="file-upload__wrapper" data-role="send-files">
            <label tabindex="0" for="file" class="
                button
                file-upload__button
            ">
                <input id="file" type="file" name="file" accept=".pdf,.doc,.png" data-size="1024" />
                Your file (pdf, doc, max 1 MB)
            </label>
        </div>
        <div class="file-upload__attachments">
            <div data-role="attached-item">
                <span>
                    some-file.jpg
                </span>
                <button type="button" data-role="delete-button">
                    <span>
                        Delete
                    </span>
                </button>
            </div>
            <div data-role="attached-item">
                <span>
                    some-file.jpg
                </span>
                <button type="button" data-role="delete-button">
                    <span>
                        Delete
                    </span>
                </button>
            </div>
        </div>
    </div>

</section>
<section class="chat">
    <ul class="chat__list">
        <li class="chat__message chat__message--incoming">
            <div class="chat__username">
                {{ message.incoming.username }}
            </div>
            <div class="chat__message-content">
                <p class="chat__message-text">
                    {{ message.incoming.text }}
                </p>
                <div class="chat__message-date">
                    {{ message.incoming.date }}
                </div>
            </div>
        </li>
        <li class="chat__message chat__message--sent">
            <div class="chat__username">
                {{ message.sent.username }}
            </div>
            <div class="chat__message-content chat__message-content--sent">
                <p class="chat__message-text">
                    {{ message.sent.text }}
                </p>
                <div class="chat__message-date">
                    {{ message.sent.date }}
                </div>
            </div>
        </li>
    </ul>
    <div class="chat__control">
        <div class="chat__message-field">
            {{ render '@input--textarea' input merge=true }}
        </div>
        <div class="chat__message-send">
            {{ render '@button' button merge=true }}
        </div>
    </div>
    {{ render '@file-upload--native' }}
</section>
{
  "message": {
    "incoming": {
      "username": "Admin",
      "text": "Please, provide us with additional details and attach photos if possible so that we could approve your request.",
      "date": "2019-08-20 13:05:27"
    },
    "sent": {
      "username": "User",
      "text": "Hello. I want to return this item because of the material, it is not as good as I expected!",
      "date": "2019-08-20 13:06:33"
    }
  },
  "input": {
    "label": {
      "hidden": true
    },
    "field": {
      "class": "chat__textarea",
      "placeholder": "Message"
    }
  },
  "button": {
    "text": "Send"
  }
}
  • Content:
    $chat__padding                          : $spacer--semi-medium !default;
    $chat__background                       : $gray-lighter !default;
    
    $chat__list-margin                      : 0 0 $spacer--medium !default;
    $chat__list-padding                     : 0 !default;
    $chat__list-max-height                  : 300px !default;
    $chat__list-overflow-y                  : auto !default;
    
    $chat__message-padding                  : $spacer $spacer--medium !default;
    $chat__message-text-align--sent         : right !default;
    $chat__message-align-self--incoming     : flex-start !default;
    
    $chat__message-content-padding          : $spacer--medium !default;
    $chat__message-content-background       : $gray !default;
    $chat__message-content-background--sent : $gray-light !default;
    $chat__message-content-border-radius    : 10px !default;
    
    $chat__message-text-font-size           : $font-size-base !default;
    
    $chat__message-date-text-align          : right !default;
    $chat__message-date-color               : $gray-dark !default;
    $chat__message-date-font-size           : $font-size-small !default;
    
    $chat__message-send-margin              : 0 0 $spacer--medium !default;
    
    $chat__message-field-width              : 100% !default;
    $chat__message-field-margin             : 0 $spacer 0 0 !default;
    
    $chat__textarea-min-height              : 48px !default;
    $chat__username-color                   : $gray-dark !default;
    
  • URL: /components/raw/chat/_chat-variables.scss
  • Filesystem Path: build/components/Organisms/chat/_chat-variables.scss
  • Size: 1.4 KB
  • Content:
    @import 'chat-variables';
    
    .chat {
        padding: $chat__padding;
        background: $chat__background;
    
        &__list {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            margin: $chat__list-margin;
            padding: $chat__list-padding;
            max-height: $chat__list-max-height;
            overflow-y: $chat__list-overflow-y;
            list-style: none;
        }
    
        &__message {
            padding: $chat__message-padding;
    
            &--sent {
                text-align: $chat__message-text-align--sent;
            }
    
            &--incoming {
                align-self: $chat__message-align-self--incoming;
            }
        }
    
        &__message-content {
            padding: $chat__message-content-padding;
            background:  $chat__message-content-background;
            border-radius: $chat__message-content-border-radius;
    
            &--sent {
                background: $chat__message-content-background--sent;
            }
        }
    
        &__message-text {
            font-size: $chat__message-text-font-size;
        }
    
        &__message-date {
            text-align:  $chat__message-date-text-align;
            color: $chat__message-date-color;
            font-size:  $chat__message-date-font-size;
        }
    
        &__message-send {
            margin: $chat__message-send-margin;
        }
    
        &__message-field {
            width: $chat__message-field-width;
            margin:  $chat__message-field-margin;
        }
    
        &__control {
            display: flex;
            align-items: center;
        }
    
        &__textarea {
            min-height: $chat__textarea-min-height;
        }
    
        &__username {
            color: $chat__username-color;
        }
    }
    
  • URL: /components/raw/chat/_chat.scss
  • Filesystem Path: build/components/Organisms/chat/_chat.scss
  • Size: 1.6 KB

No notes defined.