party ui
This commit is contained in:
parent
771a5ca97a
commit
0c27648d3b
1 changed files with 121 additions and 0 deletions
|
@ -88,6 +88,85 @@ if (!window.TE_ACTIVE) {
|
||||||
height: 64px;
|
height: 64px;
|
||||||
z-index: -1!important;
|
z-index: -1!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.grouphidden {
|
||||||
|
right: -12rem!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupui {
|
||||||
|
position: fixed;
|
||||||
|
top: 2rem;
|
||||||
|
right: 0px;
|
||||||
|
height: 25rem;
|
||||||
|
width: 12rem;
|
||||||
|
background-color: black;
|
||||||
|
color: white;
|
||||||
|
z-index:9999998;
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupui-popper {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: -1rem;
|
||||||
|
width: 1rem;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 0.25;
|
||||||
|
background-color: black;
|
||||||
|
border: 1px solid white;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupui-title {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
height: 2rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
background-color: rgba(255,255,255,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupui-scrollbox {
|
||||||
|
position: absolute;
|
||||||
|
top: 2rem;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 2rem);
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupui-user {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 2rem;
|
||||||
|
background-color: rgba(255,255,255,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupui-user:nth-child(2n) {
|
||||||
|
background-color: rgba(255,255,255,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupui-user p {
|
||||||
|
position: absolute;
|
||||||
|
line-height: 2rem;
|
||||||
|
margin: 0;
|
||||||
|
margin-left: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupui-user .buttons {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
top: 0px;
|
||||||
|
right: 0px;
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.groupui-user .buttons button {
|
||||||
|
margin-left: .5rem;
|
||||||
|
margin-top: .2rem;
|
||||||
|
}
|
||||||
|
|
||||||
`.split("\n").join("").split("\r").join("").split("\t").join("");
|
`.split("\n").join("").split("\r").join("").split("\t").join("");
|
||||||
document.head.appendChild(styles);
|
document.head.appendChild(styles);
|
||||||
|
|
||||||
|
@ -95,6 +174,48 @@ if (!window.TE_ACTIVE) {
|
||||||
otherCursors.id = "otherCursors";
|
otherCursors.id = "otherCursors";
|
||||||
document.body.appendChild(otherCursors);
|
document.body.appendChild(otherCursors);
|
||||||
|
|
||||||
|
const groupUIBase = document.createElement("div");
|
||||||
|
groupUIBase.style = "display:none";
|
||||||
|
groupUIBase.classList.add("groupui");
|
||||||
|
groupUIBase.classList.add("grouphidden");
|
||||||
|
const groupPopper = document.createElement("button");
|
||||||
|
groupPopper.classList.add("groupui-popper");
|
||||||
|
groupPopper.onclick = () => {
|
||||||
|
groupUIBase.classList.toggle("grouphidden");
|
||||||
|
groupPopper.innerText = groupUIBase.classList.contains("grouphidden") ? "<" : ">";
|
||||||
|
};
|
||||||
|
groupPopper.innerText = "<";
|
||||||
|
groupUIBase.appendChild(groupPopper);
|
||||||
|
const groupTitle = document.createElement("div");
|
||||||
|
groupTitle.classList.add("groupui-title");
|
||||||
|
groupTitle.innerText = "GROUP_NAME";
|
||||||
|
groupUIBase.appendChild(groupTitle);
|
||||||
|
const groupUsers = document.createElement("div");
|
||||||
|
groupUsers.classList.add("groupui-scrollbox");
|
||||||
|
groupUIBase.appendChild(groupUsers);
|
||||||
|
document.body.appendChild(groupUIBase);
|
||||||
|
|
||||||
|
function createGroupUser(username, location) {
|
||||||
|
const user = document.createElement("div");
|
||||||
|
user.classList.add("groupui-user");
|
||||||
|
const usernameBox = document.createElement("p");
|
||||||
|
usernameBox.innerText = username;
|
||||||
|
user.appendChild(usernameBox);
|
||||||
|
const buttonBox = document.createElement("div");
|
||||||
|
buttonBox.classList.add("buttons");
|
||||||
|
user.appendChild(buttonBox);
|
||||||
|
|
||||||
|
const followButton = document.createElement("button");
|
||||||
|
followButton.innerText = "F";
|
||||||
|
buttonBox.appendChild(followButton);
|
||||||
|
|
||||||
|
const gotoButton = document.createElement("button");
|
||||||
|
gotoButton.innerText = "G";
|
||||||
|
buttonBox.appendChild(gotoButton);
|
||||||
|
|
||||||
|
groupUsers.appendChild(user);
|
||||||
|
}
|
||||||
|
|
||||||
let clientWidth = document.body.getBoundingClientRect().width
|
let clientWidth = document.body.getBoundingClientRect().width
|
||||||
|
|
||||||
setInterval(() => {
|
setInterval(() => {
|
||||||
|
|
Loading…
Reference in a new issue