Add a home button to the mobile bottom nav
This commit is contained in:
parent
6b324b3232
commit
03c5e7fd6e
3 changed files with 18 additions and 1 deletions
|
|
@ -1537,6 +1537,7 @@ Acceptance:
|
||||||
- With none configured, it shows a welcome screen offering "Add a space" and
|
- With none configured, it shows a welcome screen offering "Add a space" and
|
||||||
"Start a conversation".
|
"Start a conversation".
|
||||||
- Those options navigate to the spaces directory and the chat view respectively.
|
- Those options navigate to the spaces directory and the chat view respectively.
|
||||||
|
- On a phone, the bottom bar carries a link home from wherever she is.
|
||||||
|
|
||||||
### US-106 — Share text into the app
|
### US-106 — Share text into the app
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -45,6 +45,10 @@ const spaceNavItem = (page: Page, name: string) =>
|
||||||
// since the menu is always on screen there.
|
// since the menu is always on screen there.
|
||||||
const spaceMenuNavItem = (page: Page) => page.getByRole("button", {name: "Open space menu"})
|
const spaceMenuNavItem = (page: Page) => page.getByRole("button", {name: "Open space menu"})
|
||||||
|
|
||||||
|
// The link home, which the desktop rail and the phone's bottom bar both carry. Its accessible name
|
||||||
|
// is the platform logo's alt text, and the rail is display:none below tailwind's md breakpoint.
|
||||||
|
const homeNavItem = (page: Page) => page.getByRole("link", {name: "Home"})
|
||||||
|
|
||||||
// The space menu's header, the one button in the secondary nav carrying the relay's address.
|
// The space menu's header, the one button in the secondary nav carrying the relay's address.
|
||||||
const spaceMenu = (page: Page, url: string) =>
|
const spaceMenu = (page: Page, url: string) =>
|
||||||
page.locator(".secondary-nav").getByRole("button", {name: pattern(displayRelayUrl(url))})
|
page.locator(".secondary-nav").getByRole("button", {name: pattern(displayRelayUrl(url))})
|
||||||
|
|
@ -305,6 +309,15 @@ test("US-105 land on the home page", async ({seed, as}) => {
|
||||||
await startConversation.click()
|
await startConversation.click()
|
||||||
|
|
||||||
await expect(page).toHaveURL(/\/chat$/)
|
await expect(page).toHaveURL(/\/chat$/)
|
||||||
|
|
||||||
|
// On a phone the bottom bar is the whole of the navigation on screen, so the way back is there
|
||||||
|
const phone = await as(users.alice, "/chat", {
|
||||||
|
context: {viewport: {width: 390, height: 844}, hasTouch: true},
|
||||||
|
})
|
||||||
|
|
||||||
|
await homeNavItem(phone).click()
|
||||||
|
|
||||||
|
await expect(phone).toHaveURL(/\/home$/)
|
||||||
})
|
})
|
||||||
|
|
||||||
test("US-106 share text into the app", async ({seed, as}) => {
|
test("US-106 share text into the app", async ({seed, as}) => {
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@
|
||||||
import PrimaryNavSpaces from "@app/components/PrimaryNavSpaces.svelte"
|
import PrimaryNavSpaces from "@app/components/PrimaryNavSpaces.svelte"
|
||||||
import Search from "@app/components/Search.svelte"
|
import Search from "@app/components/Search.svelte"
|
||||||
import SpaceMenuDrawer from "@app/components/SpaceMenuDrawer.svelte"
|
import SpaceMenuDrawer from "@app/components/SpaceMenuDrawer.svelte"
|
||||||
import {PLATFORM_RELAYS} from "@app/env"
|
import {PLATFORM_LOGO, PLATFORM_RELAYS} from "@app/env"
|
||||||
import {modal, popModal, pushDrawer, pushModal} from "@app/modal"
|
import {modal, popModal, pushDrawer, pushModal} from "@app/modal"
|
||||||
import {notifications} from "@app/notifications"
|
import {notifications} from "@app/notifications"
|
||||||
import {userSpaceUrls} from "@app/rooms"
|
import {userSpaceUrls} from "@app/rooms"
|
||||||
|
|
@ -100,6 +100,9 @@
|
||||||
{#if PLATFORM_RELAYS.length === 1}
|
{#if PLATFORM_RELAYS.length === 1}
|
||||||
<PrimaryNavItemSpace url={PLATFORM_RELAYS[0]} />
|
<PrimaryNavItemSpace url={PLATFORM_RELAYS[0]} />
|
||||||
{:else}
|
{:else}
|
||||||
|
<PrimaryNavItem title="Home" href="/home">
|
||||||
|
<ImageIcon alt="Home" src={PLATFORM_LOGO} class="rounded-full" size={10} />
|
||||||
|
</PrimaryNavItem>
|
||||||
<PrimaryNavItem onclick={showSearch}>
|
<PrimaryNavItem onclick={showSearch}>
|
||||||
<ImageIcon alt="Search" src={Magnifier} size={8} />
|
<ImageIcon alt="Search" src={Magnifier} size={8} />
|
||||||
</PrimaryNavItem>
|
</PrimaryNavItem>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue