mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-10-01 17:31:13 +00:00
Fix flickering logo when navigating through pages
This commit is contained in:
parent
17a02c1ede
commit
36de3da6ba
@ -1,11 +1,12 @@
|
||||
import { Component, Show } from 'solid-js';
|
||||
import { Component, Match, Show, Switch } from 'solid-js';
|
||||
|
||||
import styles from './Branding.module.scss';
|
||||
import { useNavigate } from '@solidjs/router';
|
||||
import { useIntl } from '@cookbook/solid-intl';
|
||||
import { branding } from '../../translations';
|
||||
import PageNav from '../PageNav/PageNav';
|
||||
|
||||
const Branding: Component<{ small: boolean, isHome?: boolean }> = (props) => {
|
||||
const Branding: Component<{ small?: boolean, isHome?: boolean, showNav?: boolean }> = (props) => {
|
||||
const navigate = useNavigate();
|
||||
const intl = useIntl();
|
||||
|
||||
@ -19,26 +20,28 @@ const Branding: Component<{ small: boolean, isHome?: boolean }> = (props) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
class={styles.logoLink}
|
||||
onClick={onClick}
|
||||
>
|
||||
<Show
|
||||
when={!props.small}
|
||||
fallback={
|
||||
<div class={styles.brandingSmall}>
|
||||
<div class={styles.logo} />
|
||||
</div>
|
||||
}
|
||||
<Show when={!props.showNav} fallback={<PageNav />}>
|
||||
<button
|
||||
class={styles.logoLink}
|
||||
onClick={onClick}
|
||||
>
|
||||
<div class={styles.branding}>
|
||||
<div class={styles.logo} />
|
||||
<span>
|
||||
{intl.formatMessage(branding)}
|
||||
</span>
|
||||
</div>
|
||||
</Show>
|
||||
</button>
|
||||
<Show
|
||||
when={!props.small}
|
||||
fallback={
|
||||
<div class={styles.brandingSmall}>
|
||||
<div class={styles.logo} />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div class={styles.branding}>
|
||||
<div class={styles.logo} />
|
||||
<span>
|
||||
{intl.formatMessage(branding)}
|
||||
</span>
|
||||
</div>
|
||||
</Show>
|
||||
</button>
|
||||
</Show>
|
||||
)
|
||||
}
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { Component, createEffect, onCleanup, onMount } from 'solid-js';
|
||||
import { Component, createEffect, createSignal, onCleanup, onMount } from 'solid-js';
|
||||
|
||||
import styles from './Layout.module.scss';
|
||||
|
||||
@ -12,7 +12,10 @@ import zapMD from '../../assets/lottie/zap_md.json';
|
||||
import { useHomeContext } from '../../contexts/HomeContext';
|
||||
import { SendNoteResult } from '../../types/primal';
|
||||
import { useProfileContext } from '../../contexts/ProfileContext';
|
||||
import Branding from '../Branding/Branding';
|
||||
|
||||
export const [isHome, setIsHome] = createSignal(false);
|
||||
export const [showNav, setShowNav] = createSignal(false);
|
||||
|
||||
const Layout: Component = () => {
|
||||
|
||||
@ -92,6 +95,7 @@ const Layout: Component = () => {
|
||||
<div class={styles.leftColumn}>
|
||||
<div>
|
||||
<div id="branding_holder" class={styles.leftHeader}>
|
||||
<Branding isHome={isHome()} showNav={showNav()} />
|
||||
</div>
|
||||
|
||||
<div class={styles.leftContent}>
|
||||
|
@ -14,10 +14,6 @@ const MissingPage: Component<{ title: string, children?: JSXElement, id?: string
|
||||
|
||||
return (
|
||||
<div id={props.id}>
|
||||
<Wormhole to="branding_holder" >
|
||||
<Branding small={false} />
|
||||
</Wormhole>
|
||||
|
||||
<Wormhole
|
||||
to="search_section"
|
||||
>
|
||||
|
@ -41,10 +41,6 @@ const Downloads: Component = () => {
|
||||
|
||||
return (
|
||||
<div class={styles.downloadsContainer}>
|
||||
<Wormhole to="branding_holder">
|
||||
<Branding small={false} />
|
||||
</Wormhole>
|
||||
|
||||
<Wormhole
|
||||
to="search_section"
|
||||
>
|
||||
|
@ -269,10 +269,6 @@ const EditProfile: Component = () => {
|
||||
<div class={styles.container}>
|
||||
<PageCaption title={intl.formatMessage(tSettings.profile.title)} />
|
||||
|
||||
<Wormhole to="branding_holder">
|
||||
<Branding small={false} />
|
||||
</Wormhole>
|
||||
|
||||
<div id="central_header" class={styles.fullHeader}>
|
||||
<div id="profile_banner" class={`${styles.banner} ${flagBannerForWarning()}`}>
|
||||
<Show when={isUploadingBanner()}>
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { Component, Show } from 'solid-js';
|
||||
import { Component, createEffect, onCleanup, onMount, Show } from 'solid-js';
|
||||
import styles from './Explore.module.scss';
|
||||
import ExploreMenu from './ExploreMenu';
|
||||
import Feed from './Feed';
|
||||
@ -17,6 +17,7 @@ import Search from '../components/Search/Search';
|
||||
import PageCaption from '../components/PageCaption/PageCaption';
|
||||
import { titleCase } from '../utils';
|
||||
import AddToHomeFeedButton from '../components/AddToHomeFeedButton/AddToHomeFeedButton';
|
||||
import { setShowNav } from '../components/Layout/Layout';
|
||||
|
||||
|
||||
const scopes = ['follows', 'tribe', 'network', 'global'];
|
||||
@ -59,17 +60,16 @@ const Explore: Component = () => {
|
||||
));
|
||||
};
|
||||
|
||||
createEffect(() => {
|
||||
setShowNav(hasParams());
|
||||
});
|
||||
|
||||
onCleanup(() => {
|
||||
setShowNav(false);
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Wormhole to="branding_holder">
|
||||
<Show
|
||||
when={hasParams()}
|
||||
fallback={<Branding small={false} />}
|
||||
>
|
||||
<PageNav />
|
||||
</Show>
|
||||
</Wormhole>
|
||||
|
||||
<Wormhole
|
||||
to="search_section"
|
||||
>
|
||||
|
@ -29,6 +29,7 @@ import { userName } from '../stores/profile';
|
||||
import { useAccountContext } from '../contexts/AccountContext';
|
||||
import { feedNewPosts, placeholders } from '../translations';
|
||||
import Search from '../components/Search/Search';
|
||||
import { setIsHome } from '../components/Layout/Layout';
|
||||
|
||||
|
||||
const Home: Component = () => {
|
||||
@ -50,6 +51,7 @@ const Home: Component = () => {
|
||||
|
||||
|
||||
onMount(() => {
|
||||
setIsHome(true);
|
||||
scrollWindowTo(context?.scrollTop);
|
||||
});
|
||||
|
||||
@ -99,6 +101,7 @@ const Home: Component = () => {
|
||||
|
||||
onCleanup(()=> {
|
||||
clearInterval(checkNewNotesTimer);
|
||||
setIsHome(false);
|
||||
});
|
||||
|
||||
const loadNewContent = () => {
|
||||
@ -115,12 +118,6 @@ const Home: Component = () => {
|
||||
|
||||
return (
|
||||
<div class={styles.homeContent}>
|
||||
<Wormhole
|
||||
to="branding_holder"
|
||||
>
|
||||
<Branding small={false} isHome={true} />
|
||||
</Wormhole>
|
||||
|
||||
<Wormhole
|
||||
to="search_section"
|
||||
>
|
||||
|
@ -877,10 +877,6 @@ const Messages: Component = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Wormhole to="branding_holder">
|
||||
<Branding small={false} />
|
||||
</Wormhole>
|
||||
|
||||
<Wormhole
|
||||
to="search_section"
|
||||
>
|
||||
|
@ -105,10 +105,6 @@ const Mutelist: Component = () => {
|
||||
|
||||
return (
|
||||
<div class={styles.settingsContainer}>
|
||||
<Wormhole to='branding_holder'>
|
||||
<Branding small={false} />
|
||||
</Wormhole>
|
||||
|
||||
<PageCaption>
|
||||
<div style="display: flex; align-items: center; justify-content: space-between; width: 100%;">
|
||||
<div style="display: flex; align-items: center;">
|
||||
|
@ -1050,10 +1050,6 @@ const Notifications: Component = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Wormhole to="branding_holder">
|
||||
<Branding small={false} />
|
||||
</Wormhole>
|
||||
|
||||
<Wormhole
|
||||
to="search_section"
|
||||
>
|
||||
|
@ -457,10 +457,6 @@ const Profile: Component = () => {
|
||||
)}
|
||||
/>
|
||||
|
||||
<Wormhole to='branding_holder'>
|
||||
<Branding small={false} />
|
||||
</Wormhole>
|
||||
|
||||
<StickySidebar>
|
||||
<ProfileSidebar notes={profile?.sidebar.notes} profile={profile?.userProfile} />
|
||||
</StickySidebar>
|
||||
|
@ -67,12 +67,6 @@ const Search: Component = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Wormhole
|
||||
to="branding_holder"
|
||||
>
|
||||
<Branding small={false} />
|
||||
</Wormhole>
|
||||
|
||||
<StickySidebar>
|
||||
<SearchSidebar users={search?.contentUsers || []} />
|
||||
</StickySidebar>
|
||||
|
@ -20,10 +20,6 @@ const Settings: Component = () => {
|
||||
|
||||
return (
|
||||
<div class={styles.settingsContainer}>
|
||||
<Wormhole to="branding_holder">
|
||||
<Branding small={false} />
|
||||
</Wormhole>
|
||||
|
||||
<Wormhole to="search_section">
|
||||
<Search />
|
||||
</Wormhole>
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { Component, createEffect, createMemo, For, onCleanup, Show } from 'solid-js';
|
||||
import { Component, createEffect, createMemo, For, onCleanup, onMount, Show } from 'solid-js';
|
||||
import Note from '../components/Note/Note';
|
||||
import styles from './Thread.module.scss';
|
||||
import { useNavigate, useParams } from '@solidjs/router';
|
||||
@ -17,6 +17,7 @@ import { scrollWindowTo } from '../lib/scroll';
|
||||
import { useIntl } from '@cookbook/solid-intl';
|
||||
import Search from '../components/Search/Search';
|
||||
import { thread as t } from '../translations';
|
||||
import { setShowNav } from '../components/Layout/Layout';
|
||||
|
||||
|
||||
const Thread: Component = () => {
|
||||
@ -111,10 +112,15 @@ const Thread: Component = () => {
|
||||
}
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
setShowNav(true);
|
||||
});
|
||||
|
||||
onCleanup(() => {
|
||||
const pn = document.getElementById('primary_note');
|
||||
|
||||
pn && observer?.unobserve(pn);
|
||||
setShowNav(false);
|
||||
});
|
||||
|
||||
const onNotePosted = (result: SendNoteResult) => {
|
||||
@ -123,9 +129,6 @@ const Thread: Component = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Wormhole to='branding_holder'>
|
||||
<PageNav />
|
||||
</Wormhole>
|
||||
|
||||
<Wormhole
|
||||
to="search_section"
|
||||
|
Loading…
Reference in New Issue
Block a user