Add messages, chat, and room list animation

This commit is contained in:
Cadence Ember 2020-10-13 00:19:10 +13:00
parent da1f63fc8d
commit 4699011f5d
Signed by untrusted user: cadence
GPG key ID: BC1C2C61CF521B17
19 changed files with 282 additions and 10 deletions

View file

@ -2,8 +2,9 @@
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="static/main.css?static=13628a6e3d">
<link rel="stylesheet" type="text/css" href="static/main.css?static=fd8dad924f">
<script type="module" src="static/groups.js?static=18b23cbd17"></script>
<script type="module" src="static/chat-input.js?static=a90499fdac"></script>
<title>Carbon</title>
</head>
<body>
@ -72,7 +73,45 @@
<div class="c-room__name">mettaton simp zone</div>
</div>
</div>
<div class="c-chat"></div>
<div class="c-chat">
<div class="c-chat__messages">
<div class="c-chat__inner">
<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">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-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">hi riley feel free to catch up in your own time</div>
</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">riley</div>
<div class="c-message">henlo</div>
<div class="c-message">wasuwasuwasuwasuuuuuup</div>
</div>
</div>
</div>
</div>
<div class="c-chat-input">
<textarea class="c-chat-input__textarea" placeholder="Send a message..." autocomplete="off" id="c-chat-textarea"></textarea>
</div>
</div>
</main>
</body>
</html>

View file

@ -0,0 +1,17 @@
import {q} from "./basic.js"
const chat = q("#c-chat-textarea")
chat.addEventListener("keydown", event => {
if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey) {
chat.value = ""
event.preventDefault()
}
})
chat.addEventListener("input", () => {
chat.style.height = "0px"
console.log(chat.clientHeight, chat.scrollHeight)
chat.style.height = (chat.scrollHeight + 1) + "px"
})

View file

@ -1,3 +1,8 @@
@font-face {
font-family: Whitney;
font-weight: 400;
src: url(/static/whitney-400.woff?static=0f823bc4b5) format("woff2");
}
@font-face {
font-family: Whitney;
font-weight: 500;
@ -7,10 +12,12 @@ body {
font-family: sans-serif;
background-color: #36393e;
color: #ddd;
font-size: 24px;
font-size: 16px;
font-family: Whitney;
line-height: 1.45;
margin: 0;
height: 100vh;
font-weight: 400;
}
.main {
@ -23,9 +30,11 @@ body {
padding: 8px;
width: 240px;
font-size: 20px;
font-weight: 500;
overflow-y: scroll;
scrollbar-width: thin;
scrollbar-color: #42454a #2f3135;
scrollbar-color: #202224 #2f3135;
flex-shrink: 0;
}
.c-room {
@ -55,6 +64,9 @@ body {
.c-groups {
position: relative;
width: 80px;
flex-shrink: 0;
font-size: 24px;
font-weight: 500;
}
.c-groups__display {
background-color: #202224;
@ -65,6 +77,7 @@ body {
top: 0;
bottom: 0;
right: 0;
transition: width ease-out 0.12s;
}
.c-groups__display:not(.c-groups__display--closed):hover {
width: 300px;
@ -97,3 +110,68 @@ body {
overflow: hidden;
text-overflow: ellipsis;
}
.c-message-group {
display: flex;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #4b4e54;
}
.c-message-group__avatar {
flex-shrink: 0;
margin-right: 16px;
}
.c-message-group__icon {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: #48d;
}
.c-message-group__name {
color: #5bf;
margin: -2px 0px -3px;
font-size: 19px;
font-weight: 500;
}
.c-message {
margin-top: 4px;
}
.c-chat {
display: grid;
grid-template-rows: 1fr auto;
align-items: end;
}
.c-chat__messages {
height: 100%;
overflow-y: scroll;
scrollbar-color: #202224 #2f3135;
display: grid;
align-items: end;
}
.c-chat__inner {
padding: 20px 20px 20px;
}
.c-chat-input {
width: 100%;
border-top: 2px solid #4b4e54;
}
.c-chat-input__textarea {
width: calc(100% - 40px);
height: 39.2px;
box-sizing: border-box;
margin: 20px;
padding: 8px;
font-family: inherit;
font-size: inherit;
background-color: #42454a;
color: #fff;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
border: none;
border-radius: 8px;
resize: none;
}

Binary file not shown.

10
spec.js
View file

@ -4,6 +4,11 @@ module.exports = [
source: "/assets/fonts/whitney-500.woff",
target: "/static/whitney-500.woff"
},
{
type: "file",
source: "/assets/fonts/whitney-400.woff",
target: "/static/whitney-400.woff"
},
{
type: "file",
source: "/js/basic.js",
@ -14,6 +19,11 @@ module.exports = [
source: "/js/groups.js",
target: "/static/groups.js"
},
{
type: "file",
source: "/js/chat-input.js",
target: "/static/chat-input.js"
},
{
type: "file",
source: "/assets/fonts/whitney-500.woff",

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -8,12 +8,22 @@ mixin room(name)
.c-room__icon
.c-room__name= name
mixin message(name, messages)
.c-message-group
.c-message-group__avatar
.c-message-group__icon
.c-message-group__messages
.c-message-group__name= name
each message in messages
.c-message= message
doctype html
html
head
meta(charset="utf-8")
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"))
title Carbon
body
main.main
@ -36,3 +46,19 @@ html
+room("DRB clan")
+room("mettaton simp zone")
.c-chat
.c-chat__messages
.c-chat__inner
+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("Cadence", [
`hi riley feel free to catch up in your own time`
])
+message("riley", [
`henlo`,
`wasuwasuwasuwasuuuuuup`
])
.c-chat-input
textarea(placeholder="Send a message..." autocomplete="off").c-chat-input__textarea#c-chat-textarea

17
src/js/chat-input.js Normal file
View file

@ -0,0 +1,17 @@
import {q} from "./basic.js"
const chat = q("#c-chat-textarea")
chat.addEventListener("keydown", event => {
if (event.key === "Enter" && !event.shiftKey && !event.ctrlKey) {
chat.value = ""
event.preventDefault()
}
})
chat.addEventListener("input", () => {
chat.style.height = "0px"
console.log(chat.clientHeight, chat.scrollHeight)
chat.style.height = (chat.scrollHeight + 1) + "px"
})

View file

@ -1,16 +1,22 @@
@font-face
font-family: Whitney
font-weight: 500
src: url(static("/assets/fonts/whitney-500.woff")) format("woff2")
@mixin import-whitney($weight)
@font-face
font-family: Whitney
font-weight: $weight
src: url(static("/assets/fonts/whitney-" + $weight + ".woff")) format("woff2")
+import-whitney(400)
+import-whitney(500)
body
font-family: sans-serif
background-color: #36393e
color: #ddd
font-size: 24px
font-size: 16px
font-family: Whitney
line-height: 1.45
margin: 0
height: 100vh
font-weight: 400
.main
height: 100vh

View file

@ -3,3 +3,4 @@ $darker: #2f3135
$darkest: #202224
$mild: #393c42
$milder: #42454a
$divider: #4b4e54

View file

@ -0,0 +1,25 @@
@use "../colors.sass" as c
@mixin appearance($value)
appearance: $value
-moz-appearance: $value
-webkit-appearance: $value
.c-chat-input
width: 100%
border-top: 2px solid c.$divider
&__textarea
width: calc(100% - 40px)
height: 16px + (16px * 1.45)
box-sizing: border-box
margin: 20px
padding: 8px
font-family: inherit
font-size: inherit
background-color: c.$milder
color: #fff
+appearance(none)
border: none
border-radius: 8px
resize: none

View file

@ -0,0 +1,17 @@
@use "../colors" as c
.c-chat
display: grid
grid-template-rows: 1fr auto
align-items: end
// height: 100%
&__messages
height: 100%
overflow-y: scroll
scrollbar-color: c.$darkest c.$darker
display: grid
align-items: end
&__inner
padding: 20px 20px 20px

View file

@ -9,6 +9,9 @@ $out-width: $base-width + rooms.$list-width - 20px
.c-groups
position: relative
width: $base-width
flex-shrink: 0
font-size: 24px
font-weight: 500
&__display
background-color: c.$darkest
@ -19,6 +22,7 @@ $out-width: $base-width + rooms.$list-width - 20px
top: 0
bottom: 0
right: 0
transition: width ease-out 0.12s
&:not(&--closed):hover
width: $out-width

View file

@ -0,0 +1,27 @@
@use "../colors" as c
.c-message-group
display: flex
margin-top: 12px
padding-top: 12px
border-top: 1px solid c.$divider
&__avatar
flex-shrink: 0
margin-right: 16px
&__icon
$size: 32px
width: $size
height: $size
border-radius: 50%
background-color: #48d
&__name
color: #5bf
margin: -2px 0px -3px
font-size: 19px
font-weight: 500
.c-message
margin-top: 4px

View file

@ -9,9 +9,11 @@ $icon-padding: 8px
padding: $icon-padding
width: $list-width
font-size: 20px
font-weight: 500
overflow-y: scroll
scrollbar-width: thin
scrollbar-color: c.$milder c.$darker
scrollbar-color: c.$darkest c.$darker
flex-shrink: 0
.c-room
display: flex

View file

@ -1,3 +1,6 @@
@use "./base"
@use "./components/groups"
@use "./components/rooms"
@use "./components/messages"
@use "./components/chat"
@use "./components/chat-input"