From 464174b7e5e4e5c389c896173e8c7ab21badda8a Mon Sep 17 00:00:00 2001
From: s-ol <s-ol@users.noreply.github.com>
Date: Fri, 5 Feb 2021 19:32:12 +0100
Subject: clean up UI code

---
 src/ui.js | 171 --------------------------------------------------------------
 1 file changed, 171 deletions(-)
 delete mode 100644 src/ui.js

(limited to 'src/ui.js')

diff --git a/src/ui.js b/src/ui.js
deleted file mode 100644
index ce707b7..0000000
--- a/src/ui.js
+++ /dev/null
@@ -1,171 +0,0 @@
-import { render, h, Fragment } from 'preact';
-import { useRef, useLayoutEffect } from 'preact/hooks';
-import ColorHash from 'color-hash';
-import { formatRelative } from 'date-fns';
-import * as dom from './dom';
-
-dom.css`
-body {
-  --theme-backdrop: #1e1e1e;
-  --theme-fg: #eeeeee;
-  --theme-note-bg: #eeeeee;
-  --theme-note-fg: #363636;
-  --theme-header-fg: #121212;
-}
-
-body.darktheme {
-  --theme-backdrop: #1e1e1e;
-  --theme-note-bg: #363636;
-  --theme-note-fg: #eeeeee;
-  --theme-header-fg: #121212;
-}
-
-body {
-  color: var(--theme-fg);
-  background: var(--theme-backdrop);
-  font-family: sans-serif;
-  font-size: 11px;
-}
-`;
-
-const now = new Date();
-const Time = ({ time }) => {
-  const dt = new Date(time);
-  return formatRelative(dt, now);
-};
-
-dom.css`
-.flex-space {
-  flex: 1;
-  margin: 0;
-}
-`;
-
-const Space = () => <div class="flex-space" />;
-
-dom.css`
-section {
-  position: absolute;
-  overflow: hidden;
-
-  width: 22em;
-  color: var(--theme-note-fg);
-  background: var(--theme-note-bg);
-
-  border-radius: 0.4em;
-}
-
-section.type-Tombstone {
-  color: var(--theme-note-bg);
-  background: var(--theme-note-fg);
-}
-
-section > header {
-  display: flex;
-  flex-direction: row;
-
-  height: 1.75rem;
-
-  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;
-}
-
-section > header > * {
-  margin: 0 0.5em;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 1.75rem;
-}
-
-section > header > img {
-  height: 2em;
-  width: 2em;
-  flex: 0 0 2em;
-  margin: 0.25em;
-  border-radius: 0.2em;
-}
-
-section > header > .user {
-  flex: 0 0.5 auto;
-}
-
-section > header > .time {
-  flex: 0 1 auto;
-  font-size: 0.8em;
-  color: #363636;
-}
-
-section > main {
-  padding: 1em;
-  font-family: serif;
-}
-
-section.tombstone > main {
-  font-family: inherit;
-}
-
-section.hidden {
-  display: none;
-}
-
-section.collapsed {
-  width: auto;
-}
-section.collapsed > main {
-  display: none;
-}
-`;
-
-const colors = new ColorHash({ lightness: 0.8 });
-export const Note = ({
-  id, type, attributedTo, published, content,
-  smallHeader = false, position,
-  onHide, onSize,
-}) => {
-  const backgroundColor = attributedTo.color || colors.hex(attributedTo.id);
-  const username = attributedTo.name || attributedTo.preferredUsername;
-
-  const root = useRef(null);
-	useLayoutEffect(() => {
-		onSize(id, root.current.offsetWidth, root.current.offsetHeight);
-	});
-
-  return (
-    <section
-      style={{
-        '--theme-header-bg': backgroundColor,
-        'left': position && `${position[0] - root.current.offsetWidth / 2}px`,
-        'top': position && `${position[1] - root.current.offsetHeight / 2}px`,
-        'visibility': position ? 'visible' : 'hidden',
-      }}
-      className={`type-${type}`}
-      data-id={id}
-      ref={root}
-    >
-      {smallHeader
-        ? <header className="small" onClick={onHide} />
-        : <header onClick={onHide}>
-            <img src={new URL(attributedTo.icon.url, attributedTo.id)} />
-            <span className="user">{username}</span>
-            <Space />
-            <span className="time"><Time time={published} /></span>
-          </header>
-      }
-      <main>
-        {content}
-      </main>
-    </section>
-  );
-};
-- 
cgit v1.2.3