Skip to content

Commit

Permalink
www- format more files
Browse files Browse the repository at this point in the history
  • Loading branch information
@nektro
nektro committed Apr 17, 2022
1 parent c3589df commit ebd289d
Show file tree
Hide file tree
Showing 6 changed files with 46 additions and 30 deletions.
6 changes: 3 additions & 3 deletions www/chat/html/elements/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
// functions copied from ./../../js/util.js so that the custom elements
// here can use them since html-imports doesn't support JS modules
// @see https://github.com/webcomponents/polyfills/issues/371

function create_element(name, attrs, children) {
const ele = document.createElement(name);
(attrs || []).forEach((v) => { ele.setAttribute(v[0], v[1]); });
Expand All @@ -14,8 +14,8 @@
}
function doSettingUpdate(el, v) {
const de = `./../api/${el.parentElement.parentElement.parentElement.getAttribute("data-s-section")}/%s`;
const e = el.getAttribute("endpoint")||de;
const f = el.getAttribute("fill")||"";
const e = el.getAttribute("endpoint") || de;
const f = el.getAttribute("fill") || "";
const e2 = e.replace("%s", f);
const n = el.getAttribute("name");
const fd = new FormData();
Expand Down
23 changes: 11 additions & 12 deletions www/chat/html/elements/js/x-user-contextmenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,14 @@ function set_y(el, ey) {
const y = ey - 24;
const eh = el.offsetHeight;
const wh = window.innerHeight;
console.log(y,eh,wh);
if (y + eh > wh) {
el.style.bottom = "0";
el.style.top = "initial";
}
if (eh > wh) {
el.style.top = `-${ey-48}px`;
el.style.top = `-${ey - 48}px`;
el.style.bottom = "initial";
el.style.maxHeight = `${wh-48}px`;
el.style.maxHeight = `${wh - 48}px`;
}
}

Expand All @@ -45,15 +44,15 @@ customElements.define("x-user-contextmenu", class extends HTMLElement {

this.removeAllChildren();
this.appendChild(create_element("ul", [], [
create_element("li", [], [create_element("a", [["href",`./../~${user.uuid}`],["target","_hello"]], [dcTN("Profile")]),]),
create_element("li", [["data-requires","manage_roles"]], [
create_element("a", [["class","more"]], [dcTN("Roles")]),
create_element("li", [], [create_element("a", [["href", `./../~${user.uuid}`], ["target", "_hello"]], [dcTN("Profile")]),]),
create_element("li", [["data-requires", "manage_roles"]], [
create_element("a", [["class", "more"]], [dcTN("Roles")]),
create_element("ul", [], [
...rolesA.map((v) => {
const ch = rolesU.includes(v.uuid) ? ["checked",""] : [];
const ch = rolesU.includes(v.uuid) ? ["checked", ""] : [];
return create_element("li", [], [create_element("a", [], [
create_element("label", [["for",`xucm-r-${v.uuid}`]], [dcTN(v.name)]),
create_element("input", [["id",`xucm-r-${v.uuid}`],["type","checkbox"],ch], [], [["change", async (ev) => {
create_element("label", [["for", `xucm-r-${v.uuid}`]], [dcTN(v.name)]),
create_element("input", [["id", `xucm-r-${v.uuid}`], ["type", "checkbox"], ch], [], [["change", async (ev) => {
const t = ev.target;
const r = t.id.split("-")[2];
if (ui.volatile.me.perms.manage_roles) {
Expand All @@ -68,9 +67,9 @@ customElements.define("x-user-contextmenu", class extends HTMLElement {
}),
]),
]),
create_element("li", [["data-requires","manage_bans"]], [create_element("hr")]),
create_element("li", [["data-requires","manage_bans"]], [create_element("a", [["class","danger"]], [dcTN("Kick")]),]),
create_element("li", [["data-requires","manage_bans"]], [create_element("a", [["class","danger"]], [dcTN("Ban")]),]),
create_element("li", [["data-requires", "manage_bans"]], [create_element("hr")]),
create_element("li", [["data-requires", "manage_bans"]], [create_element("a", [["class", "danger"]], [dcTN("Kick")]),]),
create_element("li", [["data-requires", "manage_bans"]], [create_element("a", [["class", "danger"]], [dcTN("Ban")]),]),
]));
ui.refresh_permissions();
popup_set_x(this, e.x);
Expand Down
4 changes: 3 additions & 1 deletion www/chat/html/elements/x-calendar-input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@
display: block;
margin: 1em 0;
}

x-calendar-input label {
display: block;
margin: .5em 0;
}

x-calendar-input input {
padding: .5em .25em;
border: 0;
Expand All @@ -23,7 +25,7 @@
const label = this.getAttribute("label");
const name = this.getAttribute("name");

const inp = create_element("input", [["type","date"],["name",name],["pattern","\\d{4}-\\d{2}-\\d{2}"]]);
const inp = create_element("input", [["type", "date"], ["name", name], ["pattern", "\\d{4}-\\d{2}-\\d{2}"]]);
inp.addEventListener("change", (ev) => {
doSettingUpdate(this, ev.target.value);
});
Expand Down
27 changes: 16 additions & 11 deletions www/chat/html/elements/x-duration-input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,21 +7,26 @@
display: block;
margin: 1em 0;
}

x-duration-input label {
display: block;
margin: .5em 0;
}

x-duration-input div {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
x-duration-input div >* {

x-duration-input div>* {
width: 90%;
}

x-duration-input input {
padding: .5em .25em;
border: 0;
}

x-duration-input select {
display: block;
}
Expand All @@ -36,22 +41,22 @@
const label = this.getAttribute("label");
const name = this.getAttribute("name");

const inp = create_element("input", [["type","number"],["min","0"],["value","0"]]);
const inp = create_element("input", [["type", "number"], ["min", "0"], ["value", "0"]]);
const sel = create_element("select", [], [
create_element("option", [["value","0"]], [dcTN("Seconds")]),
create_element("option", [["value","1"]], [dcTN("Minutes")]),
create_element("option", [["value","2"]], [dcTN("Hours")]),
create_element("option", [["value","3"]], [dcTN("Days")]),
create_element("option", [["value","4"]], [dcTN("Weeks")]),
create_element("option", [["value","5"]], [dcTN("Months")]),
create_element("option", [["value","6"]], [dcTN("Years")]),
create_element("option", [["value", "0"]], [dcTN("Seconds")]),
create_element("option", [["value", "1"]], [dcTN("Minutes")]),
create_element("option", [["value", "2"]], [dcTN("Hours")]),
create_element("option", [["value", "3"]], [dcTN("Days")]),
create_element("option", [["value", "4"]], [dcTN("Weeks")]),
create_element("option", [["value", "5"]], [dcTN("Months")]),
create_element("option", [["value", "6"]], [dcTN("Years")]),
]);

inp.addEventListener("change", (ev) => {
doSettingUpdate(this, inp.value+","+sel.value);
doSettingUpdate(this, inp.value + "," + sel.value);
});
sel.addEventListener("change", (ev) => {
doSettingUpdate(this, inp.value+","+sel.value);
doSettingUpdate(this, inp.value + "," + sel.value);
});

this.appendChild(create_element("label", [], [dcTN(label)]));
Expand Down
4 changes: 3 additions & 1 deletion www/chat/html/elements/x-select-input.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@
display: block;
margin: 1em 0;
}

x-select-input label {
display: block;
margin: .5em 0;
}

x-select-input select {
display: block;
}
Expand All @@ -23,7 +25,7 @@
const name = this.getAttribute("name");

this.appendChild(create_element("label", [], [dcTN(label)]));
const select = create_element("select", [["name",name]], [
const select = create_element("select", [["name", name]], [
...Array.from(this.children).filter((v) => v.tagName === "OPTION"),
]);
select.addEventListener("change", (ev) => {
Expand Down
12 changes: 10 additions & 2 deletions www/chat/html/elements/x-user-contextmenu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,16 @@
display: block;
position: absolute;
}

x-user-contextmenu ul {
margin: 0;
padding: .5em;
list-style-type: none;
background-color: #002b36;
border-radius: .25em;
box-shadow: 0 0 10px 0 rgba(255,255,255,0.75);
box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.75);
}

x-user-contextmenu ul li a {
display: flex;
padding: .5em;
Expand All @@ -21,31 +23,37 @@
white-space: nowrap;
justify-content: space-between;
}

x-user-contextmenu ul li a:hover {
background-color: #073642;
}

x-user-contextmenu ul li a.danger {
color: #dc322f;
}

x-user-contextmenu ul li a.more::after {
content: ">";
font-weight: bold;
line-height: 10px;
font-size: 1.4em;
}

x-user-contextmenu ul li ul {
display: none;
position: absolute;
top: 0;
left: 10.5em;
overflow-y: scroll;
}

x-user-contextmenu ul li:hover ul {
display: block;
}

x-user-contextmenu ul li a label {
width: 100%;
padding-right: .5em;
}
</style>
<script type="module" src="./js/x-user-contextmenu.js"></script>
<script type="module" src="./js/x-user-contextmenu.js"></script>

0 comments on commit ebd289d

Please sign in to comment.