From 7b2cb9d32914a1260f84ce21bb137ba274d0bb62 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Thu, 21 May 2020 11:00:22 -0400
Subject: [PATCH] Fix project logo, use unbranded spinner (#602)

* Use asset URL in logo / public pages

* Use correct project logo in module bar

* Use unbranded loader state
---
 src/stores/projects/projects.ts               |  6 ++--
 .../module-bar-logo/module-bar-logo.vue       | 29 +++++++++++--------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/stores/projects/projects.ts b/src/stores/projects/projects.ts
index 413d1514fc..ac43b2032b 100644
--- a/src/stores/projects/projects.ts
+++ b/src/stores/projects/projects.ts
@@ -23,9 +23,9 @@ export const useProjectsStore = createStore({
 					authenticated: project?.authenticated || false,
 					name: project?.api?.project_name || null,
 					error: project?.error || null,
-					foregroundImage: project?.api?.project_foreground?.full_url || null,
-					backgroundImage: project?.api?.project_background?.full_url || null,
-					logo: project?.api?.project_logo?.full_url || null,
+					foregroundImage: project?.api?.project_foreground?.asset_url || null,
+					backgroundImage: project?.api?.project_background?.asset_url || null,
+					logo: project?.api?.project_logo?.asset_url || null,
 					color: project?.api?.project_color || null,
 					note: project?.api?.project_public_note || null,
 					sso: project?.api?.sso || [],
diff --git a/src/views/private/components/module-bar-logo/module-bar-logo.vue b/src/views/private/components/module-bar-logo/module-bar-logo.vue
index 63a7837b59..9bf12fc93d 100644
--- a/src/views/private/components/module-bar-logo/module-bar-logo.vue
+++ b/src/views/private/components/module-bar-logo/module-bar-logo.vue
@@ -6,11 +6,14 @@
 		ref="noopener noreferer"
 		class="module-bar-logo"
 	>
-		<img class="custom-logo" v-if="customLogoPath" :src="customLogoPath" alt="Project Logo" />
+		<template v-if="customLogoPath">
+			<v-progress-circular indeterminate v-if="showLoader" />
+			<img v-else class="custom-logo" :src="customLogoPath" alt="Project Logo" />
+		</template>
 		<div
 			v-else
 			class="logo"
-			:class="{ running: isRunning }"
+			:class="{ running: showLoader }"
 			@animationiteration="stopRunningIfQueueIsEmpty"
 		/>
 	</component>
@@ -18,7 +21,6 @@
 
 <script lang="ts">
 import { defineComponent, ref, computed, watch } from '@vue/composition-api';
-import { ProjectWithKey } from '@/stores/projects/types';
 import { useProjectsStore } from '@/stores/projects/';
 import { useRequestsStore } from '@/stores/requests/';
 import { useSettingsStore } from '@/stores/settings/';
@@ -31,21 +33,18 @@ export default defineComponent({
 
 		const customLogoPath = computed<string | null>(() => {
 			if (projectsStore.currentProject.value === null) return null;
-			if (projectsStore.currentProject.value.error !== undefined) {
-				return null;
-			}
-			const currentProject = projectsStore.currentProject.value as ProjectWithKey;
-			return currentProject.api?.project_logo?.full_url || null;
+			return projectsStore.currentProject.value.logo || null;
 		});
 
-		const isRunning = ref(false);
+		const showLoader = ref(false);
 
 		const queueHasItems = requestsStore.queueHasItems;
 
 		watch(
 			() => queueHasItems.value,
 			(hasItems) => {
-				if (hasItems) isRunning.value = true;
+				if (hasItems) showLoader.value = true;
+				else if (customLogoPath.value !== null) showLoader.value = false;
 			}
 		);
 
@@ -53,13 +52,13 @@ export default defineComponent({
 
 		return {
 			customLogoPath,
-			isRunning,
+			showLoader,
 			stopRunningIfQueueIsEmpty,
 			url,
 		};
 
 		function stopRunningIfQueueIsEmpty() {
-			if (queueHasItems.value === false) isRunning.value = false;
+			if (queueHasItems.value === false) showLoader.value = false;
 		}
 	},
 });
@@ -67,7 +66,13 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .module-bar-logo {
+	--v-progress-circular-color: var(--white);
+	--v-progress-circular-background-color: transparent;
+
 	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 	width: 64px;
 	height: 64px;
 	padding: 12px;