#14 Introduce dark mode

This commit is contained in:
2021-03-01 23:43:31 +01:00
parent ad540950cd
commit fde1c6787e
31 changed files with 137 additions and 13 deletions

View File

@@ -3,7 +3,7 @@ package de.financer.chart;
import java.awt.*;
public class ChartDefinitions {
public static final Color TRANSPARENT = new Color(0.0f, 0.0f, 0.0f, 0.0f);
public static final Color TRANSPARENT = new Color(0xFF, 0xFF, 0xFF, 0);
public static final Color BLUE = new Color(0, 143, 251);
public static final Color RED = new Color(211, 0, 0);
public static final Color GREEN = new Color(0, 169, 0);

View File

@@ -27,6 +27,7 @@ public class ExpensesAllPeriodsGenerator extends AbstractChartGenerator<EmptyPar
chart.getCategoryPlot().setOutlineVisible(false);
chart.getCategoryPlot().setBackgroundPaint(ChartDefinitions.TRANSPARENT);
chart.setBackgroundPaint(ChartDefinitions.TRANSPARENT);
chart.getCategoryPlot().getRenderer().setSeriesPaint(0, ChartDefinitions.BLUE);
chart.getCategoryPlot().getRenderer().setSeriesStroke(0, new BasicStroke(2f));

View File

@@ -21,6 +21,7 @@ public class FinancerConfig {
private String currencyCode;
private Currency currency;
private DayOfWeek firstDayOfWeek;
private boolean darkMode;
public String getServerUrl() {
return serverUrl;
@@ -63,4 +64,12 @@ public class FinancerConfig {
public void setFirstDayOfWeek(String firstDayOfWeek) {
this.firstDayOfWeek = DayOfWeek.valueOf(firstDayOfWeek);
}
public boolean isDarkMode() {
return darkMode;
}
public void setDarkMode(boolean darkMode) {
this.darkMode = darkMode;
}
}

View File

@@ -57,6 +57,7 @@ public class AccountController {
model.addAttribute("showClosed", showClosedBoolean);
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
return "account/accountOverview";
}
@@ -75,6 +76,7 @@ public class AccountController {
model.addAttribute("form", new NewAccountForm());
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
return "account/newAccount";
}
@@ -100,6 +102,7 @@ public class AccountController {
model.addAttribute("errorMessage", responseReason.name());
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
return "account/newAccount";
}
@@ -144,6 +147,7 @@ public class AccountController {
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
return "account/accountDetails";
}
@@ -164,6 +168,7 @@ public class AccountController {
model.addAttribute("errorMessage", responseReason.name());
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
return "account/accountDetails";
}
@@ -187,6 +192,7 @@ public class AccountController {
model.addAttribute("errorMessage", responseReason.name());
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
return "account/accountDetails";
}
@@ -194,6 +200,13 @@ public class AccountController {
return "redirect:/accountOverview";
}
@GetMapping("/toggleDarkMode")
public String toggleDarkMode(Model model) {
this.financerConfig.setDarkMode(!this.financerConfig.isDarkMode());
return "redirect:/accountOverview";
}
// ---------------------------------------------
@Autowired(required = false)

View File

@@ -22,6 +22,7 @@ public class AccountGroupController {
public String newAccountGroup(Model model) {
model.addAttribute("form", new NewAccountGroupForm());
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
return "accountGroup/newAccountGroup";
}
@@ -40,6 +41,7 @@ public class AccountGroupController {
model.addAttribute("errorMessage", responseReason.name());
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
return "accountGroup/newAccountGroup";
}

View File

@@ -140,6 +140,7 @@ public class CalendarController {
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
return "recurringTransaction/calendar";
}

View File

@@ -56,6 +56,7 @@ public class RecurringTransactionController {
model.addAttribute("form", form);
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
return "recurringTransaction/newRecurringTransaction";
}
@@ -98,6 +99,7 @@ public class RecurringTransactionController {
model.addAttribute("errorMessage", responseReason.name());
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
return "recurringTransaction/newRecurringTransaction";
}
@@ -114,6 +116,7 @@ public class RecurringTransactionController {
model.addAttribute("subTitle", "dueToday");
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
return "recurringTransaction/recurringTransactionList";
}
@@ -127,6 +130,7 @@ public class RecurringTransactionController {
model.addAttribute("subTitle", "active");
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
return "recurringTransaction/recurringTransactionList";
}
@@ -140,6 +144,7 @@ public class RecurringTransactionController {
model.addAttribute("subTitle", "all");
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
return "recurringTransaction/recurringTransactionList";
}
@@ -159,6 +164,7 @@ public class RecurringTransactionController {
model.addAttribute("subTitle", "all");
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
if (!ResponseReason.OK.equals(responseReason)) {
model.addAttribute("errorMessage", responseReason.name());
@@ -183,6 +189,7 @@ public class RecurringTransactionController {
model.addAttribute("subTitle", sub);
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
Iterable<RecurringTransaction> recurringTransactions;
@@ -240,6 +247,7 @@ public class RecurringTransactionController {
model.addAttribute("subTitle", form.getSubTitle());
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
Iterable<RecurringTransaction> recurringTransactions;

View File

@@ -25,6 +25,7 @@ public class ReportController {
model.addAttribute("availableCharts", ChartType.valueList(true));
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
return "report/selectChart";
}
@@ -42,6 +43,7 @@ public class ReportController {
model.addAttribute("availableCharts", ChartType.valueList(true));
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
return "report/selectChart";
}
@@ -55,6 +57,7 @@ public class ReportController {
model.addAttribute("form", new ConfigAccountGroupExpenseForPeriodForm());
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
return "report/configureAccountGroupExpensesForPeriod";
case ACCOUNT_EXPENSES_CURRENT_PERIOD:
@@ -65,6 +68,7 @@ public class ReportController {
model.addAttribute("form", new ConfigAccountExpenseForPeriodForm());
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
return "report/configureAccountExpensesForPeriod";
case EXPENSE_PERIOD_TOTALS_CURRENT_YEAR:

View File

@@ -41,6 +41,7 @@ public class TransactionController {
model.addAttribute("showSum", false);
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
return "transaction/searchTransactions";
}
@@ -74,6 +75,7 @@ public class TransactionController {
model.addAttribute("showActionDelete", false);
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
return "transaction/searchTransactions";
}
@@ -113,6 +115,7 @@ public class TransactionController {
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
return "transaction/newTransaction";
}
@@ -156,6 +159,7 @@ public class TransactionController {
ControllerUtils.addVersionAttribute(model, this.financerConfig);
ControllerUtils.addCurrencySymbol(model, this.financerConfig);
ControllerUtils.addDarkMode(model, this.financerConfig);
if (!ResponseReason.OK.equals(responseReason)) {
model.addAttribute("errorMessage", responseReason.name());

View File

@@ -99,4 +99,8 @@ public class ControllerUtils {
// Add a space right in front of the currency symbol, so it's not glued to the amount
model.addAttribute("currencySymbol", "&nbsp;" + financerConfig.getCurrency().getSymbol());
}
public static void addDarkMode(Model model, FinancerConfig financerConfig) {
model.addAttribute("darkMode", financerConfig.isDarkMode());
}
}

View File

@@ -40,3 +40,7 @@ logging.level.de.pushservice=DEBUG
# The first day of a week in a calendar
# Possible values: MONDAY, TUESDAY, WEDNESDAY, THURSDAY, FRIDAY, SATURDAY, SUNDAY
financer.firstDayOfWeek=MONDAY
# Whether dark mode should be enabled by default
# Possible values: true|default
financer.darkMode=true

View File

@@ -239,6 +239,11 @@ financer.calendar.previous=Previous month
financer.calendar.next=Next month
financer.calendar.current=Current month
financer.footer.changelog=Changelog
financer.footer.readme=Readme
financer.footer.testNotification=Test notification
financer.footer.toggleDarkMode=Toggle dark mode
financer.error-message.UNKNOWN_ERROR=An unknown error occurred!
financer.error-message.INVALID_ACCOUNT_TYPE=The selected account type is not valid!
financer.error-message.FROM_ACCOUNT_NOT_FOUND=The specified from account has not been found!

View File

@@ -238,6 +238,11 @@ financer.calendar.previous=Letzter Monat
financer.calendar.next=N\u00E4chster Monat
financer.calendar.current=Aktueller Monat
financer.footer.changelog=\u00C4nderungshistorie
financer.footer.readme=Liesmich
financer.footer.testNotification=Test Benachrichtigung
financer.footer.toggleDarkMode=Dark Mode umschalten
financer.error-message.UNKNOWN_ERROR=Ein unbekannter Fehler ist aufgetreten!
financer.error-message.INVALID_ACCOUNT_TYPE=Der ausgew\u00E4hlte Kontotyp ist ung\u00FCltig!
financer.error-message.FROM_ACCOUNT_NOT_FOUND=Das ausgew\u00E4hlte Von-Konto wurde nicht gefunden!

View File

@@ -1,5 +1,6 @@
v44 -> v45:
- #5 Having no periods breaks the "expenses per period" graph on the account overview page
- #14 Introduce toggleable dark mode
v43 -> v44:
- #8: Remove hard dependency on push-service - integrate new release of push-service

View File

@@ -0,0 +1,16 @@
/* Color definitions for dark mode */
:root {
--error-color: #D30000;
--bank-color: #008FFB;
--cash-color: #FFCB00;
--income-color: #00A900;
--liability-color: #D36000;
--expense-color: #D30000;
--start-color: #AB005D;
--text-color: #7f7f7f;
--background-color: #1d1f21;
--link-color: #87ab63;
--hover-color: #1f1f2f;
--border-color: #7f7f7f;
}
/* --------------------- */

View File

@@ -0,0 +1,16 @@
/* Color definitions for light mode */
:root {
--error-color: #D30000;
--bank-color: #008FFB;
--cash-color: #FFCB00;
--income-color: #00A900;
--liability-color: #D36000;
--expense-color: #D30000;
--start-color: #AB005D;
--text-color: #000000;
--background-color: #FFFFFF;
--link-color: #0000EE;
--hover-color: lightgrey;
--border-color: #ddd;
}
/* --------------------- */

View File

@@ -1,16 +1,18 @@
/* Variable declarations */
:root {
--error-color: #D30000/*#ff6666*/;
--bank-color: #008FFB;
--cash-color: #FFCB00;
--income-color: #00A900;
--liability-color: #D36000;
--expense-color: #D30000;
--start-color: #AB005D;
--type-row-width: 5px;
}
/* --------------------- */
body {
color: var(--text-color);
background-color: var(--background-color);
}
a {
color: var(--link-color);
}
#account-overview-table,
#transaction-table,
#recurring-transaction-list-table {
@@ -27,7 +29,7 @@
#transaction-table td,
#recurring-transaction-list-table th,
#recurring-transaction-list-table td {
border-bottom: 1px solid #ddd;
border-bottom: 1px solid var(--border-color);
padding: 0.3em;
vertical-align: top;
}
@@ -37,11 +39,11 @@
#recurring-transaction-list-table th {
position: sticky;
top: 0px;
background-color: white;
background-color: var(--background-color);
}
tr:hover {
background-color: lightgrey;
background-color: var(--hover-color);
}
.overspend {

View File

@@ -4,6 +4,8 @@
<title th:text="#{financer.account-details.title}"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" />
<link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" />
<link rel="stylesheet" th:href="@{/css/main.css}">
<link rel="shortcut icon" th:href="@{/favicon.ico}" />
</head>

View File

@@ -4,6 +4,8 @@
<title th:text="#{financer.account-overview.title}"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" />
<link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" />
<link rel="stylesheet" th:href="@{/css/main.css}" />
<link rel="shortcut icon" th:href="@{/favicon.ico}" />
<script th:src="@{/javascript/push-service-client-init.js}"></script>

View File

@@ -4,6 +4,8 @@
<title th:text="#{financer.account-new.title}"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" />
<link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" />
<link rel="stylesheet" th:href="@{/css/main.css}">
<link rel="shortcut icon" th:href="@{/favicon.ico}" />
</head>

View File

@@ -4,6 +4,8 @@
<title th:text="#{financer.account-group-new.title}"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" />
<link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" />
<link rel="stylesheet" th:href="@{/css/main.css}">
<link rel="shortcut icon" th:href="@{/favicon.ico}" />
</head>

View File

@@ -2,6 +2,9 @@
<hr>
<div>
<span th:text="'financer v' + ${financerVersion}"/>
&nbsp;(<a th:href="@{/changelog.txt}">Changelog</a>,&nbsp;<a th:href="@{/readme.txt}">Readme</a>, <a th:href="@{/sendTestNotification}">Test</a>)
&nbsp;(<a th:href="@{/changelog.txt}" th:text="#{financer.footer.changelog}" />,
<a th:href="@{/readme.txt}" th:text="#{financer.footer.readme}" />,
<a th:href="@{/sendTestNotification}" th:text="#{financer.footer.testNotification}" />,
<a th:href="@{/toggleDarkMode}" th:text="#{financer.footer.toggleDarkMode}" />)
</div>
</div>

View File

@@ -4,6 +4,8 @@
<title th:text="#{financer.recurring-transaction-calendar.title}"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" />
<link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" />
<link rel="stylesheet" th:href="@{/css/main.css}">
<link rel="shortcut icon" th:href="@{/favicon.ico}"/>
</head>

View File

@@ -4,6 +4,8 @@
<title th:text="#{financer.recurring-transaction-new.title}"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" />
<link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" />
<link rel="stylesheet" th:href="@{/css/main.css}">
<link rel="shortcut icon" th:href="@{/favicon.ico}" />
</head>

View File

@@ -4,6 +4,8 @@
<title th:text="#{financer.recurring-to-transaction-with-amount.title}"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" />
<link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" />
<link rel="stylesheet" th:href="@{/css/main.css}">
<link rel="shortcut icon" th:href="@{/favicon.ico}" />
</head>

View File

@@ -4,6 +4,8 @@
<title th:text="#{'financer.recurring-transaction-list.title.' + ${subTitle}}"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" />
<link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" />
<link rel="stylesheet" th:href="@{/css/main.css}">
<link rel="shortcut icon" th:href="@{/favicon.ico}" />
</head>

View File

@@ -4,6 +4,8 @@
<title th:text="#{financer.chart-config-account-expenses-for-period.title}"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" />
<link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" />
<link rel="stylesheet" th:href="@{/css/main.css}">
<link rel="shortcut icon" th:href="@{/favicon.ico}" />
</head>

View File

@@ -4,6 +4,8 @@
<title th:text="#{financer.chart-config-account-group-expenses-for-period.title}"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" />
<link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" />
<link rel="stylesheet" th:href="@{/css/main.css}">
<link rel="shortcut icon" th:href="@{/favicon.ico}" />
</head>

View File

@@ -4,6 +4,8 @@
<title th:text="#{financer.chart-select.title}"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" />
<link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" />
<link rel="stylesheet" th:href="@{/css/main.css}">
<link rel="shortcut icon" th:href="@{/favicon.ico}" />
</head>

View File

@@ -4,6 +4,8 @@
<title th:text="#{financer.transaction-new.title}"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" />
<link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" />
<link rel="stylesheet" th:href="@{/css/main.css}">
<link rel="shortcut icon" th:href="@{/favicon.ico}" />
</head>

View File

@@ -4,6 +4,8 @@
<title th:text="#{financer.search-transactions.title}"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link th:if="${darkMode}" rel="stylesheet" th:href="@{/css/darkModeColors.css}" />
<link th:if="${!darkMode}" rel="stylesheet" th:href="@{/css/lightModeColors.css}" />
<link rel="stylesheet" th:href="@{/css/main.css}">
<link rel="shortcut icon" th:href="@{/favicon.ico}" />
</head>