Whatever ClearWindow needs to be in json
All checks were successful
Build and Deploy Nuxt / build (push) Successful in 42s
All checks were successful
Build and Deploy Nuxt / build (push) Successful in 42s
This commit is contained in:
31
frontend/app/components/windows/partials/BigIconTemplate.vue
Normal file
31
frontend/app/components/windows/partials/BigIconTemplate.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<script setup>
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
const props = defineProps(['title', 'img']);
|
||||
|
||||
const imgSrc = ref("");
|
||||
|
||||
onMounted(() => {
|
||||
imgSrc.value = props.img;
|
||||
watch(() => props.img, () => {
|
||||
imgSrc.value = props.img;
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="document centered">
|
||||
<h1>{{props.title}}</h1>
|
||||
<img :src="imgSrc" class="big-icon">
|
||||
<br>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.big-icon {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
border: 1px solid var(--color-border);
|
||||
margin:auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,29 @@
|
||||
<script setup>
|
||||
import IconButton from '~/components/partials/IconButton.vue';
|
||||
|
||||
const props = defineProps(['plus', 'edit', 'view', 'remove']);
|
||||
|
||||
let plus = props.plus;
|
||||
let edit = props.edit;
|
||||
let view = props.view;
|
||||
let remove = props.remove;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fixed-bottom-buttons">
|
||||
<IconButton v-show="plus" icon="/icons/iconoir/regular/plus.svg" :action="plus"></IconButton>
|
||||
<IconButton v-show="edit" icon="/icons/iconoir/regular/edit-pencil.svg" :action="edit"></IconButton>
|
||||
<IconButton v-show="view" icon="/icons/iconoir/solid/eye.svg" :action="view"></IconButton>
|
||||
<IconButton v-show="remove" icon="/icons/iconoir/solid/trash.svg" :action="remove"></IconButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fixed-bottom-buttons {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { GetWindowWithId, ClearWindow, Windows } from '@/services/Windows';
|
||||
import { GetWindowWithId } from '@/services/Windows';
|
||||
|
||||
import ArrowLeftIcon from '/icons/iconoir/regular/arrow-left.svg';
|
||||
import XMarkIcon from '/icons/iconoir/regular/xmark.svg';
|
||||
|
||||
Reference in New Issue
Block a user