partial theme implementation

15 files changed, 59 insertions, 16 deletions

diff --git a/common/src/user.rs b/common/src/user.rs
index 3c1c5b0..0d4806e 100644
--- a/common/src/user.rs
+++ b/common/src/user.rs
@@ -1,4 +1,6 @@
 use crate::{stream::StreamFormat, user};
+#[cfg(feature = "rocket")]
+use rocket::{FromFormField, UriDisplayQuery};
 use serde::{Deserialize, Serialize};
 use std::{collections::HashMap, fmt::Display};
 
@@ -8,9 +10,18 @@ pub struct User {
     pub display_name: String,
     pub password: Vec<u8>,
     pub admin: bool,
+    pub theme: Theme,
     pub permissions: PermissionSet,
 }
 
+#[derive(Debug, Clone, Copy, Serialize, Deserialize, PartialEq)]
+#[cfg_attr(feature = "rocket", derive(FromFormField, UriDisplayQuery))]
+#[serde(rename_all = "snake_case")]
+pub enum Theme {
+    Dark,
+    Light,
+}
+
 #[derive(Debug, Clone, Serialize, Deserialize, Default)]
 pub struct PermissionSet(pub HashMap<UserPermission, bool>);
 
diff --git a/server/src/database.rs b/server/src/database.rs
index 6c3b938..80bfe50 100644
--- a/server/src/database.rs
+++ b/server/src/database.rs
@@ -7,7 +7,7 @@ use crate::routes::ui::account::hash_password;
 use anyhow::Context;
 use jellybase::CONF;
 use jellycommon::{
-    user::{PermissionSet, User},
+    user::{PermissionSet, Theme, User},
     Node,
 };
 use log::info;
@@ -42,6 +42,7 @@ impl Database {
                 &CONF.admin_username,
                 &User {
                     admin: true,
+                    theme: Theme::Dark,
                     display_name: "Admin".to_string(),
                     name: CONF.admin_username.clone(),
                     password: hash_password(&CONF.admin_username, &CONF.admin_password),
diff --git a/server/src/routes/ui/account/mod.rs b/server/src/routes/ui/account/mod.rs
index a4aa2dd..88f6f45 100644
--- a/server/src/routes/ui/account/mod.rs
+++ b/server/src/routes/ui/account/mod.rs
@@ -16,7 +16,7 @@ use anyhow::anyhow;
 use argon2::{password_hash::Salt, Argon2, PasswordHasher};
 use chrono::Duration;
 use jellybase::CONF;
-use jellycommon::user::{PermissionSet, User};
+use jellycommon::user::{PermissionSet, Theme, User};
 use rocket::{
     form::{Contextual, Form},
     get,
@@ -132,6 +132,7 @@ pub fn r_account_register_post<'a>(
                 name: form.username.clone(),
                 password: hash_password(&form.username, &form.password),
                 admin: false,
+                theme: Theme::Dark,
                 permissions: PermissionSet::default(),
             }),
         )
diff --git a/server/src/routes/ui/account/session/token.rs b/server/src/routes/ui/account/session/token.rs
index baec665..b6c22f7 100644
--- a/server/src/routes/ui/account/session/token.rs
+++ b/server/src/routes/ui/account/session/token.rs
@@ -79,6 +79,7 @@ fn test() {
             password: vec![],
             admin: false,
             permissions: jellycommon::user::PermissionSet::default(),
+            theme: jellycommon::user::Theme::Dark,
         },
         Duration::days(1),
     );
diff --git a/server/src/routes/ui/account/settings.rs b/server/src/routes/ui/account/settings.rs
index b02c871..d61d9f1 100644
--- a/server/src/routes/ui/account/settings.rs
+++ b/server/src/routes/ui/account/settings.rs
@@ -59,7 +59,11 @@ fn settings_page(session: Session, flash: Option<MyResult<String>>) -> DynLayout
                 input[type="submit", value="Update"];
             }
             h2 { "Appearance" }
-            p.error { "TODO: theming" }
+            fieldset {
+                legend { "Theme" }
+                // label { input[type="radio", name="theme", value=t, checked=session.user.theme==t]; @label } br;
+                // label { input[type="radio", name="theme", value=t, checked=session.user.theme==t]; @label } br;
+            }
         },
         ..Default::default()
     }
diff --git a/server/src/routes/ui/layout.rs b/server/src/routes/ui/layout.rs
index cdac09c..c4d1275 100644
--- a/server/src/routes/ui/layout.rs
+++ b/server/src/routes/ui/layout.rs
@@ -18,6 +18,7 @@ use crate::{
 };
 use futures::executor::block_on;
 use jellybase::CONF;
+use jellycommon::user::Theme;
 use markup::{DynRender, Render};
 use rocket::{
     http::ContentType,
@@ -27,7 +28,7 @@ use rocket::{
 use std::io::Cursor;
 
 markup::define! {
-    Layout<'a, Main: Render>(title: String, main: Main, class: Option<&'a str>, session: Option<Session>) {
+    Layout<'a, Main: Render>(title: String, main: Main, class: &'a str, session: Option<Session>) {
         @markup::doctype()
         html {
             head {
@@ -35,7 +36,7 @@ markup::define! {
                 link[rel="stylesheet", href="/assets/style.css"];
                 script[src="/assets/bundle.js"] {}
             }
-            body[class=class.unwrap_or("")] {
+            body[class=class] {
                 nav {
                     h1 { a[href="/"] { @CONF.brand } } " "
                     @if let Some(_) = session {
@@ -102,7 +103,18 @@ impl<'r, Main: Render> Responder<'r, 'static> for LayoutPage<Main> {
         Layout {
             main: self.content,
             title: self.title,
-            class: self.class.as_deref(),
+            class: &format!(
+                "{} {}",
+                self.class.as_deref().unwrap_or(""),
+                match session
+                    .as_ref()
+                    .map(|s| s.user.theme)
+                    .unwrap_or(Theme::Dark)
+                {
+                    Theme::Dark => "theme-dark",
+                    Theme::Light => "theme-light",
+                }
+            ),
             session,
         }
         .render(&mut out)
diff --git a/server/src/routes/ui/style.rs b/server/src/routes/ui/style.rs
index bdaddd2..19283e1 100644
--- a/server/src/routes/ui/style.rs
+++ b/server/src/routes/ui/style.rs
@@ -35,14 +35,15 @@ macro_rules! concat_files {
 
 fn css_bundle() -> String {
     concat_files!(
-        ["../../../../web"],
+        ["../../../../web/style"],
         "layout.css",
         "player.css",
         "nodepage.css",
         "nodecard.css",
         "js-player.css",
         "js-transition.css",
-        "forms.css"
+        "forms.css",
+        "themes.css"
     )
 }
 
diff --git a/web/forms.css b/web/style/forms.css
index 259d7ef..259d7ef 100644
--- a/web/forms.css
+++ b/web/style/forms.css
diff --git a/web/js-player.css b/web/style/js-player.css
index 6d1bd71..6d1bd71 100644
--- a/web/js-player.css
+++ b/web/style/js-player.css
diff --git a/web/js-transition.css b/web/style/js-transition.css
index dbb80f0..dbb80f0 100644
--- a/web/js-transition.css
+++ b/web/style/js-transition.css
diff --git a/web/layout.css b/web/style/layout.css
index 92a8929..ea7d3e6 100644
--- a/web/layout.css
+++ b/web/style/layout.css
@@ -15,16 +15,8 @@
     --port-poster-aspect: 1.41;
     --land-poster-aspect: (1.41 / 2);
     --land-thumb-aspect: (9 / 16);
-    --accent-light: rgb(255, 163, 87);
-    --accent-dark: rgb(199, 90, 0);
     --backdrop-height: 24em;
-    --background-dark: #070707;
-    --background-light: #1c1c1c;
-    --background-very-light: #323232;
     --main-side-margin: 2em;
-    --font: rgb(218, 218, 218);
-    --font-dark: rgb(148, 148, 148);
-    --font-highlight: white;
 }
 
 ::selection {
diff --git a/web/nodecard.css b/web/style/nodecard.css
index d32d5f4..d32d5f4 100644
--- a/web/nodecard.css
+++ b/web/style/nodecard.css
diff --git a/web/nodepage.css b/web/style/nodepage.css
index e40706e..e40706e 100644
--- a/web/nodepage.css
+++ b/web/style/nodepage.css
diff --git a/web/player.css b/web/style/player.css
index eb1a0a0..eb1a0a0 100644
--- a/web/player.css
+++ b/web/style/player.css
diff --git a/web/style/themes.css b/web/style/themes.css
new file mode 100644
index 0000000..e006513
--- /dev/null
+++ b/web/style/themes.css
@@ -0,0 +1,20 @@
+body.theme-dark {
+    --accent-light: rgb(255, 163, 87);
+    --accent-dark: rgb(199, 90, 0);
+    --background-dark: #070707;
+    --background-light: #1c1c1c;
+    --background-very-light: #323232;
+    --font: rgb(218, 218, 218);
+    --font-dark: rgb(148, 148, 148);
+    --font-highlight: white;
+}
+body.theme-light {
+    --accent-light: rgb(255, 163, 87);
+    --accent-dark: rgb(199, 90, 0);
+    --background-dark: #ffffff;
+    --background-light: #e2e2e2;
+    --background-very-light: #b9b9b9;
+    --font: rgb(43, 43, 43);
+    --font-dark: rgb(0, 0, 0);
+    --font-highlight: rgb(0, 0, 0);
+}