#589 - re-organized settings: grouped appearance settings

src/main/resources/languages/base_de.properties

@@ -198,7 +198,7 @@ settings.rest=Übertrag
 settings.rest.deactivated=Aus
 settings.rest.activated=An
 settings.rest.description=Zeigt die Summe aller Einnahmen und Ausgaben aller vorherigen Monate als erste Buchung des Monats an
-settings.darkTheme=Oberfläche
+settings.darkTheme=Design
 settings.darkTheme.deactivated=Hell
 settings.darkTheme.activated=Dunkel
 settings.darkTheme.description=Das BudgetMaster Design
@@ -249,6 +249,7 @@ settings.category.circle.style=Kategorien anzeigen als
 settings.category.circle.style.description=Legt die Darstellung von Kategorien in der Buchungsübersicht fest
 settings.category.circle.style.deactivated=Quadrate
 settings.category.circle.style.activated=Kreise
+settings.appearance=Oberfläche
 
 settings.database.import=Importieren
 settings.database.export=Exportieren

src/main/resources/languages/base_en.properties

@@ -249,6 +249,7 @@ settings.category.circle.style=Show categories as
 settings.category.circle.style.description=Defines how categories are displayed in the transaction overview
 settings.category.circle.style.deactivated=Squares
 settings.category.circle.style.activated=Circles
+settings.appearance=Appearance
 
 settings.database.import=Import
 settings.database.export=Export

src/main/resources/templates/settings/settings.ftl

@@ -49,17 +49,34 @@
                                 </div>
                             </div>
 
-                            <#-- currency -->
                             <div class="row">
-                                <div class="input-field col s12 m12 l8 offset-l2">
-                                    <i class="material-icons prefix">euro</i>
-                                    <input id="settings-currency" type="text" name="currency" <@validation.validation "currency"/> value="<#if settings.getCurrency()??>${settings.getCurrency()}</#if>">
-                                    <label for="settings-currency">${locale.getString("settings.currency")}</label>
+                                <div class="col s12">
+                                    <div class="table-container">
+                                        <div class="table-cell">
+                                            <div class="switch-cell-margin">${locale.getString("settings.updates.automatic")}</div>
+                                        </div>
+                                        <div class="table-cell table-cell-spacer"></div>
+                                        <div class="table-cell">
+                                            <@settingsMacros.switch "updates.automatic" "autoUpdateCheckEnabled" settings.isAutoUpdateCheckEnabled()/>
+                                        </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.updates.automatic.description")}"><i class="material-icons">help_outline</i></a>
+                                            </div>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
 
-                            <#-- rest, dark theme and backup reminder switch -->
-                            <@settingsMacros.switches settings/>
+                            <hr>
+
+                            <#-- appearance -->
+                            <div class="container">
+                                <div class="section center-align">
+                                    <div class="headline">${locale.getString("settings.appearance")}</div>
+                                </div>
+                            </div>
 
                             <#-- language -->
                             <div class="row">
@@ -78,6 +95,18 @@
                                 </div>
                             </div>
 
+                            <#-- currency -->
+                            <div class="row">
+                                <div class="input-field col s12 m12 l8 offset-l2">
+                                    <i class="material-icons prefix">euro</i>
+                                    <input id="settings-currency" type="text" name="currency" <@validation.validation "currency"/> value="<#if settings.getCurrency()??>${settings.getCurrency()}</#if>">
+                                    <label for="settings-currency">${locale.getString("settings.currency")}</label>
+                                </div>
+                            </div>
+
+                            <#-- rest, dark theme and category style -->
+                            <@settingsMacros.switches settings/>
+
                             <#-- search items per page -->
                             <div class="row">
                                 <div class="input-field col s12 m12 l8 offset-l2">
@@ -95,6 +124,8 @@
                                 </div>
                             </div>
 
+                            <hr>
+
                             <#-- backups -->
                             <div class="container">
                                 <div class="section center-align">

src/main/resources/templates/settings/settingsMacros.ftl

@@ -7,14 +7,12 @@
                 <div class="table-cell">
                     <div class="switch-cell-margin">${locale.getString("settings.rest")}</div>
                     <div class="switch-cell-margin">${locale.getString("settings.darkTheme")}</div>
-                    <div class="switch-cell-margin">${locale.getString("settings.updates.automatic")}</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 "rest" "restActivated" settings.isRestActivated()/>
                     <@switch "darkTheme" "useDarkTheme" settings.isUseDarkTheme()/>
-                    <@switch "updates.automatic" "autoUpdateCheckEnabled" settings.isAutoUpdateCheckEnabled()/>
                     <@switch "category.circle.style" "showCategoriesAsCircles" settings.getShowCategoriesAsCircles()?? && settings.getShowCategoriesAsCircles()/>
                 </div>
                 <div class="table-cell table-cell-spacer"></div>
@@ -25,9 +23,6 @@
                     <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.updates.automatic.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>