sam/Hyperia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding tasks and forum

Browse Source
This commit is contained in:
metacryst
2025-11-12 19:34:35 -06:00
parent 02648859a8
commit 6d2da88f23
6 changed files with 184 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
ui/site/apps/Forum/Forum.js
View File

@@ -1,9 +1,9 @@
css(`
messages- {
forum- {
font-family: 'Bona';
}
messages- input::placeholder {
forum- input::placeholder {
font-family: 'Bona Nova';
font-size: 0.9em;
color: var(--accent);
@@ -22,7 +22,7 @@ css(`
}
`)
class Messages extends Shadow {
class Forum extends Shadow {
friends = []
conversations = []
@@ -49,27 +49,6 @@ class Messages extends Shadow {
.paddingTop(2, em)
.gap(0, em)
.borderRight("1px solid var(--accent2)")
VStack(() => {
h3("Conversations")
.marginTop(0)
.marginBottom(1, em)
.marginLeft(0.4, em)
if (this.conversations.length > 1) {
for(let i = 0; i < this.conversations.length; i++) {
p(this.conversations[i].name)
}
} else {
p("No Conversations!")
}
})
.height(100, vh)
.paddingLeft(2, em)
.paddingRight(2, em)
.paddingTop(2, em)
.gap(0, em)
.borderRight("1px solid var(--accent2)")
})
.width(100, "%")
.x(0).y(13, vh)
@@ -175,4 +154,4 @@ class Messages extends Shadow {
}
}
register(Messages)
register(Forum)

4
ui/site/apps/Market/MarketGrid.js
View File

@@ -22,7 +22,8 @@ class MarketGrid extends Shadow {
.marginTop(0.1, em)
.marginBottom(1, em)
.marginLeft(0.4, em)
.color("var(--accent2)")
.color("var(--accent)")
.opacity(0.7)
if (this.listings.length > 0) {
ZStack(() => {
@@ -98,7 +99,6 @@ class MarketGrid extends Shadow {
.height(100, vh)
.paddingLeft(2, em)
.paddingRight(2, em)
.paddingTop(2, em)
.gap(0, em)
.width(100, "%")
}

153
ui/site/apps/Tasks/Tasks.js Normal file
View File

@@ -0,0 +1,153 @@
css(`
tasks- {
font-family: 'Bona';
}
tasks- input::placeholder {
font-family: 'Bona Nova';
font-size: 0.9em;
color: var(--accent);
}
input[type="checkbox"] {
appearance: none; /* remove default style */
-webkit-appearance: none;
width: 1em;
height: 1em;
border: 1px solid var(--accent);
}
input[type="checkbox"]:checked {
background-color: var(--red);
}
`)
class Tasks extends Shadow {
projects = [
{
"title": "Blockcatcher",
"tasks": {}
}
]
columns = [
{
"title": "backlog",
"tasks": {}
}
]
render() {
ZStack(() => {
HStack(() => {
VStack(() => {
h3("Projects")
.marginTop(0)
.marginBottom(1, em)
.marginLeft(0.4, em)
if (this.projects.length >= 1) {
for(let i = 0; i < this.projects.length; i++) {
p(this.projects[i].title)
}
} else {
p("No Projects!")
}
})
.height(100, vh)
.paddingLeft(2, em)
.paddingRight(2, em)
.paddingTop(2, em)
.gap(0, em)
.borderRight("0.5px solid var(--accent2)")
HStack(() => {
if (this.columns.length >= 1) {
for(let i = 0; i < this.columns.length; i++) {
p(this.columns[i].name)
}
} else {
p("No Conversations!")
}
})
.height(100, vh)
.paddingLeft(2, em)
.paddingRight(2, em)
.paddingTop(2, em)
.gap(0, em)
.borderRight("0.5px solid var(--accent2)")
})
.width(100, "%")
.x(0).y(13, vh)
.borderTop("0.5px solid var(--accent2)")
p("0 Items")
.position("absolute")
.x(50, vw).y(50, vh)
.transform("translate(-50%, -50%)")
HStack(() => {
input("Search tasks...", "45vw")
.attr({
"type": "text"
})
.fontSize(1.1, em)
.paddingLeft(1.3, em)
.background("transparent")
.border("0.5px solid var(--accent2)")
.outline("none")
.color("var(--accent)")
.borderRadius(10, px)
button("Search")
.marginLeft(2, em)
.borderRadius(10, px)
.background("transparent")
.border("0.5px solid var(--accent2)")
.color("var(--accent)")
.fontFamily("Bona Nova")
.onHover(function (hovering) {
if(hovering) {
this.style.background = "var(--green)"
} else {
this.style.background = "transparent"
}
})
button("+ New Task")
.width(9, em)
.marginLeft(1, em)
.borderRadius(10, px)
.background("transparent")
.border("0.5px solid var(--accent2)")
.color("var(--accent)")
.fontFamily("Bona Nova")
.onHover(function (hovering) {
if(hovering) {
this.style.background = "var(--green)"
} else {
this.style.background = "transparent"
}
})
.onClick((clicking) => {
console.log(this, "clicked")
})
})
.x(55, vw).y(4, vh)
.position("absolute")
.transform("translateX(-50%)")
})
.width(100, "%")
.height(100, "%")
}
connectedCallback() {
// Optional additional logic
}
}
register(Tasks)

5
ui/site/components/AppMenu.js
View File

@@ -16,8 +16,9 @@ css(`
padding-bottom: 4em;
bottom: 1em;
border-radius: 12px;
background-color: var(--main);
}
app-menu p {
cursor: default;
transition: transform .3s, text-decoration .3s;
@@ -56,6 +57,8 @@ class AppMenu extends Shadow {
render() {
VStack(() => {
HStack(() => {
p("Forum")
p("Tasks")
p("Messages")
p("Market")
p("Jobs")

14
ui/site/components/AppWindow.js
View File

@@ -1,6 +1,8 @@
import "../apps/Jobs/Jobs.js"
import "../apps/Forum/Forum.js"
import "../apps/Tasks/Tasks.js"
import "../apps/Messages/Messages.js"
import "../apps/Market/Market.js"
import "../apps/Jobs/Jobs.js"
class AppWindow extends Shadow {
app;
@@ -13,8 +15,11 @@ class AppWindow extends Shadow {
render() {
ZStack(() => {
switch(this.app) {
case "Jobs":
Jobs()
case "Forum":
Forum()
break;
case "Tasks":
Tasks()
break;
case "Messages":
Messages()
@@ -22,6 +27,9 @@ class AppWindow extends Shadow {
case "Market":
Market()
break;
case "Jobs":
Jobs()
break;
}
})
.display(this.app ? '' : 'none')

10
ui/site/components/Home.js
View File

@@ -43,6 +43,16 @@ class Home extends Shadow {
AppWindow("Market")
AppMenu("Market")
break;
case "/app/tasks":
AppWindow("Tasks")
AppMenu("Tasks")
break;
case "/app/forum":
AppWindow("Forum")
AppMenu("Forum")
break;
default:
throw new Error("Unknown route!")
}
ProfileButton()