kamo
/
sb
1
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

color coding

Browse Source
main
km0 11 months ago
parent 719c2a7a6d
commit 1d09b52f64
4 changed files with 120 additions and 8 deletions
Show Stats Download Patch File Download Diff File

32
src/components/AddShot.vue
Unescape Escape View File

@ -1,9 +1,13 @@
<template> <template>
<div class="add-shot"> <div class="add-shot">
<span class="tag" :style='{color: currentColor}'></span>
<FileLoader class="cover" @upload="getImg" @file="setFile" :key="key"></FileLoader> <FileLoader class="cover" @upload="getImg" @file="setFile" :key="key"></FileLoader>
<div class="meta" v-if="file"> <div class="meta" v-if="file">
<input v-model="title" placeholder="Title"> <input v-model="title" placeholder="Title">
<textarea v-model="description" placeholder="Description"></textarea> <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> <button class="insert" @click="add">Add</button>
</div> </div>
</div> </div>
@ -11,6 +15,10 @@
<script setup> <script setup>
import FileLoader from '../components/FileLoader.vue' import FileLoader from '../components/FileLoader.vue'
import {ref} from 'vue' import {ref} from 'vue'
import {palette} from '../composables/palette.js'
const {colors} = palette()
const file = ref(null) const file = ref(null)
@ -19,11 +27,20 @@
const img = ref('') const img = ref('')
const key = ref(0) const key = ref(0)
const currentColor = ref(colors[0])
const emits = defineEmits(['add']) const emits = defineEmits(['add'])
const getImg = (e) => img.value = e const getImg = (e) => img.value = e
const setColor = (color) => {
currentColor.value = color
}
const setFile = e => { const setFile = e => {
file.value = e file.value = e
} }
@ -33,6 +50,7 @@
title: title.value, title: title.value,
description: description.value, description: description.value,
img: img.value, img: img.value,
color: currentColor.value,
file: file.value file: file.value
} }
) )
@ -43,6 +61,7 @@
title.value = "" title.value = ""
description.value = "" description.value = ""
img.value = "" img.value = ""
currentColor.value = colors[0]
key.value += 1 key.value += 1
} }
@ -60,6 +79,16 @@
width: 320px; width: 320px;
height: 180px; height: 180px;
object-fit: cover; object-fit: cover;
padding: 8px;
}
.add-shot .tag {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: currentColor;
} }
.meta { .meta {
@ -68,6 +97,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
padding: 8px;
} }

5
src/components/SceneEntry.vue
Unescape Escape View File

@ -31,6 +31,7 @@
:title="element.title" :title="element.title"
:description="element.description" :description="element.description"
:img="element.img" :img="element.img"
:color="element.color"
:order="index + 1" :order="index + 1"
@remove="remove(index)" @remove="remove(index)"
@update="update" @update="update"
@ -93,6 +94,7 @@ const update = (e) => {
let index = e.order - 1 let index = e.order - 1
shots.value[index].title = e.title shots.value[index].title = e.title
shots.value[index].description = e.description shots.value[index].description = e.description
shots.value[index].color = e.color
} }
const removeScene = () => { const removeScene = () => {
@ -105,7 +107,8 @@ const serialize = async () => {
let img = await blobToBase64(shot.file) let img = await blobToBase64(shot.file)
return { return {
title: shot.title, title: shot.title,
description: shot.description, description: shot.description,
color: shot.color,
img: img img: img
} }
})) }))

69
src/components/ShotEntry.vue
Unescape Escape View File

@ -1,5 +1,6 @@
<template> <template>
<div class="shot"> <div class="shot">
<span class="tag" :style='{color: shotColor}'></span>
<button class="remove" @click="emit('remove')">x</button> <button class="remove" @click="emit('remove')">x</button>
<img :src="img"> <img :src="img">
<div class="meta" v-if="!edit" @dblclick="edit=true"> <div class="meta" v-if="!edit" @dblclick="edit=true">
@ -7,9 +8,12 @@
<h3 class="title" >{{title}}</h3> <h3 class="title" >{{title}}</h3>
<p class="description">{{description}}</p> <p class="description">{{description}}</p>
</div> </div>
<form class="meta" v-else> <form class="meta edit" v-else>
<input class="title" v-model="shotTitle"> <input class="title" v-model="shotTitle">
<textarea class="description" v-model="shotDescription"></textarea> <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> <button @click.prevent="update">Confirm</button>
</form> </form>
</div> </div>
@ -18,20 +22,29 @@
</template> </template>
<script setup> <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 shotTitle = ref(props.title)
const shotDescription = ref(props.description) const shotDescription = ref(props.description)
const shotColor = ref(props.color || colors[0])
const emit = defineEmits(['remove', 'update']) const emit = defineEmits(['remove', 'update'])
const edit = ref(false) const edit = ref(false)
const setColor = (c) => {
shotColor.value = c
}
const update = () => { 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 edit.value = false
} }
@ -42,12 +55,17 @@
.shot { .shot {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
.shot img { .shot img {
width: 320px; width: 320px;
height: 180px; height: 180px;
object-fit: cover; object-fit: cover;
position: relative;
z-index: 10;
padding: 8px;
} }
.shot .meta { .shot .meta {
@ -56,6 +74,30 @@
gap: 0; 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{ .title, .description{
margin-block: 0; margin-block: 0;
margin-inline: 8px; margin-inline: 8px;
@ -66,6 +108,21 @@
padding-right: 1rem; 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 { .description {
font-size: 0.85rem; font-size: 0.85rem;
margin-bottom: 8px; margin-bottom: 8px;
@ -76,7 +133,6 @@
top: 0; top: 0;
right: 4px ; right: 4px ;
display: inline-block; display: inline-block;
background-color: white;
z-index: 100; z-index: 100;
padding: 4px; padding: 4px;
font-weight: bold; font-weight: bold;
@ -95,6 +151,7 @@
font-size: 1rem; font-size: 1rem;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
z-index: 100;
} }
.shot:hover .remove { .shot:hover .remove {

22
src/composables/palette.js
Unescape Escape View File

@ -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}
}
Write Preview
Loading…
Cancel
Save