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

ed388553cc8fc3cca603ba9743d634d7954a477e

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

2 files changed, +7 -2Ignore whitespace
public/css/welcome.css+4 -0
@@ -186,6 +186,10 @@ body.big-avatars .welcomeRecent .recentChatList .recentChat .chatMessageContaine
186 align-self: center;186 align-self: center;
187}187}
188188
189.welcomeRecent .recentChatList .showMoreChats.rotate {
190 transform: rotate(180deg);
191}
192
189@media screen and (max-width: 1000px) {193@media screen and (max-width: 1000px) {
190 .welcomePanel .welcomeShortcuts a span {194 .welcomePanel .welcomeShortcuts a span {
191 display: none;195 display: none;
public/scripts/welcome-screen.js+3 -2
@@ -107,10 +107,11 @@ async function sendWelcomePanel() {
107 const hiddenChats = fragment.querySelectorAll('.recentChat.hidden');107 const hiddenChats = fragment.querySelectorAll('.recentChat.hidden');
108 fragment.querySelectorAll('button.showMoreChats').forEach((button) => {108 fragment.querySelectorAll('button.showMoreChats').forEach((button) => {
109 button.addEventListener('click', () => {109 button.addEventListener('click', () => {
110 const rotate = button.classList.contains('rotate');
110 hiddenChats.forEach((chatItem) => {111 hiddenChats.forEach((chatItem) => {
111 chatItem.classList.remove('hidden');112 chatItem.classList.toggle('hidden', rotate);
112 });113 });
113 button.remove();114 button.classList.toggle('rotate', !rotate);
114 });115 });
115 });116 });
116 fragment.querySelectorAll('button.openTemporaryChat').forEach((button) => {117 fragment.querySelectorAll('button.openTemporaryChat').forEach((button) => {