Add gratuitous ragged edges look for feedback

quasar.conf.js

@@ -44,6 +44,7 @@ module.exports = configure(function (ctx) {
       'icons',
       'detectMobileKeyboard',
       'performance',
+      'directives',
     ],
     css: [
       'app.sass',

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 () {

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

src/boot/directives.js

@@ -0,0 +1,5 @@
+import { raggedEdgesDirective } from '@/utils/svgUtils'
+
+export default ({ app }) => {
+  app.directive('ragged-edges', raggedEdgesDirective)
+}

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>

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())
+  },
+}