From 45cdfb03932377fdd495dcda647a6d39303ce698 Mon Sep 17 00:00:00 2001
From: Luke Glasscock <luke.glasscock@ascellatech.com>
Date: Fri, 8 Jan 2021 16:47:12 -0700
Subject: [PATCH] Add ability to pass component to Header as prop
---
src/components/ADCE/HeaderSubtextTooltip.vue | 14 ++++++++++++++
src/components/PageHeader.vue | 8 ++++++--
src/views/ADCE.vue | 4 +++-
3 files changed, 23 insertions(+), 3 deletions(-)
create mode 100644 src/components/ADCE/HeaderSubtextTooltip.vue
diff --git a/src/components/ADCE/HeaderSubtextTooltip.vue b/src/components/ADCE/HeaderSubtextTooltip.vue
new file mode 100644
index 00000000..3f0e58ac
--- /dev/null
+++ b/src/components/ADCE/HeaderSubtextTooltip.vue
@@ -0,0 +1,14 @@
+<template>
+ <span>
+ <Tooltip text="ABMS" tooltip="Advanced Battle Management System" light />
+ <Tooltip text="ADCE" tooltip="All Domain Common Environment" light />
+ </span>
+</template>
+
+<script>
+import Tooltip from "@/components/Base/Tooltip.vue";
+export default {
+ components: { Tooltip },
+};
+</script>
+<style></style>
diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue
index 376423f2..3304ae19 100644
--- a/src/components/PageHeader.vue
+++ b/src/components/PageHeader.vue
@@ -35,10 +35,13 @@
: 'col-md-9 py-0 mt-md-n10'
"
>
- <div v-if="subtext">
- <h2 class="subtext">
+ <div v-if="subtext || subtextComponent">
+ <h2 class="subtext" v-if="subtext">
{{ subtext }}
</h2>
+ <h2 class="subtext" v-if="subtextComponent">
+ <component v-bind:is="subtextComponent" />
+ </h2>
</div>
<div class="py-0">
<h1 class="my-0">
@@ -105,6 +108,7 @@ export default {
displaySearch: Boolean,
onChangeSearch: Function,
hideBreadcrumbs: Boolean,
+ subtextComponent: Object,
},
components: { Breadcrumb },
data() {
diff --git a/src/views/ADCE.vue b/src/views/ADCE.vue
index 21e22f99..188015d1 100644
--- a/src/views/ADCE.vue
+++ b/src/views/ADCE.vue
@@ -2,7 +2,7 @@
<div class="adce">
<PageHeader
title="The Party Bus"
- subtext="ABMS ADCE"
+ :subtextComponent="headerSubtextTooltip"
description="The environment and services you need to develop and deploy your software application"
:logoSource="pbLogo"
/>
@@ -249,6 +249,7 @@ import PairedProgrammingIcon from "@/assets/images/icons/Icon_PairedProgramming.
import TestDrivenDevelopmentIcon from "@/assets/images/icons/Icon_TestDrivenDevelopment.svg";
import PBGraphicsProcess from "@/assets/images/party-bus/Party_Bus_Graphics_Process.png";
import DownloadButton from "@/components/Base/DownloadButton";
+import HeaderSubtextTooltip from "@/components/ADCE/HeaderSubtextTooltip";
export default {
name: "ADCE",
@@ -281,6 +282,7 @@ export default {
return {
currentTab: "",
pbLogo: PBLogo,
+ headerSubtextTooltip: HeaderSubtextTooltip,
pbGraphicsProcess: PBGraphicsProcess,
// lightbox state
lightbox: {
--
GitLab