From 3b8e0e4074ba94820c8d1870feea9d0140957087 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B6rg=20Henke?= Date: Mon, 11 Sep 2023 22:23:45 +0200 Subject: [PATCH] added dark mode --- build.gradle | 18 ++++----- src/main/resources/static/css/style.css | 37 ++++++++++++++++++ src/main/resources/static/js/clock.js | 15 +++---- src/main/resources/static/js/helper.js | 6 +++ .../resources/templates/contact/list.html | 4 +- src/main/resources/templates/done/list.html | 2 +- src/main/resources/templates/layout/main.html | 39 +++++++++++++------ src/main/resources/templates/note/list.html | 4 +- .../resources/templates/public/index.html | 2 +- 9 files changed, 94 insertions(+), 33 deletions(-) diff --git a/build.gradle b/build.gradle index 41d35f8..57131c2 100644 --- a/build.gradle +++ b/build.gradle @@ -1,5 +1,5 @@ plugins { - id 'org.springframework.boot' version '3.1.1' + id 'org.springframework.boot' version '3.1.3' id 'java' id 'war' } @@ -7,7 +7,7 @@ plugins { apply plugin: 'io.spring.dependency-management' group = 'de.jottyfan' -version = '1.3.0' +version = '1.3.1' description = """timetrack""" @@ -27,11 +27,11 @@ dependencies { implementation 'org.apache.logging.log4j:log4j-core:2.20.0' implementation 'org.apache.logging.log4j:log4j-to-slf4j:2.20.0' - implementation 'org.webjars:bootstrap:5.2.3' - implementation 'org.webjars:font-awesome:5.15.4' - implementation 'org.webjars:jquery:3.6.4' - implementation 'org.webjars:popper.js:2.9.3' - implementation 'org.webjars:datatables:1.13.2' + implementation 'org.webjars:bootstrap:5.3.1' + implementation 'org.webjars:font-awesome:6.4.2' + implementation 'org.webjars:jquery:3.7.1' + implementation 'org.webjars:popper.js:2.11.7' + implementation 'org.webjars:datatables:1.13.5' implementation 'org.webjars:jquery-ui:1.13.2' implementation 'org.webjars:fullcalendar:5.11.3' @@ -42,14 +42,14 @@ dependencies { implementation 'org.springframework.boot:spring-boot-starter-jooq' implementation 'org.springframework.boot:spring-boot-starter-security' implementation "org.springframework.boot:spring-boot-starter-oauth2-client" - implementation 'org.springframework.security:spring-security-oauth2-authorization-server:1.1.1' + implementation 'org.springframework.security:spring-security-oauth2-authorization-server:1.1.2' implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation 'org.springframework.boot:spring-boot-starter-web' implementation 'org.springframework.boot:spring-boot-starter-test' implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity6' implementation 'de.jottyfan:timetrackjooq:0.1.1' - implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:3.0.0' + implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:3.2.1' developmentOnly 'org.springframework.boot:spring-boot-devtools' runtimeOnly 'org.postgresql:postgresql' diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css index d92cf71..6028f69 100644 --- a/src/main/resources/static/css/style.css +++ b/src/main/resources/static/css/style.css @@ -7,6 +7,10 @@ body { height: calc(100% - 56px); } +[data-bs-theme=dark] body { + background-color: rgb(36, 31, 49); +} + .openedSelect { overflow: auto; } @@ -21,6 +25,10 @@ body { color: black; } +[data-bs-theme=dark] .navlinkstyle { + color: #aaa; +} + .navlinkstyle:hover { color: #1a5fb4; } @@ -29,6 +37,11 @@ body { background-color: ghostwhite; } +[data-bs-theme=dark] .navback { + color: ghostwhite; + background-color: #222; +} + .tabdivblurred { padding: 8px; padding-bottom: 0px; @@ -43,6 +56,10 @@ body { background-image: linear-gradient(to bottom, #ffc, #ee0) !important; } +[data-bs-theme=dark] .noty { + background-image: linear-gradient(to bottom, rgb(0, 0, 0), rgb(229, 165, 10)) !important; +} + .glassy { background-color: rgba(0, 0, 0s, 0.1); } @@ -56,6 +73,10 @@ body { min-width: 95vw !important; } +[data-bs-theme=dark] .formpane { + background: #111; +} + .menudangerbutton { color: #e00 !important; border: 1px solid rgba(0, 0, 0, 0); @@ -86,6 +107,11 @@ body { !important; } +[data-bs-theme=dark] .page { + background-image: linear-gradient(to bottom, #123, #111) + !important; +} + .emph { border-radius: 3px !important; border: 1px solid #3070b0 !important; @@ -94,6 +120,13 @@ body { !important; } +[data-bs-theme=dark] .emph { + color: #ffffff !important; + background-image: linear-gradient(to bottom, #113531 0%, #135 100%) + !important; + +} + .doneoverviewtext { font-size: 120%; } @@ -246,6 +279,10 @@ body { border: 1px solid silver; } +[data-bs-theme=dark] .tab-pane-table { + background-color: rgb(36, 31, 49); +} + .tab-pane-glassy { background: rgba(255, 255, 255, 0.5); padding: 8px; diff --git a/src/main/resources/static/js/clock.js b/src/main/resources/static/js/clock.js index 42c40a1..679b174 100644 --- a/src/main/resources/static/js/clock.js +++ b/src/main/resources/static/js/clock.js @@ -4,29 +4,30 @@ * Coolock Definition */ class Clock { - constructor(size, selector, color, background) { + constructor(size, selector, arrowcolor, scalecolor, backgroundcolor) { var canvas = $(""); canvas.attr("id", "clockPanel"); canvas.attr("width", size); canvas.attr("height", size); canvas.css("border-radius", "4px"); - canvas.css("background", background); + canvas.css("background", backgroundcolor); canvas[0].getContext("2d").canvas.width = size; - canvas[0].getContext("2d").canvas.height = size - 3; // -3 removes unneeded overlap + canvas[0].getContext("2d").canvas.height = size; $(selector).append(canvas); var ctx = canvas[0].getContext("2d"); this.ctx = ctx; this.size = size; - this.background = background; - this.color = color; + this.background = backgroundcolor; + this.color = arrowcolor; + this.scalecolor = scalecolor; this.redraw(); } drawCircle = function(ctx, x, y, r, w) { - ctx.strokeStyle = this.color; + ctx.strokeStyle = this.background; ctx.lineWidth = w; ctx.beginPath(); ctx.arc(x, y, r, 0, 2 * Math.PI); @@ -35,7 +36,7 @@ class Clock { drawArrow = function(ctx, x1, y1, x2, y2, col) { ctx.strokeStyle = col; - ctx.fillStyle = this.color; + ctx.fillStyle = this.background; ctx.lineCap = "round"; ctx.lineWidth = 2; ctx.beginPath(); diff --git a/src/main/resources/static/js/helper.js b/src/main/resources/static/js/helper.js index b307231..3dfd5bd 100644 --- a/src/main/resources/static/js/helper.js +++ b/src/main/resources/static/js/helper.js @@ -1,3 +1,9 @@ +toggleTheme = function() { + var oldValue = $("html").attr("data-bs-theme"); + var newValue = oldValue == "dark" ? "light" : "dark"; + $("html").attr("data-bs-theme", newValue); +} + resetValue = function(selector, value) { $(selector).val(value); $(selector).change(); diff --git a/src/main/resources/templates/contact/list.html b/src/main/resources/templates/contact/list.html index 922a01c..1318dee 100644 --- a/src/main/resources/templates/contact/list.html +++ b/src/main/resources/templates/contact/list.html @@ -20,7 +20,7 @@
-
+
@@ -38,7 +38,7 @@
-
+
diff --git a/src/main/resources/templates/done/list.html b/src/main/resources/templates/done/list.html index bf70477..08197b8 100644 --- a/src/main/resources/templates/done/list.html +++ b/src/main/resources/templates/done/list.html @@ -39,7 +39,7 @@
  • Abrechnung
    • -
    +
    diff --git a/src/main/resources/templates/layout/main.html b/src/main/resources/templates/layout/main.html index accd462..ce20792 100644 --- a/src/main/resources/templates/layout/main.html +++ b/src/main/resources/templates/layout/main.html @@ -1,22 +1,22 @@ - +Timetrack - - - + + + - - - - + + + + @@ -24,7 +24,7 @@ -
    diff --git a/src/main/resources/templates/public/index.html b/src/main/resources/templates/public/index.html index 6d6fff8..de3900a 100644 --- a/src/main/resources/templates/public/index.html +++ b/src/main/resources/templates/public/index.html @@ -10,7 +10,7 @@
    -
    +
    heutige Arbeitszeiten