From b9a392f5f1db5c7de60e929fdcc0ca42885f81ca Mon Sep 17 00:00:00 2001
From: Marvin Borner
Date: Mon, 13 May 2019 18:18:57 +0200
Subject: Added user based dark theme support

Co-authored-by: LarsVomMars <lars@kroenner.eu>
---
 src/main/resources/css/darkLayout.css         | 32 +++++++++++++++++++++++++++
 src/main/resources/css/index.css              |  6 +++++
 src/main/resources/js/index.js                |  6 +++++
 src/main/resources/views/admin.rocker.html    |  5 +++--
 src/main/resources/views/files.rocker.html    |  5 +++--
 src/main/resources/views/fileview.rocker.html |  5 +++--
 src/main/resources/views/index.rocker.html    | 17 ++++++++++++--
 src/main/resources/views/layout.rocker.html   | 10 ++++++++-
 src/main/resources/views/login.rocker.html    |  5 +++--
 src/main/resources/views/register.rocker.html |  5 +++--
 src/main/resources/views/setup.rocker.html    |  5 +++--
 11 files changed, 86 insertions(+), 15 deletions(-)
 create mode 100644 src/main/resources/css/darkLayout.css
 create mode 100644 src/main/resources/css/index.css
 create mode 100644 src/main/resources/js/index.js

(limited to 'src/main/resources')

diff --git a/src/main/resources/css/darkLayout.css b/src/main/resources/css/darkLayout.css
new file mode 100644
index 0000000..71172a5
--- /dev/null
+++ b/src/main/resources/css/darkLayout.css
@@ -0,0 +1,32 @@
+/**
+    Main
+ */
+body {
+    background-color: #181a1b;
+}
+
+.main {
+    color: #d0cdc6
+}
+
+button {
+    text-decoration-color: initial;
+    background-color: #3d4043;
+    border-top-color: #595959;
+    border-right-color: #595959;
+    border-bottom-color: #595959;
+    border-left-color: #595959;
+    color: #ffffff;
+}
+
+input {
+    border-color: #575757;
+    color: #e8e6e3;
+}
+
+/**
+    Other stuff
+ */
+tr:hover {
+    background-color: #121516 !important;
+}
diff --git a/src/main/resources/css/index.css b/src/main/resources/css/index.css
new file mode 100644
index 0000000..5cf3c78
--- /dev/null
+++ b/src/main/resources/css/index.css
@@ -0,0 +1,6 @@
+.toggle {
+    position: absolute;
+    margin: 20px;
+    right: 0;
+    top: 0;
+}
diff --git a/src/main/resources/js/index.js b/src/main/resources/js/index.js
new file mode 100644
index 0000000..4939622
--- /dev/null
+++ b/src/main/resources/js/index.js
@@ -0,0 +1,6 @@
+document.querySelector("#toggle").addEventListener("click", () => {
+    const request = new XMLHttpRequest();
+    request.open("POST", "/user/theme");
+    request.onload = () => location.reload();
+    request.send();
+});
diff --git a/src/main/resources/views/admin.rocker.html b/src/main/resources/views/admin.rocker.html
index 26859eb..7bd25a9 100644
--- a/src/main/resources/views/admin.rocker.html
+++ b/src/main/resources/views/admin.rocker.html
@@ -1,6 +1,7 @@
-@args (String message)
+@import io.javalin.*
+@args (String message, Context ctx)
 
-@layout.template("Index", RockerContent.NONE, RockerContent.NONE) -> {
+@layout.template("Index", ctx, RockerContent.NONE, RockerContent.NONE) -> {
 <div class="flex">
     <div>
         <h1>Add new user</h1>
diff --git a/src/main/resources/views/files.rocker.html b/src/main/resources/views/files.rocker.html
index 43a3488..8e75ac2 100644
--- a/src/main/resources/views/files.rocker.html
+++ b/src/main/resources/views/files.rocker.html
@@ -1,5 +1,6 @@
 @import java.util.ArrayList
-@args (ArrayList files, String path, Boolean isShared)
+@import io.javalin.*
+@args (ArrayList files, String path, Boolean isShared, Context ctx)
 
 @css => {
 <link href="/css/files.css" rel="stylesheet">
@@ -14,7 +15,7 @@
 <script src="/js/files.js"></script>
 }
 
-@layout.template(files.size() + " Files", css, js) -> {
+@layout.template(files.size() + " Files", ctx, css, js) -> {
 <div class="drop" id="drop">
     <h2 class="navigation">
         <i class="icon ion-md-home"></i>
diff --git a/src/main/resources/views/fileview.rocker.html b/src/main/resources/views/fileview.rocker.html
index c1fdff8..b3f8341 100644
--- a/src/main/resources/views/fileview.rocker.html
+++ b/src/main/resources/views/fileview.rocker.html
@@ -1,4 +1,5 @@
-@args (String content, String filename, String extension)
+@import io.javalin.*
+@args (String content, String filename, String extension, Context ctx)
 
 @css => {
 <link href="/css/fileview.css" rel="stylesheet">
@@ -12,7 +13,7 @@
 <script src="/js/fileview.js"></script>
 }
 
-@layout.template("File " + filename, css, js) -> {
+@layout.template("File " + filename, ctx, css, js) -> {
 <button class="switch" id="raw">Show raw</button>
 <span class="settings" id="settings">
     <label for="code">Linecount</label><input id="code" type="checkbox">
diff --git a/src/main/resources/views/index.rocker.html b/src/main/resources/views/index.rocker.html
index cc18d3b..2e1b9dd 100644
--- a/src/main/resources/views/index.rocker.html
+++ b/src/main/resources/views/index.rocker.html
@@ -1,9 +1,22 @@
 @import space.anity.DatabaseController
 @import space.anity.UserHandler
-@args (String username)
+@import io.javalin.*
+@args (String username, Context ctx)
 
-@layout.template("Index", RockerContent.NONE, RockerContent.NONE) -> {
+@css => {
+<link href="/css/index.css" rel="stylesheet">
+}
+
+@js => {
+<script src="/js/index.js"></script>
+}
+
+@layout.template("Index", ctx, css, js) -> {
 <div class="flex">
+    @if (username.length() > 0) {
+    <button class="toggle" id="toggle">Dark theme</button>
+    }
+
     <h1>Welcome to Kloud<span class="username">@(username == "" ? "" : " " + username)</span>!</h1>
 
     <div>
diff --git a/src/main/resources/views/layout.rocker.html b/src/main/resources/views/layout.rocker.html
index 3e3fb5e..9963aad 100644
--- a/src/main/resources/views/layout.rocker.html
+++ b/src/main/resources/views/layout.rocker.html
@@ -1,4 +1,7 @@
-@args (String title, RockerContent css, RockerContent js, RockerBody content)
+@import space.anity.DatabaseController
+@import space.anity.UserHandler
+@import io.javalin.*
+@args (String title, Context ctx, RockerContent css, RockerContent js, RockerBody content)
 
 <!doctype html>
 <html lang="en">
@@ -10,6 +13,11 @@
     <link href="/css/icons.css" rel="stylesheet">
     <link href="/css/layout.css" rel="stylesheet">
     @css
+
+    @if((new DatabaseController()).isDarkTheme((new UserHandler()).getVerifiedUserId(ctx))) {
+    <link href="/css/darkLayout.css" rel="stylesheet">
+    }
+
     <title>@title</title>
 </head>
 <body>
diff --git a/src/main/resources/views/login.rocker.html b/src/main/resources/views/login.rocker.html
index a8b06be..1e2adc4 100644
--- a/src/main/resources/views/login.rocker.html
+++ b/src/main/resources/views/login.rocker.html
@@ -1,11 +1,12 @@
-@args (String message, Integer counter)
+@import io.javalin.*
+@args (String message, Integer counter, Context ctx)
 
 @js => {
 <script>const counter = @counter;</script>
 <script src="/js/login.js"></script>
 }
 
-@layout.template("Login", RockerContent.NONE, js) -> {
+@layout.template("Login", ctx, RockerContent.NONE, js) -> {
 <div class="flex">
     <h1>Login</h1>
 
diff --git a/src/main/resources/views/register.rocker.html b/src/main/resources/views/register.rocker.html
index b86c2e0..8516561 100644
--- a/src/main/resources/views/register.rocker.html
+++ b/src/main/resources/views/register.rocker.html
@@ -1,6 +1,7 @@
-@args (String username, String token, String message)
+@import io.javalin.*
+@args (String username, String token, String message, Context ctx)
 
-@layout.template("Register", RockerContent.NONE, RockerContent.NONE) -> {
+@layout.template("Register", ctx, RockerContent.NONE, RockerContent.NONE) -> {
 <div class="flex">
     <h1>Register</h1>
 
diff --git a/src/main/resources/views/setup.rocker.html b/src/main/resources/views/setup.rocker.html
index 595f84a..3601817 100644
--- a/src/main/resources/views/setup.rocker.html
+++ b/src/main/resources/views/setup.rocker.html
@@ -1,6 +1,7 @@
-@args (String message)
+@import io.javalin.*
+@args (String message, Context ctx)
 
-@layout.template("Setup", RockerContent.NONE, RockerContent.NONE) -> {
+@layout.template("Setup", ctx, RockerContent.NONE, RockerContent.NONE) -> {
 <div class="flex">
     <h1>Setup</h1>
 
-- 
cgit v1.2.3