From 6cfaf24d00f8ded93be5aa7d1ca89963b05ed541 Mon Sep 17 00:00:00 2001
From: MattIPv4 <me@mattcowley.co.uk>
Date: Tue, 9 Jun 2020 17:02:05 +0100
Subject: [PATCH] Make entire presets header the collapse click target

---
 .../templates/domain_sections/presets.vue     | 43 +++++++++++--------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/nginxconfig/templates/domain_sections/presets.vue b/src/nginxconfig/templates/domain_sections/presets.vue
index d8fa681..f0cb931 100644
--- a/src/nginxconfig/templates/domain_sections/presets.vue
+++ b/src/nginxconfig/templates/domain_sections/presets.vue
@@ -26,16 +26,11 @@ THE SOFTWARE.
 
 <template>
     <div class="container">
-        <div class="header-group">
+        <div class="header-group" :style="{ cursor: interacted ? 'pointer' : undefined }" @click="toggleCollapse">
             <h3>{{ i18n.templates.domainSections.presets.presets }}</h3>
-            <template v-if="$parent.$props.data.hasUserInteraction">
-                <a v-if="expanded" class="button is-tiny" @click="expanded = false">
-                    <i class="fas fa-angle-up"></i>
-                </a>
-                <a v-else class="button is-tiny" @click="expanded = true">
-                    <i class="fas fa-angle-down"></i>
-                </a>
-            </template>
+            <a v-if="interacted" class="button is-tiny">
+                <i :class="`fas fa-angle-${expanded ? 'up' : 'down'}`"></i>
+            </a>
         </div>
 
         <template v-if="!$parent.$props.data.hasUserInteraction || expanded">
@@ -67,7 +62,7 @@ THE SOFTWARE.
             default: false,
             display: i18n.templates.domainSections.presets.frontend,
             enabled: true,
-            computedCheck (data) {
+            computedCheck(data) {
                 return !data.php.php.computed
                     && !data.python.python.computed
                     && !data.reverseProxy.reverseProxy.computed
@@ -79,7 +74,7 @@ THE SOFTWARE.
             default: true,
             display: i18n.common.php,
             enabled: true,
-            computedCheck (data) {
+            computedCheck(data) {
                 return data.php.php.computed
                     && data.routing.index.computed === 'index.php'
                     && data.routing.fallbackPhp.computed
@@ -93,7 +88,7 @@ THE SOFTWARE.
             default: false,
             display: i18n.common.django,
             enabled: true,
-            computedCheck (data) {
+            computedCheck(data) {
                 return data.python.python.computed
                     && data.python.djangoRules.computed
                     && !data.routing.root.computed;
@@ -103,7 +98,7 @@ THE SOFTWARE.
             default: false,
             display: i18n.templates.domainSections.presets.nodeJs,
             enabled: true,
-            computedCheck (data) {
+            computedCheck(data) {
                 return data.reverseProxy.reverseProxy.computed
                     && !data.routing.root.computed;
             },
@@ -112,7 +107,7 @@ THE SOFTWARE.
             default: false,
             display: i18n.templates.domainSections.presets.singlePageApplication,
             enabled: true,
-            computedCheck (data) {
+            computedCheck(data) {
                 return data.php.php.computed
                     && data.routing.index.computed === 'index.html'
                     && data.routing.fallbackHtml.computed;
@@ -122,7 +117,7 @@ THE SOFTWARE.
             default: false,
             display: i18n.common.wordPress,
             enabled: true,
-            computedCheck (data) {
+            computedCheck(data) {
                 return data.routing.index.computed === 'index.php'
                     && data.routing.fallbackPhp.computed
                     && !data.routing.fallbackHtml.computed
@@ -135,7 +130,7 @@ THE SOFTWARE.
             default: false,
             display: i18n.common.drupal,
             enabled: true,
-            computedCheck (data) {
+            computedCheck(data) {
                 return data.routing.index.computed === 'index.php'
                     && data.routing.fallbackPhp.computed
                     && !data.routing.fallbackHtml.computed
@@ -148,7 +143,7 @@ THE SOFTWARE.
             default: false,
             display: i18n.common.magento,
             enabled: true,
-            computedCheck (data) {
+            computedCheck(data) {
                 return data.routing.index.computed === 'index.php'
                     && data.routing.fallbackPhp.computed
                     && !data.routing.fallbackHtml.computed
@@ -167,13 +162,18 @@ THE SOFTWARE.
         props: {
             data: Object,                                           // Data delegated back to us from parent
         },
-        data () {
+        data() {
             return {
                 i18n,
                 expanded: false,
             };
         },
-        computed: computedFromDefaults(defaults, 'presets', false), // Getters & setters for the delegated data
+        computed: {
+            ...computedFromDefaults(defaults, 'presets', false),    // Getters & setters for the delegated data
+            interacted() {
+                return this.$parent.$props.data.hasUserInteraction;
+            },
+        },
         watch: {
             // When any data changes, check if it still matches a preset
             '$parent.$props.data': {
@@ -246,6 +246,11 @@ THE SOFTWARE.
                     break;
                 }
             },
+            toggleCollapse() {
+                if (this.interacted) {
+                    this.expanded = !this.expanded;
+                }
+            },
         },
     };
 </script>