Use more specific css rules for the emoji dimensions in the chat list status preview. Use more round em value for chat list item height. Add global html overflow and height for smoother chat navigation in the desktop Safari. Use offsetHeight instad of a computed style when setting the window height on resize. Remove margin-bottom from the last message to avoid occasional layout shift in the desktop Safari Use break-word to prevent chat message text overflow Resize and scroll the textarea when inserting a new line on ctrl+enter Remove fade transition on route change Ensure proper border radius at the bottom of the chat, remove unused border-radius Prevent the chat header "jumping" on the avatar load.fix/aggregate-notification-settings
parent
aa2cf51c05
commit
f05f832bff
@ -1,100 +0,0 @@
|
||||
const ChatLayout = {
|
||||
methods: {
|
||||
setChatLayout () {
|
||||
if (this.mobileLayout) {
|
||||
this.setMobileChatLayout()
|
||||
}
|
||||
},
|
||||
unsetChatLayout () {
|
||||
this.unsetMobileChatLayout()
|
||||
},
|
||||
setMobileChatLayout () {
|
||||
// This is a hacky way to adjust the global layout to the mobile chat (without modifying the rest of the app).
|
||||
// This layout prevents empty spaces from being visible at the bottom
|
||||
// of the chat on iOS Safari (`safe-area-inset`) when
|
||||
// - the on-screen keyboard appears and the user starts typing
|
||||
// - the user selects the text inside the input area
|
||||
// - the user selects and deletes the text that is multiple lines long
|
||||
// TODO: unify the chat layout with the global layout.
|
||||
|
||||
let html = document.querySelector('html')
|
||||
if (html) {
|
||||
html.style.overflow = 'hidden'
|
||||
html.style.height = '100%'
|
||||
}
|
||||
|
||||
let body = document.querySelector('body')
|
||||
if (body) {
|
||||
body.style.height = '100%'
|
||||
}
|
||||
|
||||
let app = document.getElementById('app')
|
||||
if (app) {
|
||||
app.style.height = '100%'
|
||||
app.style.overflow = 'hidden'
|
||||
app.style.minHeight = 'auto'
|
||||
}
|
||||
|
||||
let appBgWrapper = window.document.getElementById('app_bg_wrapper')
|
||||
if (appBgWrapper) {
|
||||
appBgWrapper.style.overflow = 'hidden'
|
||||
}
|
||||
|
||||
let main = document.getElementsByClassName('main')[0]
|
||||
if (main) {
|
||||
main.style.overflow = 'hidden'
|
||||
main.style.height = '100%'
|
||||
}
|
||||
|
||||
let content = document.getElementById('content')
|
||||
if (content) {
|
||||
content.style.paddingTop = '0'
|
||||
content.style.height = '100%'
|
||||
content.style.overflow = 'visible'
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.updateScrollableContainerHeight()
|
||||
})
|
||||
},
|
||||
unsetMobileChatLayout () {
|
||||
let html = document.querySelector('html')
|
||||
if (html) {
|
||||
html.style.overflow = 'visible'
|
||||
html.style.height = 'unset'
|
||||
}
|
||||
|
||||
let body = document.querySelector('body')
|
||||
if (body) {
|
||||
body.style.height = 'unset'
|
||||
}
|
||||
|
||||
let app = document.getElementById('app')
|
||||
if (app) {
|
||||
app.style.height = '100%'
|
||||
app.style.overflow = 'visible'
|
||||
app.style.minHeight = '100vh'
|
||||
}
|
||||
|
||||
let appBgWrapper = document.getElementById('app_bg_wrapper')
|
||||
if (appBgWrapper) {
|
||||
appBgWrapper.style.overflow = 'visible'
|
||||
}
|
||||
|
||||
let main = document.getElementsByClassName('main')[0]
|
||||
if (main) {
|
||||
main.style.overflow = 'visible'
|
||||
main.style.height = 'unset'
|
||||
}
|
||||
|
||||
let content = document.getElementById('content')
|
||||
if (content) {
|
||||
content.style.paddingTop = '60px'
|
||||
content.style.height = 'unset'
|
||||
content.style.overflow = 'unset'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ChatLayout
|
@ -1,23 +0,0 @@
|
||||
import StillImage from '../still-image/still-image.vue'
|
||||
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
const ChatAvatar = {
|
||||
props: ['user', 'width', 'height'],
|
||||
components: {
|
||||
StillImage
|
||||
},
|
||||
methods: {
|
||||
getUserProfileLink (user) {
|
||||
if (!user) { return }
|
||||
return generateProfileLink(user.id, user.screen_name)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
betterShadow: state => state.interface.browserSupport.cssFilter
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default ChatAvatar
|
@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<router-link
|
||||
:to="getUserProfileLink(user) || ''"
|
||||
>
|
||||
<StillImage
|
||||
v-if="user"
|
||||
:style="{ 'width': width, 'height': height }"
|
||||
class="avatar chat-avatar single-user"
|
||||
:alt="user.screen_name"
|
||||
:title="user.screen_name"
|
||||
:src="user.profile_image_url_original"
|
||||
error-src="/images/avi.png"
|
||||
:class="{ 'better-shadow': betterShadow }"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="avatar chat-avatar single-user"
|
||||
:style="{ 'width': width, 'height': height }"
|
||||
/>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<script src="./chat_avatar.js"></script>
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.chat-avatar {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
||||
&.single-user {
|
||||
border-radius: $fallback--avatarAltRadius;
|
||||
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
|
||||
}
|
||||
|
||||
.avatar.still-image {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
|
||||
box-shadow: var(--avatarStatusShadow);
|
||||
border-radius: 0;
|
||||
|
||||
&.better-shadow {
|
||||
box-shadow: var(--avatarStatusShadowInset);
|
||||
filter: var(--avatarStatusShadowFilter)
|
||||
}
|
||||
|
||||
&.animated::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,89 @@
|
||||
import chatService from '../../../../../src/services/chat_service/chat_service.js'
|
||||
|
||||
const message1 = {
|
||||
id: '9wLkdcmQXD21Oy8lEX',
|
||||
created_at: (new Date('2020-06-22T18:45:53.000Z'))
|
||||
}
|
||||
|
||||
const message2 = {
|
||||
id: '9wLkdp6ihaOVdNj8Wu',
|
||||
account_id: '9vmRb29zLQReckr5ay',
|
||||
created_at: (new Date('2020-06-22T18:45:56.000Z'))
|
||||
}
|
||||
|
||||
const message3 = {
|
||||
id: '9wLke9zL4Dy4OZR2RM',
|
||||
account_id: '9vmRb29zLQReckr5ay',
|
||||
created_at: (new Date('2020-07-22T18:45:59.000Z'))
|
||||
}
|
||||
|
||||
// TODO: only
|
||||
describe.only('chatService', () => {
|
||||
describe('.add', () => {
|
||||
it("Doesn't add duplicates", () => {
|
||||
const chat = chatService.empty()
|
||||
chatService.add(chat, { messages: [ message1 ] })
|
||||
chatService.add(chat, { messages: [ message1 ] })
|
||||
expect(chat.messages.length).to.eql(1)
|
||||
|
||||
chatService.add(chat, { messages: [ message2 ] })
|
||||
expect(chat.messages.length).to.eql(2)
|
||||
})
|
||||
|
||||
it('Updates minId and lastMessage and newMessageCount', () => {
|
||||
const chat = chatService.empty()
|
||||
|
||||
chatService.add(chat, { messages: [ message1 ] })
|
||||
expect(chat.lastMessage.id).to.eql(message1.id)
|
||||
expect(chat.minId).to.eql(message1.id)
|
||||
expect(chat.newMessageCount).to.eql(1)
|
||||
|
||||
chatService.add(chat, { messages: [ message2 ] })
|
||||
expect(chat.lastMessage.id).to.eql(message2.id)
|
||||
expect(chat.minId).to.eql(message1.id)
|
||||
expect(chat.newMessageCount).to.eql(2)
|
||||
|
||||
chatService.resetNewMessageCount(chat)
|
||||
expect(chat.newMessageCount).to.eql(0)
|
||||
|
||||
const createdAt = new Date()
|
||||
createdAt.setSeconds(createdAt.getSeconds() + 10)
|
||||
chatService.add(chat, { messages: [ { message3, created_at: createdAt } ] })
|
||||
expect(chat.newMessageCount).to.eql(1)
|
||||
})
|
||||
})
|
||||
|
||||
describe('.delete', () => {
|
||||
it('Updates minId and lastMessage', () => {
|
||||
const chat = chatService.empty()
|
||||
|
||||
chatService.add(chat, { messages: [ message1 ] })
|
||||
chatService.add(chat, { messages: [ message2 ] })
|
||||
chatService.add(chat, { messages: [ message3 ] })
|
||||
|
||||
expect(chat.lastMessage.id).to.eql(message3.id)
|
||||
expect(chat.minId).to.eql(message1.id)
|
||||
|
||||
chatService.deleteMessage(chat, message3.id)
|
||||
expect(chat.lastMessage.id).to.eql(message2.id)
|
||||
expect(chat.minId).to.eql(message1.id)
|
||||
|
||||
chatService.deleteMessage(chat, message1.id)
|
||||
expect(chat.lastMessage.id).to.eql(message2.id)
|
||||
expect(chat.minId).to.eql(message2.id)
|
||||
})
|
||||
})
|
||||
|
||||
describe('.getView', () => {
|
||||
it('Inserts date separators', () => {
|
||||
const chat = chatService.empty()
|
||||
|
||||
chatService.add(chat, { messages: [ message1 ] })
|
||||
chatService.add(chat, { messages: [ message2 ] })
|
||||
chatService.add(chat, { messages: [ message3 ] })
|
||||
|
||||
const view = chatService.getView(chat)
|
||||
expect(view.map(i => i.type)).to.eql(['date', 'message', 'message', 'date', 'message'])
|
||||
})
|
||||
})
|
||||
})
|
Loading…
Reference in new issue