From 2347cfc59942cd3f2375c95fadf8ad9a9aca9fc7 Mon Sep 17 00:00:00 2001
From: cnouguier <ch.nouguier@gmail.com>
Date: Fri, 27 Sep 2024 11:16:18 +0200
Subject: [PATCH] wip:Provide a component that allows rendering a ribbon at
 different corners of the screen #961

---
 core/client/components/media/KRibbon.vue | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/core/client/components/media/KRibbon.vue b/core/client/components/media/KRibbon.vue
index 52ff04fe9..8c1ca4b87 100644
--- a/core/client/components/media/KRibbon.vue
+++ b/core/client/components/media/KRibbon.vue
@@ -34,9 +34,13 @@ const props = defineProps({
       return ['top-left', 'top-right', 'bottom-right', 'bottom-left'].includes(value)
     }
   },
-  offset: {
+  origin: {
     type: Number,
     default: 80
+  },
+  letterSpacing: {
+    type: Number,
+    default: 2
   }
 })
 
@@ -53,11 +57,14 @@ const computedColor = computed(() => {
 const computedTextColor = computed(() => {
   return getHtmlColor(props.textColor)
 })
+const computedLetterSpacing = computed(() => {
+  return `${props.letterSpacing}px`
+})
 const translation = computed(() => {
-  if (props.position === 'top-left') return `${props.offset - (width / 2)}px, ${props.offset - (props.size / 2)}px`
-  if (props.position === 'top-right') return `${(width / 2) - props.offset}px, ${props.offset - (props.size / 2)}px`
-  if (props.position === 'bottom-right') return `${(width / 2) - props.offset}px, ${(props.size / 2) - props.offset}px`
-  if (props.position === 'bottom-left') return `${props.offset - (width / 2)}px, ${(props.size / 2) - props.offset}px`
+  if (props.position === 'top-left') return `${props.origin - (width / 2)}px, ${props.origin - (props.size / 2)}px`
+  if (props.position === 'top-right') return `${(width / 2) - props.origin}px, ${props.origin - (props.size / 2)}px`
+  if (props.position === 'bottom-right') return `${(width / 2) - props.origin}px, ${(props.size / 2) - props.origin}px`
+  if (props.position === 'bottom-left') return `${props.origin - (width / 2)}px, ${(props.size / 2) - props.origin}px`
 })
 const rotation = computed(() => {
   if (props.position === 'top-left' || props.position === 'bottom-right') return '-45deg'
@@ -75,5 +82,6 @@ const rotation = computed(() => {
   transform: translate(v-bind(translation)) rotate(v-bind(rotation));
   background-color: v-bind(computedColor);
   color: v-bind(computedTextColor);
+  letter-spacing: v-bind(computedLetterSpacing);
 }
 </style>