Make entire presets header the collapse click target

pull/159/head
MattIPv4 2020-06-09 17:02:05 +01:00
parent 5502c8c6bb
commit 6cfaf24d00
1 changed files with 24 additions and 19 deletions

View File

@ -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>