Merge pull request #4 from cometchat-pro/widget-config

v1.0.6

Author: priyadarshininadar

CometChat/components/CometChatConversationList/index.js

@@ -137,7 +137,10 @@ class CometChatConversationList extends React.Component {
     const conversationList = this.state.conversationlist.map((conversation, key) => {
       return (
         <div id={key} onClick={() => this.handleClick(conversation)} key={key} className="clearfix">
-          <ConversationView key={conversation.conversationId} conversation={conversation}></ConversationView>
+          <ConversationView 
+          config={this.props.config}
+          key={conversation.conversationId} 
+          conversation={conversation} />
         </div>
       );
 

CometChat/components/CometChatMessageListScreen/MessageComposer/index.js

@@ -7,10 +7,6 @@ import { CometChat } from "@cometchat-pro/chat"
 
 import roundedPlus from "./resources/rounded-plus-grey-icon.svg";
 import sendBlue from "./resources/send-blue-icon.svg";
-import imageUpload from "./resources/images_upload_icon.svg";
-import audioUpload from "./resources/audio_upload_icon.svg";
-import videoUpload from "./resources/video_upload_icon.svg";
-import docUpload from "./resources/document_upload_icon.svg";
 
 class MessageComposer extends React.PureComponent {
 
@@ -171,35 +167,32 @@ class MessageComposer extends React.PureComponent {
     return (
 
       <div className="cc1-chat-win-inpt-ext-wrap">
-        <div className={filePickerClassName}>
-          <div className="cc1-chat-win-file-type-list">
-            <span className="cc1-chat-win-file-type-listitem" onClick={() => { this.openFileDialogue("video") }}>
-            <input onChange={(e) => this.onVideoChange(e, "video")} accept="video/*" type="file" ref={this.videoUploaderRef} />
-              <img src={videoUpload} alt="Choose a file to upload" />
-            </span>
-            <span className="cc1-chat-win-file-type-listitem" onClick={() => { this.openFileDialogue("audio") }}>
-            <input onChange={(e) => this.onAudioChange(e, "audio")} accept="audio/*" type="file" ref={this.audioUploaderRef} />
-              <img src={audioUpload} alt="Choose an file to upload" />
-            </span>
-            <span className="cc1-chat-win-file-type-listitem" onClick={() => { this.openFileDialogue("image") }}>
-              <input onChange={(e) => this.onImageChange(e, "image")} accept="image/*" type="file" ref={this.imageUploaderRef} />
-              <img src={imageUpload} alt="Choose an file to upload" />
-            </span>
-            <span className="cc1-chat-win-file-type-listitem" onClick={() => { this.openFileDialogue("file") }}>
-            <input onChange={(e) => this.onFileChange(e, "file")} type="file" id="file" ref={this.fileUploaderRef} />
-              <img src={docUpload} alt="Choose a file to upload" />
-            </span>
-          </div>
-        </div>
+        
         <div className="cc1-chat-win-inpt-int-wrap">
           <div className="cc1-chat-win-inpt-attach" onClick={this.toggleFilePicker}>
             <span><img src={roundedPlus} alt="Click to upload a file" /></span>
           </div>
+          <div className={filePickerClassName}>
+            <div className="cc1-chat-win-file-type-list">
+              <span className="cc1-chat-win-file-type-listitem video" onClick={() => { this.openFileDialogue("video") }}>
+              <input onChange={(e) => this.onVideoChange(e, "video")} accept="video/*" type="file" ref={this.videoUploaderRef} />
+              </span>
+              <span className="cc1-chat-win-file-type-listitem audio" onClick={() => { this.openFileDialogue("audio") }}>
+              <input onChange={(e) => this.onAudioChange(e, "audio")} accept="audio/*" type="file" ref={this.audioUploaderRef} />
+              </span>
+              <span className="cc1-chat-win-file-type-listitem image" onClick={() => { this.openFileDialogue("image") }}>
+                <input onChange={(e) => this.onImageChange(e, "image")} accept="image/*" type="file" ref={this.imageUploaderRef} />
+              </span>
+              <span className="cc1-chat-win-file-type-listitem file" onClick={() => { this.openFileDialogue("file") }}>
+              <input onChange={(e) => this.onFileChange(e, "file")} type="file" id="file" ref={this.fileUploaderRef} />
+              </span>
+            </div>
+          </div>
           <div className="cc1-chat-win-inpt-wrap">
             <input 
             type="text"
-            className="cc1-chat-win-inpt-box font-15"
-            placeholder="Type Message" 
+            className="cc1-chat-win-inpt-box"
+            placeholder="Enter your message here" 
             autoComplete="off" 
             disabled={disabled}
             onChange={this.changeHandler}

CometChat/components/CometChatMessageListScreen/MessageComposer/resources/audio_upload_icon.svg

@@ -1,64 +1,77 @@
 @import '../../../resources/core';
 
 .cc1-chat-win-file-popup {
-    position:absolute;
-    left:10px;
-    bottom:62px;
-    width:260px;
+    left:0;
+    bottom:0;
+    position:relative;
+    width: 0;
     border-radius:8px;
     overflow:hidden;
     z-index:1;
     text-align:center;
-
-    visibility: hidden;
     opacity: 0;
-    transition: visibility 0s linear 0.33s, opacity 0.33s linear;
+    transition: width 0.5s linear;
+
+    .cc1-chat-win-file-type-list {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-around;
+        margin-top: 5px;
+    }
 
     .cc1-chat-win-file-type-listitem {
-        padding: 5px;
-        width: 60px;
-        opacity: 0;
 
-        animation: slideIn ease forwards; 
+        width: 24px;
+        height: 24px;
+        background-color: $secondary;
+        cursor: pointer;
 
         input {
             display: none;
         }
-    
-        img { 
-            display:inherit;
-            cursor: pointer;
-        }
     }
-}
-
-.cc1-chat-win-file-popup.active {
-    visibility: visible;
-    opacity: 1;
-    transition-delay: 0s;    
-}
 
-@keyframes slideIn {
-    0% {
-        opacity: 0;
+    .cc1-chat-win-file-type-listitem.video {
+        -webkit-mask: url(./resources/video_upload_icon.svg) no-repeat 100% 100%;
+        mask: url(./resources/video_upload_icon.svg) no-repeat 100% 100%;
+        -webkit-mask-size: cover;
+        mask-size: cover;
     }
-    25% {
-        opacity: 0.25;
+
+    .cc1-chat-win-file-type-listitem.audio {
+        -webkit-mask: url(./resources/audio_upload_icon.svg) no-repeat 100% 100%;
+        mask: url(./resources/audio_upload_icon.svg) no-repeat 100% 100%;
+        -webkit-mask-size: cover;
+        mask-size: cover;
     }
-    50% {
-        opacity: 0.5;
+
+    .cc1-chat-win-file-type-listitem.image {
+        -webkit-mask: url(./resources/images_upload_icon.svg) no-repeat 100% 100%;
+        mask: url(./resources/images_upload_icon.svg) no-repeat 100% 100%;
+        -webkit-mask-size: cover;
+        mask-size: cover;
     }
-    100% {
-        opacity: 1;
+
+    .cc1-chat-win-file-type-listitem.file {
+        -webkit-mask: url(./resources/document_upload_icon.svg) no-repeat 100% 100%;
+        mask: url(./resources/document_upload_icon.svg) no-repeat 100% 100%;
+        -webkit-mask-size: cover;
+        mask-size: cover;
     }
 }
 
+.cc1-chat-win-file-popup.active {
+    width: 150px;
+    opacity: 1;
+}
 
 .cc1-chat-win-inpt-int-wrap {
     display:flex;
 
     .cc1-chat-win-inpt-attach { 
-        width:60px;
+        width: 50px;
         text-align:center;
 
         span {
@@ -89,6 +102,7 @@
             letter-spacing:-.1px;
             line-height:20px;
             padding:6px 36px 6px 12px;
+            @include font-15;
         }
 
         .cc1-chat-win-inpt-box.height {
@@ -118,86 +132,4 @@
         box-shadow:$light-grey 0 0 0 1px inset;
         color:#fff;
     }
-}
-
-
-// @import '../../../resources/mixins';
-// @import '../../../resources/colors';
-
-// .cp-message-composer {
-//     .cp-show-media{
-//         display: block;
-//         position: absolute;
-//         bottom: 45px;
-//         left: 17px;
-//         background-color: $light-background;
-//         button{
-//             background: none;
-//             border: none; 
-//             img{
-//                 width: 40px;
-//             }
-//         }
-//     }
-//     .cp-hide-media{
-//         display: None;
-//     }
-//     .cp-media-button{
-//         display: inline-block;
-//         button{
-//         background: none;
-//         border: none;
-//         img{
-//             width: 20px;
-//         }
-//         }
-//     }
-//     .cp-send-button{
-//         display: inline-block;
-//         button{
-//         background: none;
-//         border: none;
-//         padding: 3px 10px;
-//         img{
-//             width: 30px;
-//         }
-//         }
-//     }
-//     width: 100%;
-//     bottom: 12px;
-//     input{
-//         width: 85%;
-//         background-color: $gray-lighten-more-more;
-//         border: 1px solid #e8e8e8;
-//         border-radius: 5px;
-//         padding-left: 10px;
-//         padding-right: 10px;
-//         height: 34px;
-//         font-size: 18px;
-//     }
-// }
-
-// @media screen and (min-width: 768px) and (max-width : 992px){
-//     .cp-message-composer{
-//         input{
-//             width: 80%;
-//         }
-//     }
-// }
-
-
-// .dark{
-//     .cp-show-media{
-//      background-color: $dark-background;
-//      p{
-//          color:$light-background;
-//      }
-//     }
-// }
-
-
-// .light{
-//     .cp-show-media{
-//         background-color: $light-background;
-//     }
-// }
+}

CometChat/components/CometChatMessageListScreen/MessageComposer/resources/document_upload_icon.svg

@@ -2,14 +2,34 @@ import React from "react";
 import "./style.scss";
 
 import Avatar from "../../Avatar";
+import { SvgAvatar } from '../../../util/svgavatar';
 
 const messageheader = (props) => {
 
   let status, image;
   if(props.type === "user") {
+
+    if(!props.item.avatar) {
+
+      const uid = props.item.getUid();
+      const char = props.item.getName().charAt(0).toUpperCase();
+
+      props.item.setAvatar(SvgAvatar.getAvatar(uid, char));
+    }
+
     status = props.item.status;
     image = props.item.avatar;
+
   } else {
+
+    if(!props.item.icon) {
+
+      const guid = props.item.getGuid();
+      const char = props.item.getName().charAt(0).toUpperCase();
+
+      props.item.setIcon(SvgAvatar.getAvatar(guid, char))
+    }
+
     status = props.item.type;
     image = props.item.icon;
   }