From 1d09b52f644e60c7bedbfd03346b18ac405c1c4e Mon Sep 17 00:00:00 2001
From: km0 <luzzanafrancesco@gmail.com>
Date: Sun, 2 Jul 2023 13:48:39 +0200
Subject: [PATCH] color coding

---
 src/components/AddShot.vue    | 32 +++++++++++++++-
 src/components/SceneEntry.vue |  5 ++-
 src/components/ShotEntry.vue  | 69 ++++++++++++++++++++++++++++++++---
 src/composables/palette.js    | 22 +++++++++++
 4 files changed, 120 insertions(+), 8 deletions(-)
 create mode 100644 src/composables/palette.js

diff --git a/src/components/AddShot.vue b/src/components/AddShot.vue
index 69af933..bf5cbd4 100644
--- a/src/components/AddShot.vue
+++ b/src/components/AddShot.vue
@@ -1,9 +1,13 @@
 <template>
     <div class="add-shot">
+                <span class="tag" :style='{color: currentColor}'></span>
         <FileLoader class="cover" @upload="getImg" @file="setFile" :key="key"></FileLoader>
         <div class="meta" v-if="file">
             <input v-model="title" placeholder="Title">
             <textarea v-model="description" placeholder="Description"></textarea>
+            <div class="colors">
+                <span class="color" @click="setColor(color)" v-for='color in colors' :style="{color: color}"></span>
+            </div>
             <button class="insert" @click="add">Add</button>
         </div>
     </div>
@@ -11,6 +15,10 @@
 <script setup>
     import FileLoader from '../components/FileLoader.vue'
     import {ref} from 'vue'
+    import {palette} from '../composables/palette.js'
+    const {colors} = palette()
+
+
 
 
     const file = ref(null)
@@ -19,11 +27,20 @@
     const img = ref('')
     const key = ref(0)
 
+    const currentColor = ref(colors[0])
+
     const emits = defineEmits(['add'])
 
 
     const getImg = (e) => img.value = e
-    
+   
+
+
+    const setColor = (color) => {
+        currentColor.value = color
+    }
+
+
     const setFile = e => {
         file.value = e
         }
@@ -33,6 +50,7 @@
                 title: title.value, 
                 description: description.value, 
                 img: img.value,
+                color: currentColor.value,
                 file: file.value
                     }
                 )
@@ -43,6 +61,7 @@
         title.value = ""
         description.value = ""
         img.value = ""
+        currentColor.value = colors[0]
         key.value += 1
     }
 
@@ -60,6 +79,16 @@
     width: 320px;
     height: 180px;
     object-fit: cover;
+    padding: 8px;
+}
+
+.add-shot .tag {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: currentColor;
 }
 
 .meta {
@@ -68,6 +97,7 @@
     display: flex;
     flex-direction: column;
     gap: 8px;
+    padding: 8px;
 
 }
 
diff --git a/src/components/SceneEntry.vue b/src/components/SceneEntry.vue
index 09d9697..b9a4c35 100644
--- a/src/components/SceneEntry.vue
+++ b/src/components/SceneEntry.vue
@@ -31,6 +31,7 @@
                 :title="element.title"
                 :description="element.description"
                 :img="element.img"
+                :color="element.color"
                 :order="index + 1"
                 @remove="remove(index)"
                 @update="update"
@@ -93,6 +94,7 @@ const update = (e) => {
     let index = e.order - 1
     shots.value[index].title = e.title
     shots.value[index].description = e.description
+    shots.value[index].color = e.color
 }
 
 const removeScene = () => {
@@ -105,7 +107,8 @@ const serialize = async () => {
         let img = await blobToBase64(shot.file)
         return {
             title: shot.title, 
-            description: shot.description, 
+            description: shot.description,
+            color: shot.color,
             img: img
             }
     }))
diff --git a/src/components/ShotEntry.vue b/src/components/ShotEntry.vue
index 802077a..6a07dd7 100644
--- a/src/components/ShotEntry.vue
+++ b/src/components/ShotEntry.vue
@@ -1,5 +1,6 @@
 <template>
     <div class="shot">
+        <span class="tag" :style='{color: shotColor}'></span>
         <button class="remove" @click="emit('remove')">x</button>
         <img :src="img">
         <div class="meta" v-if="!edit" @dblclick="edit=true">
@@ -7,9 +8,12 @@
             <h3 class="title" >{{title}}</h3>
             <p class="description">{{description}}</p>
         </div>
-        <form class="meta" v-else>
+        <form class="meta edit" v-else>
             <input class="title" v-model="shotTitle">
             <textarea class="description" v-model="shotDescription"></textarea>
+            <div class="colors">
+                <span class="color" @click="setColor(c)" v-for='c in colors' :style="{color: c}"></span>
+            </div>
             <button @click.prevent="update">Confirm</button>
         </form>
     </div>
@@ -18,20 +22,29 @@
 </template>
 <script setup>
 
-    import {ref } from 'vue'
+    import {ref, watch } from 'vue'
+    import {palette} from '../composables/palette.js'
+    const {colors} = palette()
 
-    const props = defineProps(['title', 'description', 'img', 'order'])
+    const props = defineProps(['title', 'description', 'img', 'order', 'color'])
 
+    watch(props, ()=>{
+        shotColor.value = props.color
+    })
 
     const shotTitle = ref(props.title)
     const shotDescription = ref(props.description)
-
+    const shotColor = ref(props.color || colors[0])
     const emit = defineEmits(['remove', 'update']) 
 
     const edit = ref(false)
 
+    const setColor = (c) => {
+        shotColor.value = c
+    }
+
     const update = () => {
-        emit('update', {title: shotTitle.value, description: shotDescription.value, order: props.order})
+        emit('update', {title: shotTitle.value, description: shotDescription.value, order: props.order, color: shotColor.value})
         edit.value = false
     }
 
@@ -42,12 +55,17 @@
 .shot {
     position: relative;
     display: inline-block;
+
 }
 
+
 .shot img {
     width: 320px; 
     height: 180px;
     object-fit: cover;
+    position: relative;
+    z-index: 10;
+    padding: 8px;
 }
 
 .shot .meta {
@@ -56,6 +74,30 @@
     gap: 0;
 }
 
+.shot .tag {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: currentColor;
+}
+
+.colors {
+    display: flex;
+    height: 16px;
+    align-items: stretch;
+}
+
+.color {
+    flex: 1;
+    background-color: currentColor;
+}
+
+.colors .color {
+    cursor: pointer;
+}
+
 .title, .description{
     margin-block: 0;
     margin-inline: 8px;
@@ -66,6 +108,21 @@
     padding-right: 1rem;
 }
 
+
+.meta.edit input,
+.meta.edit textarea,
+.meta.edit button {
+width: auto;
+margin: 0;
+}
+
+.meta.edit {
+display: flex;
+gap: 8px;
+padding: 8px;
+
+}
+
 .description {
     font-size: 0.85rem;
     margin-bottom: 8px;
@@ -76,7 +133,6 @@
     top: 0;
     right: 4px ;
     display: inline-block;
-    background-color: white;
     z-index: 100;
     padding: 4px;
     font-weight: bold;
@@ -95,6 +151,7 @@
     font-size: 1rem;
     font-weight: bold;
     cursor: pointer;
+    z-index: 100;
 }
 
 .shot:hover .remove {
diff --git a/src/composables/palette.js b/src/composables/palette.js
new file mode 100644
index 0000000..7a41147
--- /dev/null
+++ b/src/composables/palette.js
@@ -0,0 +1,22 @@
+export function palette() {
+    const colors = [
+        'white',
+        'rgba(253,100,0,255)', 
+        'rgba(255,163,0,255)', 
+        'rgba(220,171,0,255)',
+        'rgba(148,199,0,255)', 
+        'rgba(74,155,0,255)',
+        'rgba(24,145,97,255)',
+        'rgba(0,155,154,255)',
+        'rgba(0,84,123,255)',
+        'rgba(47,119,165,255)',
+        'rgba(160,112,163,255)',
+        'rgba(225,75,142,255)',
+        'rgba(248,134,183,255)',
+        'rgba(187,174,148,255)',
+        'rgba(203,158,119,255)',
+        'rgba(162,99,0,255)',
+        'rgba(148,87,57,255)',
+    ]    
+    return {colors}
+}