Skip to content

Commit 66fe537

Browse files
rlorenzorlorenzo
committed
refactor(layouts): share chrome components across Vue and Razor layouts
Extract EmulationBanner, FooterLinks, and ViperBrandButton from the ViperLayout/ViperLayoutSimple pair so both Vue layouts render identical header badges, emulation indicator, and footer links from a single source. Apply the same pattern on the Razor side: introduce an EmulationBanner ViewComponent used by _VIPERLayout and VIPERLayoutSimplified. Use a raw q-banner (matching the Razor markup) in the Vue EmulationBanner and align .mainLayoutViperMode spacing with site.css so the environment badge sits at the same height on both stacks.
1 parent d0f8ba0 commit 66fe537

10 files changed

Lines changed: 155 additions & 194 deletions

File tree

‎VueApp/src/layouts/EmulationBanner.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script setup lang="ts">
2+
import { useUserStore } from "@/store/UserStore"
3+
4+
const userStore = useUserStore()
5+
const clearEmulationHref = import.meta.env.VITE_VIPER_HOME + "ClearEmulation"
6+
</script>
7+
8+
<template>
9+
<q-banner
10+
v-if="userStore.isEmulating"
11+
dense
12+
rounded
13+
inline-actions
14+
class="bg-warning text-black q-ml-lg"
15+
>
16+
<strong>EMULATING:</strong>
17+
{{ userStore.userInfo.firstName }} {{ userStore.userInfo.lastName }}
18+
<q-btn
19+
no-caps
20+
dense
21+
:href="clearEmulationHref"
22+
color="secondary"
23+
class="text-white q-px-sm q-ml-md"
24+
>End Emulation</q-btn
25+
>
26+
</q-banner>
27+
</template>

‎VueApp/src/layouts/FooterLinks.vue‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<a
3+
href="https://svmithelp.vetmed.ucdavis.edu/"
4+
target="_blank"
5+
rel="noopener"
6+
class="text-primary"
7+
>
8+
<q-icon
9+
color="primary"
10+
name="help_center"
11+
size="xs"
12+
aria-hidden="true"
13+
></q-icon>
14+
SVM-IT ServiceDesk
15+
<span class="sr-only">(opens in new window)</span>
16+
</a>
17+
<span class="text-primary q-px-sm">|</span>
18+
<a
19+
href="https://www.vetmed.ucdavis.edu/"
20+
target="_blank"
21+
rel="noopener"
22+
class="text-primary"
23+
>
24+
<q-icon
25+
color="primary"
26+
name="navigation"
27+
size="xs"
28+
aria-hidden="true"
29+
></q-icon>
30+
SVM Home
31+
<span class="sr-only">(opens in new window)</span>
32+
</a>
33+
<span class="text-primary q-px-sm">|</span>
34+
<a
35+
href="https://www.ucdavis.edu/"
36+
target="_blank"
37+
rel="noopener"
38+
class="text-primary"
39+
>
40+
<q-icon
41+
color="primary"
42+
name="school"
43+
size="xs"
44+
aria-hidden="true"
45+
></q-icon>
46+
UC Davis
47+
<span class="sr-only">(opens in new window)</span>
48+
</a>
49+
</template>

‎VueApp/src/layouts/ViperBrandButton.vue‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<script setup lang="ts">
2+
withDefaults(
3+
defineProps<{
4+
className?: string
5+
}>(),
6+
{
7+
className: "gt-sm text-white q-py-none q-ml-md self-end",
8+
},
9+
)
10+
11+
const environment = import.meta.env.VITE_ENVIRONMENT
12+
const viperHome = import.meta.env.VITE_VIPER_HOME
13+
</script>
14+
15+
<template>
16+
<q-btn
17+
flat
18+
dense
19+
no-caps
20+
:class="className"
21+
:href="viperHome"
22+
>
23+
<span class="mainLayoutViper">VIPER 2.0</span>
24+
<q-badge
25+
v-if="environment == 'DEVELOPMENT'"
26+
color="negative"
27+
role="presentation"
28+
class="mainLayoutViperMode"
29+
>Development</q-badge
30+
>
31+
<q-badge
32+
v-if="environment == 'TEST'"
33+
color="negative"
34+
role="presentation"
35+
class="mainLayoutViperMode"
36+
>Test</q-badge
37+
>
38+
</q-btn>
39+
</template>

‎VueApp/src/layouts/ViperLayout.vue‎

Lines changed: 6 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -97,48 +97,9 @@
9797
</q-btn>
9898

9999
<!--For medium+ screens-->
100-
<q-btn
101-
flat
102-
dense
103-
no-caps
104-
class="gt-sm text-white q-py-none q-ml-md self-end"
105-
:href="viperHome"
106-
>
107-
<span class="mainLayoutViper">VIPER 2.0</span>
108-
<q-badge
109-
v-if="environment == 'DEVELOPMENT'"
110-
color="negative"
111-
role="presentation"
112-
class="mainLayoutViperMode"
113-
>Development</q-badge
114-
>
115-
<q-badge
116-
v-if="environment == 'TEST'"
117-
color="negative"
118-
role="presentation"
119-
class="mainLayoutViperMode"
120-
>Test</q-badge
121-
>
122-
</q-btn>
100+
<ViperBrandButton />
123101

124-
<q-banner
125-
v-if="userStore.isEmulating"
126-
dense
127-
rounded
128-
inline-actions
129-
class="bg-warning text-black q-ml-lg"
130-
>
131-
<strong>EMULATING:</strong>
132-
{{ userStore.userInfo.firstName }} {{ userStore.userInfo.lastName }}
133-
<q-btn
134-
no-caps
135-
dense
136-
:href="clearEmulationHref"
137-
color="secondary"
138-
class="text-white q-px-sm q-ml-md"
139-
>End Emulation</q-btn
140-
>
141-
</q-banner>
102+
<EmulationBanner />
142103

143104
<q-space></q-space>
144105

@@ -220,53 +181,7 @@
220181
id="footerNavLinks"
221182
>
222183
<div class="col-12 col-md q-pl-md">
223-
<a
224-
href="https://svmithelp.vetmed.ucdavis.edu/"
225-
target="_blank"
226-
rel="noopener"
227-
class="text-primary"
228-
>
229-
<q-icon
230-
color="primary"
231-
name="help_center"
232-
size="xs"
233-
aria-hidden="true"
234-
></q-icon>
235-
SVM-IT ServiceDesk
236-
<span class="sr-only">(opens in new window)</span>
237-
</a>
238-
<span class="text-primary q-px-sm">|</span>
239-
<a
240-
href="https://www.vetmed.ucdavis.edu/"
241-
target="_blank"
242-
rel="noopener"
243-
class="text-primary"
244-
>
245-
<q-icon
246-
color="primary"
247-
name="navigation"
248-
size="xs"
249-
aria-hidden="true"
250-
></q-icon>
251-
SVM Home
252-
<span class="sr-only">(opens in new window)</span>
253-
</a>
254-
<span class="text-primary q-px-sm">|</span>
255-
<a
256-
href="https://www.ucdavis.edu/"
257-
target="_blank"
258-
rel="noopener"
259-
class="text-primary"
260-
>
261-
<q-icon
262-
color="primary"
263-
name="school"
264-
size="xs"
265-
aria-hidden="true"
266-
></q-icon>
267-
UC Davis
268-
<span class="sr-only">(opens in new window)</span>
269-
</a>
184+
<FooterLinks />
270185
</div>
271186
<div class="col-12 col-md-auto gt-sm text-black">
272187
&copy; {{ currentYear }} School of Veterinary Medicine
@@ -285,6 +200,9 @@ import LeftNav from "@/layouts/LeftNav.vue"
285200
import MainNav from "@/layouts/MainNav.vue"
286201
import MiniNav from "@/layouts/MiniNav.vue"
287202
import ProfilePic from "@/layouts/ProfilePic.vue"
203+
import EmulationBanner from "@/layouts/EmulationBanner.vue"
204+
import FooterLinks from "@/layouts/FooterLinks.vue"
205+
import ViperBrandButton from "@/layouts/ViperBrandButton.vue"
288206
import SessionTimeout from "@/components/SessionTimeout.vue"
289207
290208
type BreadCrumb = {
@@ -302,7 +220,6 @@ defineProps<{
302220
303221
const userStore = useUserStore()
304222
const mainLeftDrawer = ref(false)
305-
const clearEmulationHref = import.meta.env.VITE_VIPER_HOME + "ClearEmulation"
306223
const environment = import.meta.env.VITE_ENVIRONMENT
307224
const viperHome = import.meta.env.VITE_VIPER_HOME
308225
const loginHref = getLoginUrl()

‎VueApp/src/layouts/ViperLayoutSimple.vue‎

Lines changed: 7 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<script setup lang="ts">
2-
import { ref } from "vue"
32
import { useUserStore } from "@/store/UserStore"
43
import ProfilePic from "@/layouts/ProfilePic.vue"
4+
import EmulationBanner from "@/layouts/EmulationBanner.vue"
5+
import FooterLinks from "@/layouts/FooterLinks.vue"
6+
import ViperBrandButton from "@/layouts/ViperBrandButton.vue"
57
import SessionTimeout from "@/components/SessionTimeout.vue"
68
79
type BreadCrumb = {
@@ -16,8 +18,7 @@ const props = defineProps<{
1618
}>()
1719
1820
const userStore = useUserStore()
19-
const clearEmulationHref = ref(import.meta.env.VITE_VIPER_HOME + "ClearEmulation")
20-
const environment = ref(import.meta.env.VITE_ENVIRONMENT)
21+
const environment = import.meta.env.VITE_ENVIRONMENT
2122
const viperHome = import.meta.env.VITE_VIPER_HOME
2223
const currentYear = new Date().getFullYear()
2324
</script>
@@ -100,29 +101,7 @@ const currentYear = new Date().getFullYear()
100101
width="201"
101102
height="36"
102103
/></a>
103-
<q-btn
104-
flat
105-
dense
106-
no-caps
107-
class="gt-sm self-end"
108-
:href="viperHome"
109-
>
110-
<span class="mainLayoutViper">VIPER 2.0</span>
111-
<q-badge
112-
v-if="environment == 'DEVELOPMENT'"
113-
color="negative"
114-
role="presentation"
115-
class="mainLayoutViperMode"
116-
>Development</q-badge
117-
>
118-
<q-badge
119-
v-if="environment == 'TEST'"
120-
color="negative"
121-
role="presentation"
122-
class="mainLayoutViperMode"
123-
>Test</q-badge
124-
>
125-
</q-btn>
104+
<ViperBrandButton class-name="gt-sm self-end" />
126105

127106
<div class="breadcrumbs self-end q-ml-lg q-pb-xs row">
128107
<span
@@ -143,24 +122,7 @@ const currentYear = new Date().getFullYear()
143122
</span>
144123
</div>
145124

146-
<q-banner
147-
v-if="userStore.isEmulating"
148-
dense
149-
rounded
150-
inline-actions
151-
class="bg-warning text-black q-ml-lg"
152-
>
153-
<strong>EMULATING:</strong>
154-
{{ userStore.userInfo.firstName }} {{ userStore.userInfo.lastName }}
155-
<q-btn
156-
no-caps
157-
dense
158-
:href="clearEmulationHref"
159-
color="secondary"
160-
class="text-white q-px-sm q-ml-md"
161-
>End Emulation</q-btn
162-
>
163-
</q-banner>
125+
<EmulationBanner />
164126

165127
<q-space></q-space>
166128
<ProfilePic></ProfilePic>
@@ -190,53 +152,7 @@ const currentYear = new Date().getFullYear()
190152
id="footerNavLinks"
191153
>
192154
<div class="q-pl-md">
193-
<a
194-
href="https://svmithelp.vetmed.ucdavis.edu/"
195-
target="_blank"
196-
rel="noopener"
197-
class="text-primary"
198-
>
199-
<q-icon
200-
color="primary"
201-
name="help_center"
202-
size="xs"
203-
aria-hidden="true"
204-
></q-icon>
205-
SVM-IT ServiceDesk
206-
<span class="sr-only">(opens in new window)</span>
207-
</a>
208-
<span class="text-primary q-px-sm">|</span>
209-
<a
210-
href="https://www.vetmed.ucdavis.edu/"
211-
target="_blank"
212-
rel="noopener"
213-
class="text-primary"
214-
>
215-
<q-icon
216-
color="primary"
217-
name="navigation"
218-
size="xs"
219-
aria-hidden="true"
220-
></q-icon>
221-
SVM Home
222-
<span class="sr-only">(opens in new window)</span>
223-
</a>
224-
<span class="text-primary q-px-sm">|</span>
225-
<a
226-
href="https://www.ucdavis.edu/"
227-
target="_blank"
228-
rel="noopener"
229-
class="text-primary"
230-
>
231-
<q-icon
232-
color="primary"
233-
name="school"
234-
size="xs"
235-
aria-hidden="true"
236-
></q-icon>
237-
UC Davis
238-
<span class="sr-only">(opens in new window)</span>
239-
</a>
155+
<FooterLinks />
240156
</div>
241157
<div class="">
242158
<div class="text-black">&copy; {{ currentYear }} School of Veterinary Medicine</div>

‎VueApp/src/styles/base.css‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,8 +118,7 @@ body {
118118

119119
.mainLayoutViperMode {
120120
margin-left: 0.6em;
121-
margin-top: 0.4em;
122-
vertical-align: bottom;
121+
vertical-align: middle;
123122
}
124123

125124
#topPlaceholder {

‎web/Views/Shared/Components/EmulationBanner/Default.cshtml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@model string
2+
<q-banner dense rounded inline-actions class="bg-warning text-black q-ml-lg">
3+
<strong>EMULATING:</strong> @Model <q-btn no-caps dense href="@Url.Content("~/ClearEmulation")" color="secondary" class="text-white q-px-sm q-ml-md">End Emulation</q-btn>
4+
</q-banner>

0 commit comments

Comments
 (0)