Add jump-to-bottom arrow when scrolled up

This commit is contained in:
Pavel Djundik 2018-07-18 21:31:51 +03:00 committed by Pavel Djundik
parent bc69ef5f0b
commit ad0f638487
4 changed files with 98 additions and 7 deletions

View File

@ -55,6 +55,18 @@
@linkPreviewToggle="onLinkPreviewToggle"/>
</template>
</div>
<transition name="fade">
<div
v-if="!channel.scrolledToBottom"
class="scroll-down"
@click="jumpToBottom()">
<div class="scroll-down-arrow"/>
<div
v-if="unreadMessages > 0"
class="scroll-down-number">{{ unreadMessages }}</div>
</div>
</transition>
</div>
</template>
@ -125,10 +137,23 @@ export default {
return condensed;
},
unreadMessages() {
let unread = 0;
for (let id = this.condensedMessages.length - 1; id > 0; id--) {
if (this.channel.firstUnread >= this.condensedMessages[id].id) {
break;
}
unread++;
}
return unread;
},
},
watch: {
"channel.id"() {
this.$set(this.channel, "scrolledToBottom", true);
this.channel.scrolledToBottom = true;
},
"channel.messages"() {
this.keepScrollPosition();
@ -153,7 +178,7 @@ export default {
}
this.channel.scrolledToBottom = true;
this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight;
this.jumpToBottom();
});
},
mounted() {
@ -261,7 +286,7 @@ export default {
this.isWaitingForNextTick = true;
this.$nextTick(() => {
this.isWaitingForNextTick = false;
el.scrollTop = el.scrollHeight;
this.jumpToBottom();
});
},
handleScroll() {
@ -275,12 +300,14 @@ export default {
},
handleResize() {
// Keep message list scrolled to bottom on resize
const el = this.$refs.chat;
if (el && this.channel.scrolledToBottom) {
el.scrollTop = el.scrollHeight;
if (this.channel.scrolledToBottom) {
this.jumpToBottom();
}
},
jumpToBottom() {
const el = this.$refs.chat;
el.scrollTop = el.scrollHeight;
},
},
};
</script>

View File

@ -259,6 +259,7 @@ kbd {
#chat .action .from::before,
#chat .toggle-button::after,
#chat .toggle-content .more-caret::before,
#chat .scroll-down-arrow::after,
#version-checker::before,
.context-menu-item::before,
#help .website-link::before,
@ -1082,6 +1083,65 @@ background on hover (unless active) */
margin: 0;
}
.scroll-down.fade-leave-active,
.scroll-down.fade-enter-active {
opacity: 0;
transform: translateY(16px);
transition: opacity .3s, transform .3s;
}
.scroll-down.fade-enter-to {
opacity: 1;
transform: none;
}
.scroll-down {
position: absolute;
bottom: 16px;
right: 16px;
z-index: 2;
transition: right 0.2s ease-in-out;
cursor: pointer;
}
.scroll-down-number {
background: #84ce88;
border-radius: 50%;
text-align: center;
width: 30px;
height: 30px;
line-height: 30px;
font-size: 12px;
margin-left: 9px;
z-index: 23;
position: absolute;
top: -20px;
font-weight: bold;
}
.scroll-down-arrow {
width: 48px;
height: 48px;
line-height: 48px;
border-radius: 50%;
background: #fff;
border: 1px solid #84ce88;
text-align: center;
}
.scroll-down:hover .scroll-down-arrow {
background: #84ce88;
}
.scroll-down-arrow::after {
content: "\f107"; /* https://fontawesome.com/icons/angle-down?style=solid */
}
.userlist-open #chat .scroll-down {
right: 196px;
}
#chat .messages {
padding: 10px 0;
touch-action: pan-y;

View File

@ -47,6 +47,8 @@ socket.on("init", function(data) {
}
for (const channel of network.channels) {
channel.scrolledToBottom = true;
if (channel.type === "channel") {
channel.usersOutdated = true;
}

View File

@ -14,6 +14,8 @@ socket.on("network", function(data) {
network.isCollapsed = false;
for (const channel of network.channels) {
channel.scrolledToBottom = true;
if (channel.type === "channel") {
channel.usersOutdated = true;
}