-
-
-
-
-
-
-
-
- Directs
-
-
-
- Channels
-
-
-
- Fediverse Drama Museum
-
-
-
- Epicord
-
-
-
- Invidious
-
-
-
-
- Carbon brainstorming
-
-
-
- riley
-
-
-
- BadAtNames
-
-
-
- lepton
-
-
-
- cockandball
-
-
-
- Bibliogram
-
-
-
- Monsters Inc Debate Hall
-
-
-
- DRB clan
-
-
-
+
mettaton simp zone
+
+
+
+
diff --git a/build/static/channels.svg b/build/static/channels.svg
new file mode 100644
index 0000000..121c251
--- /dev/null
+++ b/build/static/channels.svg
@@ -0,0 +1,83 @@
+
+
+
+
diff --git a/build/static/directs.svg b/build/static/directs.svg
new file mode 100644
index 0000000..cb3558a
--- /dev/null
+++ b/build/static/directs.svg
@@ -0,0 +1,69 @@
+
+
+
+
diff --git a/build/static/groups.js b/build/static/groups.js
index 7de9c02..5872335 100644
--- a/build/static/groups.js
+++ b/build/static/groups.js
@@ -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", () => {
diff --git a/build/static/join-event.svg b/build/static/join-event.svg
new file mode 100644
index 0000000..042e3bd
--- /dev/null
+++ b/build/static/join-event.svg
@@ -0,0 +1,80 @@
+
+
+
+
diff --git a/build/static/main.css b/build/static/main.css
index 10b39e9..421b484 100644
--- a/build/static/main.css
+++ b/build/static/main.css
@@ -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;
diff --git a/build/static/room-picker.js b/build/static/room-picker.js
new file mode 100644
index 0000000..9924d37
--- /dev/null
+++ b/build/static/room-picker.js
@@ -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()
diff --git a/spec.js b/spec.js
index 8d2bee9..0376a0f 100644
--- a/spec.js
+++ b/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",
diff --git a/src/assets/icons/channels.svg b/src/assets/icons/channels.svg
new file mode 100644
index 0000000..121c251
--- /dev/null
+++ b/src/assets/icons/channels.svg
@@ -0,0 +1,83 @@
+
+
+
+
diff --git a/src/assets/icons/directs.svg b/src/assets/icons/directs.svg
new file mode 100644
index 0000000..cb3558a
--- /dev/null
+++ b/src/assets/icons/directs.svg
@@ -0,0 +1,69 @@
+
+
+
+
diff --git a/src/assets/icons/join-event.svg b/src/assets/icons/join-event.svg
new file mode 100644
index 0000000..042e3bd
--- /dev/null
+++ b/src/assets/icons/join-event.svg
@@ -0,0 +1,80 @@
+
+
+
+
diff --git a/src/home.pug b/src/home.pug
index e4b5c3e..8127345 100644
--- a/src/home.pug
+++ b/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`
])
diff --git a/src/js/groups.js b/src/js/groups.js
index 7de9c02..5872335 100644
--- a/src/js/groups.js
+++ b/src/js/groups.js
@@ -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", () => {
diff --git a/src/js/room-picker.js b/src/js/room-picker.js
new file mode 100644
index 0000000..9924d37
--- /dev/null
+++ b/src/js/room-picker.js
@@ -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()
diff --git a/src/sass/colors.sass b/src/sass/colors.sass
index c8e2088..278fc02 100644
--- a/src/sass/colors.sass
+++ b/src/sass/colors.sass
@@ -4,3 +4,4 @@ $darkest: #202224
$mild: #393c42
$milder: #42454a
$divider: #4b4e54
+$muted: #999
diff --git a/src/sass/components/groups.sass b/src/sass/components/groups.sass
index 1ba2316..d154721 100644
--- a/src/sass/components/groups.sass
+++ b/src/sass/components/groups.sass
@@ -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
diff --git a/src/sass/components/messages.sass b/src/sass/components/messages.sass
index 8d0c58a..0303541 100644
--- a/src/sass/components/messages.sass
+++ b/src/sass/components/messages.sass
@@ -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
+
@@ -101,7 +57,10 @@
riley joined the channel.
+
+ 
riley joined the channel.
+