cadence/Carbon
3
9
Fork 1
Code Issues 14 Pull requests 1 Releases Wiki Activity

Indicate selected group

Browse source
This commit is contained in:
Cadence Ember 2020-10-13 02:26:10 +13:00
parent bb8717138e
commit f42ea1493b
Signed by: cadence
GPG key ID: BC1C2C61CF521B17
8 changed files with 80 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
build/index.html
View file

@ -2,16 +2,17 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="static/main.css?static=5e2a7fd1b3"> <link rel="stylesheet" type="text/css" href="static/main.css?static=d352e5de1f">
<script type="module" src="static/groups.js?static=af318db96c"></script> <script type="module" src="static/groups.js?static=2cc7f0daf8"></script>
<script type="module" src="static/chat-input.js?static=a90499fdac"></script> <script type="module" src="static/chat-input.js?static=a90499fdac"></script>
<script type="module" src="static/room-picker.js?static=fdb53ef95f"></script> <script type="module" src="static/room-picker.js?static=c7bdd4a2f3"></script>
<title>Carbon</title> <title>Carbon</title>
</head> </head>
<body> <body>
<main class="main"> <main class="main">
<div class="c-groups"> <div class="c-groups">
<div class="c-groups__display" id="c-groups-display"> <div class="c-groups__display" id="c-groups-display">
<div class="c-group-marker" id="c-group-marker"></div>
<div class="c-groups__container" id="c-groups-list"></div> <div class="c-groups__container" id="c-groups-list"></div>
</div> </div>
</div> </div>

1
build/static/groups.js
View file

@ -6,7 +6,6 @@ const groups = q("#c-groups-display")
const rooms = q("#c-rooms") const rooms = q("#c-rooms")
groups.addEventListener("click", () => { groups.addEventListener("click", () => {
console.log("hello", groups)
groups.classList.add("c-groups__display--closed") groups.classList.add("c-groups__display--closed")
}) })

15
build/static/main.css
View file

@ -107,6 +107,10 @@ body {
border-radius: 50%; border-radius: 50%;
margin-right: 16px; margin-right: 16px;
flex-shrink: 0; flex-shrink: 0;
transition: border-radius ease-out 0.12s;
}
.c-group--active .c-group__icon {
border-radius: 28%;
} }
.c-group__name { .c-group__name {
white-space: nowrap; white-space: nowrap;
@ -114,6 +118,17 @@ body {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.c-group-marker {
position: absolute;
top: 5px;
transform: translateY(8px);
transition: transform ease 0.12s;
height: 46px;
width: 6px;
background-color: #ccc;
border-radius: 0px 6px 6px 0px;
}
.c-message-group, .c-message-event { .c-message-group, .c-message-event {
margin-top: 12px; margin-top: 12px;
padding-top: 12px; padding-top: 12px;

26
build/static/room-picker.js
View file

@ -1,11 +1,23 @@
import {q, ElemJS, ejs} from "./basic.js" import {q, ElemJS, ejs} from "./basic.js"
class ActiveGroupMarker extends ElemJS {
constructor() {
super(q("#c-group-marker"))
}
follow(group) {
this.style("transform", `translateY(${group.element.offsetTop}px)`)
}
}
const activeGroupMarker = new ActiveGroupMarker()
class Group extends ElemJS { class Group extends ElemJS {
constructor(groups, data) { constructor(groups, data) {
super("div") super("div")
this.groups = groups this.groups = groups
this.data = data this.data = data
this.active = false
this.on("click", this.onClick.bind(this)) this.on("click", this.onClick.bind(this))
@ -19,6 +31,11 @@ class Group extends ElemJS {
) )
} }
setActive(active) {
this.active = active
this.element.classList[active ? "add" : "remove"]("c-group--active")
}
onClick() { onClick() {
this.groups.setGroup(this) this.groups.setGroup(this)
} }
@ -64,7 +81,7 @@ const rooms = new Rooms()
class Groups extends ElemJS { class Groups extends ElemJS {
constructor() { constructor() {
super(q("#c-groups-list")) super(q("#c-groups-list"))
this.groups = [ this.groupData = [
{name: "Directs", icon: "/static/directs.svg", rooms: [ {name: "Directs", icon: "/static/directs.svg", rooms: [
{name: "riley"}, {name: "riley"},
{name: "BadAtNames"}, {name: "BadAtNames"},
@ -101,18 +118,21 @@ class Groups extends ElemJS {
{name: "Invidious", rooms: [ {name: "Invidious", rooms: [
]} ]}
] ]
this.groups = []
this.render() this.render()
this.setGroup(this.children[0]) this.setGroup(this.children[0])
} }
setGroup(group) { setGroup(group) {
rooms.setRooms(group.data.rooms) rooms.setRooms(group.data.rooms)
this.groups.forEach(g => g.setActive(g === group))
activeGroupMarker.follow(group)
} }
render() { render() {
this.clearChildren() this.groups = this.groupData.map(data => new Group(this, data))
for (const group of this.groups) { for (const group of this.groups) {
this.child(new Group(this, group)) this.child(group)
} }
} }
} }

1
src/home.pug
View file

@ -42,6 +42,7 @@ html
main.main main.main
.c-groups .c-groups
.c-groups__display#c-groups-display .c-groups__display#c-groups-display
.c-group-marker#c-group-marker
.c-groups__container#c-groups-list .c-groups__container#c-groups-list
.c-rooms#c-rooms .c-rooms#c-rooms
.c-chat .c-chat

1
src/js/groups.js
View file

@ -6,7 +6,6 @@ const groups = q("#c-groups-display")
const rooms = q("#c-rooms") const rooms = q("#c-rooms")
groups.addEventListener("click", () => { groups.addEventListener("click", () => {
console.log("hello", groups)
groups.classList.add("c-groups__display--closed") groups.classList.add("c-groups__display--closed")
}) })

26
src/js/room-picker.js
View file

@ -1,11 +1,23 @@
import {q, ElemJS, ejs} from "./basic.js" import {q, ElemJS, ejs} from "./basic.js"
class ActiveGroupMarker extends ElemJS {
constructor() {
super(q("#c-group-marker"))
}
follow(group) {
this.style("transform", `translateY(${group.element.offsetTop}px)`)
}
}
const activeGroupMarker = new ActiveGroupMarker()
class Group extends ElemJS { class Group extends ElemJS {
constructor(groups, data) { constructor(groups, data) {
super("div") super("div")
this.groups = groups this.groups = groups
this.data = data this.data = data
this.active = false
this.on("click", this.onClick.bind(this)) this.on("click", this.onClick.bind(this))
@ -19,6 +31,11 @@ class Group extends ElemJS {
) )
} }
setActive(active) {
this.active = active
this.element.classList[active ? "add" : "remove"]("c-group--active")
}
onClick() { onClick() {
this.groups.setGroup(this) this.groups.setGroup(this)
} }
@ -64,7 +81,7 @@ const rooms = new Rooms()
class Groups extends ElemJS { class Groups extends ElemJS {
constructor() { constructor() {
super(q("#c-groups-list")) super(q("#c-groups-list"))
this.groups = [ this.groupData = [
{name: "Directs", icon: "/static/directs.svg", rooms: [ {name: "Directs", icon: "/static/directs.svg", rooms: [
{name: "riley"}, {name: "riley"},
{name: "BadAtNames"}, {name: "BadAtNames"},
@ -101,18 +118,21 @@ class Groups extends ElemJS {
{name: "Invidious", rooms: [ {name: "Invidious", rooms: [
]} ]}
] ]
this.groups = []
this.render() this.render()
this.setGroup(this.children[0]) this.setGroup(this.children[0])
} }
setGroup(group) { setGroup(group) {
rooms.setRooms(group.data.rooms) rooms.setRooms(group.data.rooms)
this.groups.forEach(g => g.setActive(g === group))
activeGroupMarker.follow(group)
} }
render() { render() {
this.clearChildren() this.groups = this.groupData.map(data => new Group(this, data))
for (const group of this.groups) { for (const group of this.groups) {
this.child(new Group(this, group)) this.child(group)
} }
} }
} }

14
src/sass/components/groups.sass
View file

@ -51,8 +51,22 @@ $out-width: $base-width + rooms.$list-width
border-radius: 50% border-radius: 50%
margin-right: $icon-padding * 2 margin-right: $icon-padding * 2
flex-shrink: 0 flex-shrink: 0
transition: border-radius ease-out 0.12s
&--active &__icon
border-radius: 28%
&__name &__name
white-space: nowrap white-space: nowrap
overflow: hidden overflow: hidden
text-overflow: ellipsis text-overflow: ellipsis
.c-group-marker
position: absolute
top: 5px
transform: translateY(8px)
transition: transform ease 0.12s
height: $icon-size - 2px
width: 6px
background-color: #ccc
border-radius: 0px 6px 6px 0px