Add interactive rooms, icons, events, dates

This commit is contained in:
Cadence Ember 2020-10-13 01:35:54 +13:00
parent 4699011f5d
commit bb8717138e
Signed by: cadence
GPG key ID: BC1C2C61CF521B17
18 changed files with 869 additions and 94 deletions

View file

@ -46,6 +46,13 @@ function validate(filename, body, type) {
} else {
continue // don't care about info
}
let match
if (match = message.message.match(/Property “([\w-]+)” doesn't exist.$/)) {
// allow these properties specifically
if (["scrollbar-width", "scrollbar-color"].includes(match[1])) {
continue
}
}
concerningMessages++
console.log(`validation: ${type} in ${filename}`)
console.log(` ${message.message}`)

View file

@ -2,97 +2,53 @@
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="static/main.css?static=fd8dad924f">
<script type="module" src="static/groups.js?static=18b23cbd17"></script>
<link rel="stylesheet" type="text/css" href="static/main.css?static=5e2a7fd1b3">
<script type="module" src="static/groups.js?static=af318db96c"></script>
<script type="module" src="static/chat-input.js?static=a90499fdac"></script>
<script type="module" src="static/room-picker.js?static=fdb53ef95f"></script>
<title>Carbon</title>
</head>
<body>
<main class="main">
<div class="c-groups">
<div class="c-groups__display" id="c-groups">
<div class="c-groups__container">
<div class="c-group">
<div class="c-group__icon"></div>
<div class="c-group__name">Directs</div>
</div>
<div class="c-group">
<div class="c-group__icon"></div>
<div class="c-group__name">Channels</div>
</div>
<div class="c-group">
<div class="c-group__icon"></div>
<div class="c-group__name">Fediverse Drama Museum</div>
</div>
<div class="c-group">
<div class="c-group__icon"></div>
<div class="c-group__name">Epicord</div>
</div>
<div class="c-group">
<div class="c-group__icon"></div>
<div class="c-group__name">Invidious</div>
</div>
</div>
</div>
</div>
<div class="c-rooms" id="c-rooms">
<div class="c-room">
<div class="c-room__icon"></div>
<div class="c-room__name">Carbon brainstorming</div>
</div>
<div class="c-room">
<div class="c-room__icon"></div>
<div class="c-room__name">riley</div>
</div>
<div class="c-room">
<div class="c-room__icon"></div>
<div class="c-room__name">BadAtNames</div>
</div>
<div class="c-room">
<div class="c-room__icon"></div>
<div class="c-room__name">lepton</div>
</div>
<div class="c-room">
<div class="c-room__icon"></div>
<div class="c-room__name">cockandball</div>
</div>
<div class="c-room">
<div class="c-room__icon"></div>
<div class="c-room__name">Bibliogram</div>
</div>
<div class="c-room">
<div class="c-room__icon"></div>
<div class="c-room__name">Monsters Inc Debate Hall</div>
</div>
<div class="c-room">
<div class="c-room__icon"></div>
<div class="c-room__name">DRB clan</div>
</div>
<div class="c-room">
<div class="c-room__icon"></div>
<div class="c-room__name">mettaton simp zone</div>
<div class="c-groups__display" id="c-groups-display">
<div class="c-groups__container" id="c-groups-list"></div>
</div>
</div>
<div class="c-rooms" id="c-rooms"></div>
<div class="c-chat">
<div class="c-chat__messages">
<div class="c-chat__inner">
<div class="c-message-notice">
<div class="c-message-notice__inner">You've reached the start of the conversation.</div>
</div>
<div class="c-message-group">
<div class="c-message-group__avatar">
<div class="c-message-group__icon"></div>
</div>
<div class="c-message-group__messages">
<div class="c-message-group__name">Cadence</div>
<div class="c-message-group__intro">
<div class="c-message-group__name">Cadence</div>
<div class="c-message-group__date">at 4:20 pm</div>
</div>
<div class="c-message">the second button is for rooms (gonna call them &quot;channels to make discord users happy) that are not in a group (which will be most rooms - few people set up groups because they're so annoying, and many communities of people only need a single chatroom)</div>
<div class="c-message">for now, please assume that current groups (&quot;groups v1&quot;) will not be recognised by this client at all</div>
<div class="c-message">so yeah, press the second button, you see all the ungrouped channels</div>
</div>
</div>
<div class="c-message-event">
<div class="c-message-event__inner"><img class="c-message-event__icon" src="/static/join-event.svg" alt=""/>riley joined the channel.
</div>
</div>
<div class="c-message-group">
<div class="c-message-group__avatar">
<div class="c-message-group__icon"></div>
</div>
<div class="c-message-group__messages">
<div class="c-message-group__name">Cadence</div>
<div class="c-message-group__intro">
<div class="c-message-group__name">Cadence</div>
<div class="c-message-group__date">at 4:20 pm</div>
</div>
<div class="c-message">hi riley feel free to catch up in your own time</div>
</div>
</div>
@ -101,7 +57,10 @@
<div class="c-message-group__icon"></div>
</div>
<div class="c-message-group__messages">
<div class="c-message-group__name">riley</div>
<div class="c-message-group__intro">
<div class="c-message-group__name">riley</div>
<div class="c-message-group__date">at 4:20 pm</div>
</div>
<div class="c-message">henlo</div>
<div class="c-message">wasuwasuwasuwasuuuuuup</div>
</div>

83
build/static/channels.svg Normal file
View file

@ -0,0 +1,83 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="48.000004"
height="48.000004"
viewBox="0 0 12.700001 12.700001"
version="1.1"
id="svg27"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
sodipodi:docname="channels.svg">
<defs
id="defs21" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="25.083567"
inkscape:cy="22.080215"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="true"
units="px"
inkscape:window-width="1440"
inkscape:window-height="879"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
showborder="false">
<inkscape:grid
type="xygrid"
id="grid824" />
</sodipodi:namedview>
<metadata
id="metadata24">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(36.739286,-225.97828)">
<path
style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:#e2e2e2;stroke-width:1.05833333;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
d="m -31.976786,228.62411 v 7.40833"
id="path864"
inkscape:connector-curvature="0" />
<path
inkscape:connector-curvature="0"
id="path866"
d="m -28.801786,228.62412 v 7.40833"
style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:#e2e2e2;stroke-width:1.05833333;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
<path
inkscape:connector-curvature="0"
id="path905"
d="m -26.685116,230.74078 h -7.40833"
style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:#e2e2e2;stroke-width:1.05833328;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
<path
style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:#e2e2e2;stroke-width:1.05833328;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
d="m -26.685126,233.91578 h -7.40833"
id="path907"
inkscape:connector-curvature="0" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

69
build/static/directs.svg Normal file
View file

@ -0,0 +1,69 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="48.000004"
height="48.000004"
viewBox="0 0 12.700001 12.700001"
version="1.1"
id="svg27"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
sodipodi:docname="directs.svg">
<defs
id="defs21" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="5.6568542"
inkscape:cx="30.795644"
inkscape:cy="43.802047"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1440"
inkscape:window-height="879"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
showborder="false">
<inkscape:grid
type="xygrid"
id="grid824" />
</sodipodi:namedview>
<metadata
id="metadata24">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(36.739286,-225.97828)">
<path
style="opacity:1;fill:#e2e2e2;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.52916664;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
d="m -33.035119,229.41786 h 5.067509 c 0.868277,0 1.567287,0.69901 1.567287,1.56728 v 1.88109 c 0,0.86828 -0.69901,1.56729 -1.567287,1.56729 h -2.157093 l -1.322916,1.86351 -1.322917,-1.86351 h -0.264583 c -0.868277,0 -1.567287,-0.69901 -1.567287,-1.56729 v -1.88109 c 0,-0.86827 0.69901,-1.56728 1.567287,-1.56728 z"
id="rect820"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ssssscccssss" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -2,7 +2,7 @@ import {q} from "./basic.js"
let state = "CLOSED"
const groups = q("#c-groups")
const groups = q("#c-groups-display")
const rooms = q("#c-rooms")
groups.addEventListener("click", () => {

View file

@ -0,0 +1,80 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="20"
height="20"
viewBox="0 0 5.2916665 5.2916668"
version="1.1"
id="svg27"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
sodipodi:docname="join-event.svg">
<defs
id="defs21" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="15.649008"
inkscape:cy="8.3751893"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="true"
units="px"
inkscape:window-width="1440"
inkscape:window-height="879"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1">
<inkscape:grid
type="xygrid"
id="grid26" />
</sodipodi:namedview>
<metadata
id="metadata24">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-291.70832)">
<path
style="opacity:1;fill:#e2e2e2;fill-opacity:1;fill-rule:nonzero;stroke:#73d216;stroke-width:0.52916666;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
d="M 0.79374997,294.35416 H 4.4979167"
id="path28"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
inkscape:connector-curvature="0"
id="path30"
d="m 3.175,293.03124 1.3229167,1.32292"
style="opacity:1;fill:#e2e2e2;fill-opacity:1;fill-rule:nonzero;stroke:#73d216;stroke-width:0.52916666;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
sodipodi:nodetypes="cc" />
<path
sodipodi:nodetypes="cc"
style="opacity:1;fill:#e2e2e2;fill-opacity:1;fill-rule:nonzero;stroke:#73d216;stroke-width:0.52916666;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
d="M 4.4979167,294.35416 3.175,295.67707"
id="path32"
inkscape:connector-curvature="0" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

View file

@ -78,12 +78,15 @@ body {
bottom: 0;
right: 0;
transition: width ease-out 0.12s;
scrollbar-width: thin;
scrollbar-color: #42454a #202224;
}
.c-groups__display:not(.c-groups__display--closed):hover {
width: 300px;
width: 320px;
overflow-y: auto;
}
.c-groups__container {
width: 300px;
width: 320px;
padding: 8px;
}
@ -100,7 +103,7 @@ body {
.c-group__icon {
width: 48px;
height: 48px;
background-color: #999;
background-color: #393c42;
border-radius: 50%;
margin-right: 16px;
flex-shrink: 0;
@ -111,15 +114,19 @@ body {
text-overflow: ellipsis;
}
.c-message-group {
display: flex;
.c-message-group, .c-message-event {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #4b4e54;
}
.c-message-group {
display: flex;
}
.c-message-group__avatar {
flex-shrink: 0;
margin-right: 16px;
cursor: pointer;
}
.c-message-group__icon {
width: 32px;
@ -127,17 +134,54 @@ body {
border-radius: 50%;
background-color: #48d;
}
.c-message-group__intro {
display: flex;
align-items: baseline;
}
.c-message-group__name {
color: #5bf;
margin: -2px 0px -3px;
font-size: 19px;
font-weight: 500;
cursor: pointer;
}
.c-message-group__name:hover {
text-decoration: underline;
}
.c-message-group__date {
font-size: 14px;
margin-left: 9px;
color: #999;
}
.c-message {
margin-top: 4px;
}
.c-message-event {
padding-top: 10px;
padding-left: 6px;
}
.c-message-event__inner {
display: flex;
align-items: center;
}
.c-message-event__icon {
margin-right: 8px;
position: relative;
top: 1px;
}
.c-message-notice {
padding: 12px;
}
.c-message-notice__inner {
text-align: center;
padding: 12px;
background-color: #42454a;
border-radius: 8px;
}
.c-chat {
display: grid;
grid-template-rows: 1fr auto;

119
build/static/room-picker.js Normal file
View file

@ -0,0 +1,119 @@
import {q, ElemJS, ejs} from "./basic.js"
class Group extends ElemJS {
constructor(groups, data) {
super("div")
this.groups = groups
this.data = data
this.on("click", this.onClick.bind(this))
this.class("c-group")
this.child(
(this.data.icon
? ejs("img").class("c-group__icon").attribute("src", this.data.icon)
: ejs("div").class("c-group__icon")
),
ejs("div").class("c-group__name").text(this.data.name)
)
}
onClick() {
this.groups.setGroup(this)
}
}
class Room extends ElemJS {
constructor(name) {
super("div")
this.name = name
this.class("c-room")
this.child(
ejs("div").class("c-room__icon"),
ejs("div").class("c-room__name").text(this.name)
)
}
}
class Rooms extends ElemJS {
constructor() {
super(q("#c-rooms"))
this.rooms = []
this.render()
}
setRooms(rooms) {
this.rooms = rooms
this.render()
}
render() {
this.clearChildren()
for (const room of this.rooms) {
this.child(new Room(room.name))
}
}
}
const rooms = new Rooms()
class Groups extends ElemJS {
constructor() {
super(q("#c-groups-list"))
this.groups = [
{name: "Directs", icon: "/static/directs.svg", rooms: [
{name: "riley"},
{name: "BadAtNames"},
{name: "lynxano"},
{name: "quarky"},
{name: "lepton"},
{name: "ash"},
{name: "mewmew"},
{name: "Toniob"},
{name: "cockandball"}
]},
{name: "Channels", icon: "/static/channels.svg", rooms: [
{name: "Carbon brainstorming"},
{name: "Bibliogram"},
{name: "Monsters Inc Debate Hall"},
{name: "DRB clan"},
{name: "mettaton simp zone"}
]},
{name: "Fediverse Drama Museum", rooms: [
{name: "witches"},
{name: "snouts"},
{name: "monads"},
{name: "radical"},
{name: "blobcat"}
]},
{name: "Epicord", rooms: [
{name: "main"},
{name: "gaming"},
{name: "inhalers"},
{name: "minecraft"},
{name: "osu"},
{name: "covid"}
]},
{name: "Invidious", rooms: [
]}
]
this.render()
this.setGroup(this.children[0])
}
setGroup(group) {
rooms.setRooms(group.data.rooms)
}
render() {
this.clearChildren()
for (const group of this.groups) {
this.child(new Group(this, group))
}
}
}
const groups = new Groups()

20
spec.js
View file

@ -24,11 +24,31 @@ module.exports = [
source: "/js/chat-input.js",
target: "/static/chat-input.js"
},
{
type: "file",
source: "/js/room-picker.js",
target: "/static/room-picker.js"
},
{
type: "file",
source: "/assets/fonts/whitney-500.woff",
target: "/static/whitney-500.woff"
},
{
type: "file",
source: "/assets/icons/directs.svg",
target: "/static/directs.svg"
},
{
type: "file",
source: "/assets/icons/channels.svg",
target: "/static/channels.svg"
},
{
type: "file",
source: "/assets/icons/join-event.svg",
target: "/static/join-event.svg"
},
{
type: "sass",
source: "/sass/main.sass",

View file

@ -0,0 +1,83 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="48.000004"
height="48.000004"
viewBox="0 0 12.700001 12.700001"
version="1.1"
id="svg27"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
sodipodi:docname="channels.svg">
<defs
id="defs21" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="25.083567"
inkscape:cy="22.080215"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="true"
units="px"
inkscape:window-width="1440"
inkscape:window-height="879"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
showborder="false">
<inkscape:grid
type="xygrid"
id="grid824" />
</sodipodi:namedview>
<metadata
id="metadata24">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(36.739286,-225.97828)">
<path
style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:#e2e2e2;stroke-width:1.05833333;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
d="m -31.976786,228.62411 v 7.40833"
id="path864"
inkscape:connector-curvature="0" />
<path
inkscape:connector-curvature="0"
id="path866"
d="m -28.801786,228.62412 v 7.40833"
style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:#e2e2e2;stroke-width:1.05833333;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
<path
inkscape:connector-curvature="0"
id="path905"
d="m -26.685116,230.74078 h -7.40833"
style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:#e2e2e2;stroke-width:1.05833328;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill" />
<path
style="opacity:1;fill-opacity:1;fill-rule:nonzero;stroke:#e2e2e2;stroke-width:1.05833328;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
d="m -26.685126,233.91578 h -7.40833"
id="path907"
inkscape:connector-curvature="0" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

View file

@ -0,0 +1,69 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="48.000004"
height="48.000004"
viewBox="0 0 12.700001 12.700001"
version="1.1"
id="svg27"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
sodipodi:docname="directs.svg">
<defs
id="defs21" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="5.6568542"
inkscape:cx="30.795644"
inkscape:cy="43.802047"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1440"
inkscape:window-height="879"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
showborder="false">
<inkscape:grid
type="xygrid"
id="grid824" />
</sodipodi:namedview>
<metadata
id="metadata24">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(36.739286,-225.97828)">
<path
style="opacity:1;fill:#e2e2e2;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.52916664;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
d="m -33.035119,229.41786 h 5.067509 c 0.868277,0 1.567287,0.69901 1.567287,1.56728 v 1.88109 c 0,0.86828 -0.69901,1.56729 -1.567287,1.56729 h -2.157093 l -1.322916,1.86351 -1.322917,-1.86351 h -0.264583 c -0.868277,0 -1.567287,-0.69901 -1.567287,-1.56729 v -1.88109 c 0,-0.86827 0.69901,-1.56728 1.567287,-1.56728 z"
id="rect820"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ssssscccssss" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View file

@ -0,0 +1,80 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="20"
height="20"
viewBox="0 0 5.2916665 5.2916668"
version="1.1"
id="svg27"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
sodipodi:docname="join-event.svg">
<defs
id="defs21" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="15.649008"
inkscape:cy="8.3751893"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="true"
units="px"
inkscape:window-width="1440"
inkscape:window-height="879"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1">
<inkscape:grid
type="xygrid"
id="grid26" />
</sodipodi:namedview>
<metadata
id="metadata24">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-291.70832)">
<path
style="opacity:1;fill:#e2e2e2;fill-opacity:1;fill-rule:nonzero;stroke:#73d216;stroke-width:0.52916666;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
d="M 0.79374997,294.35416 H 4.4979167"
id="path28"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
inkscape:connector-curvature="0"
id="path30"
d="m 3.175,293.03124 1.3229167,1.32292"
style="opacity:1;fill:#e2e2e2;fill-opacity:1;fill-rule:nonzero;stroke:#73d216;stroke-width:0.52916666;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
sodipodi:nodetypes="cc" />
<path
sodipodi:nodetypes="cc"
style="opacity:1;fill:#e2e2e2;fill-opacity:1;fill-rule:nonzero;stroke:#73d216;stroke-width:0.52916666;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:stroke markers fill"
d="M 4.4979167,294.35416 3.175,295.67707"
id="path32"
inkscape:connector-curvature="0" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.9 KiB

View file

@ -13,10 +13,22 @@ mixin message(name, messages)
.c-message-group__avatar
.c-message-group__icon
.c-message-group__messages
.c-message-group__name= name
.c-message-group__intro
.c-message-group__name= name
.c-message-group__date at 4:20 pm
each message in messages
.c-message= message
mixin message-notice(content)
.c-message-notice
.c-message-notice__inner= content
mixin message-event(icon, content)
.c-message-event
.c-message-event__inner
img(src=icon alt="").c-message-event__icon
= content
doctype html
html
head
@ -24,35 +36,24 @@ html
link(rel="stylesheet" type="text/css" href=getStatic("/sass/main.sass"))
script(type="module" src=getStatic("/js/groups.js"))
script(type="module" src=getStatic("/js/chat-input.js"))
script(type="module" src=getStatic("/js/room-picker.js"))
title Carbon
body
main.main
.c-groups
.c-groups__display#c-groups
.c-groups__container
+group("Directs")
+group("Channels")
+group("Fediverse Drama Museum")
+group("Epicord")
+group("Invidious")
.c-groups__display#c-groups-display
.c-groups__container#c-groups-list
.c-rooms#c-rooms
+room("Carbon brainstorming")
+room("riley")
+room("BadAtNames")
+room("lepton")
+room("cockandball")
+room("Bibliogram")
+room("Monsters Inc Debate Hall")
+room("DRB clan")
+room("mettaton simp zone")
.c-chat
.c-chat__messages
.c-chat__inner
+message-notice("You've reached the start of the conversation.")
+message("Cadence", [
`the second button is for rooms (gonna call them "channels to make discord users happy) that are not in a group (which will be most rooms - few people set up groups because they're so annoying, and many communities of people only need a single chatroom)`,
`for now, please assume that current groups ("groups v1") will not be recognised by this client at all`,
`so yeah, press the second button, you see all the ungrouped channels`
])
+message-event("/static/join-event.svg", "riley joined the channel.")
+message("Cadence", [
`hi riley feel free to catch up in your own time`
])

View file

@ -2,7 +2,7 @@ import {q} from "./basic.js"
let state = "CLOSED"
const groups = q("#c-groups")
const groups = q("#c-groups-display")
const rooms = q("#c-rooms")
groups.addEventListener("click", () => {

119
src/js/room-picker.js Normal file
View file

@ -0,0 +1,119 @@
import {q, ElemJS, ejs} from "./basic.js"
class Group extends ElemJS {
constructor(groups, data) {
super("div")
this.groups = groups
this.data = data
this.on("click", this.onClick.bind(this))
this.class("c-group")
this.child(
(this.data.icon
? ejs("img").class("c-group__icon").attribute("src", this.data.icon)
: ejs("div").class("c-group__icon")
),
ejs("div").class("c-group__name").text(this.data.name)
)
}
onClick() {
this.groups.setGroup(this)
}
}
class Room extends ElemJS {
constructor(name) {
super("div")
this.name = name
this.class("c-room")
this.child(
ejs("div").class("c-room__icon"),
ejs("div").class("c-room__name").text(this.name)
)
}
}
class Rooms extends ElemJS {
constructor() {
super(q("#c-rooms"))
this.rooms = []
this.render()
}
setRooms(rooms) {
this.rooms = rooms
this.render()
}
render() {
this.clearChildren()
for (const room of this.rooms) {
this.child(new Room(room.name))
}
}
}
const rooms = new Rooms()
class Groups extends ElemJS {
constructor() {
super(q("#c-groups-list"))
this.groups = [
{name: "Directs", icon: "/static/directs.svg", rooms: [
{name: "riley"},
{name: "BadAtNames"},
{name: "lynxano"},
{name: "quarky"},
{name: "lepton"},
{name: "ash"},
{name: "mewmew"},
{name: "Toniob"},
{name: "cockandball"}
]},
{name: "Channels", icon: "/static/channels.svg", rooms: [
{name: "Carbon brainstorming"},
{name: "Bibliogram"},
{name: "Monsters Inc Debate Hall"},
{name: "DRB clan"},
{name: "mettaton simp zone"}
]},
{name: "Fediverse Drama Museum", rooms: [
{name: "witches"},
{name: "snouts"},
{name: "monads"},
{name: "radical"},
{name: "blobcat"}
]},
{name: "Epicord", rooms: [
{name: "main"},
{name: "gaming"},
{name: "inhalers"},
{name: "minecraft"},
{name: "osu"},
{name: "covid"}
]},
{name: "Invidious", rooms: [
]}
]
this.render()
this.setGroup(this.children[0])
}
setGroup(group) {
rooms.setRooms(group.data.rooms)
}
render() {
this.clearChildren()
for (const group of this.groups) {
this.child(new Group(this, group))
}
}
}
const groups = new Groups()

View file

@ -4,3 +4,4 @@ $darkest: #202224
$mild: #393c42
$milder: #42454a
$divider: #4b4e54
$muted: #999

View file

@ -4,7 +4,7 @@
$icon-size: 48px
$icon-padding: 8px
$base-width: $icon-size + $icon_padding * 4
$out-width: $base-width + rooms.$list-width - 20px
$out-width: $base-width + rooms.$list-width
.c-groups
position: relative
@ -23,9 +23,12 @@ $out-width: $base-width + rooms.$list-width - 20px
bottom: 0
right: 0
transition: width ease-out 0.12s
scrollbar-width: thin
scrollbar-color: c.$milder c.$darkest
&:not(&--closed):hover
width: $out-width
overflow-y: auto
&__container
width: $out-width
@ -44,7 +47,7 @@ $out-width: $base-width + rooms.$list-width - 20px
&__icon
width: $icon-size
height: $icon-size
background-color: #999
background-color: c.$mild
border-radius: 50%
margin-right: $icon-padding * 2
flex-shrink: 0

View file

@ -1,14 +1,17 @@
@use "../colors" as c
.c-message-group
display: flex
.c-message-group, .c-message-event
margin-top: 12px
padding-top: 12px
border-top: 1px solid c.$divider
.c-message-group
display: flex
&__avatar
flex-shrink: 0
margin-right: 16px
cursor: pointer
&__icon
$size: 32px
@ -17,11 +20,46 @@
border-radius: 50%
background-color: #48d
&__intro
display: flex
align-items: baseline
&__name
color: #5bf
margin: -2px 0px -3px
font-size: 19px
font-weight: 500
cursor: pointer
&:hover
text-decoration: underline
&__date
font-size: 14px
margin-left: 9px
color: c.$muted
.c-message
margin-top: 4px
.c-message-event
padding-top: 10px
padding-left: 6px
&__inner
display: flex
align-items: center
&__icon
margin-right: 8px
position: relative
top: 1px
.c-message-notice
padding: 12px
&__inner
text-align: center
padding: 12px
background-color: c.$milder
border-radius: 8px