url scheme done, switch between apps and orgs mostly done
This commit is contained in:
metacryst
@@ -1,17 +1,8 @@
|
||||
css(`
|
||||
app-menu img:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
`)
|
||||
|
||||
register(
|
||||
|
||||
class AppMenu extends Shadow {
|
||||
selected;
|
||||
|
||||
constructor(selected) {
|
||||
super()
|
||||
this.selected = selected
|
||||
images = {
|
||||
"Dashboard": {src: "house-src", size: "1.5em"},
|
||||
"People": {src: "people-src", size: "1.7em"}
|
||||
}
|
||||
|
||||
render() {
|
||||
@@ -22,76 +13,49 @@ class AppMenu extends Shadow {
|
||||
.getPropertyValue("--" + value)
|
||||
.trim();
|
||||
}
|
||||
|
||||
HStack(() => {
|
||||
img(cssVariable("house-src"), "1.5em")
|
||||
img(cssVariable("people-src"), "1.7em")
|
||||
let currentNetwork = window.currentNetwork
|
||||
if(!currentNetwork) return
|
||||
let currentApp = window.currentApp
|
||||
|
||||
for(let i = 0; i < currentNetwork.apps.length; i++) {
|
||||
let app = currentNetwork.apps[i]
|
||||
img(cssVariable(this.images[app].src), this.images[app].size)
|
||||
.attr({app: app})
|
||||
.padding(0.3, em)
|
||||
.paddingBottom(currentApp === app ? 4 : 5, px)
|
||||
.borderBottom(currentApp === app ? "1px solid var(--accent)" : "")
|
||||
.onClick((done) => {
|
||||
if(done) window.openApp(app)
|
||||
})
|
||||
.onHover(function (hovering) {
|
||||
if(hovering) {
|
||||
this.style.opacity = 0.8
|
||||
} else {
|
||||
this.style.opacity = ""
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
.justifyContent("center")
|
||||
.gap(3.5, em)
|
||||
.paddingRight(2, em)
|
||||
})
|
||||
.onEvent("themechange", () => {
|
||||
this.rerender()
|
||||
})
|
||||
.onEvent("appchanged", () => {
|
||||
console.log("event firing successfully")
|
||||
this.rerender()
|
||||
})
|
||||
.position("fixed")
|
||||
.x(0).yBottom(0)
|
||||
.width(100, vw)
|
||||
.paddingVertical(1, em)
|
||||
.borderTop("0.5px solid var(--accent)")
|
||||
.onNavigate(() => {
|
||||
if(window.location.pathname === "/") {
|
||||
this.styleMaximized()
|
||||
$("app-window").close()
|
||||
} else {
|
||||
this.styleMinimized()
|
||||
$("app-window").open(this.selected)
|
||||
}
|
||||
})
|
||||
.onAppear(() => {
|
||||
Array.from(this.querySelectorAll("img")).forEach((el) => {
|
||||
el.addEventListener("mousedown", (e) => {
|
||||
el.classList.add("touched")
|
||||
})
|
||||
})
|
||||
window.addEventListener("mouseup", (e) => {
|
||||
let target = e.target
|
||||
if(!target.matches("app-menu img")) {
|
||||
return
|
||||
}
|
||||
|
||||
target.classList.remove("touched")
|
||||
|
||||
if(target.classList.contains("selected")) {
|
||||
this.selected = ""
|
||||
window.navigateTo("/")
|
||||
} else {
|
||||
this.selected = target.innerText
|
||||
window.navigateTo("/app/" + target.innerText.toLowerCase())
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
if(this.selected) {
|
||||
this.styleMinimized()
|
||||
}
|
||||
}
|
||||
|
||||
styleMaximized() {
|
||||
$$("app-menu p").forEach((el) => {
|
||||
el.classList.remove("selected")
|
||||
})
|
||||
this.classList.remove("minimized")
|
||||
$("#divider").style.display = ""
|
||||
}
|
||||
|
||||
styleMinimized() {
|
||||
$$("app-menu p").forEach((el) => {
|
||||
if(el.innerText !== this.selected) {
|
||||
el.classList.remove("selected")
|
||||
} else {
|
||||
el.classList.add("selected")
|
||||
}
|
||||
})
|
||||
this.classList.add("minimized")
|
||||
$("#divider").style.display = "none"
|
||||
.height(2.5, em)
|
||||
.paddingVertical(0.7, em)
|
||||
.borderTop("1px solid var(--accent)")
|
||||
}
|
||||
}
|
||||
|
||||
, "app-menu")
|
||||
register(AppMenu, "app-menu")
|
||||
@@ -1,3 +1,4 @@
|
||||
import "../apps/Dashboard/Dashboard.js"
|
||||
import "../apps/Forum/Forum.js"
|
||||
import "../apps/Tasks/Tasks.js"
|
||||
import "../apps/Messages/Messages.js"
|
||||
@@ -5,16 +6,25 @@ import "../apps/Market/Market.js"
|
||||
import "../apps/Jobs/Jobs.js"
|
||||
|
||||
class AppWindow extends Shadow {
|
||||
app;
|
||||
|
||||
constructor(app) {
|
||||
super()
|
||||
this.app = app
|
||||
calculateWidth() {
|
||||
let sidebar = $("sidebar-").getBoundingClientRect()
|
||||
let w = sidebar.width
|
||||
return w
|
||||
}
|
||||
|
||||
calculateHeight() {
|
||||
let appmenu = $("app-menu").getBoundingClientRect()
|
||||
let h = appmenu.height
|
||||
return h
|
||||
}
|
||||
|
||||
render() {
|
||||
ZStack(() => {
|
||||
switch(this.app) {
|
||||
switch(window.currentApp) {
|
||||
case "Dashboard":
|
||||
Dashboard()
|
||||
break;
|
||||
case "Forum":
|
||||
Forum()
|
||||
break;
|
||||
@@ -30,25 +40,13 @@ class AppWindow extends Shadow {
|
||||
}
|
||||
})
|
||||
.position("fixed")
|
||||
.display(this.app ? 'block' : 'none')
|
||||
.width(100, "vw")
|
||||
.height(100, "vh")
|
||||
.background("#591d10")
|
||||
.x(0)
|
||||
.y(0)
|
||||
// .backgroundImage("/_/images/fabric.png")
|
||||
// .backgroundSize("33vw auto")
|
||||
.width(window.innerWidth - this.calculateWidth(), px)
|
||||
.height(window.innerHeight - this.calculateHeight(), px)
|
||||
.background("var(--app)")
|
||||
.x(this.calculateWidth(), px)
|
||||
.yBottom(this.calculateHeight(), px)
|
||||
.onEvent("appchange", () => this.rerender())
|
||||
}
|
||||
|
||||
open(app) {
|
||||
this.app = app
|
||||
this.rerender()
|
||||
}
|
||||
|
||||
close() {
|
||||
this.style.display = "none"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
register(AppWindow, "app-window")
|
||||
@@ -1,47 +1,45 @@
|
||||
class Sidebar extends Shadow {
|
||||
currentNetwork = null
|
||||
|
||||
render() {
|
||||
VStack(() => {
|
||||
img(document.documentElement.classList.contains("red") ? "/_/icons/quillblack.svg" : "/_/icons/quill.svg", "2.25em")
|
||||
.paddingLeft(3, em)
|
||||
.paddingTop(5, vh)
|
||||
.onClick(() => {
|
||||
window.navigateTo("/")
|
||||
})
|
||||
img(document.documentElement.classList.contains("red") ? "/_/icons/quillblack.svg" : "/_/icons/quill.svg", "2.5em", "2.5em")
|
||||
.marginTop(6, vh)
|
||||
.marginBottom(2, vh)
|
||||
|
||||
let networks = window.profile.networks
|
||||
for(let i=0; i<networks.length; i++) {
|
||||
let selected = window.location.pathname.startsWith("/" + networks[i].abbreviation)
|
||||
|
||||
img(`/db/images/${networks[i].logo}`, "2.25em", "2.25em")
|
||||
.marginTop(3, vh)
|
||||
.paddingRight(0.5, em)
|
||||
.paddingLeft(selected ? 9 : 10, px)
|
||||
.borderLeft(selected ? "1px solid var(--accent)" : "0")
|
||||
.onHover(function (hovering) {
|
||||
if(hovering) {
|
||||
this.style.opacity = 0.8
|
||||
} else {
|
||||
this.style.opacity = ""
|
||||
}
|
||||
})
|
||||
.onClick(function (finished) {
|
||||
if(finished) {
|
||||
this.setAttribute("selected", "")
|
||||
this.style.borderLeft = "1px solid var(--accent)"
|
||||
this.style.paddingLeft = "9px"
|
||||
}
|
||||
})
|
||||
.cursor("default")
|
||||
}
|
||||
})
|
||||
.paddingRight(2, em)
|
||||
.paddingLeft(1.5, em)
|
||||
.paddingRight(1, em)
|
||||
.position("fixed")
|
||||
.x(0).y(0)
|
||||
.height(100, vh)
|
||||
.borderRight("0.5px solid var(--accent)")
|
||||
.borderRight("1px solid var(--accent)")
|
||||
.zIndex(3)
|
||||
.onAppear(async () => {
|
||||
if(!window.profile) {
|
||||
window.profile = await this.fetchProfile()
|
||||
if(profile) {
|
||||
this.rerender()
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
async fetchProfile() {
|
||||
try {
|
||||
const res = await fetch("/profile", {
|
||||
method: "GET",
|
||||
credentials: "include",
|
||||
headers: {
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error("Failed to fetch profile");
|
||||
|
||||
const profile = await res.json();
|
||||
console.log(profile);
|
||||
return profile
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user