Skip to content

Commit

Permalink
added feature: sharing blob image
Browse files Browse the repository at this point in the history
  • Loading branch information
@josnin
josnin committed Sep 14, 2020
1 parent 6ce5803 commit 3928028
Show file tree
Hide file tree
Showing 5 changed files with 358 additions and 44 deletions.
12 changes: 10 additions & 2 deletions chat/consumers.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,18 @@ async def disconnect(self, code):
async def receive(self, text_data=None, bytes_data=None):
text_data_json = json.loads(text_data)
message = text_data_json['message']
image_caption = text_data_json['image_caption']
message_type = text_data_json['message_type']

# Send message to room group
await self.channel_layer.group_send(
self.room_group_name,
{
'type': 'chat_message',
'username': self.scope['user'].username.title(),
'message': message
'message': message,
'message_type': message_type,
'image_caption': image_caption
}
)

Expand All @@ -48,9 +52,13 @@ async def chat_message(self, event):
""" exhange message here """
message = event['message']
username = event['username']
image_caption = event['image_caption']
message_type = event['message_type']

# Send message to WebSocket
await self.send(text_data=json.dumps({
'message': message,
'username': username
'username': username,
'image_caption': image_caption,
'message_type': message_type
}))
181 changes: 177 additions & 4 deletions chat/static/chat/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@
}
/* room side bar groups */

.room-container {
.room-container__msg {
display:grid;
width: 100%;
min-height: 99vh;
Expand All @@ -198,6 +198,19 @@
"msg-input";
}

.room-container__preview-img {
display:grid;
width: 100%;
height:99vh;
grid-template-rows: 59px auto;
grid-template-areas: "msg-header"
"preview-msg-box";
}

.preview-img-box {
grid-area: preview-msg-box;
}

.msg-header {
grid-area: msg-header;
background-color: #EDEDED;
Expand Down Expand Up @@ -267,11 +280,161 @@ svg {
grid-area: msg-box;
padding-left:4rem;
padding-right:4rem;
/*background-color: #e5ddd5; */
}

.msg-box--background {
background: #efe7dd url("https://cloud.githubusercontent.com/assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpg") repeat;
overflow-y: scroll;
}

.preview-img {
background-color: #EEE;
display: grid;
padding:0;
grid-template-rows: 49px 1fr 60px 120px;
gap: 2rem;
}

.preview-img__header {
background-color: #00bfa5ff;
display: grid;
grid-template-columns: 42px auto;
align-items: center;
align-content: center;
padding: 1.5rem;
}

.preview-img__header__close {
display: grid; /* need this to remove svg padding bottom */
}

.preview-img__header__label {
font-size: 19px;
/* overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; */
font-weight: 500;
color: white;
}

.preview-img__snipped-big {
width: 100%;
height: 100%;
display: grid;
justify-content: center;
}

.preview-img__snipped-big__border {
display:grid;
justify-content: center;
}

.preview-img__snipped-big__border img {
height:100%;
object-fit: cover;
}


.preview-img__caption {
justify-self: center;
align-self: end;
width: 75%;
display: grid;
grid-template-columns: auto 50px;
padding-right: .5rem;
margin-bottom:.75rem;
border-bottom: 2px solid #00bfa5ff;
}

.preview-img__caption input[type="text"] {
width: 100%;
padding: 0px 0px 3px;
margin: 6px 0px;
box-sizing: border-box;
outline:none;
border:0;
background-color:inherit;
font-size: 1rem;
}

.preview-img__caption__emoji {
justify-self: right;
}

.preview-img__footer {
background-color: #d9d9d9ff;
display: grid;
grid-template-columns: 1fr 78px 78px 1fr;
grid-template-areas: ". img-small add-file btn-img-send";
gap: .25rem;
padding-top: 1.5rem;
padding-left: 1.5rem;
padding-bottom: 1.5rem;
padding-right: 2.5rem;
position: relative;
}

.preview-img__footer__img-small {
background-color: white;
padding:5px;
grid-area: img-small;
width: 100%;
height: 100%;
}

.preview-img__footer__img-small img {
height: 100%;
width: 100%;
object-fit: cover;
}

.preview-img__footer__addfile {
background-color: white;
padding:8px;
width: 100%;
grid-area: add-file;
display: grid;
align-items: center;
justify-self: center;
gap: .2rem;
}

.preview-img__footer__addfile__img {
justify-self: center;
align-self: end;
display: grid;
}

.preview-img__footer__addfile__label {
justify-self: center;
align-self: start;
font-size: .68rem;
font-weight: 600;
color: #00A5F4;
}

.preview-img__footer__button {
justify-self: end;
grid-area: btn-img-send;
padding: 0;
background-color: #09e85eff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,.4);
width: 60px;
height: 60px;
display:grid;
align-items: center;
justify-items: center;
position:absolute;
top: -55px;

}

.preview-img__footer__button-arrow {
display: grid;
}


.msg-input {
grid-area: msg-input;
padding: 1rem;
Expand Down Expand Up @@ -328,7 +491,7 @@ svg {
padding: 0.5rem;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
grid-template-rows: 1fr 20px;
grid-template-areas: "s-msg"
"s-time";

Expand All @@ -344,7 +507,7 @@ svg {
padding: 0.5rem;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
grid-template-rows: 20px 1fr;
grid-template-areas: "r-user"
"r-msg"
"r-time";
Expand All @@ -362,6 +525,11 @@ svg {
font-size: .90rem;
}

.s-msg img {
max-width: 330px;
max-height: 249px;
}

.s-time {
grid-area: s-time;
font-size: .70rem;
Expand Down Expand Up @@ -390,6 +558,11 @@ svg {
font-size: .90rem;
}

.r-msg img {
max-width: 330px;
max-height: 249px;
}

.r-time {
grid-area: r-time;
font-size: .70rem;
Expand Down
Loading

0 comments on commit 3928028

Please sign in to comment.