From e19b64628109d0ac9db732ddb96d370a334f52d0 Mon Sep 17 00:00:00 2001
From: Brian DeRocher <brian@derocher.org>
Date: Sun, 8 Dec 2024 20:41:54 -0500
Subject: [PATCH] Add org logos to sticker.

---
 src/components/Sticker.vue       | 40 ++++++++++++++++++++++++++------
 src/stores/stickersStore.ts      |  4 +++-
 src/views/StickerBuilderView.vue | 20 ++++++++--------
 3 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/src/components/Sticker.vue b/src/components/Sticker.vue
index 531dc18..fb136a7 100644
--- a/src/components/Sticker.vue
+++ b/src/components/Sticker.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import QRCode from "@/components/QRCode.vue";
 import {computed} from "vue";
+import Image from 'primevue/image'
 
 const {
   layout, color,
+  orgs,
   message1, message2,
   message3, message4,
 } = defineProps([
   'layout', 'color',
+  "orgs",
   'message1', 'message2',
   'message3', 'message4',
 ])
@@ -36,6 +39,11 @@ const color2 = computed(() => {
   <div class="sticker">
     <QRCode class="qr-code"></QRCode>
     <div class="content">
+      <div class="orgs">
+        <div v-for="org in orgs" :key="org.id">
+          <img class="logo" :src="org.logo" alt="todo" />
+        </div>
+      </div>
       <div v-bind:class="layout1Class">
         <div class="message">{{ message1 }}</div>
       </div>
@@ -72,16 +80,13 @@ const color2 = computed(() => {
   aspect-ratio: 6 / 1;
   background-color: v-bind(color2);
   display: flex;
+  overflow: clip;
+  position: relative;
   .content {
-    padding: 5px;
     width: 100%;
-    > div > div {
-      /* outline: 1px solid #CCC; */
-      padding-left: 4px;
-      padding-right: 4px;
-    }
     .layout1 {
-      font-size: 140%;
+      line-height: 140%;
+      font-size: 200%;
       height: 100%;
       > div {
         height: 100%;
@@ -113,6 +118,27 @@ const color2 = computed(() => {
       gap: 5px;
       height: 100%;
     }
+    .message {
+      /*outline: 1px solid #CCC3;*/
+      padding-left: 4px;
+      padding-right: 4px;
+      text-shadow: #FFF 0px 0px 4px;
+      z-index: 100;
+    }
+    .orgs {
+      display: flex;
+      position: absolute;
+      > div {
+        flex-shrink: 0;
+        .logo {
+          height: 65px;
+          width: 65px;
+          margin-top: -10px;
+          filter: grayscale(1) invert(1) brightness(4.0) opacity(0.3);
+          transform: rotate(0deg);
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/src/stores/stickersStore.ts b/src/stores/stickersStore.ts
index 7a67867..9e8515b 100644
--- a/src/stores/stickersStore.ts
+++ b/src/stores/stickersStore.ts
@@ -7,6 +7,7 @@ import { useUserStore } from '@/stores/userStore'
 export interface Sticker {
   color: string,
   layout: string,
+  orgs: string[],
   message1: string | null,
   message2: string | null,
   message3: string | null,
@@ -16,8 +17,9 @@ export interface Sticker {
 }
 
 export const activist: Sticker = {
-  color: 'FF0000',
+  color: '888888',
   layout: 'layout1',
+  orgs: [],
   message1: 'I AM AN ACTIVIST',
   message2: null,
   message3: null,
diff --git a/src/views/StickerBuilderView.vue b/src/views/StickerBuilderView.vue
index 5851380..c780575 100644
--- a/src/views/StickerBuilderView.vue
+++ b/src/views/StickerBuilderView.vue
@@ -23,7 +23,7 @@ import { activist, type Sticker as StickerType } from '@/stores/stickersStore';
 
 
 const { state: orgs } = useOrganization();
-const myOrgs = ref<Organization[]>([]);
+// const sticker.orgs = ref<Organization[]>([]);
 const original = useSticker();
 let sticker = ref<StickerType>(activist);
 const orgFilter = ref("");
@@ -43,15 +43,15 @@ function onFormSubmit() {
 }
 
 function addOrg(id: string) {
-  myOrgs.value.push(orgs.value.data.find((org: Organization) => org.id === id));
+  sticker.value.orgs.push(orgs.value.data.find((org: Organization) => org.id === id));
 }
 function removeOrg(orgId: string) {
-  const myIds = myOrgs.value.map(org => org.id);
+  const myIds = sticker.value.orgs.map(org => org.id);
   let start = myIds.indexOf(orgId);
-  myOrgs.value.splice(start, 1);
+  sticker.value.orgs.splice(start, 1);
 }
 const orgOptions = computed(() => {
-  const myIds = myOrgs.value.map(org => org.id);
+  const myIds = sticker.value.orgs.map(org => org.id);
   return orgs.value.data.filter(({ id, name }: { id: string, name: string }) => {
     return !myIds.includes(id)
       && name.toLowerCase().includes(orgFilter.value.toLowerCase());
@@ -77,7 +77,7 @@ const orgOptions = computed(() => {
               <div class="col-span-12 flex flex-col gap-4">
                 <label for="nickname2">Organizations I Support</label>
                 <div class="my-orgs">
-                  <div v-for="org in myOrgs" :key="org.id">
+                  <div v-for="org in sticker.orgs" :key="org.id">
                     <Chip
                       :image="org.logo"
                       :label="org.abbrev"
@@ -210,9 +210,9 @@ label {
 #StickerWrapper {
   background-color: #CCC;
   display: flex;
-  flex-direction: column;
+  justify-content: space-around;
   gap: 1em;
-  padding: 10px;
+  padding: 20px;
   #Sticker1 {
     width: 300px;
     @media (screen(sm)) {
@@ -250,8 +250,8 @@ label {
 }
 .my-orgs {
   display: flex;
-  gap: 1em;
-  font-size: 80%;
+  flex-wrap: wrap;
+  gap: 5px;
   .logo {
     display: block;
     filter: grayscale(1);