opdavies/rebuilding-acquia
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Toggle quick help

Browse source
This commit is contained in:
Oliver Davies 2018-12-21 23:02:15 +00:00
parent 00e1905c17
commit 8f31c7bd72
3 changed files with 27 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/Environments.vue
View file

@ -81,10 +81,7 @@
</div> </div>
<div class="flex-1"> <div class="flex-1">
<button type="button" class="text-blue text-sm font-hairline flex items-center hover:underline focus:underline"> <toggle-help @toggle="help.hidden = !help.hidden" :hidden="help.hidden"></toggle-help>
<svg class="h-5 w-5 mr-1 text-blue-dark fill-current" role="presentation"><use xlink:href="icons.symbol.svg#actions__info"></use></svg>
Hide quick help
</button>
</div> </div>
</div> </div>
@ -103,7 +100,7 @@
</div> </div>
</div> </div>
<quick-help></quick-help> <quick-help :hidden="help.hidden"></quick-help>
<environment-cards></environment-cards> <environment-cards></environment-cards>
<task-log></task-log> <task-log></task-log>
</div> </div>
@ -142,20 +139,25 @@
</template> </template>
<script> <script>
import QuickHelp from './QuickHelp'
import EnvironmentCards from './EnvironmentCards' import EnvironmentCards from './EnvironmentCards'
import QuickHelp from './QuickHelp'
import TaskLog from './TaskLog' import TaskLog from './TaskLog'
import ToggleHelp from './ToggleHelp'
export default { export default {
components: { components: {
EnvironmentCards, EnvironmentCards,
QuickHelp, QuickHelp,
TaskLog, TaskLog,
ToggleHelp,
}, },
data() { data() {
return { return {
name: 'Rebuilding Acquia', name: 'Rebuilding Acquia',
help: {
hidden: false,
}
} }
} }
} }

6
src/components/QuickHelp.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="bg-white border-t-10 border-purple flex mb-6"> <div class="bg-white border-t-10 border-purple mb-6" :class="[hidden ? 'hidden' : 'flex']">
<div class="flex-none py-3 pl-3 pr-8 border-r border-grey-lighter"> <div class="flex-none py-3 pl-3 pr-8 border-r border-grey-lighter">
<div class="flex items-center"> <div class="flex items-center">
<svg class="h-6 w-6 mr-1 text-purple fill-current" role="presentation"><use xlink:href="icons.symbol.svg#actions__info"></use></svg> <svg class="h-6 w-6 mr-1 text-purple fill-current" role="presentation"><use xlink:href="icons.symbol.svg#actions__info"></use></svg>
@ -29,6 +29,10 @@
<script> <script>
export default { export default {
props: {
hidden: Boolean,
},
data() { data() {
return { return {
selected: 0, selected: 0,

14
src/components/ToggleHelp.vue Normal file
View file

@ -0,0 +1,14 @@
<template>
<button type="button" class="text-blue text-sm font-hairline flex items-center hover:underline focus:underline focus:outline-none" @click="$emit('toggle')">
<svg class="h-5 w-5 mr-1 text-blue-dark fill-current" role="presentation"><use xlink:href="icons.symbol.svg#actions__info"></use></svg>
{{ hidden ? 'Show quick help' : 'Hide quick help' }}
</button>
</template>
<script>
export default {
props: {
hidden: Boolean,
},
}
</script>