diff --git a/build/index.html b/build/index.html
index 585c1dc..3997893 100644
--- a/build/index.html
+++ b/build/index.html
@@ -2,16 +2,17 @@
-
-
+
+
-
+
Carbon
diff --git a/build/static/groups.js b/build/static/groups.js
index 5872335..0f209a9 100644
--- a/build/static/groups.js
+++ b/build/static/groups.js
@@ -6,7 +6,6 @@ const groups = q("#c-groups-display")
const rooms = q("#c-rooms")
groups.addEventListener("click", () => {
- console.log("hello", groups)
groups.classList.add("c-groups__display--closed")
})
diff --git a/build/static/main.css b/build/static/main.css
index 421b484..177caf9 100644
--- a/build/static/main.css
+++ b/build/static/main.css
@@ -107,6 +107,10 @@ body {
border-radius: 50%;
margin-right: 16px;
flex-shrink: 0;
+ transition: border-radius ease-out 0.12s;
+}
+.c-group--active .c-group__icon {
+ border-radius: 28%;
}
.c-group__name {
white-space: nowrap;
@@ -114,6 +118,17 @@ body {
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 {
margin-top: 12px;
padding-top: 12px;
diff --git a/build/static/room-picker.js b/build/static/room-picker.js
index 9924d37..aa35136 100644
--- a/build/static/room-picker.js
+++ b/build/static/room-picker.js
@@ -1,11 +1,23 @@
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 {
constructor(groups, data) {
super("div")
this.groups = groups
this.data = data
+ this.active = false
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() {
this.groups.setGroup(this)
}
@@ -64,7 +81,7 @@ const rooms = new Rooms()
class Groups extends ElemJS {
constructor() {
super(q("#c-groups-list"))
- this.groups = [
+ this.groupData = [
{name: "Directs", icon: "/static/directs.svg", rooms: [
{name: "riley"},
{name: "BadAtNames"},
@@ -101,18 +118,21 @@ class Groups extends ElemJS {
{name: "Invidious", rooms: [
]}
]
+ this.groups = []
this.render()
this.setGroup(this.children[0])
}
setGroup(group) {
rooms.setRooms(group.data.rooms)
+ this.groups.forEach(g => g.setActive(g === group))
+ activeGroupMarker.follow(group)
}
render() {
- this.clearChildren()
+ this.groups = this.groupData.map(data => new Group(this, data))
for (const group of this.groups) {
- this.child(new Group(this, group))
+ this.child(group)
}
}
}
diff --git a/src/home.pug b/src/home.pug
index 8127345..cfb0c54 100644
--- a/src/home.pug
+++ b/src/home.pug
@@ -42,6 +42,7 @@ html
main.main
.c-groups
.c-groups__display#c-groups-display
+ .c-group-marker#c-group-marker
.c-groups__container#c-groups-list
.c-rooms#c-rooms
.c-chat
diff --git a/src/js/groups.js b/src/js/groups.js
index 5872335..0f209a9 100644
--- a/src/js/groups.js
+++ b/src/js/groups.js
@@ -6,7 +6,6 @@ const groups = q("#c-groups-display")
const rooms = q("#c-rooms")
groups.addEventListener("click", () => {
- console.log("hello", groups)
groups.classList.add("c-groups__display--closed")
})
diff --git a/src/js/room-picker.js b/src/js/room-picker.js
index 9924d37..aa35136 100644
--- a/src/js/room-picker.js
+++ b/src/js/room-picker.js
@@ -1,11 +1,23 @@
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 {
constructor(groups, data) {
super("div")
this.groups = groups
this.data = data
+ this.active = false
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() {
this.groups.setGroup(this)
}
@@ -64,7 +81,7 @@ const rooms = new Rooms()
class Groups extends ElemJS {
constructor() {
super(q("#c-groups-list"))
- this.groups = [
+ this.groupData = [
{name: "Directs", icon: "/static/directs.svg", rooms: [
{name: "riley"},
{name: "BadAtNames"},
@@ -101,18 +118,21 @@ class Groups extends ElemJS {
{name: "Invidious", rooms: [
]}
]
+ this.groups = []
this.render()
this.setGroup(this.children[0])
}
setGroup(group) {
rooms.setRooms(group.data.rooms)
+ this.groups.forEach(g => g.setActive(g === group))
+ activeGroupMarker.follow(group)
}
render() {
- this.clearChildren()
+ this.groups = this.groupData.map(data => new Group(this, data))
for (const group of this.groups) {
- this.child(new Group(this, group))
+ this.child(group)
}
}
}
diff --git a/src/sass/components/groups.sass b/src/sass/components/groups.sass
index d154721..ee4c27a 100644
--- a/src/sass/components/groups.sass
+++ b/src/sass/components/groups.sass
@@ -51,8 +51,22 @@ $out-width: $base-width + rooms.$list-width
border-radius: 50%
margin-right: $icon-padding * 2
flex-shrink: 0
+ transition: border-radius ease-out 0.12s
+
+ &--active &__icon
+ border-radius: 28%
&__name
white-space: nowrap
overflow: hidden
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