Add rotation effect to "Show More Chats" button and toggle visibility of hidden chats

ed388553cc8fc3cca603ba9743d634d7954a477e

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: e2c44161ede573ded4048a56b04b92f070c2a754
2 files changed, +7 -2Showing whitespace changes
public/css/welcome.css+4 -0
@@ -186,6 +186,10 @@ body.big-avatars .welcomeRecent .recentChatList .recentChat .chatMessageContaine
186186 align-self: center;
187187}
188188
189+.welcomeRecent .recentChatList .showMoreChats.rotate {
190+ transform: rotate(180deg);
191+}
192+
189193@media screen and (max-width: 1000px) {
190194 .welcomePanel .welcomeShortcuts a span {
191195 display: none;
public/scripts/welcome-screen.js+3 -2
@@ -107,10 +107,11 @@ async function sendWelcomePanel() {
107107 const hiddenChats = fragment.querySelectorAll('.recentChat.hidden');
108108 fragment.querySelectorAll('button.showMoreChats').forEach((button) => {
109109 button.addEventListener('click', () => {
110+ const rotate = button.classList.contains('rotate');
110111 hiddenChats.forEach((chatItem) => {
111112 chatItem.classList.removetoggle('hidden', rotate);
112113 });
113114 button.removeclassList.toggle('rotate', !rotate);
114115 });
115116 });
116117 fragment.querySelectorAll('button.openTemporaryChat').forEach((button) => {