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

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

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