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>
<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 v-if="interacted" class="button is-tiny">
<i :class="`fas fa-angle-${expanded ? 'up' : 'down'}`"></i>
</a>
<a v-else class="button is-tiny" @click="expanded = true">
<i class="fas fa-angle-down"></i>
</a>
</template>
</div>
<template v-if="!$parent.$props.data.hasUserInteraction || expanded">
@ -173,7 +168,12 @@ THE SOFTWARE.
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>