Skip to content
This repository has been archived by the owner on Jan 19, 2022. It is now read-only.

Commit

Permalink
Merge pull request #47 from credija/develop
Browse files Browse the repository at this point in the history 
ADD: Floating label for date and performance fix for Chatbox
  • Loading branch information
@kevinfaveri
kevinfaveri authored Apr 30, 2019
2 parents 428ed70 + 5b42684 commit 5aefab0
Show file tree
Hide file tree
Showing 11 changed files with 187 additions and 74 deletions.
143 changes: 84 additions & 59 deletions components/chat-box/chat-box.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="chat-box">
<div v-if="activeConversation !== null">
<div v-show="activeConversation !== null">
<el-row class="pl1 py2 bb1 v-align" :class="{ 'dark-border': chatConfig.darkMode === true}">
<el-col :span="3" class="max-size-header mr1">
<img v-if="profileImageSrc !== null" class="b-full-circle img-fit b1 clickable"
Expand All @@ -12,17 +12,21 @@
</el-col>
<el-col :span="16">
<el-row>
<strong class="clickable" @click="clickContactDetails()">{{ activeConversation.contact.name }}</strong>
<strong class="clickable" @click="clickContactDetails()" v-if="activeConversation">
{{ activeConversation.contact.name }}
</strong>
</el-row>
<el-row class="pb1" v-if="!isDisconnected">
<font-awesome-icon icon="circle"
class="text-label"
:class="getPresenceColor(activeConversation.contact.presence.id)"
v-if="!activeConversation.isTyping"/>
<span v-if="!activeConversation.isTyping">
:class="getPresenceColor(activeConversation.contact.presence.id)"
v-if="activeConversation && !activeConversation.isTyping"/>
<span v-if="activeConversation && !activeConversation.isTyping">
{{ presenceValue }}
</span>
<span class="text-teal-clean text-bold" v-if="activeConversation.isTyping">{{ $t('chatbox.typingLabel') }}</span>
<span class="text-teal-clean text-bold" v-if="activeConversation && activeConversation.isTyping">
{{ $t('chatbox.typingLabel') }}
</span>
</el-row>
</el-col>
<el-col :span="6">
Expand All @@ -35,75 +39,96 @@
</el-col>
</el-row>

<el-row class="by1 size-conversation px3" id="message-box"
<el-row>
<el-card class="absolute-top z-index-2 p1 fade-in text-bold text-primary b-rounded bg-semi-transparent"
v-show="activeConversation &&
(activeConversation.oldConversation.list.length !== 0
|| activeConversation.list.length !== 0)">
{{ dateLabel }}
</el-card>
</el-row>

<el-row class="by1 size-conversation px3 z-index-1" id="message-box"
:class="{ 'bg-white': chatConfig.darkMode === undefined || chatConfig.darkMode === false,
'dark-theme': chatConfig.darkMode === true,
'dark-border': chatConfig.darkMode === true}">
<el-row class="text-center my1" v-if="activeConversation.oldConversation.noResult !== true">

<el-row class="text-center my1" v-if="activeConversation && activeConversation.oldConversation.noResult !== true">
<intersect @enter="autoLoadOldMessages()">
<el-button class="unclickable" round plain>
<font-awesome-icon icon="sync" class="icon-medium text-primary" spin></font-awesome-icon>
</el-button>
</intersect>
</el-row>

<el-row class="text-center my1" v-if="activeConversation.oldConversation.noResult === true">
<el-row class="text-center my1" v-if="activeConversation && activeConversation.oldConversation.noResult === true">
<strong>{{ $t('chatbox.oldMessagesLimit') }}</strong>
</el-row>

<el-row v-if="activeConversation.oldConversation.list.length !== 0">
<el-row v-if="activeConversation && activeConversation.oldConversation.list.length !== 0">
<el-row v-for="(message, key) in activeConversation.oldConversation.list" :key="key">
<div class="float-right p1 m1 b-rounded message-style"
:class="{ 'bg-light-teal': chatConfig.darkMode === undefined || chatConfig.darkMode === false,
'bg-primary': chatConfig.darkMode === true }"
v-if="message.ownMessage">
<p class="m0">
<span v-html="parseMessage(message.msg)"></span>
<small class="float-right text-gray">
{{ message.stampDate | isDateToday(appLocale) }}
</small>
</p>
</div>

<div class="float-left p1 m1 b-rounded message-style"
:class="{ 'bg-light-gray': chatConfig.darkMode === undefined || chatConfig.darkMode === false,
'bg-dark-light': chatConfig.darkMode === true }"
v-if="message.ownMessage === false">
<p class="m0">
<span v-html="parseMessage(message.msg)"></span>
<small class="float-right text-gray">
{{ message.stampDate | isDateToday(appLocale) }}
</small>
</p>
</div>
<intersect @enter="addToStampDateList(message.stampDate)" @leave="removeFromStampDateList(message.stampDate)">
<div id="oldMessages">
<div class="float-right p1 m1 b-rounded message-style"
:class="{ 'bg-light-teal': chatConfig.darkMode === undefined || chatConfig.darkMode === false,
'bg-primary': chatConfig.darkMode === true }"
v-if="message.ownMessage">
<p class="m0">
<span v-html="parseMessage(message.msg)"></span>
<small class="float-right text-gray">
{{ message.stampDate | isDateToday(appLocale) }}
</small>
</p>
</div>

<div class="float-left p1 m1 b-rounded message-style"
:class="{ 'bg-light-gray': chatConfig.darkMode === undefined || chatConfig.darkMode === false,
'bg-dark-light': chatConfig.darkMode === true }"
v-if="message.ownMessage === false">
<p class="m0">
<span v-html="parseMessage(message.msg)"></span>
<small class="float-right text-gray">
{{ message.stampDate | isDateToday(appLocale) }}
</small>
</p>
</div>
</div>
</intersect>
</el-row>
</el-row>

<el-row v-for="(message, key) in activeConversation.list" :key="key">
<div class="float-right p1 m1 b-rounded message-style"
:class="{ 'bg-light-teal': chatConfig.darkMode === undefined || chatConfig.darkMode === false,
'bg-primary': chatConfig.darkMode === true }"
v-if="message.ownMessage">
<p class="m0">
<span v-html="parseMessage(message.msg)"></span>
<small class="float-right text-gray">
{{ message.stampDate | isDateToday(appLocale) }}
</small>
</p>
</div>

<div class="float-left p1 m1 b-rounded message-style"
:class="{ 'bg-light-gray': chatConfig.darkMode === undefined || chatConfig.darkMode === false,
'bg-dark-light': chatConfig.darkMode === true }"
v-if="message.ownMessage === false">
<p class="m0">
<span v-html="parseMessage(message.msg)"></span>
<small class="float-right text-gray">
{{ message.stampDate | isDateToday(appLocale) }}
</small>
</p>
</div>
<el-row v-if="activeConversation && activeConversation.list.length !== 0">
<el-row v-for="(message, key) in activeConversation.list" :key="key">
<intersect @enter="addToStampDateList(message.stampDate)" @leave="removeFromStampDateList(message.stampDate)">
<div id="newMessages">
<div class="float-right p1 m1 b-rounded message-style"
:class="{ 'bg-light-teal': chatConfig.darkMode === undefined || chatConfig.darkMode === false,
'bg-primary': chatConfig.darkMode === true }"
v-if="message.ownMessage">
<p class="m0">
<span v-html="parseMessage(message.msg)"></span>
<small class="float-right text-gray">
{{ message.stampDate | isDateToday(appLocale) }}
</small>
</p>
</div>

<div class="float-left p1 m1 b-rounded message-style"
:class="{ 'bg-light-gray': chatConfig.darkMode === undefined || chatConfig.darkMode === false,
'bg-dark-light': chatConfig.darkMode === true }"
v-if="message.ownMessage === false">
<p class="m0">
<span v-html="parseMessage(message.msg)"></span>
<small class="float-right text-gray">
{{ message.stampDate | isDateToday(appLocale) }}
</small>
</p>
</div>
</div>
</intersect>
</el-row>
</el-row>

</el-row>
<el-row>
<el-col :span="2" class="text-center">
Expand Down Expand Up @@ -135,7 +160,7 @@
</el-col>
</el-row>
</div>
<div v-if="activeConversation === null">
<div v-show="activeConversation === null">
<el-row class="text-center mt7">
<img src="svg-emoji/pensive-emoji.svg" height="180px" width="180px" alt="Pensive Face" v-if="chatboxEmoji === 'pensive'"/>
<img src="svg-emoji/thinking-emoji.svg" height="180px" width="180px" alt="Thinking Face" v-if="chatboxEmoji === 'thinking'"/>
Expand All @@ -149,7 +174,7 @@
<span>{{ $t('chat.tipNewConversation') }} <font-awesome-icon icon="comment" class="icon-medium"/></span>
</el-row>
</div>
<contact-details :activeContact="activeContact"
<contact-details class="z-index-3" :activeContact="activeContact"
:showContactDetails="showContactDetails"
@closeContactDetails="closeContactDetails"></contact-details>
</div>
59 changes: 49 additions & 10 deletions components/chat-box/chat-box.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import EmojiGroups from 'cool-emoji-picker/src/emoji-data/emoji-groups.json';

let XmppService = null;

// TODO: Performance when has many conversations
export default {
name: 'ChatBox',
components: {
Expand All @@ -28,7 +27,9 @@ export default {
showContactDetails: false,
chatboxHeight: 0,
chatboxMaxHeight: 0,


stampDateList: [],
dateLabel: this.$t('date.today'),
};
},
created() {
Expand Down Expand Up @@ -79,6 +80,10 @@ export default {

this.scrollMessageBoxToBottom();
},
activeConversation: function () {
this.stampDateList = [];
this.dateLabel = this.$t('date.today');
},
},
computed: {
xmppClient() {
Expand All @@ -97,15 +102,18 @@ export default {
return this.$store.state.chat.conversationList;
},
profileImageSrc() {
const profileImageList = this.$store.state.app.profileImageList;
const profileImageObj = profileImageList.find(profileImage =>
profileImage.username.toUpperCase() === this.activeContact.username.toUpperCase());
let imgSrc = null;
if (profileImageObj !== undefined
&& profileImageObj.bin) {
imgSrc = 'data:' + profileImageObj.type + ';base64,' + profileImageObj.bin;
if (this.activeContact !== null) {
const profileImageList = this.$store.state.app.profileImageList;
const profileImageObj = profileImageList.find(profileImage =>
profileImage.username.toUpperCase() === this.activeContact.username.toUpperCase());
let imgSrc = null;
if (profileImageObj !== undefined
&& profileImageObj.bin) {
imgSrc = 'data:' + profileImageObj.type + ';base64,' + profileImageObj.bin;
}
return imgSrc;
}
return imgSrc;
return null;
},
isDisconnected() {
return this.$store.state.app.isDisconnected;
Expand Down Expand Up @@ -267,5 +275,36 @@ export default {
XmppService.getOldMessages(this.activeConversation);
}
},
addToStampDateList(stampDate) {
this.stampDateList.push(stampDate);
this.stampDateList = this.stampDateList.sort(function(a,b){
return a - b;
});
this.setDateLabel();
},
removeFromStampDateList(stampDate) {
this.stampDateList = this.stampDateList.filter(item => item !== stampDate);
this.setDateLabel();
},
setDateLabel() {
const firstStamp = this.stampDateList[0];

if (firstStamp === undefined) return this.$t('date.today');

const today = new Date;
const yesterday = new Date; yesterday.setDate(today.getDate() - 1);

if(firstStamp.getDate() === today.getDate() &&
firstStamp.getMonth() === today.getMonth() &&
firstStamp.getFullYear() === today.getFullYear()) {
this.dateLabel = this.$t('date.today');
} else if (firstStamp.getDate() === yesterday.getDate() &&
firstStamp.getMonth() === yesterday.getMonth() &&
firstStamp.getFullYear() === yesterday.getFullYear()) {
this.dateLabel = this.$t('date.yesterday');
} else {
this.dateLabel = firstStamp.toLocaleDateString(this.appLocale);
}
},
},
};
4 changes: 3 additions & 1 deletion components/contact-list/contact-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,9 @@ export default {
this.$store.dispatch('chat/clearUnreadCounterConversation', conversation);
}

this.saveChatboxState();
if (this.activeConversation !== null) {
this.saveChatboxState();
}

this.$store.dispatch('chat/updateActiveConversation', conversation);
this.$emit('switchActiveMenu');
Expand Down
3 changes: 1 addition & 2 deletions components/conversations/conversations.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,9 @@ export default {
DocTitleService.updateTitle();
}

this.saveChatboxState();

if (this.activeConversation !== null) {
XmppService.sendChatSignal(this.activeConversation.contact.username, 'paused');
this.saveChatboxState();
}

this.$store.dispatch('chat/clearUnreadCounterConversation', conversation);
Expand Down
36 changes: 34 additions & 2 deletions global-styles/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ small {
}

.text-primary {
color: teal;
color: teal !important;
}

.text-warning {
Expand Down Expand Up @@ -337,6 +337,10 @@ a {
}

// Background Relatives
.bg-semi-transparent {
background:rgba(255, 255, 255, 0.8) !important;
}

.bg-alert {
background-color: #ffcdd2 !important;
}
Expand Down Expand Up @@ -510,6 +514,14 @@ img.emoji {
overflow: hidden;
}

// Fade In/Out
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}

// Enter Right to Left / Exit Left
.slide-rl-leave-active,
.slide-rl-enter-active {
Expand Down Expand Up @@ -557,4 +569,24 @@ img.emoji {
animation-fill-mode: both;
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
}

// Abosolute Styles
.absolute-top {
position: absolute;
left: 50%;
margin-top: 10px;
}

// Z-INDEX
.z-index-1 {
z-index: 1;
}

.z-index-2 {
z-index: 2;
}

.z-index-3 {
z-index: 3;
}
1 change: 1 addition & 0 deletions plugins/global-mixins.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Vue from 'vue'
import XmppService from '@/services/xmpp-service';
import PresenceEnum from '@/enums/presence-enum';
import MessageParser from '@/services/message-parser';
import ArrayUtils from '@/utils/array-utils';

export default ({ store }) => {
Vue.prototype.dispatchHappyEmoji = () => { store.dispatch('chat/updateChatboxEmoji', 'happy') };
Expand Down
Loading

0 comments on commit 5aefab0

Please sign in to comment.