From e036e2a842c1fb1d48a4c5037c35498b0f7e2cfc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Sat, 18 Jun 2022 20:47:18 +0200
Subject: [PATCH 1/2] Adjust loading icon style
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
---
 src/components/LoadingIcon/LoadingIcon.vue | 60 +++++++++++++++++-----
 1 file changed, 48 insertions(+), 12 deletions(-)

diff --git a/src/components/LoadingIcon/LoadingIcon.vue b/src/components/LoadingIcon/LoadingIcon.vue
index 66bd1f700c..92c383ec5a 100644
--- a/src/components/LoadingIcon/LoadingIcon.vue
+++ b/src/components/LoadingIcon/LoadingIcon.vue
@@ -24,23 +24,36 @@
 # Usage
 
 ```
-<LoadingIcon />
-<LoadingIcon :size="64" fill-color="var(--color-primary-element)" title="Loading with primary color" />
+<div>
+	<LoadingIcon />
+</div>
+<div style="background-color: #171717;">
+	<LoadingIcon :size="64" appearance="light" title="Loading on dark background" />
+</div>
+<div style="background-color: #fff;">
+	<LoadingIcon :size="64" appearance="dark" title="Loading on light background" />
+</div>
 ```
 </docs>
 
 <template>
-	<Loading :size="size" :fill-color="fillColor" :title="title" />
+	<span :aria-label="title"
+		role="img"
+		class="material-design-icon loading-icon">
+		<svg :width="size"
+			:height="size"
+			viewBox="0 0 24 24">
+			<path :fill="colorCircle" d="M12,4V2A10,10 0 1,0 22,12H20A8,8 0 1,1 12,4Z" />
+			<path :fill="colorSpinner" d="M12,4V2A10,10 0 0,1 22,12H20A8,8 0 0,0 12,4Z">
+				<title v-if="title">{{ title }}</title>
+			</path>
+		</svg>
+	</span>
 </template>
 
 <script>
-import Loading from 'vue-material-design-icons/Loading'
-
 export default {
 	name: 'LoadingIcon',
-	components: {
-		Loading,
-	},
 	props: {
 		/**
 		 * Specify the size of the loading icon.
@@ -50,11 +63,16 @@ export default {
 			default: 20,
 		},
 		/**
-		 * Overwrites the default color. Necessary for dark backgrounds.
+		 * The appearance of the loading icon.
+		 * 'auto' adjusts to the Nextcloud color scheme,
+		 * 'light' and 'dark' are static.
 		 */
-		fillColor: {
+		appearance: {
 			type: String,
-			default: 'var(--color-loading-dark)',
+			validator(value) {
+				return ['auto', 'light', 'dark'].includes(value)
+			},
+			default: 'auto',
 		},
 		/**
 		 * Specify what is loading.
@@ -64,11 +82,29 @@ export default {
 			default: '',
 		},
 	},
+	computed: {
+		colorCircle() {
+			if (this.appearance === 'light') {
+				return '#777'
+			} else if (this.appearance === 'dark') {
+				return '#CCC'
+			}
+			return 'var(--color-loading-light)'
+		},
+		colorSpinner() {
+			if (this.appearance === 'light') {
+				return '#CCC'
+			} else if (this.appearance === 'dark') {
+				return '#777'
+			}
+			return 'var(--color-loading-dark)'
+		},
+	},
 }
 </script>
 
 <style lang="scss" scoped>
-.material-design-icon::v-deep svg {
+.loading-icon svg{
 	animation: rotate var(--animation-duration, 0.8s) linear infinite;
 }
 </style>

From 1b83ffd812ed71ae75c15446ed3c53839bd57fd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Raimund=20Schl=C3=BC=C3=9Fler?=
 <raimund.schluessler@mailbox.org>
Date: Sat, 23 Jul 2022 09:39:45 +0200
Subject: [PATCH 2/2] Simplify color calculation for loading icon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
---
 src/components/LoadingIcon/LoadingIcon.vue | 21 +++++++--------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/components/LoadingIcon/LoadingIcon.vue b/src/components/LoadingIcon/LoadingIcon.vue
index 92c383ec5a..56f27fc2db 100644
--- a/src/components/LoadingIcon/LoadingIcon.vue
+++ b/src/components/LoadingIcon/LoadingIcon.vue
@@ -43,8 +43,8 @@
 		<svg :width="size"
 			:height="size"
 			viewBox="0 0 24 24">
-			<path :fill="colorCircle" d="M12,4V2A10,10 0 1,0 22,12H20A8,8 0 1,1 12,4Z" />
-			<path :fill="colorSpinner" d="M12,4V2A10,10 0 0,1 22,12H20A8,8 0 0,0 12,4Z">
+			<path :fill="colors[0]" d="M12,4V2A10,10 0 1,0 22,12H20A8,8 0 1,1 12,4Z" />
+			<path :fill="colors[1]" d="M12,4V2A10,10 0 0,1 22,12H20A8,8 0 0,0 12,4Z">
 				<title v-if="title">{{ title }}</title>
 			</path>
 		</svg>
@@ -83,21 +83,14 @@ export default {
 		},
 	},
 	computed: {
-		colorCircle() {
+		colors() {
+			const colors = ['#777', '#CCC']
 			if (this.appearance === 'light') {
-				return '#777'
+				return colors
 			} else if (this.appearance === 'dark') {
-				return '#CCC'
+				return colors.reverse()
 			}
-			return 'var(--color-loading-light)'
-		},
-		colorSpinner() {
-			if (this.appearance === 'light') {
-				return '#CCC'
-			} else if (this.appearance === 'dark') {
-				return '#777'
-			}
-			return 'var(--color-loading-dark)'
+			return ['var(--color-loading-light)', 'var(--color-loading-dark)']
 		},
 	},
 }