diff --git a/build/index.html b/build/index.html index 5af69a2..555823b 100644 --- a/build/index.html +++ b/build/index.html @@ -2,8 +2,9 @@ - + + Carbon @@ -72,7 +73,45 @@
mettaton simp zone
-
+
+
+
+
+
+
+
+
+
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
+
+
+
+
+
+
+
+
Cadence
+
hi riley feel free to catch up in your own time
+
+
+
+
+
+
+
+
riley
+
henlo
+
wasuwasuwasuwasuuuuuup
+
+
+
+
+
+ +
+
\ No newline at end of file diff --git a/build/static/chat-input.js b/build/static/chat-input.js new file mode 100644 index 0000000..a21d6a5 --- /dev/null +++ b/build/static/chat-input.js @@ -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" +}) + diff --git a/build/static/main.css b/build/static/main.css index 514569f..10b39e9 100644 --- a/build/static/main.css +++ b/build/static/main.css @@ -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; @@ -96,4 +109,69 @@ body { white-space: nowrap; 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; } \ No newline at end of file diff --git a/build/static/whitney-400.woff b/build/static/whitney-400.woff new file mode 100644 index 0000000..2b33081 Binary files /dev/null and b/build/static/whitney-400.woff differ diff --git a/spec.js b/spec.js index ef562ca..8d2bee9 100644 --- a/spec.js +++ b/spec.js @@ -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", diff --git a/src/assets/fonts/whitney-300.woff b/src/assets/fonts/whitney-300.woff new file mode 100644 index 0000000..dc91427 Binary files /dev/null and b/src/assets/fonts/whitney-300.woff differ diff --git a/src/assets/fonts/whitney-400.woff b/src/assets/fonts/whitney-400.woff new file mode 100644 index 0000000..2b33081 Binary files /dev/null and b/src/assets/fonts/whitney-400.woff differ diff --git a/src/assets/fonts/whitney-600.woff b/src/assets/fonts/whitney-600.woff new file mode 100644 index 0000000..598a6f8 Binary files /dev/null and b/src/assets/fonts/whitney-600.woff differ diff --git a/src/assets/fonts/whitney-700.woff b/src/assets/fonts/whitney-700.woff new file mode 100644 index 0000000..50565a3 Binary files /dev/null and b/src/assets/fonts/whitney-700.woff differ diff --git a/src/home.pug b/src/home.pug index 420382a..e4b5c3e 100644 --- a/src/home.pug +++ b/src/home.pug @@ -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 \ No newline at end of file diff --git a/src/js/chat-input.js b/src/js/chat-input.js new file mode 100644 index 0000000..a21d6a5 --- /dev/null +++ b/src/js/chat-input.js @@ -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" +}) + diff --git a/src/sass/base.sass b/src/sass/base.sass index 4321ab5..2feecde 100644 --- a/src/sass/base.sass +++ b/src/sass/base.sass @@ -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 diff --git a/src/sass/colors.sass b/src/sass/colors.sass index f69d71b..c8e2088 100644 --- a/src/sass/colors.sass +++ b/src/sass/colors.sass @@ -3,3 +3,4 @@ $darker: #2f3135 $darkest: #202224 $mild: #393c42 $milder: #42454a +$divider: #4b4e54 diff --git a/src/sass/components/chat-input.sass b/src/sass/components/chat-input.sass new file mode 100644 index 0000000..aff0f26 --- /dev/null +++ b/src/sass/components/chat-input.sass @@ -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 diff --git a/src/sass/components/chat.sass b/src/sass/components/chat.sass new file mode 100644 index 0000000..3bb3d32 --- /dev/null +++ b/src/sass/components/chat.sass @@ -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 diff --git a/src/sass/components/groups.sass b/src/sass/components/groups.sass index 376c22a..1ba2316 100644 --- a/src/sass/components/groups.sass +++ b/src/sass/components/groups.sass @@ -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 diff --git a/src/sass/components/messages.sass b/src/sass/components/messages.sass new file mode 100644 index 0000000..8d0c58a --- /dev/null +++ b/src/sass/components/messages.sass @@ -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 diff --git a/src/sass/components/rooms.sass b/src/sass/components/rooms.sass index 1fd18e2..f176d1f 100644 --- a/src/sass/components/rooms.sass +++ b/src/sass/components/rooms.sass @@ -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 diff --git a/src/sass/main.sass b/src/sass/main.sass index 40317cf..c3f0594 100644 --- a/src/sass/main.sass +++ b/src/sass/main.sass @@ -1,3 +1,6 @@ @use "./base" @use "./components/groups" @use "./components/rooms" +@use "./components/messages" +@use "./components/chat" +@use "./components/chat-input"