You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
1.8 KiB
86 lines
1.8 KiB
<script lang="ts">
|
|
import type { IconName } from "../external/icons";
|
|
import type { GroupResult } from "../models/group";
|
|
import type { default as Item } from "../models/item";
|
|
import type { ModalData } from "../stores/modal";
|
|
import Option from "./Option.svelte";
|
|
import OptionRow from "./OptionRow.svelte";
|
|
|
|
export let item: Item = null;
|
|
export let group: GroupResult = null;
|
|
|
|
let mdItemEdit: ModalData;
|
|
let mdItemDelete: ModalData;
|
|
|
|
$: mdItemEdit = {name: "item.edit", item, group};
|
|
$: mdItemDelete = {name: "item.delete", item, group};
|
|
</script>
|
|
|
|
<div class="item">
|
|
<div class="body">
|
|
<div class="header">
|
|
<div class="icon">
|
|
{item.groupWeight}
|
|
</div>
|
|
<div class="name">{item.name}</div>
|
|
</div>
|
|
<div class="description">
|
|
<p>{item.description}</p>
|
|
|
|
<OptionRow>
|
|
<Option open={mdItemEdit}>Edit</Option>
|
|
<Option open={mdItemDelete}>Delete</Option>
|
|
</OptionRow>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
div.item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 0.25em 0 0.75em 0;
|
|
}
|
|
div.body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
div.header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
background: #333;
|
|
}
|
|
|
|
div.icon {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 1em;
|
|
padding: 0.125em .5ch;
|
|
min-width: 2ch;
|
|
text-align: center;
|
|
|
|
margin-right: 0.5em;
|
|
background: #444;
|
|
color: #CCC;
|
|
}
|
|
|
|
div.name {
|
|
font-size: 1em;
|
|
font-weight: 100;
|
|
margin: auto 0;
|
|
vertical-align: middle;
|
|
padding: 0.125em .5ch;
|
|
}
|
|
|
|
div.description {
|
|
padding: 0.25em 1ch;
|
|
background: #222;
|
|
color: #aaa;
|
|
border-bottom-right-radius: 0.5em;
|
|
}
|
|
div.description p {
|
|
padding: 0;
|
|
margin: 0.25em 0;
|
|
}
|
|
</style>
|