forked from cadence/Carbon
Add messages, chat, and room list animation
This commit is contained in:
parent
da1f63fc8d
commit
4699011f5d
GPG key ID:
BC1C2C61CF521B17
19 changed files with 282 additions and 10 deletions
|
|
@ -2,8 +2,9 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<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/groups.js?static=18b23cbd17"></script>
|
||||||
|
<script type="module" src="static/chat-input.js?static=a90499fdac"></script>
|
||||||
<title>Carbon</title>
|
<title>Carbon</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -72,7 +73,45 @@
|
||||||
<div class="c-room__name">mettaton simp zone</div>
|
<div class="c-room__name">mettaton simp zone</div>
|
||||||
</div>
|
</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 "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-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>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
17
build/static/chat-input.js
Normal file
17
build/static/chat-input.js
Normal 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"
|
||||||
|
})
|
||||||
|
|
||||||
|
|
@ -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-face {
|
||||||
font-family: Whitney;
|
font-family: Whitney;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
@ -7,10 +12,12 @@ body {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
background-color: #36393e;
|
background-color: #36393e;
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
font-size: 24px;
|
font-size: 16px;
|
||||||
font-family: Whitney;
|
font-family: Whitney;
|
||||||
|
line-height: 1.45;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
|
|
@ -23,9 +30,11 @@ body {
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
width: 240px;
|
width: 240px;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
scrollbar-color: #42454a #2f3135;
|
scrollbar-color: #202224 #2f3135;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c-room {
|
.c-room {
|
||||||
|
|
@ -55,6 +64,9 @@ body {
|
||||||
.c-groups {
|
.c-groups {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 80px;
|
width: 80px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.c-groups__display {
|
.c-groups__display {
|
||||||
background-color: #202224;
|
background-color: #202224;
|
||||||
|
|
@ -65,6 +77,7 @@ body {
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
transition: width ease-out 0.12s;
|
||||||
}
|
}
|
||||||
.c-groups__display:not(.c-groups__display--closed):hover {
|
.c-groups__display:not(.c-groups__display--closed):hover {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
|
|
@ -96,4 +109,69 @@ body {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
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;
|
||||||
}
|
}
|
||||||
BIN
build/static/whitney-400.woff
Normal file
BIN
build/static/whitney-400.woff
Normal file
Binary file not shown.
10
spec.js
10
spec.js
|
|
@ -4,6 +4,11 @@ module.exports = [
|
||||||
source: "/assets/fonts/whitney-500.woff",
|
source: "/assets/fonts/whitney-500.woff",
|
||||||
target: "/static/whitney-500.woff"
|
target: "/static/whitney-500.woff"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
type: "file",
|
||||||
|
source: "/assets/fonts/whitney-400.woff",
|
||||||
|
target: "/static/whitney-400.woff"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: "file",
|
type: "file",
|
||||||
source: "/js/basic.js",
|
source: "/js/basic.js",
|
||||||
|
|
@ -14,6 +19,11 @@ module.exports = [
|
||||||
source: "/js/groups.js",
|
source: "/js/groups.js",
|
||||||
target: "/static/groups.js"
|
target: "/static/groups.js"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
type: "file",
|
||||||
|
source: "/js/chat-input.js",
|
||||||
|
target: "/static/chat-input.js"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: "file",
|
type: "file",
|
||||||
source: "/assets/fonts/whitney-500.woff",
|
source: "/assets/fonts/whitney-500.woff",
|
||||||
|
|
|
||||||
BIN
src/assets/fonts/whitney-300.woff
Normal file
BIN
src/assets/fonts/whitney-300.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/whitney-400.woff
Normal file
BIN
src/assets/fonts/whitney-400.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/whitney-600.woff
Normal file
BIN
src/assets/fonts/whitney-600.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/whitney-700.woff
Normal file
BIN
src/assets/fonts/whitney-700.woff
Normal file
Binary file not shown.
26
src/home.pug
26
src/home.pug
|
|
@ -8,12 +8,22 @@ mixin room(name)
|
||||||
.c-room__icon
|
.c-room__icon
|
||||||
.c-room__name= name
|
.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
|
doctype html
|
||||||
html
|
html
|
||||||
head
|
head
|
||||||
meta(charset="utf-8")
|
meta(charset="utf-8")
|
||||||
link(rel="stylesheet" type="text/css" href=getStatic("/sass/main.sass"))
|
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/groups.js"))
|
||||||
|
script(type="module" src=getStatic("/js/chat-input.js"))
|
||||||
title Carbon
|
title Carbon
|
||||||
body
|
body
|
||||||
main.main
|
main.main
|
||||||
|
|
@ -36,3 +46,19 @@ html
|
||||||
+room("DRB clan")
|
+room("DRB clan")
|
||||||
+room("mettaton simp zone")
|
+room("mettaton simp zone")
|
||||||
.c-chat
|
.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
17
src/js/chat-input.js
Normal 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"
|
||||||
|
})
|
||||||
|
|
||||||
|
|
@ -1,16 +1,22 @@
|
||||||
@font-face
|
@mixin import-whitney($weight)
|
||||||
font-family: Whitney
|
@font-face
|
||||||
font-weight: 500
|
font-family: Whitney
|
||||||
src: url(static("/assets/fonts/whitney-500.woff")) format("woff2")
|
font-weight: $weight
|
||||||
|
src: url(static("/assets/fonts/whitney-" + $weight + ".woff")) format("woff2")
|
||||||
|
|
||||||
|
+import-whitney(400)
|
||||||
|
+import-whitney(500)
|
||||||
|
|
||||||
body
|
body
|
||||||
font-family: sans-serif
|
font-family: sans-serif
|
||||||
background-color: #36393e
|
background-color: #36393e
|
||||||
color: #ddd
|
color: #ddd
|
||||||
font-size: 24px
|
font-size: 16px
|
||||||
font-family: Whitney
|
font-family: Whitney
|
||||||
|
line-height: 1.45
|
||||||
margin: 0
|
margin: 0
|
||||||
height: 100vh
|
height: 100vh
|
||||||
|
font-weight: 400
|
||||||
|
|
||||||
.main
|
.main
|
||||||
height: 100vh
|
height: 100vh
|
||||||
|
|
|
||||||
|
|
@ -3,3 +3,4 @@ $darker: #2f3135
|
||||||
$darkest: #202224
|
$darkest: #202224
|
||||||
$mild: #393c42
|
$mild: #393c42
|
||||||
$milder: #42454a
|
$milder: #42454a
|
||||||
|
$divider: #4b4e54
|
||||||
|
|
|
||||||
25
src/sass/components/chat-input.sass
Normal file
25
src/sass/components/chat-input.sass
Normal 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
|
||||||
17
src/sass/components/chat.sass
Normal file
17
src/sass/components/chat.sass
Normal 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
|
||||||
|
|
@ -9,6 +9,9 @@ $out-width: $base-width + rooms.$list-width - 20px
|
||||||
.c-groups
|
.c-groups
|
||||||
position: relative
|
position: relative
|
||||||
width: $base-width
|
width: $base-width
|
||||||
|
flex-shrink: 0
|
||||||
|
font-size: 24px
|
||||||
|
font-weight: 500
|
||||||
|
|
||||||
&__display
|
&__display
|
||||||
background-color: c.$darkest
|
background-color: c.$darkest
|
||||||
|
|
@ -19,6 +22,7 @@ $out-width: $base-width + rooms.$list-width - 20px
|
||||||
top: 0
|
top: 0
|
||||||
bottom: 0
|
bottom: 0
|
||||||
right: 0
|
right: 0
|
||||||
|
transition: width ease-out 0.12s
|
||||||
|
|
||||||
&:not(&--closed):hover
|
&:not(&--closed):hover
|
||||||
width: $out-width
|
width: $out-width
|
||||||
|
|
|
||||||
27
src/sass/components/messages.sass
Normal file
27
src/sass/components/messages.sass
Normal 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
|
||||||
|
|
@ -9,9 +9,11 @@ $icon-padding: 8px
|
||||||
padding: $icon-padding
|
padding: $icon-padding
|
||||||
width: $list-width
|
width: $list-width
|
||||||
font-size: 20px
|
font-size: 20px
|
||||||
|
font-weight: 500
|
||||||
overflow-y: scroll
|
overflow-y: scroll
|
||||||
scrollbar-width: thin
|
scrollbar-width: thin
|
||||||
scrollbar-color: c.$milder c.$darker
|
scrollbar-color: c.$darkest c.$darker
|
||||||
|
flex-shrink: 0
|
||||||
|
|
||||||
.c-room
|
.c-room
|
||||||
display: flex
|
display: flex
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,6 @@
|
||||||
@use "./base"
|
@use "./base"
|
||||||
@use "./components/groups"
|
@use "./components/groups"
|
||||||
@use "./components/rooms"
|
@use "./components/rooms"
|
||||||
|
@use "./components/messages"
|
||||||
|
@use "./components/chat"
|
||||||
|
@use "./components/chat-input"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue