fix user background image

impresso · Feb 18, 2025 · 2d153af · 2d153af
1 parent 2eb835a
commit 2d153af
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 23 deletions.
diff --git a/src/components/UserArea.vue b/src/components/UserArea.vue
@@ -2,7 +2,9 @@
   <b-dropdown class="UserArea px-0 bg-dark" right>
     <template v-slot:button-content>
       <div class="d-flex px-2 py-1 align-items-center">
-        <div class="user-picture position-relative mr-2 me-2" :style="userPicture"></div>
+        <div class="user-picture position-relative mr-2 me-2">
+          <Sunset :radius="15" :colors="user.pattern" class="position-absolute left-0 top-0 m-0" />
+        </div>
         <div class="UserArea__userLabel">
           <div class="user-fullname small mb-1">{{ userFullName }}</div>
           <div class="user-role small-caps">{{ userPlanLabel }}</div>
@@ -70,6 +72,7 @@ import Icon from './base/Icon.vue'
 import { jobs as jobsService, termsOfUse as termsOfUseService } from '@/services'
 import { useUserStore } from '@/stores/user'
 import { type User } from '@/models'
+import Sunset from './base/Sunset.vue'
 
 const userStore = useUserStore()
 
@@ -105,28 +108,6 @@ const send_update_bitmap = async () => {
     console.debug('[UserArea] request to update bitmap...')
   })
 }
-
-const userPicture = computed(() => {
-  const style: {
-    backgroundImage?: string
-    backgroundColor: string
-  } = {
-    backgroundColor: 'black'
-  }
-
-  if (props.user.pattern) {
-    const gradient = []
-
-    props.user.pattern.forEach((color: string, i: number) => {
-      const start = Math.round((100 * i) / props.user.pattern.length)
-      const stop = Math.round((100 * (i + 1)) / props.user.pattern.length)
-      gradient.push(`${color} ${start}%, ${color} ${stop}%`)
-    })
-
-    style.backgroundImage = `linear-gradient(180deg,${gradient.join(',')})`
-  }
-  return style
-})
 </script>
 <i18n>
 {
@@ -161,6 +142,10 @@ const userPicture = computed(() => {
   box-shadow: none;
 }
 
+.UserArea.dropdown .btn.dropdown-toggle:not(.disabled):hover .user-picture svg,
+.UserArea.dropdown .btn.dropdown-toggle:not(.disabled):focus .user-picture svg {
+  transform: none;
+}
 .UserArea.bg-dark .btn.dropdown-toggle:hover {
   color: var(--impresso-color-paper);
   background-color: var(--clr-grey-100);

diff --git a/src/components/base/Sunset.vue b/src/components/base/Sunset.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+export interface SunsetProps {
+  radius: number
+  colors: string[]
+  gradientId?: string
+  transitionSize?: number // Optional: Controls how soft the edges are
+}
+const props = withDefaults(defineProps<SunsetProps>(), {
+  radius: 20,
+  colors: () => ['#ff0000', '#00ff00', '#0000ff'],
+  gradientId: 'defaultGradient',
+  transitionSize: 15 // Percentage of space used for soft edges
+})
+</script>
+
+<template>
+  <svg :width="props.radius * 2" :height="props.radius * 2" viewBox="0 0 100 100">
+    <defs>
+      <linearGradient :id="props.gradientId" x1="50%" y1="0%" x2="50%" y2="100%">
+        <template v-for="(color, index) in props.colors" :key="index">
+          <stop :offset="`${(index / props.colors.length) * 100}%`" :stop-color="color" />
+          <stop
+            v-if="index < props.colors.length - 1"
+            :offset="`${((index + 1) / props.colors.length) * 100 - props.transitionSize}%`"
+            :stop-color="color"
+          />
+          <stop
+            v-if="index < props.colors.length - 1"
+            :offset="`${((index + 1) / props.colors.length) * 100}%`"
+            :stop-color="props.colors[index + 1]"
+          />
+        </template>
+      </linearGradient>
+    </defs>
+    <circle cx="50" cy="50" r="50" :fill="`url(#${props.gradientId})`" />
+  </svg>
+</template>