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

Add breadcrumb

Browse source
This commit is contained in:
Oliver Davies 2019-04-09 01:37:07 +01:00
parent 48b6e297f8
commit 617955e084
5 changed files with 88 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
src/components/AppBreadcrumb.vue Normal file
View file

@ -0,0 +1,67 @@
<template>
<div>
<ul class="flex -ml-3">
<li class="flex items-center ml-3">
<div class="flex flex-col-reverse">
<span class="uppercase text-sm">Organisation</span>
<span class="font-bold block mb-1" v-text="selectedOrganisation"></span>
</div>
<svg class="ml-3" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M5.94 19.73L15.6 10 5.94.27A.88.88 0 0 0 5.3 0a.89.89 0 0 0-.65 1.51L13.06 10l-8.41 8.49a.89.89 0 0 0 1.29 1.24z"/></svg>
</li>
<li class="flex items-center ml-3">
<div class="flex flex-col-reverse">
<span class="uppercase text-sm">Application</span>
<span class="font-bold block mb-1" v-text="selectedApplication"></span>
</div>
<svg class="ml-3" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M5.94 19.73L15.6 10 5.94.27A.88.88 0 0 0 5.3 0a.89.89 0 0 0-.65 1.51L13.06 10l-8.41 8.49a.89.89 0 0 0 1.29 1.24z"/></svg>
</li>
<li class="flex items-center ml-3">
<div class="flex flex-col-reverse">
<span class="uppercase text-sm">Environment</span>
<span class="font-bold block mb-1">{{ selectedEnvironment || '--' }}</span>
</div>
<svg class="ml-3" xmlns="http://www.w3.org/2000/svg" width="20" height="20"><path d="M19 4.5l-9 11-9-11h18z"/></svg>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
application: Object,
environment: {
type: Object,
required: false
}
},
computed: {
selectedApplication: function () {
if (!this.application) {
return 'All'
}
return this.application.name
},
selectedEnvironment: function () {
if (!this.environment) {
return null
}
return this.environment.name
},
selectedOrganisation: function () {
if (!this.application) {
return 'All'
}
return 'Rebuilding Acquia'
}
}
}
</script>

20
src/components/TitleBlock.vue
View file

@ -2,10 +2,28 @@
<div class="border-b-3 border-grey-300">
<div class="bg-white px-4 lg:px-6 py-5 border-t border-grey-200 flex justify-between items-center">
<div class="w-full md:w-auto flex flex-col">
<slot name="left"></slot>
<app-breadcrumb :application="application" :environment="environment"></app-breadcrumb>
</div>
<slot name="right"></slot>
</div>
</div>
</template>
<script>
import AppBreadcrumb from '@/components/AppBreadcrumb'
export default {
props: {
application: Object,
environment: {
type: Object,
required: false
}
},
components: {
AppBreadcrumb
}
}
</script>

4
src/views/Applications.vue
View file

@ -4,10 +4,6 @@
<navbar></navbar>
<title-block>
<template slot="left">
<div class="text-2xl font-hairline mr-2">Applications</div>
</template>
<template slot="right">
<header-buttons :links="[
{ title: 'Add Application', icon: 'alpha__new-app', disabled: false },

23
src/views/Environment.vue
View file

@ -3,28 +3,7 @@
<div class="fixed top-0 w-full z-30">
<navbar></navbar>
<title-block>
<template slot="left">
<div class="text-xs mb-3">
<ol class="list-reset flex">
<li class="flex items-center pr-1">
<router-link to="/" class="text-blue-300 no-underline hover:underline mr-1">Applications</router-link>
<svg class="w-3 h-3 fill-current text-grey" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg>
</li>
<li class="flex items-center pr-1">
<router-link :to="{ name: 'environments' }" class="text-blue-300 no-underline hover:underline mr-1">{{ application.name }}</router-link>
<svg class="w-3 h-3 fill-current text-grey" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg>
</li>
<li>{{ environment.name }}</li>
</ol>
</div>
<button class="flex flex-1 items-center justify-between md:justify-start">
<div class="text-2xl font-hairline">{{ application.name }} : {{ environment.name }}</div>
<svg class="h-6 w-6 text-blue-300 fill-current ml-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__down-arrow"></use></svg>
</button>
</template>
<title-block :application="application" :environment="environment">
<template slot="right">
<header-buttons :links="[
!isProduction ? { title: 'Install Drupal', icon: 'actions__upload', disabled: false } : {},

19
src/views/Environments.vue
View file

@ -3,24 +3,7 @@
<div class="fixed top-0 w-full z-30">
<navbar></navbar>
<title-block>
<template slot="left">
<div class="text-xs mb-3">
<ol class="list-reset flex">
<li class="flex items-center pr-1">
<router-link to="/" class="text-blue-300 no-underline hover:underline mr-1">Applications</router-link>
<svg class="w-3 h-3 fill-current text-grey" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg>
</li>
<li>{{ application.name }}</li>
</ol>
</div>
<button class="flex flex-1 items-center justify-between md:justify-start">
<div class="text-2xl font-hairline mr-2">{{ application.name }}</div>
<svg class="h-6 w-6 text-blue-300 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__down-arrow"></use></svg>
</button>
</template>
<title-block :application="application">
<template slot="right">
<div class="flex items-center">
<div class="hidden md:block">