95 lines
2.0 KiB
Vue
95 lines
2.0 KiB
Vue
<script setup>
|
|
import IconButton from '@/views/partials/game/IconButton.vue';
|
|
import { onMounted, ref } from 'vue';
|
|
|
|
const toggled = ref("");
|
|
const toggleGlobal = ref("")
|
|
|
|
const title = ref(null);
|
|
const editable = ref(false);
|
|
|
|
const props = defineProps(['data']);
|
|
let data = props.data;
|
|
|
|
onMounted(() => {
|
|
console.log(data.height);
|
|
console.log(data.editable)
|
|
if(data.editable) editable.value = true;
|
|
})
|
|
|
|
function Click(){
|
|
data.click();
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<div class="game-entry-container">
|
|
<img :v-if="data.icon" class="game-icon" :src="data.icon">
|
|
<div class="name-container" v-on:click.prevent="Click">
|
|
<input v-if="editable" class="edit-name" type="text" ref="title" v-on:change.prevent="Rename" :value="data.name">
|
|
<p v-if="!editable" class="name">{{ data.name }}</p>
|
|
</div>
|
|
<div class="horizontal-button">
|
|
<IconButton icon="/icons/iconoir/solid/play.svg" :action="Play" size="small"></IconButton>
|
|
<IconButton icon="/icons/iconoir/regular/eye.svg" :action="View" size="small"></IconButton>
|
|
<IconButton icon="/icons/iconoir/regular/trash.svg" :action="Delete" size="small"></IconButton>
|
|
<IconButton icon="/icons/iconoir/regular/edit.svg" :action="Edit" size="small"></IconButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
.edit-name, .name {
|
|
text-align: left;
|
|
}
|
|
|
|
.name-container {
|
|
margin-left: 5px;
|
|
flex-grow: 1;
|
|
align-items: center;
|
|
display: flex;
|
|
height: 32px;
|
|
}
|
|
|
|
.game-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
background-color: var(--icon-background);
|
|
}
|
|
|
|
.edit-name {
|
|
padding: 4px;
|
|
}
|
|
|
|
.toggler {
|
|
transition: filter 0.2s;
|
|
}
|
|
|
|
.toggled-yes {
|
|
filter: invert(1);
|
|
}
|
|
|
|
.game-entry-container {
|
|
display: flex;
|
|
width: 100%;
|
|
background-color: var(--color-background-softer);
|
|
|
|
align-items: center;
|
|
|
|
&.selected {
|
|
background-color: var(--color-background-softest);
|
|
}
|
|
}
|
|
|
|
.horizontal-button {
|
|
margin-left: auto;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
user-select: none;
|
|
}
|
|
|
|
</style> |