aboutsummaryrefslogtreecommitdiffstats
path: root/src/ui
diff options
context:
space:
mode:
Diffstat (limited to 'src/ui')
-rw-r--r--src/ui/Attachment.js3
-rw-r--r--src/ui/Discussion.js35
-rw-r--r--src/ui/Menu.js139
-rw-r--r--src/ui/Note.js28
-rw-r--r--src/ui/Selection.js21
-rw-r--r--src/ui/index.js2
-rw-r--r--src/ui/theme.js12
7 files changed, 200 insertions, 40 deletions
diff --git a/src/ui/Attachment.js b/src/ui/Attachment.js
index 829dc8a..3c07ee5 100644
--- a/src/ui/Attachment.js
+++ b/src/ui/Attachment.js
@@ -5,8 +5,7 @@ css`
.attachment {
margin: 1rem;
- width: 18rem;
- height: 10rem;
+ height: 7rem;
object-fit: contain;
}
diff --git a/src/ui/Discussion.js b/src/ui/Discussion.js
index b0cdb4f..5fef693 100644
--- a/src/ui/Discussion.js
+++ b/src/ui/Discussion.js
@@ -7,24 +7,44 @@ import { Note } from './Note';
css`
article {
- display: flex;
- flex-direction: column;
+ position: absolute;
+ inset: 0;
overflow: auto;
- flex: 1 1 auto;
- padding: 0 2rem;
}
article > h1 {
- flex: 0 0 auto;
+ display: flex;
+ align-items: baseline;
+
+ position: sticky;
+ inset: 0;
+ bottom: auto;
+ z-index: 200;
+
+ margin: 0;
+ padding: 0.75rem 1.5rem;
+ background: var(--theme-title-bg);
+ color: var(--theme-title-fg);
+}
+article > h1 > span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
+article > h1 .back {
+ font-size: 0.8em;
+ color: inherit;
+ opacity: 0.5;
+
+ margin-left: 1em;
+}
+
article > div {
position: relative;
+ margin: 2rem 2rem 6rem;
}
`;
@@ -53,7 +73,10 @@ export const Discussion = ({
return (
<article>
- <h1>{name}</h1>
+ <h1>
+ <span>{name}</span>
+ <a class="back" href="?">back</a>
+ </h1>
<div>
<Links width={width} height={height} links={links} />
<div>
diff --git a/src/ui/Menu.js b/src/ui/Menu.js
new file mode 100644
index 0000000..6f32280
--- /dev/null
+++ b/src/ui/Menu.js
@@ -0,0 +1,139 @@
+import { h, Fragment } from 'preact';
+import { useState, useEffect } from 'preact/hooks';
+import cn from 'classnames';
+import { API_PREFIX } from '../config';
+import css from './css';
+
+const fetchJSON = async (url) => {
+ const res = await fetch(API_PREFIX + url, { credentials: 'include' });
+ if (res.status !== 200)
+ throw new Error("wrong status");
+
+ return res.json();
+};
+
+css`
+a.discussion {
+ display: flex;
+
+ padding: 0.25rem 0.5rem;
+ text-size: 2rem;
+ line-height: 2rem;
+ text-decoration: none;
+
+ border-radius: 0.3rem;
+
+ color: var(--theme-note-fg);
+ background: var(--theme-note-bg);
+}
+
+a.discussion .access {
+ opacity: 0.5;
+ margin-right: 0.75rem;
+}
+
+a.discussion .name {
+ flex: 1 1 auto;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+a.discussion > a {
+ margin-left: 0.75rem;
+ text-decoration: underline;
+ color: inherit;
+ opacity: 0.5;
+
+ transition: opacity 0.3s;
+}
+a.discussion > a:hover {
+ opacity: 1;
+}
+`;
+
+const DiscussionLink = ({ id, name, url, attributedTo, user }) => {
+ const writable = attributedTo && attributedTo.indexOf(user) > -1;
+
+ return (
+ <a class="discussion" href={`?document=${id}`}>
+ <span class="access">{writable ? 'W' : 'R'}</span>
+ <span class="name">{name}</span>
+ {url && (
+ <a href={url.href}>ext</a>
+ )}
+ </a>
+ );
+};
+
+css`
+ul.discussions {
+ list-style: none;
+ padding: 0;
+
+ width: 26rem;
+}
+
+ul.discussions > li {
+ margin: 0.2rem 0;
+}
+`;
+
+const DiscussionList = ({ discussions, user }) => {
+ return (
+ <ul class="discussions">
+ {discussions.map((discussion) => (
+ <li>
+ <DiscussionLink {...discussion} user={user} />
+ </li>
+ ))}
+ </ul>
+ );
+};
+
+css`
+div.menu {
+ margin: 1rem 2rem;
+}
+`;
+export const Menu = () => {
+ const [user, setUser] = useState(null);
+ const [discussions, setDiscussions] = useState([]);
+
+ useEffect(() => {
+ fetchJSON('/discdag/list')
+ .then(({ user, discussions }) => {
+ setUser(user ?? null);
+ setDiscussions(discussions);
+ });
+ }, []);
+
+ if (user === null) {
+ return (
+ <div class="menu">
+ <h2>Discussions</h2>
+ loading...
+ </div>
+ );
+ }
+
+ return (
+ <div class="menu">
+ <h2>Discussions</h2>
+ {/*user && user.name !== 'Guest'
+ ? (
+ <>
+ <span>logged in as {user.name}</span>
+ <button>log out</button>
+ </>
+ )
+ : (
+ <>
+ <span>not logged in</span>
+ <button>log in</button>
+ </>
+ )*/}
+ <DiscussionList discussions={discussions} user={user?.id} />
+ </div>
+ );
+};
diff --git a/src/ui/Note.js b/src/ui/Note.js
index 63905e4..16b31cb 100644
--- a/src/ui/Note.js
+++ b/src/ui/Note.js
@@ -25,34 +25,34 @@ section > header {
display: flex;
flex-direction: row;
- height: 2.5rem;
+ height: 1.75rem;
color: var(--theme-header-fg);
background: var(--theme-header-bg);
}
section > header.small {
- height: 0.75rem;
+ height: 0.5rem;
}
section > header > * {
- margin: 0 0.5rem;
+ margin: 0 0.35rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- line-height: 2.5rem;
+ line-height: 1.75rem;
}
section > header > .avatar {
- height: 2rem;
- width: 2rem;
+ height: 1.25rem;
+ width: 1.25rem;
flex: 0 0 auto;
margin: 0.25rem;
- border-radius: 0.3rem;
+ border-radius: 0.2rem;
- font-size: 1.5rem;
+ font-size: 1.25rem;
font-weight: bold;
- line-height: 2rem;
+ line-height: 1.25rem;
text-align: center;
text-decoration: none;
background: white;
@@ -66,8 +66,8 @@ section > header > .collapse {
height: 1rem;
width: 1rem;
flex: 0 0 auto;
- margin: 0.6rem 0.5rem;
- border-radius: 0.3rem;
+ margin: 0.3rem;
+ border-radius: 0.2rem;
border: 0.05rem solid var(--theme-header-fg);
line-height: 0.8rem;
@@ -124,14 +124,14 @@ section {
flex-direction: column;
justify-content: space-between;
- width: 22rem;
+ width: 15rem;
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.4rem;
+ border-radius: 0.3rem;
}
section.type-Tombstone {
@@ -141,7 +141,7 @@ section.type-Tombstone {
section > main {
position: relative;
- padding: 0.75rem;
+ padding: 0.5rem;
overflow: hidden;
font-family: serif;
}
diff --git a/src/ui/Selection.js b/src/ui/Selection.js
index d6e62ab..d8dfa88 100644
--- a/src/ui/Selection.js
+++ b/src/ui/Selection.js
@@ -6,28 +6,31 @@ import { Note } from './Note';
css`
.drawer {
- background: var(--theme-note-fg);
+ position: fixed;
+ inset: 0;
+ top: auto;
- flex: 0 0 auto;
+ z-index: 200;
+ background: var(--theme-note-fg);
/* wtf webkit */
-webkit-backface-visibility: hidden;
}
.drawer .handle {
- height: 2rem;
+ height: 1.5rem;
margin-bottom: 1rem;
}
.drawer .handle button {
display: block;
- height: 2rem;
- line-height: 2rem;
+ height: 1rem;
+ line-height: 1rem;
margin: -1rem auto 0;
padding: 0.25rem;
background: var(--theme-note-bg);
- border-radius: 0.4rem;
+ border-radius: 0.2rem;
}
.drawer .scroller {
@@ -44,7 +47,7 @@ css`
align-items: flex-start;
gap: 1rem;
- padding: 0 2rem;
+ padding: 0 1.5rem;
}
.drawer .contents > * {
@@ -66,7 +69,7 @@ export const Drawer = ({ height, children }) => {
class="scroller"
style={{
height,
- 'max-height': hidden ? '0' : height,
+ 'max-height': hidden ? '1rem' : height,
}}
>
<div class="contents">
@@ -78,7 +81,7 @@ export const Drawer = ({ height, children }) => {
};
export const Selection = ({ items, toggleSelected }) => (
- <Drawer height="12rem" style={{ }} >
+ <Drawer height="8.55rem" >
{items.map((item) => (
<Note
{...item}
diff --git a/src/ui/index.js b/src/ui/index.js
index fa831e2..f9ebf7f 100644
--- a/src/ui/index.js
+++ b/src/ui/index.js
@@ -1,8 +1,10 @@
import './theme';
import { Discussion } from './Discussion';
import { Selection } from './Selection';
+import { Menu } from './Menu';
export {
Discussion,
Selection,
+ Menu,
};
diff --git a/src/ui/theme.js b/src/ui/theme.js
index 58c8397..8977791 100644
--- a/src/ui/theme.js
+++ b/src/ui/theme.js
@@ -2,7 +2,6 @@ import css from './css';
css`
html {
- font-size: 11px;
margin: 0;
padding: 0;
}
@@ -15,6 +14,9 @@ body {
--theme-note-bg-trans: rgba(238,238,238,0);
--theme-note-fg-trans: rgba(54,54,54,0);
--theme-header-fg: #121212;
+
+ --theme-title-fg: #eeeeee;
+ --theme-title-bg: #363636;
}
body.darktheme {
@@ -33,13 +35,5 @@ body {
margin: 0;
padding: 0;
- width: 100vw;
- height: 100vh;
- overflow: hidden;
-
- display: flex;
- flex-direction: column;
- justify-content: space-around;
}
`;
-
generated by cgit v1.2.3 (git 2.25.1) at 2026-08-11 04:42:07 +0000