diff --git a/src/_/code/shared.css b/src/_/code/shared.css index d78c3e6..111277c 100644 --- a/src/_/code/shared.css +++ b/src/_/code/shared.css @@ -1,6 +1,7 @@ :root { --main: #FFE9C8; --accent: #570b0b; + --lightaccent: #760f0f; --darkaccent: #dfc9ac; --text: #340000; --yellow: #f1f3c3; @@ -50,6 +51,7 @@ @media (prefers-color-scheme: dark) { :root { --main: #2A150E; + --lightaccent: #69413a; --accent: #3D2622; --darkaccent: #240609; --text: #FADFB6; diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index 95f0713..93c1c84 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -7,6 +7,54 @@ class Sidebar extends Shadow { constructor(width) { super() this.SIDEBAR_WIDTH = width + this.showCalendarControls = global.currentApp() === "Calendar"; + } + + CalendarControls() { + const getButton = (label) => { + return button(label) + .fontSize(1.2, em) + .paddingVertical(0.45, em) + .paddingHorizontal(0.8, em) + .border("1px solid var(--divider)") + .borderRadius(0.6, em) + .background("var(--accent)") + .color("var(--headertext)") + .cursor("pointer") + } + + return VStack(() => { + p("Calendar View") + .fontSize(1, em) + .fontWeight("bold") + .color("var(--headertext)") + .fontFamily("Arial") + .textAlign("Center") + .marginBottom(0.5, em) + HStack(() => { + getButton("day") + .onTap(() => { + if ($("calendar-").changeView("day")) { + $("home-").closeSidebar(); + } + }) + getButton("week") + .onTap(() => { + if ($("calendar-").changeView("week")) { + $("home-").closeSidebar(); + } + }) + getButton("month") + .onTap(() => { + if ($("calendar-").changeView("month")) { + $("home-").closeSidebar(); + } + }) + }) + .gap(0.5, em) + .justifyContent("center") + }) + .width(100, pct) } SidebarItem(text) { @@ -15,7 +63,7 @@ class Sidebar extends Shadow { .fontWeight("bold") .color("var(--headertext)") .fontFamily("Arial") - .marginLeft(3, em) + .marginLeft(1, em) .marginTop(2, em) .onTap(function (done) { if (done) { @@ -64,10 +112,14 @@ class Sidebar extends Shadow { this.openProfile() }) .paddingBottom(1, em) - - this.SidebarItem("Logout") + + if (this.showCalendarControls) { + this.CalendarControls() + } VStack(() => { + this.SidebarItem("Logout") + Toggle("Enable Push Notifications") .marginLeft(1, em) @@ -98,6 +150,11 @@ class Sidebar extends Shadow { .background("var(--sidebar)") } + toggleCalendarControls() { + this.showCalendarControls = !this.showCalendarControls; + this.rerender(); + } + openProfile() { $("appwindowcontainer-").openProfile() $("home-").closeSidebar(); diff --git a/src/components/TopBar.js b/src/components/TopBar.js index fff6e8c..1865fe6 100644 --- a/src/components/TopBar.js +++ b/src/components/TopBar.js @@ -45,6 +45,7 @@ class TopBar extends Shadow { .gap(0.5, em) .marginTop(4, em) .onNavigate(() => { + $("sidebar-").toggleCalendarControls(); this.$("p").attr({app: global.currentApp()}) }) }