work/timetrack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added dark mode

Browse Source
This commit is contained in:
Jörg Henke
2023-09-11 22:23:45 +02:00
parent 485bc5e8c3
commit 3b8e0e4074
9 changed files with 94 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
build.gradle
View File

@ -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'

37
src/main/resources/static/css/style.css
View File

@ -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;

15
src/main/resources/static/js/clock.js
View File

@ -4,29 +4,30 @@
* Coolock Definition
*/
class Clock {
constructor(size, selector, color, background) {
constructor(size, selector, arrowcolor, scalecolor, backgroundcolor) {
var canvas = $("<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();

6
src/main/resources/static/js/helper.js
View File

@ -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();

4
src/main/resources/templates/contact/list.html
View File

@ -20,7 +20,7 @@
<div class="accordion-body">
<div class="row row-cols-12 ro-cols-lg-4 ro-cols-md-3 ro-cols-sd-2 g-4" style="margin: 8px">
<div class="col" th:each="contact : ${contactList}">
<div class="card text-dark bg-light shadow" style="width: 18rem">
<div class="card shadow" style="width: 18rem">
<div class="card-header text-center">
<font th:text="${contact.forename} + ' ' + ${contact.surname}" style="font-size: larger"></font>
</div>
@ -38,7 +38,7 @@
</div>
</div>
<div id="div_list" class="tab-pane fade tab-pane-table">
<div class="accordion-body" style="background-color: white">
<div class="accordion-body">
<table id="table" class="table table-striped table-condensed">
<thead>
<tr>

2
src/main/resources/templates/done/list.html
View File

@ -39,7 +39,7 @@
<li class="nav-item"><a class="nav-link navlinkstyle" data-bs-toggle="tab" href="#div_billing">Abrechnung</a></li>
</ul>
<div class="tabdivblurred tab-content">
<div id="div_list" class="tab-pane active tab-pane-table" style="background-color: white">
<div id="div_list" class="tab-pane active tab-pane-table">
<table class="table table-striped table-condensed">
<thead>
<tr>

39
src/main/resources/templates/layout/main.html
View File

@ -1,22 +1,22 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" data-bs-theme="dark">
<head>
<meta charset="UTF-8" />
<title>Timetrack</title>
<link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/5.2.3/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/webjars/datatables/1.13.2/css/dataTables.bootstrap5.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/webjars/font-awesome/5.15.4/css/all.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/5.3.1/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/webjars/datatables/1.13.5/css/dataTables.bootstrap5.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/webjars/font-awesome/6.4.2/css/all.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/webjars/fullcalendar/5.11.3/main.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/css/style.css}">
<link rel="icon" type="image/png" sizes="32x32" th:href="@{/png/favicon/favicon-32x32.png}" />
<link rel="icon" type="image/png" sizes="16x16" th:href="@{/png/favicon/favicon-16x16.png}" />
<script th:src="@{/webjars/jquery/3.6.4/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/5.2.3/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/webjars/datatables/1.13.2/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/webjars/datatables/1.13.2/js/dataTables.bootstrap5.min.js}"></script>
<script th:src="@{/webjars/jquery/3.7.1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/5.3.1/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/webjars/datatables/1.13.5/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/webjars/datatables/1.13.5/js/dataTables.bootstrap5.min.js}"></script>
<script th:src="@{/webjars/fullcalendar/5.11.3/main.js}"></script>
<script th:src="@{/js/helper.js}"></script>
<script th:src="@{/js/clock.js}"></script>
@ -24,7 +24,7 @@
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light static-top">
<nav class="navbar navbar-expand-lg static-top">
<div class="container-fluid" style="width: 98%">
<i class="fa fa-calendar-alt"></i> <a class="navbar-brand" style="margin-left: 8px; z-index: 1" th:href="@{/}">Timetrack</a><br />
<div class="version" th:text="${@manifestBean.getVersion()}"></div>
@ -47,12 +47,29 @@
<li class="nav-item"><a class="nav-link titlemod"><font layout:fragment="title"></font></a></li>
<li layout:fragment="menuitem" style="list-style-type: none"></li>
<li layout:fragment="menu" style="list-style-type: none"></li>
<li class="nav-item ms-auto"><div id="clock" class="clock"></div></li>
<li class="nav-item ms-auto"><div id="clock" class="clock" onclick="toggleTheme();resetClock()"></div></li>
</ul>
</div>
</div>
<script type="text/javascript">
new Clock(38, "#clock", "#000", "rgba(255, 255, 255, 0.0)");
resetClock = function() {
$("#clock").empty();
var theme = $("html").attr("data-bs-theme");
var arrowcolor;
var scalecolor;
var backgroundcolor;
if (theme == "dark") {
arrowcolor = "#fff";
scalecolor = "#aaa";
backgroundcolor = "rgba(0, 0, 0, 0.3)"
} else {
arrowcolor = "#099";
scalecolor = "#000";
backgroundcolor = "rgba(0, 0, 0, 0)";
}
new Clock(38, "#clock", arrowcolor, scalecolor, backgroundcolor);
}
resetClock();
</script>
</nav>
<main layout:fragment="content" class="page body"></main>

4
src/main/resources/templates/note/list.html
View File

@ -19,7 +19,7 @@
<div id="div_dashboard" class="tab-pane active">
<div class="row row-cols-12 ro-cols-lg-3 ro-cols-md-2 ro-cols-sd-1 g-4" style="margin: 8px">
<div class="col" th:each="note : ${noteList}">
<div class="card text-dark bg-light shadow" style="width: 100%">
<div class="card shadow" style="width: 100%">
<div class="card-header text-center">
<font th:text="${note.category}" style="font-size: larger">:</font> <font th:text="${note.title}"
style="font-size: larger; font-weight: bolder"></font>
@ -40,7 +40,7 @@
</div>
</div>
<div id="div_list" class="tab-pane fade tab-pane-table">
<div class="accordion-body" style="background-color: white">
<div class="accordion-body">
<table id="table" class="table table-striped table-condensed">
<thead>
<tr>

2
src/main/resources/templates/public/index.html
View File

@ -10,7 +10,7 @@
<ul layout:fragment="menu">
</ul>
<main layout:fragment="content">
<div class="card text-dark bg-light" style="width: 312px; margin: 24px">
<div class="card" style="width: 312px; margin: 24px">
<div class="card-header"><a class="btn btn-seondary btn-bordered btn-secondaryhover" style="width: 100%"
th:href="@{/done/list}">heutige Arbeitszeiten</a></div>
<div class="card-body">