Merge branch 'breadcrumb'

src/components/AppBreadcrumb.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <ul class="flex -ml-3">
+      <li class="flex items-center ml-3">
+        <div class="flex flex-col-reverse">
+          <span class="text-grey-700 uppercase text-sm">Organisation</span>
+          <span v-if="!selectedOrganisation" class="font-bold block mb-1">All</span>
+          <router-link v-else :to="{name: 'applications'}" class="font-bold block mb-1 hover:text-blue-400" v-text="selectedOrganisation"></router-link>
+        </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="text-grey-700 uppercase text-sm">Application</span>
+          <span v-if="!selectedOrganisation" class="font-bold block mb-1">All</span>
+          <router-link v-else :to="{name: 'environments'}" class="font-bold block mb-1 hover:text-blue-400" v-text="selectedApplication"></router-link>
+        </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="text-grey-700 uppercase text-sm">Environment</span>
+          <span class="font-bold block mb-1">{{ selectedEnvironment || '--' }}</span>
+        </div>
+      </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.application) {
+        return null
+      }
+
+      if (!this.environment) {
+        return 'All'
+      }
+
+      return this.environment.name
+    },
+
+    selectedOrganisation: function () {
+      if (!this.application) {
+        return null
+      }
+
+      return 'Rebuilding Acquia'
+    }
+  }
+}
+</script>

src/components/TitleBlock.vue

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

src/views/Applications.vue

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

src/views/Environment.vue

@@ -3,28 +3,7 @@
     <div class="fixed top-0 w-full z-30">
       <navbar></navbar>
 
-      <title-block>
+      <title-block :application="application" :environment="environment">
-        <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>
-
         <template slot="right">
           <header-buttons :links="[
             !isProduction ? { title: 'Install Drupal', icon: 'actions__upload', disabled: false } : {},

src/views/Environments.vue

@@ -3,24 +3,7 @@
     <div class="fixed top-0 w-full z-30">
       <navbar></navbar>
 
-      <title-block>
+      <title-block :application="application">
-        <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>
-
         <template slot="right">
           <div class="flex items-center">
             <div class="hidden md:block">