From 468616d2182c61961226465d85cde714a7334b12 Mon Sep 17 00:00:00 2001
From: Giovanni Caruso <gc4117@cloud-vm-36-76.doc.ic.ac.uk>
Date: Thu, 14 Nov 2019 18:37:44 +0000
Subject: [PATCH] Moved status indicator to the right of the user icon
---
public/styles.css | 3 +--
src/app.js | 16 ++++++++--------
2 files changed, 9 insertions(+), 10 deletions(-)
diff --git a/public/styles.css b/public/styles.css
index 7369943..efdcfac 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -71,7 +71,7 @@ button.selected {
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 999;
- padding: 16px;
+ padding: 8px;
}
.peers a {
@@ -526,5 +526,4 @@ button.selected {
.avatar {
margin-right: 5px;
- border-radius: 100px;
}
diff --git a/src/app.js b/src/app.js
index d23b052..f96d2a1 100644
--- a/src/app.js
+++ b/src/app.js
@@ -66,7 +66,7 @@ const onRoomConnect = (room_) => {
const medium = "/quality-medium.svg"
const low = "/quality-low.svg"
- const peer = getOrInsertPeerById(id).children[2]
+ const peer = getOrInsertPeerById(id).children[1]
if (quality < 0.33) {
if (!peer.src.includes(high)) {
peer.src = high
@@ -83,18 +83,18 @@ const onRoomConnect = (room_) => {
})
room.addEventListener("weSyncedWithPeer", ({ detail: id }) => {
- getOrInsertPeerById(id).children[3].className = "peer-status upload synced"
+ getOrInsertPeerById(id).children[2].className = "peer-status upload synced"
updateOverallStatusIcon()
})
room.addEventListener("waitingForSyncStep", ({ detail: id }) => {
- getOrInsertPeerById(id).children[4].className =
+ getOrInsertPeerById(id).children[3].className =
"peer-status download negotiating"
updateOverallStatusIcon()
})
room.addEventListener("peerSyncedWithUs", ({ detail: id }) => {
- getOrInsertPeerById(id).children[4].className =
+ getOrInsertPeerById(id).children[3].className =
"peer-status download synced"
updateOverallStatusIcon()
})
@@ -150,7 +150,7 @@ HTML.roomIDElem.addEventListener("keydown", (event) => {
const getOrInsertPeerById = (id) => {
for (const peerElem of HTML.connectedPeers.children) {
- const peerId = peerElem.children[1].id
+ const peerId = peerElem.children[4].id
if (peerId == id) {
return peerElem
}
@@ -183,10 +183,10 @@ const getOrInsertPeerById = (id) => {
peerId.innerHTML = humanhash.humanize(id, 2)
peerElem.appendChild(avatarImage)
- peerElem.appendChild(peerId)
peerElem.appendChild(quality)
peerElem.appendChild(ourStatus)
peerElem.appendChild(theirStatus)
+ peerElem.appendChild(peerId)
HTML.connectedPeers.appendChild(peerElem)
@@ -196,8 +196,8 @@ const getOrInsertPeerById = (id) => {
const updateOverallStatusIcon = () => {
for (const peerElem of HTML.connectedPeers.children) {
if (
- !peerElem.children[3].classList.contains("synced") ||
- !peerElem.children[4].classList.contains("synced")
+ !peerElem.children[2].classList.contains("synced") ||
+ !peerElem.children[3].classList.contains("synced")
) {
HTML.overallStatusIcon.className = "synchronising"
HTML.overallStatusIconImage.src = "synchronising.svg"
--
GitLab