From b30fca11ab7f94f40a8d2db47ef5c853e0ddf793 Mon Sep 17 00:00:00 2001
From: Nick Sellen <git@nicksellen.co.uk>
Date: Wed, 13 Dec 2023 17:45:26 +0000
Subject: [PATCH] Add gratuitous ragged edges look for feedback

---
 quasar.conf.js                                |  1 +
 src/App.vue                                   |  3 +
 .../components/ActivityFeedbackItem.vue       |  4 +-
 src/boot/directives.js                        |  5 ++
 src/utils/components/SvgFilters.vue           | 56 +++++++++++++++++++
 src/utils/svgUtils.js                         | 16 ++++++
 6 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 src/boot/directives.js
 create mode 100644 src/utils/components/SvgFilters.vue

diff --git a/quasar.conf.js b/quasar.conf.js
index 579c785ab5..ed2ad3ea8e 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -44,6 +44,7 @@ module.exports = configure(function (ctx) {
       'icons',
       'detectMobileKeyboard',
       'performance',
+      'directives',
     ],
     css: [
       'app.sass',
diff --git a/src/App.vue b/src/App.vue
index d192b4762a..5b2cc330a9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,6 +7,7 @@
   >
   <LoadingProgress />
   <RouterView />
+  <SvgFilters />
 </template>
 
 <script>
@@ -37,9 +38,11 @@ import { useUsersUpdater } from '@/users/queries'
 import { useClearDataOnLogout, useTitleStatus } from '@/utils/composables'
 
 import LoadingProgress from '@/topbar/components/LoadingProgress.vue'
+import SvgFilters from '@/utils/components/SvgFilters.vue'
 
 export default {
   components: {
+    SvgFilters,
     LoadingProgress,
   },
   setup () {
diff --git a/src/activities/components/ActivityFeedbackItem.vue b/src/activities/components/ActivityFeedbackItem.vue
index aeda08bf05..080cc91207 100644
--- a/src/activities/components/ActivityFeedbackItem.vue
+++ b/src/activities/components/ActivityFeedbackItem.vue
@@ -2,6 +2,7 @@
   <QCard
     ref="itemRef"
     :class="{ highlight: isHighlighted }"
+    class="overflow-hidden"
   >
     <div
       v-if="bannerImageURL"
@@ -31,7 +32,8 @@
     </QCardSection>
     <QCardSection
       v-if="activityType"
-      :style="{ backgroundColor: lighten(activityType.colour, 80) }"
+      v-ragged-edges
+      :style="{ background: `linear-gradient(170deg, ${lighten(activityType.colour, 75)}, ${lighten(activityType.colour, 85)})` }"
     >
       <div class="row no-wrap">
         <QIcon
diff --git a/src/boot/directives.js b/src/boot/directives.js
new file mode 100644
index 0000000000..1a29b3552d
--- /dev/null
+++ b/src/boot/directives.js
@@ -0,0 +1,5 @@
+import { raggedEdgesDirective } from '@/utils/svgUtils'
+
+export default ({ app }) => {
+  app.directive('ragged-edges', raggedEdgesDirective)
+}
diff --git a/src/utils/components/SvgFilters.vue b/src/utils/components/SvgFilters.vue
new file mode 100644
index 0000000000..14d61cb649
--- /dev/null
+++ b/src/utils/components/SvgFilters.vue
@@ -0,0 +1,56 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="0"
+    width="0"
+  >
+    <defs>
+      <filter
+        v-for="variant in variants"
+        :id="`ragged-edges-${variant}`"
+        :key="variant"
+      >
+        <feTurbulence
+          id="turbulence"
+          type="fractalNoise"
+          baseFrequency="0.01"
+          numOctaves="4"
+          result="main"
+          :seed="variant"
+        />
+        <feDisplacementMap
+          id="displacement"
+          in="SourceGraphic"
+          in2="main"
+          result="main"
+          scale="8"
+        />
+        <feGaussianBlur stdDeviation="1" />
+        <feComponentTransfer result="main">
+          <feFuncA
+            type="gamma"
+            amplitude="50"
+            exponent="5"
+          />
+        </feComponentTransfer>
+        <feComposite
+          in="SourceGraphic"
+          in2="main"
+          operator="over"
+        />
+      </filter>
+    </defs>
+  </svg>
+</template>
+
+<script setup>
+import { raggedEdgeVariations } from '@/utils/svgUtils'
+
+const variants = Array.from({ length: raggedEdgeVariations }, (_, i) => i + 1)
+
+const styleSheet = new CSSStyleSheet()
+for (const variant of variants) {
+  styleSheet.insertRule(`.ragged-edges-${variant} { filter: url(#ragged-edges-${variant})}`)
+}
+document.adoptedStyleSheets.push(styleSheet)
+</script>
diff --git a/src/utils/svgUtils.js b/src/utils/svgUtils.js
index 51138614fe..1aba1607f5 100644
--- a/src/utils/svgUtils.js
+++ b/src/utils/svgUtils.js
@@ -199,3 +199,19 @@ function getRootDefs () {
 export function addDefinition (definition) {
   getRootDefs().appendChild(definition)
 }
+
+function randomInt (min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+export const raggedEdgeVariations = 5
+
+function getRaggedEdgesClassName () {
+  return `ragged-edges-${randomInt(1, raggedEdgeVariations)}`
+}
+
+export const raggedEdgesDirective = {
+  mounted (el) {
+    el.classList.add(getRaggedEdgesClassName())
+  },
+}