krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-17 22:57:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(chat): less intrusive highlight and better margins

Browse Source
This commit is contained in:
Sabe Jones
2018-11-14 16:31:35 -06:00
committed by Phillip Thelen
parent 793af2a10d
commit d031a4c9aa
2 changed files with 42 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
website/client/components/chat/chatCard.vue
View File

@@ -211,7 +211,7 @@ export default {
const escapedDisplayName = escapeRegExp(displayName);
const escapedUsername = escapeRegExp(username);
const pattern = `@(${escapedUsername}|${escapedDisplayName})([^\w]|$)`;
const pattern = `@(${escapedUsername}|${escapedDisplayName})(\\b)`;
const precedingChar = messageText.substring(mentioned - 1, mentioned);
if (mentioned === 0 || precedingChar.trim() === '' || precedingChar === '@') {
let regex = new RegExp(pattern, 'i');
@@ -304,7 +304,7 @@ export default {
this.$emit('show-member-modal', memberId);
},
atHighlight (text) {
return text.replace(new RegExp(/(?!\b)@[\w-]+/g), match => {
return text.replace(new RegExp(`@(${this.user.auth.local.username}|${this.user.profile.name})(?:\\b)`, 'gi'), match => {
return `<span class="at-highlight">${match}</span>`;
});
},

38
website/client/components/chat/chatMessages.vue
View File

@@ -1,24 +1,21 @@
<template lang="pug">
.container
.container-fluid
.row
.col-12
copy-as-todo-modal(:group-type='groupType', :group-name='groupName', :group-id='groupId')
report-flag-modal
div(v-for="(msg, index) in messages", v-if='chat && canViewFlag(msg)')
// @TODO: is there a different way to do these conditionals? This creates an infinite loop
//.hr(v-if='displayDivider(msg)')
.hr-middle(v-once) {{ msg.timestamp }}
.row(v-if='user._id !== msg.uuid')
div(:class='inbox ? "col-4" : "col-2"')
avatar(
div(v-for="(msg, index) in messages", v-if='chat && canViewFlag(msg)', :class='{row: inbox}')
.d-flex(v-if='user._id !== msg.uuid', :class='{"flex-grow-1": inbox}')
avatar.avatar-left(
v-if='msg.userStyles || (cachedProfileData[msg.uuid] && !cachedProfileData[msg.uuid].rejected)',
:member="msg.userStyles || cachedProfileData[msg.uuid]",
:avatarOnly="true",
:overrideTopPadding='"14px"',
:hideClassBadge='true',
@click.native="showMemberModal(msg.uuid)",
:class='{"inbox-avatar-left": inbox}'
)
.card(:class='inbox ? "col-8" : "col-10"')
.card(:class='{"col-10": inbox}')
chat-card(
:msg='msg',
:inbox='inbox',
@@ -26,8 +23,8 @@
@message-liked='messageLiked',
@message-removed='messageRemoved',
@show-member-modal='showMemberModal')
.row(v-if='user._id === msg.uuid')
.card(:class='inbox ? "col-8" : "col-10"')
.d-flex(v-if='user._id === msg.uuid', :class='{"flex-grow-1": inbox}')
.card(:class='{"col-10": inbox}')
chat-card(
:msg='msg',
:inbox='inbox',
@@ -35,7 +32,6 @@
@message-liked='messageLiked',
@message-removed='messageRemoved',
@show-member-modal='showMemberModal')
div(:class='inbox ? "col-4" : "col-2"')
avatar(
v-if='msg.userStyles || (cachedProfileData[msg.uuid] && !cachedProfileData[msg.uuid].rejected)',
:member="msg.userStyles || cachedProfileData[msg.uuid]",
@@ -43,6 +39,7 @@
:hideClassBadge='true',
:overrideTopPadding='"14px"',
@click.native="showMemberModal(msg.uuid)",
:class='{"inbox-avatar-right": inbox}'
)
</template>
@@ -50,7 +47,21 @@
@import '~client/assets/scss/colors.scss';
.avatar {
margin-left: -1.75rem;
width: 15%;
}
.avatar-left {
margin-left: -1.5rem;
margin-right: 2rem;
}
.inbox-avatar-left {
margin-left: -1rem;
margin-right: 2.5rem;
}
.inbox-avatar-right {
margin-left: -3.5rem;
}
.hr {
@@ -79,6 +90,7 @@
border: 0px;
margin-bottom: .5em;
padding: 0rem;
width: 85%;
}
</style>