#696 - show preview images for theme selection

BudgetMasterServer/src/main/resources/static/css/settings.css

@@ -51,3 +51,21 @@
 .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

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);
             });

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>