krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-16 22:27:26 +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
parent c035435476
commit 07cbf45265
2 changed files with 42 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
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(
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)",
)
.card(:class='inbox ? "col-8" : "col-10"')
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='{"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,22 +32,36 @@
@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]",
:avatarOnly="true",
:hideClassBadge='true',
:overrideTopPadding='"14px"',
@click.native="showMemberModal(msg.uuid)",
)
avatar(
v-if='msg.userStyles || (cachedProfileData[msg.uuid] && !cachedProfileData[msg.uuid].rejected)',
:member="msg.userStyles || cachedProfileData[msg.uuid]",
:avatarOnly="true",
:hideClassBadge='true',
:overrideTopPadding='"14px"',
@click.native="showMemberModal(msg.uuid)",
:class='{"inbox-avatar-right": inbox}'
)
</template>
<style lang="scss" scoped>
@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>