hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix flashes of no content on small viewports

Browse source
This commit is contained in:
hippoz 2022-08-14 05:50:26 +03:00
parent 9a8b769e95
commit 8b9679b93d
No known key found for this signature in database
GPG key ID: 7C52899193467641
4 changed files with 12 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/components/ChannelView.svelte
View file

@ -2,6 +2,8 @@
import ChannelTopBar from "./ChannelTopBar.svelte"; import ChannelTopBar from "./ChannelTopBar.svelte";
import MessageInput from "./MessageInput.svelte"; import MessageInput from "./MessageInput.svelte";
import Messages from "./Messages.svelte"; import Messages from "./Messages.svelte";
import { quadInOut } from "svelte/easing";
import { maybeFly } from "../animations";
export let channel; export let channel;
</script> </script>
@ -17,7 +19,7 @@
} }
</style> </style>
<div class="main-container"> <div class="main-container" in:maybeFly="{{ duration: 175, x: -10, easing: quadInOut }}">
<ChannelTopBar channel={ channel } /> <ChannelTopBar channel={ channel } />
<Messages channelId="{ channel.id }" /> <Messages channelId="{ channel.id }" />
<MessageInput channel={ channel } /> <MessageInput channel={ channel } />

19
frontend/src/components/PresenceSidebar.svelte
View file

@ -6,28 +6,17 @@
let pendingExit = false; let pendingExit = false;
const scheduleClose = () => { const close = () => {
if ($smallViewport) {
$showChannelView = false;
pendingExit = true;
}
$showPresenceSidebar = false; $showPresenceSidebar = false;
}; };
const outroEnd = () => {
if (pendingExit) {
pendingExit = false;
$showChannelView = true;
}
};
</script> </script>
<div class="sidebar-container" transition:maybeFly="{{ duration: 200, easing: quadInOut, x: 10 }}" on:outroend="{ outroEnd }"> <div class="sidebar-container" in:maybeFly="{{ duration: 175, easing: quadInOut, x: 10 }}">
<div class="top-bar"> <div class="top-bar">
<span class="input-label">User List</span> <span class="input-label">User List</span>
</div> </div>
<div class="sidebar"> <div class="sidebar">
{#each $presenceStore as entry} {#each $presenceStore as entry (entry.user.id)}
<button class="sidebar-button"> <button class="sidebar-button">
<div> <div>
<AtSignIcon /> <AtSignIcon />
@ -36,7 +25,7 @@
</button> </button>
{/each} {/each}
{#if $smallViewport} {#if $smallViewport}
<button on:click={ scheduleClose } class="sidebar-button"> <button on:click={ close } class="sidebar-button">
<div> <div>
<ArrowLeftIcon /> <ArrowLeftIcon />
</div> </div>

25
frontend/src/components/Sidebar.svelte
View file

@ -5,36 +5,20 @@
import { channels, gatewayStatus, overlayStore, selectedChannel, showChannelView, showSidebar, smallViewport, userInfoStore } from "../stores"; import { channels, gatewayStatus, overlayStore, selectedChannel, showChannelView, showSidebar, smallViewport, userInfoStore } from "../stores";
import UserTopBar from "./UserTopBar.svelte"; import UserTopBar from "./UserTopBar.svelte";
let pendingSelectChannel = null; const selectChannel = (channel) => {
const selectChannel = (channel) => $selectedChannel = channel;
// janky code to hide the channel view during animation
// this will make a smooth sidebar animation on smaller viewports (such as a phone, where you switch between sidebar being active)
const scheduleSelectChannel = (channel) => {
if ($smallViewport) { if ($smallViewport) {
$showChannelView = false;
pendingSelectChannel = channel;
$showSidebar = false; $showSidebar = false;
} else {
selectChannel(channel);
} }
};
const outroEnd = () => { $selectedChannel = channel;
if (pendingSelectChannel) {
selectChannel(pendingSelectChannel);
pendingSelectChannel = null;
$showChannelView = true;
} }
};
</script> </script>
<div class="sidebar-container" transition:maybeFly="{{ duration: 200, easing: quadInOut, x: -10 }}" on:outroend="{ outroEnd }"> <div class="sidebar-container" in:maybeFly="{{ duration: 175, easing: quadInOut, x: -10 }}">
<UserTopBar /> <UserTopBar />
<div class="sidebar"> <div class="sidebar">
{#each $channels as channel (channel.id)} {#each $channels as channel (channel.id)}
<button on:click="{ scheduleSelectChannel(channel) }" class="sidebar-button" class:selected={ channel.id === $selectedChannel.id }> <button on:click="{ selectChannel(channel) }" class="sidebar-button" class:selected={ channel.id === $selectedChannel.id }>
<div> <div>
<HashIcon /> <HashIcon />
</div> </div>
@ -77,5 +61,4 @@
color: var(--purple-2); color: var(--purple-2);
margin-left: auto; margin-left: auto;
} }
</style> </style>

1
frontend/src/stores.js
View file

@ -429,7 +429,6 @@ class PresenceStore extends Store {
}); });
} }
}); });
console.log(this.value);
this.updated(); this.updated();
} }
} }