thm
/
upend
1
0
Fork 0
Code Issues 73 Pull Requests Packages Projects Releases 5 Wiki Activity

pretty box labels 

thanks to @amcgregor <3
feat/vaults
Tomáš Mládek 2021-06-19 17:06:52 +02:00
parent 68c808ad5b
commit 4699d60760
1 changed files with 79 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
ui/src/views/Inspect.vue
View File

@ -12,63 +12,67 @@
<section class="types">
<h3>Types</h3>
<ul>
<li v-for="type, key in types" :key="key">
<li v-for="(type, key) in types" :key="key">
{{ type.name || "???" }}
</li>
</ul>
</section>
<h3>Own attributes ({{ attributes.length }})</h3>
<table>
<tr>
<th></th>
<th>Attribute name</th>
<th>Value</th>
</tr>
<tr v-for="[id, entry] in attributes" :key="id">
<td class="attr-action">
<sl-icon-button name="x-circle" @click="removeEntry(id)" />
</td>
<td>{{ entry.attribute }}</td>
<td>
<Address
link
v-if="entry.value.t === 'Address'"
:address="entry.value.c"
/>
<template v-else>
{{ entry.value.c }}
</template>
</td>
</tr>
<tr>
<td class="attr-action">
<sl-icon-button name="plus-circle" @click="addEntry()" />
</td>
<td>
<sl-input v-sl-model:newEntryAttribute />
</td>
<td>
<sl-input v-sl-model:newEntryValue />
</td>
</tr>
</table>
<section class="attributes">
<h3>Own attributes ({{ attributes.length }})</h3>
<table>
<tr>
<th></th>
<th>Attribute name</th>
<th>Value</th>
</tr>
<tr v-for="[id, entry] in attributes" :key="id">
<td class="attr-action">
<sl-icon-button name="x-circle" @click="removeEntry(id)" />
</td>
<td>{{ entry.attribute }}</td>
<td>
<Address
link
v-if="entry.value.t === 'Address'"
:address="entry.value.c"
/>
<template v-else>
{{ entry.value.c }}
</template>
</td>
</tr>
<tr>
<td class="attr-action">
<sl-icon-button name="plus-circle" @click="addEntry()" />
</td>
<td>
<sl-input v-sl-model:newEntryAttribute />
</td>
<td>
<sl-input v-sl-model:newEntryValue />
</td>
</tr>
</table>
</section>
</template>
<template v-if="backlinks.length">
<h3>Referred to ({{ backlinks.length }})</h3>
<table>
<tr>
<th>Entities</th>
<th>Attribute names</th>
</tr>
<tr v-for="[id, entry] in backlinks" :key="id">
<td>
<Address link :address="entry.entity" />
</td>
<td>
{{ entry.attribute }}
</td>
</tr>
</table>
<section class="backlinks">
<h3>Referred to ({{ backlinks.length }})</h3>
<table>
<tr>
<th>Entities</th>
<th>Attribute names</th>
</tr>
<tr v-for="[id, entry] in backlinks" :key="id">
<td>
<Address link :address="entry.entity" />
</td>
<td>
{{ entry.attribute }}
</td>
</tr>
</table>
</section>
</template>
</div>
<div v-else class="error">
@ -206,6 +210,30 @@ table {
}
}
.inspect section {
position: relative;
overflow: visible;
margin-top: 1.66em;
padding: 1ex 1em;
border: 1px solid var(--foreground);
border-radius: 4px;
h3 {
display: inline-block;
background: var(--background);
font-weight: 600;
position: absolute;
top: -1.66em;
left: 0.5ex;
line-height: 1;
padding: 0 0.5ex;
}
}
.error {
color: red;
}