forked from cadence/Carbon
Add interactive rooms, icons, events, dates
This commit is contained in:
parent
4699011f5d
commit
bb8717138e
GPG key ID:
BC1C2C61CF521B17
18 changed files with 869 additions and 94 deletions
7
build.js
7
build.js
|
|
@ -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}`)
|
||||
|
|
|
|||
|
|
@ -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 "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 ("groups v1") 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
83
build/static/channels.svg
Normal 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
69
build/static/directs.svg
Normal 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 |
|
|
@ -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", () => {
|
||||
|
|
|
|||
80
build/static/join-event.svg
Normal file
80
build/static/join-event.svg
Normal 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 |
|
|
@ -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
119
build/static/room-picker.js
Normal 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
20
spec.js
|
|
@ -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",
|
||||
|
|
|
|||
83
src/assets/icons/channels.svg
Normal file
83
src/assets/icons/channels.svg
Normal 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
src/assets/icons/directs.svg
Normal file
69
src/assets/icons/directs.svg
Normal 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 |
80
src/assets/icons/join-event.svg
Normal file
80
src/assets/icons/join-event.svg
Normal 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 |
35
src/home.pug
35
src/home.pug
|
|
@ -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`
|
||||
])
|
||||
|
|
|
|||
|
|
@ -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
119
src/js/room-picker.js
Normal 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()
|
||||
|
|
@ -4,3 +4,4 @@ $darkest: #202224
|
|||
$mild: #393c42
|
||||
$milder: #42454a
|
||||
$divider: #4b4e54
|
||||
$muted: #999
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue