JS + CSS

Author: mlojewski-me

css/settings.css

@@ -33,6 +33,23 @@
     float: right;
 }
 
+#user_sql .main .inner-fieldset {
+    border-bottom: 1px solid var(--color-border);
+    border-top: 1px solid var(--color-border);
+    margin: 16px 0;
+    padding: 8px 32px;
+}
+
+#user_sql .main .inner-fieldset > legend {
+    background-color: var(--color-background-dark);
+    border-radius: var(--border-radius-pill);
+    border: 1px solid var(--color-border-dark);
+    color: var(--color-text-lighter);
+    font-size: 11px;
+    font-weight: bold;
+    padding: 3px 6px;
+}
+
 #user_sql .msg {
     left: 0;
     padding: 3px;
@@ -43,18 +60,18 @@
 }
 
 #user_sql .msg.error {
-    background-color: #d2322d;
-    color: #fff;
+    background-color: var(--color-error);
+    color: var(--color-primary-text);
 }
 
 #user_sql .msg.success {
-    background-color: #47a447;
-    color: #fff;
+    background-color: var(--color-success);
+    color: var(--color-primary-text);
 }
 
 #user_sql .msg.waiting {
-    background-color: #ff8f00;
-    color: #fff;
+    background-color: var(--color-warning);
+    color: var(--color-primary-text);
 }
 
 #user_sql .loading {

js/settings.js

@@ -60,33 +60,33 @@ user_sql.adminSettingsUI = function () {
 
         var cryptoParams = function () {
             var cryptoChanged = function () {
-                var div = $("#opt-crypto_params");
-                div.empty();
-                div.append("<span class=\"icon loading\"></span>");
-
-                var cryptoClass = $("#opt-crypto_class").val();
-                $.get(OC.generateUrl("/apps/user_sql/settings/crypto/params"), cryptoClass, function (data) {
-                    div.empty();
-                    if (data.status === "success") {
-                        for (var index = 0, length = data.data.length; index < length; ++index) {
-                            div.append("<div><label for=\"opt-crypto_param_"
-                                + index
-                                + "\"><span>"
-                                + data.data[index]["name"]
-                                + "</span><input type=\"number\" id=\"opt-crypto_param_"
-                                + index
-                                + "\" name=\"opt-crypto_param_"
-                                + index
-                                + "\" step=\"1\" min=\""
-                                + data.data[index]["min"]
-                                + "\" max=\""
-                                + data.data[index]["max"]
-                                + "\" value=\""
-                                + data.data[index]["value"]
-                                + "\"></label></div>");
+                var content = $("#opt-crypto_params_content");
+                var loading = $("#opt-crypto_params_loading");
+
+                content.hide();
+                loading.show();
+
+                $.get(OC.generateUrl("/apps/user_sql/settings/crypto/params"), {cryptoClass: $("#opt-crypto_class").val()},
+                    function (data) {
+                        content.empty();
+                        loading.hide();
+
+                        if (data.status === "success") {
+                            if (data.data.length > 0) {
+                                content.append("<legend>" + $("#opt-crypto_class option:selected").text() + "</legend>")
+                            }
+                            for (var index = 0, length = data.data.length; index < length; ++index) {
+                                content.append("<div><label for=\"opt-crypto_param_" + index
+                                    + "\"><span>" + data.data[index]["name"]
+                                    + "</span><input type=\"number\" id=\"opt-crypto_param_"
+                                    + index + "\" name=\"opt-crypto_param_" + index
+                                    + "\" step=\"1\" min=\"" + data.data[index]["min"] + "\" max=\""
+                                    + data.data[index]["max"] + "\" value=\"" + data.data[index]["value"]
+                                    + "\"></label></div>");
+                                content.show();
+                            }
                         }
-                    }
-                }, "json");
+                    }, "json");
             };
             $("#opt-crypto_class").change(function () {
                 cryptoChanged();

templates/admin.php

@@ -132,7 +132,10 @@ function print_select_options(
                 }
 
                 print_select_options($l, "opt-crypto_class", "Hash algorithm", $hashes, $_["opt.crypto_class"]); ?>
-                <div id="opt-crypto_params"></div>
+                <div id="opt-crypto_params_loading" style="display: none">
+                    <span class="icon loading"></span>
+                </div>
+                <fieldset id="opt-crypto_params_content" class="inner-fieldset" style="display: none"></fieldset>
                 <?php
                 print_select_options($l, "opt-email_sync", "Email sync", ["" => "None", "initial" => "Synchronise only once", "force_nc"=>"Nextcloud always wins", "force_sql"=>"SQL always wins"], $_["opt.email_sync"]);
                 print_select_options($l, "opt-quota_sync", "Quota sync", ["" => "None", "initial" => "Synchronise only once", "force_nc"=>"Nextcloud always wins", "force_sql"=>"SQL always wins"], $_["opt.quota_sync"]);