github
/
nginxconfig.io
mirror of https://github.com/digitalocean/nginxconfig.io
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/nginxconfig/templates/domain_sections/presets.vue
View File

@ -26,16 +26,11 @@ THE SOFTWARE.
<template> <template>
<div class="container"> <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> <h3>{{ i18n.templates.domainSections.presets.presets }}</h3>
<template v-if="$parent.$props.data.hasUserInteraction"> <a v-if="interacted" class="button is-tiny">
<a v-if="expanded" class="button is-tiny" @click="expanded = false"> <i :class="`fas fa-angle-${expanded ? 'up' : 'down'}`"></i>
<i class="fas fa-angle-up"></i>
</a> </a>
<a v-else class="button is-tiny" @click="expanded = true">
<i class="fas fa-angle-down"></i>
</a>
</template>
</div> </div>
<template v-if="!$parent.$props.data.hasUserInteraction || expanded"> <template v-if="!$parent.$props.data.hasUserInteraction || expanded">
@ -173,7 +168,12 @@ THE SOFTWARE.
expanded: false, 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: { watch: {
// When any data changes, check if it still matches a preset // When any data changes, check if it still matches a preset
'$parent.$props.data': { '$parent.$props.data': {
@ -246,6 +246,11 @@ THE SOFTWARE.
break; break;
} }
}, },
toggleCollapse() {
if (this.interacted) {
this.expanded = !this.expanded;
}
},
}, },
}; };
</script> </script>