Profile: add subscribe menu
This commit is contained in:
thislight
parent
8a435be4c8
commit
65fa4c4fa5
6 changed files with 226 additions and 151 deletions
82
src/profiles/Profile.css
Normal file
82
src/profiles/Profile.css
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
.Profile {
|
||||
.intro {
|
||||
background-color: var(--tutu-color-surface-d);
|
||||
color: var(--tutu-color-on-surface);
|
||||
padding: 16px 12px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.description {
|
||||
& a {
|
||||
color: inherit;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.acct-grp {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
|
||||
& > :nth-child(2) {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
flex-grow: 1;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.name-grp {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
table.acct-fields {
|
||||
word-break: break-all;
|
||||
|
||||
& td > a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
& a > .invisible {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.toot-list-toolbar {
|
||||
position: sticky;
|
||||
top: var(--scaffold-topbar-height);
|
||||
z-index: calc(var(--tutu-zidx-nav, 1) - 1);
|
||||
background: var(--tutu-color-surface);
|
||||
border-bottom: 1px solid var(--tutu-color-surface-d);
|
||||
contain: content;
|
||||
/* TODO: box-shadow is needed here (same as app bar, e6).
|
||||
There is no good way to detect if the sticky is "sticked" -
|
||||
so let's leave it for future.
|
||||
|
||||
For now we use a trick to make it looks better.
|
||||
*/
|
||||
box-shadow: 0px -2px 4px 0px var(--tutu-color-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.Profile__page-title {
|
||||
flex-grow: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
@ -5,6 +5,8 @@ import {
|
|||
createSignal,
|
||||
createUniqueId,
|
||||
For,
|
||||
Switch,
|
||||
Match,
|
||||
onCleanup,
|
||||
Show,
|
||||
type Component,
|
||||
|
|
@ -42,13 +44,13 @@ import { useSessionForAcctStr } from "../masto/clients";
|
|||
import { resolveCustomEmoji } from "../masto/toot";
|
||||
import { FastAverageColor } from "fast-average-color";
|
||||
import { useWindowSize } from "@solid-primitives/resize-observer";
|
||||
import { css } from "solid-styled";
|
||||
import { createTimeline, createTimelineSnapshot } from "../masto/timelines";
|
||||
import TootList from "../timelines/TootList";
|
||||
import { createTimeSource, TimeSourceProvider } from "../platform/timesrc";
|
||||
import TootFilterButton from "./TootFilterButton";
|
||||
import Menu from "../material/Menu";
|
||||
import Menu, { createManagedMenuState } from "../material/Menu";
|
||||
import { share } from "../platform/share";
|
||||
import "./Profile.css";
|
||||
|
||||
const Profile: Component = () => {
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -65,6 +67,10 @@ const Profile: Component = () => {
|
|||
const menuButId = createUniqueId();
|
||||
|
||||
const [menuOpen, setMenuOpen] = createSignal(false);
|
||||
const [subscribeMenuOpen, setSubscribeMenuOpen] = createSignal(false);
|
||||
let subcribeMenuAnchor: { top: number; right: number; left: number };
|
||||
|
||||
const [openSubscribeMenu, subscribeMenuState] = createManagedMenuState();
|
||||
|
||||
const [scrolledPastBanner, setScrolledPastBanner] = createSignal(false);
|
||||
const obx = new IntersectionObserver(
|
||||
|
|
@ -132,89 +138,6 @@ const Profile: Component = () => {
|
|||
recentTootChunk.loading ||
|
||||
(recentTootFilter().pinned && pinnedTootChunk.loading);
|
||||
|
||||
css`
|
||||
.intro {
|
||||
background-color: var(--tutu-color-surface-d);
|
||||
color: var(--tutu-color-on-surface);
|
||||
padding: 16px 12px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.description {
|
||||
& :global(a) {
|
||||
color: inherit;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.acct-grp {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
|
||||
& > :nth-child(2) {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
& > :last-child {
|
||||
flex-grow: 1;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.name-grp {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
}
|
||||
|
||||
table.acct-fields {
|
||||
word-break: break-all;
|
||||
|
||||
& td > :global(a) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
& :global(a > .invisible) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& :global(svg) {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.page-title {
|
||||
flex-grow: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.toot-list-toolbar {
|
||||
position: sticky;
|
||||
top: var(--scaffold-topbar-height);
|
||||
z-index: calc(var(--tutu-zidx-nav, 1) - 1);
|
||||
background: var(--tutu-color-surface);
|
||||
border-bottom: 1px solid var(--tutu-color-surface-d);
|
||||
contain: content;
|
||||
/* TODO: box-shadow is needed here (same as app bar, e6).
|
||||
There is no good way to detect if the sticky is "sticked" -
|
||||
so let's leave it for future.
|
||||
|
||||
For now we use a trick to make it looks better.
|
||||
*/
|
||||
box-shadow: 0px -2px 4px 0px var(--tutu-color-shadow);
|
||||
}
|
||||
`;
|
||||
|
||||
return (
|
||||
<Scaffold
|
||||
topbar={
|
||||
|
|
@ -241,8 +164,7 @@ const Profile: Component = () => {
|
|||
<Close />
|
||||
</IconButton>
|
||||
<Title
|
||||
use:solid-styled
|
||||
class="page-title"
|
||||
class="Profile__page-title"
|
||||
style={{
|
||||
visibility: scrolledPastBanner() ? undefined : "hidden",
|
||||
}}
|
||||
|
|
@ -261,6 +183,7 @@ const Profile: Component = () => {
|
|||
</Toolbar>
|
||||
</AppBar>
|
||||
}
|
||||
class="Profile"
|
||||
>
|
||||
<Menu
|
||||
open={menuOpen()}
|
||||
|
|
@ -269,25 +192,27 @@ const Profile: Component = () => {
|
|||
document.getElementById(menuButId)!.getBoundingClientRect()
|
||||
}
|
||||
>
|
||||
<Show
|
||||
when={isCurrentSessionProfile()}
|
||||
fallback={
|
||||
<Show when={session().account}>
|
||||
<Show
|
||||
when={isCurrentSessionProfile()}
|
||||
fallback={
|
||||
<MenuItem disabled>
|
||||
<ListItemIcon>
|
||||
<PlaylistAdd />
|
||||
</ListItemIcon>
|
||||
<ListItemText>Subscribe...</ListItemText>
|
||||
</MenuItem>
|
||||
}
|
||||
>
|
||||
<MenuItem disabled>
|
||||
<ListItemIcon>
|
||||
<PlaylistAdd />
|
||||
<Edit />
|
||||
</ListItemIcon>
|
||||
<ListItemText>Subscribe...</ListItemText>
|
||||
<ListItemText>Edit...</ListItemText>
|
||||
</MenuItem>
|
||||
}
|
||||
>
|
||||
<MenuItem disabled>
|
||||
<ListItemIcon>
|
||||
<Edit />
|
||||
</ListItemIcon>
|
||||
<ListItemText>Edit...</ListItemText>
|
||||
</MenuItem>
|
||||
</Show>
|
||||
<Divider />
|
||||
</Show>
|
||||
<Divider />
|
||||
<MenuItem disabled>
|
||||
<ListItemIcon>
|
||||
<Group />
|
||||
|
|
@ -360,6 +285,15 @@ const Profile: Component = () => {
|
|||
></img>
|
||||
</div>
|
||||
|
||||
<Menu {...subscribeMenuState}>
|
||||
<MenuItem disabled>
|
||||
<ListItemText>
|
||||
<span>{session().account?.inf?.displayName || ""}</span>
|
||||
<span>'s timeline</span>
|
||||
</ListItemText>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
|
||||
<div
|
||||
class="intro"
|
||||
style={{
|
||||
|
|
@ -385,9 +319,27 @@ const Profile: Component = () => {
|
|||
<span>{fullUsername()}</span>
|
||||
</div>
|
||||
<div>
|
||||
<Button variant="contained" color="secondary">
|
||||
Subscribe
|
||||
</Button>
|
||||
<Switch>
|
||||
<Match when={!session().account}>{<></>}</Match>
|
||||
<Match when={isCurrentSessionProfile()}>
|
||||
<IconButton color="inherit">
|
||||
<Edit />
|
||||
</IconButton>
|
||||
</Match>
|
||||
<Match when={true}>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
onClick={(event) => {
|
||||
openSubscribeMenu(
|
||||
event.currentTarget.getBoundingClientRect(),
|
||||
);
|
||||
}}
|
||||
>
|
||||
Subscribe
|
||||
</Button>
|
||||
</Match>
|
||||
</Switch>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue