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

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

@ -6,28 +6,17 @@
let pendingExit = false;
const scheduleClose = () => {
if ($smallViewport) {
$showChannelView = false;
pendingExit = true;
}
const close = () => {
$showPresenceSidebar = false;
};
const outroEnd = () => {
if (pendingExit) {
pendingExit = false;
$showChannelView = true;
}
};
</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">
<span class="input-label">User List</span>
</div>
<div class="sidebar">
{#each $presenceStore as entry}
{#each $presenceStore as entry (entry.user.id)}
<button class="sidebar-button">
<div>
<AtSignIcon />
@ -36,7 +25,7 @@
</button>
{/each}
{#if $smallViewport}
<button on:click={ scheduleClose } class="sidebar-button">
<button on:click={ close } class="sidebar-button">
<div>
<ArrowLeftIcon />
</div>

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

@ -5,36 +5,20 @@
import { channels, gatewayStatus, overlayStore, selectedChannel, showChannelView, showSidebar, smallViewport, userInfoStore } from "../stores";
import UserTopBar from "./UserTopBar.svelte";
let pendingSelectChannel = null;
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) => {
const selectChannel = (channel) => {
if ($smallViewport) {
$showChannelView = false;
pendingSelectChannel = channel;
$showSidebar = false;
} else {
selectChannel(channel);
}
};
const outroEnd = () => {
if (pendingSelectChannel) {
selectChannel(pendingSelectChannel);
pendingSelectChannel = null;
$showChannelView = true;
}
};
$selectedChannel = channel;
}
</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 />
<div class="sidebar">
{#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>
<HashIcon />
</div>
@ -77,5 +61,4 @@
color: var(--purple-2);
margin-left: auto;
}
</style>

1
frontend/src/stores.js
View file

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