Commit 8c20ef64 authored by ransome1's avatar ransome1
Browse files

Merge branch 'develop'

parents aa5051d0 550a9e19
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
sleek is an open-source todo app that makes use of the todo.txt format. sleeks GUI is modern and simple but still offers a decent set of functions which help users getting things done. sleek is available as a client for Windows, MacOS and Linux. sleek is an open-source todo app that makes use of the todo.txt format. sleeks GUI is modern and simple but still offers a decent set of functions which help users getting things done. sleek is available as a client for Windows, MacOS and Linux.
Users can add contexts, projects, priorities, due dates or recurrences to their todos. These todo.txt attributes can then be used in full-text search, as filters or to group and sort the todo list. Users can add contexts, projects, priorities, due dates, recurrences or threshold dates to their todos. These todo.txt attributes can then be used in full-text search, as filters or to group and sort the todo list.
sleek manages and watches multiple todo.txt files continuously for changes, which makes it easy to integrate sleek with other todo.txt apps. Also users can switch to dark mode and choose from multiple languages. sleek manages and watches multiple todo.txt files continuously for changes, which makes it easy to integrate sleek with other todo.txt apps. Also users can switch to dark mode and choose from multiple languages.
...@@ -47,6 +47,10 @@ Run it using: `flatpak run com.github.ransome1.sleek` ...@@ -47,6 +47,10 @@ Run it using: `flatpak run com.github.ransome1.sleek`
<a href="https://flathub.org/apps/details/com.github.ransome1.sleek" target="blank"><img width='180' alt="Download on Flathub" src="https://flathub.org/assets/badges/flathub-badge-en.png"/></a> <a href="https://flathub.org/apps/details/com.github.ransome1.sleek" target="blank"><img width='180' alt="Download on Flathub" src="https://flathub.org/assets/badges/flathub-badge-en.png"/></a>
### Get sleek from Homebrew
Install sleek from <a href="https://formulae.brew.sh/cask/sleek" target="blank">Homebrew</a>.
`brew install --cask sleek`
### Get sleek from Arch User Repository ### Get sleek from Arch User Repository
Install sleek from <a href="https://aur.archlinux.org/packages/sleek/" target="blank">AUR</a>. Install sleek from <a href="https://aur.archlinux.org/packages/sleek/" target="blank">AUR</a>.
1. Setup <a href="https://github.com/Jguer/yay#installation" target="blank">Yay</a> 1. Setup <a href="https://github.com/Jguer/yay#installation" target="blank">Yay</a>
...@@ -74,7 +78,8 @@ A prioritized backlog of new features and known issues can be found <a href="htt ...@@ -74,7 +78,8 @@ A prioritized backlog of new features and known issues can be found <a href="htt
- projects - projects
- due dates - due dates
- start dates - start dates
- <a href="https://github.com/ransome1/sleek/wiki/Recurring-todos">recurrences</a> - <a href="https://github.com/ransome1/sleek/wiki/Recurring-todos-(rec:)">recurrences</a>
- <a href="https://github.com/ransome1/sleek/wiki/Deferred-todos-(t:)">thresholds</a>
* Todo-List can be grouped and sorted by priorities, due dates, contexts or projects * Todo-List can be grouped and sorted by priorities, due dates, contexts or projects
* The sorting order can be defined on all 4 levels * The sorting order can be defined on all 4 levels
* Todos can be filtered by contexts, projects and priorities * Todos can be filtered by contexts, projects and priorities
......
{ {
"name": "sleek", "name": "sleek",
"productName": "sleek", "productName": "sleek",
"version": "1.0.8", "version": "1.0.9",
"description": "Todo app based on todo.txt for Linux, Windows and MacOS, free and open-source", "description": "Todo app based on todo.txt for Linux, Windows and MacOS, free and open-source",
"synopsis": "Todo app based on todo.txt for Linux, Windows and MacOS, free and open-source", "synopsis": "Todo app based on todo.txt for Linux, Windows and MacOS, free and open-source",
"category": "ProjectManagement", "category": "ProjectManagement",
......
name: sleek name: sleek
base: core18 base: core18
version: '1.0.8' version: '1.0.9'
summary: Todo app based on the todo.txt format for Linux, free and open-source summary: Todo app based on the todo.txt format for Linux, free and open-source
description: | description: |
sleek is an open-source todo app that makes use of the todo.txt format. sleeks GUI is modern and simple but still offers a decent set of functions which help users getting things done. sleek is available as a client for Windows, MacOS and Linux. sleek is an open-source todo app that makes use of the todo.txt format. sleeks GUI is modern and simple but still offers a decent set of functions which help users getting things done. sleek is available as a client for Windows, MacOS and Linux.
......
...@@ -3,7 +3,18 @@ ...@@ -3,7 +3,18 @@
https://codepen.io/fitri/full/oWovYj/ */ https://codepen.io/fitri/full/oWovYj/ */
"use strict"; "use strict";
import { reorderSortingLevel } from "../render.js"; import { setUserData, startBuilding } from "../render.js";
function reorderSortingLevel() {
let sortBy = new Array;
const children = sortByContainer.children;
for(let i=0; i<children.length; i++) {
if(!children[i].getAttribute("data-id")) continue;
sortBy.push(children[i].getAttribute("data-id"));
}
setUserData("sortBy", sortBy);
startBuilding();
}
function enableDragSort(listClass) { function enableDragSort(listClass) {
const sortableLists = document.getElementsByClassName(listClass); const sortableLists = document.getElementsByClassName(listClass);
......
...@@ -116,6 +116,12 @@ body.dark nav ul li a.is-highlighted { ...@@ -116,6 +116,12 @@ body.dark nav ul li a.is-highlighted {
border-bottom: none; border-bottom: none;
background-color: #3B3B3B; background-color: #3B3B3B;
} }
body.dark nav ul:nth-child(2) #versionNumber {
color: #CCCDCF !important;
}
body.dark nav ul:nth-child(2) #versionNumber:hover {
color: #CCCDCF !important;
}
body.dark #drawerContainer .zoom svg { body.dark #drawerContainer .zoom svg {
color: white !important; color: white !important;
} }
...@@ -259,9 +265,6 @@ body.dark #drawerContainer .drawer { ...@@ -259,9 +265,6 @@ body.dark #drawerContainer .drawer {
body.dark #drawerContainer .drawer h4.is-4 { body.dark #drawerContainer .drawer h4.is-4 {
color: white; color: white;
} }
body.dark #drawerContainer .drawer h4.is-4 i {
color: #CCCDCF !important;
}
body.dark #drawerContainer .drawer button span.tag { body.dark #drawerContainer .drawer button span.tag {
color: #5a5a5a; color: #5a5a5a;
} }
...@@ -520,11 +523,14 @@ body::-webkit-scrollbar { ...@@ -520,11 +523,14 @@ body::-webkit-scrollbar {
display: none; display: none;
} }
a, a {
color: #3273dc;
}
a:hover, a:hover,
a:active, a:active,
a:focus { a:focus {
color: #3273dc !important; color: #5a5a5a;
} }
.is-active { .is-active {
...@@ -879,6 +885,7 @@ nav ul { ...@@ -879,6 +885,7 @@ nav ul {
nav ul li a, nav ul li a,
nav ul li.logo { nav ul li.logo {
width: 5em; width: 5em;
position: relative;
display: block; display: block;
height: 5em; height: 5em;
line-height: 5em; line-height: 5em;
...@@ -905,6 +912,59 @@ nav ul:nth-child(2) { ...@@ -905,6 +912,59 @@ nav ul:nth-child(2) {
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
nav ul:nth-child(2) #versionNumber {
width: auto !important;
padding: 0.1em;
display: none;
line-height: 1em;
position: fixed;
bottom: 0.2em;
z-index: 80;
margin-left: 7em;
font-size: 0.8em;
color: #ccc;
background: transparent !important;
opacity: 0;
animation: fadeOut 1s forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
nav ul:nth-child(2):hover #versionNumber {
display: flex;
opacity: 0;
animation: fadeIn 1s forwards;
animation-delay: 0.5s;
}
#todoTableSearchContainer { #todoTableSearchContainer {
display: none; display: none;
...@@ -958,7 +1018,7 @@ nav ul:nth-child(2) { ...@@ -958,7 +1018,7 @@ nav ul:nth-child(2) {
top: 0.8em; top: 0.8em;
left: 1.4em; left: 1.4em;
z-index: 70; z-index: 70;
padding: 0.75em 0.75em 0.75em 0; padding: 0.75em 0;
} }
@media screen and (max-width: 992px), screen and (max-height: 650px) { @media screen and (max-width: 992px), screen and (max-height: 650px) {
...@@ -1042,6 +1102,9 @@ nav ul li.logo { ...@@ -1042,6 +1102,9 @@ nav ul li.logo {
height: 3.5em; height: 3.5em;
line-height: 3.5em; line-height: 3.5em;
} }
nav ul:nth-child(2) #versionNumber {
margin-left: 5em;
}
#autoCompleteContainer, #autoCompleteContainer,
#drawerContainer .drawer { #drawerContainer .drawer {
...@@ -1053,7 +1116,11 @@ nav ul li.logo { ...@@ -1053,7 +1116,11 @@ nav ul li.logo {
} }
#autoCompleteContainer .priority button, #autoCompleteContainer .priority button,
#drawerContainer .drawer .priority button { #drawerContainer .drawer .priority button {
font-size: 1em; font-size: 1.2em;
}
#autoCompleteContainer .priority button .tag,
#drawerContainer .drawer .priority button .tag {
font-size: 0.65em;
} }
#autoCompleteContainer button, #autoCompleteContainer button,
#drawerContainer .drawer button { #drawerContainer .drawer button {
...@@ -1151,6 +1218,9 @@ body.compact nav ul li.logo { ...@@ -1151,6 +1218,9 @@ body.compact nav ul li.logo {
height: 3.5em; height: 3.5em;
line-height: 3.5em; line-height: 3.5em;
} }
body.compact nav ul:nth-child(2) #versionNumber {
margin-left: 5em;
}
body.compact #autoCompleteContainer, body.compact #autoCompleteContainer,
body.compact #drawerContainer .drawer { body.compact #drawerContainer .drawer {
padding: 1.5em; padding: 1.5em;
...@@ -1161,7 +1231,11 @@ body.compact #drawerContainer .drawer .is-4 { ...@@ -1161,7 +1231,11 @@ body.compact #drawerContainer .drawer .is-4 {
} }
body.compact #autoCompleteContainer .priority button, body.compact #autoCompleteContainer .priority button,
body.compact #drawerContainer .drawer .priority button { body.compact #drawerContainer .drawer .priority button {
font-size: 1em; font-size: 1.2em;
}
body.compact #autoCompleteContainer .priority button .tag,
body.compact #drawerContainer .drawer .priority button .tag {
font-size: 0.65em;
} }
body.compact #autoCompleteContainer button, body.compact #autoCompleteContainer button,
body.compact #drawerContainer .drawer button { body.compact #drawerContainer .drawer button {
...@@ -1407,28 +1481,31 @@ body.compact #autoCompleteContainer h4 { ...@@ -1407,28 +1481,31 @@ body.compact #autoCompleteContainer h4 {
#drawerContainer .drawer button.is-greyed-out .tag { #drawerContainer .drawer button.is-greyed-out .tag {
display: none; display: none;
} }
#drawerContainer .drawer h4.is-4 { #drawerContainer .drawer section {
width: 100%;
padding: 0;
margin: 0 0 1.5em 0;
}
#drawerContainer .drawer section h4.is-4 {
font-size: 1.25em; font-size: 1.25em;
font-family: FreeSansBold; font-family: FreeSansBold;
margin-bottom: 0em; margin: 0 0 0.75em 0;
} }
#drawerContainer .drawer h4.is-4.clickable { #drawerContainer .drawer section h4.is-4.clickable {
cursor: pointer; cursor: pointer;
display: inline; display: inline;
} }
#drawerContainer .drawer h4.is-4.clickable i { #drawerContainer .drawer section h4.is-4.clickable i {
color: #3273dc; color: #3273dc;
} }
#drawerContainer .drawer h4.is-4.clickable::after { #drawerContainer .drawer section h4.is-4.clickable::after {
height: 1em; height: 1em;
display: block; display: block;
content: "\a"; content: "\a";
white-space: pre; white-space: pre;
} }
#drawerContainer .drawer section { #drawerContainer .drawer section .todoFilterHint {
width: 100%; cursor: pointer;
padding: 0;
margin: 0 0 1.5em 0;
} }
#drawerContainer .drawer table tr td:nth-child(odd) { #drawerContainer .drawer table tr td:nth-child(odd) {
width: auto; width: auto;
...@@ -1482,10 +1559,11 @@ body.compact #autoCompleteContainer h4 { ...@@ -1482,10 +1559,11 @@ body.compact #autoCompleteContainer h4 {
z-index: 60; z-index: 60;
margin: 0 !important; margin: 0 !important;
} }
.modal.content .title.is-3 { .modal.content h3 {
font-family: "FreeSansBold"; font-family: "FreeSansBold";
font-size: 1.7em; font-size: 1.7em;
font-weight: normal; font-weight: normal;
margin-top: 0.5em;
} }
.modal.content p { .modal.content p {
display: block; display: block;
...@@ -1503,6 +1581,10 @@ body.compact #autoCompleteContainer h4 { ...@@ -1503,6 +1581,10 @@ body.compact #autoCompleteContainer h4 {
.modal.content select { .modal.content select {
background: white !important; background: white !important;
} }
.modal.content code {
background: transparent;
padding: 0;
}
.modal.content .delete, .modal.content .delete,
.modal.content .modal-close { .modal.content .modal-close {
background: #3273dc !important; background: #3273dc !important;
...@@ -1517,9 +1599,6 @@ body.compact #autoCompleteContainer h4 { ...@@ -1517,9 +1599,6 @@ body.compact #autoCompleteContainer h4 {
max-height: calc(100vh - 5em); max-height: calc(100vh - 5em);
border-radius: 0.65em; border-radius: 0.65em;
} }
.modal.content .modal-background {
z-index: 55;
}
.modal.content .modal-card-body { .modal.content .modal-card-body {
background: none; background: none;
display: none; display: none;
......
This diff is collapsed.
...@@ -31,7 +31,12 @@ ...@@ -31,7 +31,12 @@
</ul> </ul>
<ul> <ul>
<li><a href="#" id="navBtnSettings" tabindex="-1"><i class="fas fa-cog"></i></a></li> <li><a href="#" id="navBtnSettings" tabindex="-1"><i class="fas fa-cog"></i></a></li>
<li><a href="#" id="navBtnHelp" tabindex="-1"><i class="fas fa-question-circle"></i></a></li> <li>
<a href="#" id="navBtnHelp" tabindex="-1">
<i class="fas fa-question-circle"></i>
<code id="versionNumber"></code>
</a>
</li>
</ul> </ul>
<div id="drawerContainer"> <div id="drawerContainer">
<section id="filterDrawer" class="drawer dropdown" tabindex="0"> <section id="filterDrawer" class="drawer dropdown" tabindex="0">
...@@ -118,6 +123,17 @@ ...@@ -118,6 +123,17 @@
</span> </span>
</td> </td>
</tr> </tr>
<tr>
<td><span id="viewToggleDeferredTodos"></span> <a href="https://github.com/ransome1/sleek/wiki/Deferred-todos-(t:)" target="_blank"><i class="fas fa-question-circle"></i></a></td>
<td>
<span class="toggle">
<label class="switch" for="deferredTodos">
<input type="checkbox" id="deferredTodos" class="viewToggle" tabindex="0">
<span class="slider round"></span>
</label>
</span>
</td>
</tr>
<tr> <tr>
<th colspan="100%"> <th colspan="100%">
<h3 id="viewHeadlineFilterList" class="is-3"></h3> <h3 id="viewHeadlineFilterList" class="is-3"></h3>
...@@ -235,7 +251,7 @@ ...@@ -235,7 +251,7 @@
</div> </div>
</div> </div>
<section id="modalForm" class="modal"> <section id="modalForm" class="modal" data-item="">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-content"> <div class="modal-content">
<div class="card"> <div class="card">
...@@ -351,10 +367,10 @@ ...@@ -351,10 +367,10 @@
<div id="modalSettings" class="modal content" tabindex="0"> <div id="modalSettings" class="modal content" tabindex="0">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card"> <div class="modal-card">
<div class="tabs is-centered"> <div class="tabs is-centered" style="display: none;">
<ul> <ul>
<li class="settingsTab1 is-active"><a href="#" tabindex="0" id="settingsTabSettings"></a></li> <li class="settingsTab1 is-active"><a href="#" tabindex="0" id="settingsTabSettings"></a></li>
<li class="settingsTab2"><a href="#" tabindex="0" id="settingsTabAbout"></a></li> <!--<li class="settingsTab2"><a href="#" tabindex="0" id="settingsTabAbout"></a></li>-->
</ul> </ul>
</div> </div>
<section id="settingsTab1" class="modal-card-body" data-track-content data-content-name="Settings" data-content-piece="Settings"> <section id="settingsTab1" class="modal-card-body" data-track-content data-content-name="Settings" data-content-piece="Settings">
...@@ -427,7 +443,7 @@ ...@@ -427,7 +443,7 @@
</tr> </tr>
</table> </table>
</section> </section>
<section id="settingsTab2" class="modal-card-body" data-track-content data-content-name="Settings" data-content-piece="About"> <!--<section id="settingsTab2" class="modal-card-body" data-track-content data-content-name="Settings" data-content-piece="About">
<h3 class="title is-3" id="settingsTabAboutHeadline"></h3> <h3 class="title is-3" id="settingsTabAboutHeadline"></h3>
<table> <table>
<tr> <tr>
...@@ -490,12 +506,12 @@ ...@@ -490,12 +506,12 @@
</tr> </tr>
</table> </table>
<p><code>v<span id="version"></span></code></p> <p><code>v<span id="version"></span></code></p>
</section> </section>-->
<button class="modal-close close is-large" aria-label="close" tabindex="0"></button> <button class="modal-close close is-large" aria-label="close" tabindex="0"></button>
</div> </div>
</div> </div>
<div id="modalHelp" class="modal content" tabindex="0" data-track-content data-content-name="Help" data-content-piece="Keyboard shortcuts"> <div id="modalHelp" class="modal content" tabindex="0">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-card"> <div class="modal-card">
<div class="tabs is-centered"> <div class="tabs is-centered">
...@@ -505,9 +521,10 @@ ...@@ -505,9 +521,10 @@
<li class="helpTab3"><a href="#" tabindex="0" id="helpTab3Title"></a></li> <li class="helpTab3"><a href="#" tabindex="0" id="helpTab3Title"></a></li>
<li class="helpTab4"><a href="#" tabindex="0" id="helpTab4Title"></a></li> <li class="helpTab4"><a href="#" tabindex="0" id="helpTab4Title"></a></li>
<li class="helpTab5"><a href="#" tabindex="0" id="helpTab5Title"></a></li> <li class="helpTab5"><a href="#" tabindex="0" id="helpTab5Title"></a></li>
<li class="helpTab6"><a href="#" tabindex="0" id="settingsTabAbout"></a></li>
</ul> </ul>
</div> </div>
<section id="helpTab1" class="modal-card-body is-active"> <section id="helpTab1" class="modal-card-body is-active" data-track-content data-content-name="Help" data-content-piece="Keyboard shortcuts">
<h3 class="title is-3" id="helpTabKeyboardTitle"></h3> <h3 class="title is-3" id="helpTabKeyboardTitle"></h3>
<table class="shortcuts"> <table class="shortcuts">
<tr> <tr>
...@@ -643,6 +660,70 @@ ...@@ -643,6 +660,70 @@
</div> </div>
</div> </div>
</section> </section>
<section id="helpTab6" class="modal-card-body" data-track-content data-content-name="Help" data-content-piece="About">
<h3 class="title is-3" id="settingsTabAboutHeadline"></h3>
<p><code>Current version: <span id="version"></span></code></p>
<table>
<tr>
<th colspan="100%" id="settingsTabAboutContribute"></th>
</tr>
<tr>
<td><i class="fab fa-github"></i></td>
<td><a href="https://github.com/ransome1/sleek/issues" target="_blank" id="submitIssuesOnGithub"></a></td>
<td><i class="fas fa-star"></i></td>
<td><a href="https://sourceforge.net/projects/sleek/reviews" target="_blank" id="reviewSourceforge"></a></td>
<td><i class="fab fa-windows"></i></td>
<td><a href="https://www.microsoft.com/store/apps/9NWM2WXF60KR" target="_blank" id="reviewWindowsStore"></a></td>
</tr>
<tr>
<td><i class="fab fa-twitter"></i></td>
<td><a href="https://twitter.com/intent/tweet?text=Check%20out%20sleek,%20a%20todo%20app%20based%20on%20todo.txt,%20free%20and%20open-source.%20Available%20for%20Linux,%20Windows%20and%20MacOS.%20https://github.com/ransome1/sleek" target="_blank" id="shareTwitter"></a></td>
<td><i class="fab fa-facebook"></i></td>
<td><a href="https://www.facebook.com/sharer/sharer.php?u=https://github.com/ransome1/sleek" target="_blank" id="shareFacebook"></a></td>
<td><i class="fab fa-linkedin"></i></td>
<td><a href="https://www.linkedin.com/shareArticle?mini=true&url=https://github.com/ransome1/sleek" target="_blank" id="shareLinkedin"></a></td>
</tr>
</table>
<table>
<tr>
<th colspan="100%" id="settingsTabAboutCopyrightLicense"></th>
</tr>
<tr>
<td colspan="100%" id="settingsTabAboutCopyrightLicenseBody"></td>
</tr>
</table>
<table>
<tr>
<th colspan="100%" id="settingsTabAboutPrivacy"></th>
</tr>
<tr>
<td colspan="100%" id="settingsTabAboutPrivacyBody"></td>
</tr>
</table>
<table>
<tr>
<th colspan="100%" id="settingsTabAboutExternalLibraries"></th>
</tr>
<tr>
<td><a href="https://github.com/electron/electron" target="_blank">Electron</a></td>
<td><a href="https://github.com/electron-userland/electron-builder" target="_blank">Electron builder</a></td>
<td><a href="https://github.com/i18next/i18next" target="_blank">i18next</a></td>
<td><a href="https://github.com/mymth/vanillajs-datepicker" target="_blank">vanillajs-datepicker</a></td>
</tr>
<tr>
<td><a href="https://github.com/jgthms/bulma" target="_blank">Bulma CSS</a></td>
<td><a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">Font Awesome</a></td>
<td><a href="https://github.com/jmhobbs/jsTodoTxt" target="_blank">jsTodoTxt</a></td>
<td><a href="https://github.com/markedjs/marked" target="_blank">Marked</a></td>
</tr>
<tr>
<td><a href="https://github.com/matomo-org/matomo" target="_blank">Matomo</a></td>
<td><a href="https://github.com/paulmillr/chokidar" target="_blank">chokidar</a></td>
<td><a href="https://github.com/viktor-shmigol/electron-windows-badge/" target="_blank">Electron Windows Badge</a></td>
<td><a href="https://github.com/andrewplummer/Sugar" target="_blank">Sugar</a></td>
</tr>
</table>
</section>
<button class="modal-close close is-large" aria-label="close" tabindex="0"></button> <button class="modal-close close is-large" aria-label="close" tabindex="0"></button>
</div> </div>
</div> </div>
......
...@@ -50,11 +50,7 @@ const settingsTabAboutHeadline = document.getElementById("settingsTabAboutHeadli ...@@ -50,11 +50,7 @@ const settingsTabAboutHeadline = document.getElementById("settingsTabAboutHeadli
const settingsTabAboutPrivacy = document.getElementById("settingsTabAboutPrivacy"); const settingsTabAboutPrivacy = document.getElementById("settingsTabAboutPrivacy");
const settingsTabAboutPrivacyBody = document.getElementById("settingsTabAboutPrivacyBody"); const settingsTabAboutPrivacyBody = document.getElementById("settingsTabAboutPrivacyBody");
const settingsTabSettings = document.getElementById("settingsTabSettings"); const settingsTabSettings = document.getElementById("settingsTabSettings");
//const settingsTabSettingsArchive = document.getElementById("settingsTabSettingsArchive");
//const settingsTabSettingsArchiveBody = document.getElementById("settingsTabSettingsArchiveBody");
//const settingsTabSettingsArchiveButton = document.getElementById("settingsTabSettingsArchiveButton");
const settingsTabSettingsDarkmode = document.getElementById("settingsTabSettingsDarkmode"); const settingsTabSettingsDarkmode = document.getElementById("settingsTabSettingsDarkmode");
//const settingsTabSettingsDarkmodeBody = document.getElementById("settingsTabSettingsDarkmodeBody");
const settingsTabSettingsHeadline = document.getElementById("settingsTabSettingsHeadline