From 6e18a91d1fc05e936e9c917e4958583f2c22dce3 Mon Sep 17 00:00:00 2001
From: Richard Bowman <richard.bowman@cantab.net>
Date: Wed, 17 Jan 2024 11:28:36 +0000
Subject: [PATCH] Hide background detect settings in an accordion

Feedback from clinicians is that this tab was too busy. This commit hides all but the two essential buttons.
---
 .../paneBackgroundDetect.vue                  | 57 +++++++++++--------
 1 file changed, 32 insertions(+), 25 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
index 1c9ba84d..b6af91d9 100644
--- a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
+++ b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
@@ -4,6 +4,37 @@
       The background detect Thing seems to be missing or incompatible.
     </div>
     <div v-show="backendOK">
+      <ul uk-accordion="multiple: true">
+          <li>
+            <a class="uk-accordion-title" href="#">Settings</a>
+            <div class="uk-accordion-content">
+              <div class="uk-margin">
+                <propertyControl
+                  thing-name="background_detect"
+                  property-name="tolerance"
+                  label="Tolerance"
+                />
+              </div>
+              <div class="uk-margin">
+                <propertyControl
+                  thing-name="background_detect"
+                  property-name="fraction"
+                  label="Sample coverage required (%)"
+                />
+              </div>
+              <div class="uk-margin">
+                <taskSubmitter
+                  :submit-url="backgroundFractionUri"
+                  submit-label="Check current image"
+                  :can-terminate="false"
+                  :poll-interval="0.1"
+                  @response="alertBackgroundFraction"
+                  @error="backgroundDetectError"
+                />
+              </div>
+            </div>
+          </li>
+        </ul>
       <div class="uk-margin">
         <taskSubmitter
           :submit-url="setBackgroundUri"
@@ -13,34 +44,10 @@
           @response="alertBackgroundSet"
         />
       </div>
-      <div class="uk-margin">
-        <propertyControl
-          thing-name="background_detect"
-          property-name="tolerance"
-          label="Tolerance"
-        />
-      </div>
-      <div class="uk-margin">
-        <propertyControl
-          thing-name="background_detect"
-          property-name="fraction"
-          label="Sample coverage required (%)"
-        />
-      </div>
-      <div class="uk-margin">
-        <taskSubmitter
-          :submit-url="backgroundFractionUri"
-          submit-label="Check current image"
-          :can-terminate="false"
-          :poll-interval="0.1"
-          @response="alertBackgroundFraction"
-          @error="backgroundDetectError"
-        />
-      </div>
       <div class="uk-margin">
         <taskSubmitter
           :submit-url="labelImageUri"
-          submit-label="Label current image"
+          submit-label="Check current image"
           :can-terminate="false"
           :poll-interval="0.1"
           @response="alertImageLabel"