diff --git a/ui/site/apps/Forum/Forum.js b/ui/site/apps/Forum/Forum.js index 6c6c3b9..b92e5fd 100644 --- a/ui/site/apps/Forum/Forum.js +++ b/ui/site/apps/Forum/Forum.js @@ -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) \ No newline at end of file +register(Forum) \ No newline at end of file diff --git a/ui/site/apps/Market/MarketGrid.js b/ui/site/apps/Market/MarketGrid.js index 69326c8..a81821f 100644 --- a/ui/site/apps/Market/MarketGrid.js +++ b/ui/site/apps/Market/MarketGrid.js @@ -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, "%") } diff --git a/ui/site/apps/Tasks/Tasks.js b/ui/site/apps/Tasks/Tasks.js new file mode 100644 index 0000000..4b0e733 --- /dev/null +++ b/ui/site/apps/Tasks/Tasks.js @@ -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) \ No newline at end of file diff --git a/ui/site/components/AppMenu.js b/ui/site/components/AppMenu.js index 0a3974b..42c73c3 100644 --- a/ui/site/components/AppMenu.js +++ b/ui/site/components/AppMenu.js @@ -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") diff --git a/ui/site/components/AppWindow.js b/ui/site/components/AppWindow.js index 4f5b665..bbf173f 100644 --- a/ui/site/components/AppWindow.js +++ b/ui/site/components/AppWindow.js @@ -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') diff --git a/ui/site/components/Home.js b/ui/site/components/Home.js index 7ef81da..3911c5b 100644 --- a/ui/site/components/Home.js +++ b/ui/site/components/Home.js @@ -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()