From 6ff22d37d29a0e92167c368f6d2a68a95e653b8e Mon Sep 17 00:00:00 2001 From: s-ol Date: Fri, 12 Feb 2021 12:59:17 +0100 Subject: selection bar, permalinks, avatar links --- src/ui/Discussion.js | 24 +++++---- src/ui/Note.js | 148 +++++++++++++++++++++++++++++++++++++-------------- src/ui/Selection.js | 90 +++++++++++++++++++++++++++++++ src/ui/index.js | 2 + src/ui/theme.js | 21 +++++++- 5 files changed, 233 insertions(+), 52 deletions(-) create mode 100644 src/ui/Selection.js (limited to 'src/ui') diff --git a/src/ui/Discussion.js b/src/ui/Discussion.js index 2cea1c1..3176c03 100644 --- a/src/ui/Discussion.js +++ b/src/ui/Discussion.js @@ -6,20 +6,23 @@ import { Links } from './Links'; import { Note } from './Note'; css` -article > div { - position: relative; +article { + display: flex; + flex-direction: column; + + overflow: auto; + flex: 1 1 auto; } -article > div > canvas { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; +article > div { + position: relative; } `; -export const Discussion = ({ name, items, collapsed, toggleCollapsed }) => { +export const Discussion = ({ + name, items, collapsed, + toggleCollapsed, toggleSelected, +}) => { const [{ width, height, positions, links }, setState] = useState({ width: 0, height: 0, @@ -67,7 +70,8 @@ export const Discussion = ({ name, items, collapsed, toggleCollapsed }) => { } collapsed={isCollapsed} position={positions[item.id]} - onHide={toggleCollapsed} + onCollapse={toggleCollapsed} + onSelect={toggleSelected} onSize={setNodeSize} /> ); diff --git a/src/ui/Note.js b/src/ui/Note.js index 6bdec04..404979c 100644 --- a/src/ui/Note.js +++ b/src/ui/Note.js @@ -17,44 +17,59 @@ css` margin: 0; } `; -const Space = () =>
; +const Space = (props) =>
; css` section > header { display: flex; flex-direction: row; - height: 1.75rem; + height: 2.5rem; color: var(--theme-header-fg); background: var(--theme-header-bg); - - cursor: pointer; - transition: opacity 0.3s; -} - -section > header:hover { - opacity: 0.5; } section > header.small { - height: 0.5em; + height: 0.75rem; } section > header > * { - margin: 0 0.5em; + margin: 0 0.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - line-height: 1.75rem; + line-height: 2.5rem; } -section > header > img { - height: 1.5rem; - width: 1.5rem; - flex: 0 0 1.5rem; - margin: 0.125rem; - border-radius: 0.2rem; +section > header > .avatar { + height: 2rem; + width: 2rem; + flex: 0 0 auto; + margin: 0.25rem; + border-radius: 0.3rem; +} +section > header > .avatar img { + width: inherit; + height: inherit; +} +section > header > .collapse { + height: 1rem; + width: 1rem; + flex: 0 0 auto; + margin: 0.6rem 0.5rem; + border-radius: 0.3rem; + border: 0.05rem solid var(--theme-header-fg); + + line-height: 0.8rem; + text-align: center; + text-decoration: none; + text-weight: bold; + + transition: background 0.3s; +} +section > header > .collapse:hover { + background: var(--theme-note-bg); } section > header > .user { @@ -67,30 +82,45 @@ section > header > .time { color: #363636; } `; -const Header = ({ user, published, onClick }) => { +const Header = ({ id, user, published, collapsed, onCollapse }) => { const username = user.name || user.preferredUsername; + const onClick = onCollapse && ((e) => { + e.preventDefault(); + onCollapse(id); + }); + return ( -
- - {username} +
+ + + + {username} - + + + + {collapsed ? '+' : '-'} +
); }; css` section { - position: absolute; - overflow: hidden; + display: flex; + flex-direction: column; + justify-content: space-between; - width: 22em; + width: 22rem; + + overflow: hidden; color: var(--theme-note-fg); background: var(--theme-note-bg); box-shadow: rgba(0,0,0, 0.7) 2px 4px 5px; - border-radius: 0.4em; + border-radius: 0.4rem; } section.type-Tombstone { @@ -99,7 +129,9 @@ section.type-Tombstone { } section > main { - padding: 1em; + position: relative; + padding: 0.75rem; + overflow: hidden; font-family: serif; } @@ -124,43 +156,77 @@ section.collapsed { section.collapsed > main { display: none; } + +section.ellipsis > main { + max-height: 7em; +} +section.ellipsis > main::after { + position: absolute; + display: block; + content: ''; + + pointer-events: none; + + left: 0; + right: 0; + bottom: 0; + height: 1.25em; + background: linear-gradient(0deg, var(--theme-note-bg) 5%, var(--theme-note-bg-trans) 100%); +} +section.type-Tombstone.ellipsis > main::after { + background: linear-gradient(0deg, var(--theme-note-fg) 5%, var(--theme-note-fg-trans) 100%); +} `; const colors = new ColorHash({ lightness: 0.8 }); export const Note = ({ id, type, attributedTo, published, content, - smallHeader = false, collapsed = false, position, - onHide, onSize, + smallHeader = false, collapsed = false, ellipsis = false, position, + onCollapse, onSelect, onSize, }) => { const backgroundColor = attributedTo.color || colors.hex(attributedTo.id); + const onClick = onSelect && ((e) => { + e.preventDefault(); + onSelect(id); + }); + const root = useRef(null); - useLayoutEffect(() => { + onSize && useLayoutEffect(() => { onSize(id, root.current.offsetWidth, root.current.offsetHeight); }); - const onClickHeader = (e) => { - e.preventDefault(); - onHide(id); - }; - return (
{smallHeader - ?
- :
+ ?
+ :
} -
+
); }; diff --git a/src/ui/Selection.js b/src/ui/Selection.js new file mode 100644 index 0000000..d6e62ab --- /dev/null +++ b/src/ui/Selection.js @@ -0,0 +1,90 @@ +import { h } from 'preact'; +import { useState, useEffect } from 'preact/hooks'; +import cn from 'classnames'; +import css from './css'; +import { Note } from './Note'; + +css` +.drawer { + background: var(--theme-note-fg); + + flex: 0 0 auto; + + /* wtf webkit */ + -webkit-backface-visibility: hidden; +} + +.drawer .handle { + height: 2rem; + margin-bottom: 1rem; +} + +.drawer .handle button { + display: block; + + height: 2rem; + line-height: 2rem; + margin: -1rem auto 0; + padding: 0.25rem; + background: var(--theme-note-bg); + border-radius: 0.4rem; +} + +.drawer .scroller { + display: flex; + overflow: auto; + width: 100%; + + transition: max-height 0.3s; +} + +.drawer .contents { + display: flex; + + align-items: flex-start; + + gap: 1rem; + padding: 0 2rem; +} + +.drawer .contents > * { + flex: 0 0 auto; +} +`; + +export const Drawer = ({ height, children }) => { + const [ hidden, setHidden ] = useState(true); + + return ( +
+
+ +
+ +
+ ); +}; + +export const Selection = ({ items, toggleSelected }) => ( + + {items.map((item) => ( + + ))} + +); diff --git a/src/ui/index.js b/src/ui/index.js index 38b5b1b..fa831e2 100644 --- a/src/ui/index.js +++ b/src/ui/index.js @@ -1,6 +1,8 @@ import './theme'; import { Discussion } from './Discussion'; +import { Selection } from './Selection'; export { Discussion, + Selection, }; diff --git a/src/ui/theme.js b/src/ui/theme.js index 372cd46..58c8397 100644 --- a/src/ui/theme.js +++ b/src/ui/theme.js @@ -1,11 +1,19 @@ import css from './css'; css` +html { + font-size: 11px; + margin: 0; + padding: 0; +} + body { --theme-backdrop: #1e1e1e; --theme-fg: #eeeeee; --theme-note-bg: #eeeeee; --theme-note-fg: #363636; + --theme-note-bg-trans: rgba(238,238,238,0); + --theme-note-fg-trans: rgba(54,54,54,0); --theme-header-fg: #121212; } @@ -13,6 +21,8 @@ body.darktheme { --theme-backdrop: #1e1e1e; --theme-note-bg: #363636; --theme-note-fg: #eeeeee; + --theme-note-bg-trans: rgba(54,54,54,0); + --theme-note-fg-trans: rgba(238,238,238,0); --theme-header-fg: #121212; } @@ -20,7 +30,16 @@ body { color: var(--theme-fg); background: var(--theme-backdrop); font-family: sans-serif; - font-size: 11px; + + margin: 0; + padding: 0; + width: 100vw; + height: 100vh; + overflow: hidden; + + display: flex; + flex-direction: column; + justify-content: space-around; } `; -- cgit v1.2.3