diff --git a/BudgetMasterServer/src/main/resources/static/css/settings.css b/BudgetMasterServer/src/main/resources/static/css/settings.css index 7c87821771399ac7070497aa1e8752b5392b77ca..f4f810b65ad0af926b9e67d3f1bb77353414b86a 100644 --- a/BudgetMasterServer/src/main/resources/static/css/settings.css +++ b/BudgetMasterServer/src/main/resources/static/css/settings.css @@ -50,4 +50,22 @@ .collapsible-header-button.hidden { display: none; +} + +.settings-preview-image { + width: 80%; + margin-top: 1rem; + border: 3px solid black; + opacity: 0.3; + padding: 1rem; + background-color: var(--color-grey); +} + +.settings-preview-image-selected { + opacity: 1.0 !important; +} + +.settings-preview-image:hover { + opacity: 1.0 !important; + cursor: pointer; } \ No newline at end of file diff --git a/BudgetMasterServer/src/main/resources/static/images/settings/themeDark.png b/BudgetMasterServer/src/main/resources/static/images/settings/themeDark.png new file mode 100644 index 0000000000000000000000000000000000000000..1b7f925b80a535315f4dacf1abd43b32b75ed987 Binary files /dev/null and b/BudgetMasterServer/src/main/resources/static/images/settings/themeDark.png differ diff --git a/BudgetMasterServer/src/main/resources/static/images/settings/themeLight.png b/BudgetMasterServer/src/main/resources/static/images/settings/themeLight.png new file mode 100644 index 0000000000000000000000000000000000000000..adc951016e9b44ba88a33a146039fd508e026063 Binary files /dev/null and b/BudgetMasterServer/src/main/resources/static/images/settings/themeLight.png differ diff --git a/BudgetMasterServer/src/main/resources/templates/settings/containers/settingsPersonalization.ftl b/BudgetMasterServer/src/main/resources/templates/settings/containers/settingsPersonalization.ftl index ecfbf3bef48109e78443949cb39a5ab4760c768e..bd79e9ed2f7d3db9d72b3f280e978caca4eb10e3 100644 --- a/BudgetMasterServer/src/main/resources/templates/settings/containers/settingsPersonalization.ftl +++ b/BudgetMasterServer/src/main/resources/templates/settings/containers/settingsPersonalization.ftl @@ -34,6 +34,25 @@ </div> </div> + <!-- theme --> + <div class="row center-align"> + <div class="col col s12 m12 l8 offset-l2"> + <div class="headline-small">${locale.getString("settings.darkTheme")}</div> + </div> + + <div class="col col s6 m6 l4 offset-l2"> + <div>${locale.getString("settings.darkTheme.deactivated")}</div> + <img class="responsive-img settings-preview-image <#if !settings.isUseDarkTheme()>settings-preview-image-selected</#if>" src="<@s.url '/images/settings/themeLight.png'/>" data-use-dark-theme="false"/> + </div> + + <div class="col col s6 m6 l4"> + <div>${locale.getString("settings.darkTheme.activated")}</div> + <img class="responsive-img settings-preview-image <#if settings.isUseDarkTheme()>settings-preview-image-selected</#if>" src="<@s.url '/images/settings/themeDark.png'/>" data-use-dark-theme="true"/> + </div> + + <input type="hidden" id="useDarkTheme" name="useDarkTheme" value="${settings.isUseDarkTheme()?c}"/> + </div> + <#-- dark theme and category style --> <@settingsMacros.switches settings/> @@ -74,17 +93,27 @@ </#if> <script> - $('#settings-language').change(function() + + $('.settings-preview-image').click(function() { + for(let item of document.getElementsByClassName('settings-preview-image')) + { + item.classList.toggle('settings-preview-image-selected', false); + } + + this.classList.toggle('settings-preview-image-selected', true); + + document.getElementById('useDarkTheme').value = this.dataset.useDarkTheme; toggleSettingsContainerHeader('personalizationSettingsContainerHeader', false); }); - $('#settings-currency').on('change keydown paste input', function() + // show unsaved changes warning + $('#settings-language').change(function() { toggleSettingsContainerHeader('personalizationSettingsContainerHeader', false); }); - $('input[name="useDarkTheme"]').change(function() + $('#settings-currency').on('change keydown paste input', function() { toggleSettingsContainerHeader('personalizationSettingsContainerHeader', false); }); diff --git a/BudgetMasterServer/src/main/resources/templates/settings/settingsMacros.ftl b/BudgetMasterServer/src/main/resources/templates/settings/settingsMacros.ftl index 7688b5733ad2108c700265445005c61324e1d073..54dc55265adf5f39fb395866feba2ec047d884af 100644 --- a/BudgetMasterServer/src/main/resources/templates/settings/settingsMacros.ftl +++ b/BudgetMasterServer/src/main/resources/templates/settings/settingsMacros.ftl @@ -5,19 +5,14 @@ <div class="col s12"> <div class="table-container"> <div class="table-cell"> - <div class="switch-cell-margin">${locale.getString("settings.darkTheme")}</div> <div class="switch-cell-margin">${locale.getString("settings.category.circle.style")}</div> </div> <div class="table-cell table-cell-spacer"></div> <div class="table-cell"> - <@switch "darkTheme" "useDarkTheme" settings.isUseDarkTheme()/> <@switch "category.circle.style" "showCategoriesAsCircles" settings.getShowCategoriesAsCircles()?? && settings.getShowCategoriesAsCircles()/> </div> <div class="table-cell table-cell-spacer"></div> <div class="table-cell"> - <div class="switch-cell-margin"> - <a class="btn btn-flat tooltipped text-default" data-position="bottom" data-tooltip="${locale.getString("settings.darkTheme.description")}"><i class="material-icons">help_outline</i></a> - </div> <div class="switch-cell-margin"> <a class="btn btn-flat tooltipped text-default" data-position="bottom" data-tooltip="${locale.getString("settings.category.circle.style.description")}"><i class="material-icons">help_outline</i></a> </div>