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

add marquee for overflowing info

feat/vaults
Tomáš Mládek 2021-06-20 00:00:47 +02:00
parent 41a4358f07
commit 7f7b132121
3 changed files with 136 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ui/src/components/Address.vue
View File

@ -1,34 +1,31 @@
<template>
<div :class="['address', { identified: Boolean(inferredIds) }]" ref="root">
<hash-badge :address="address" class="hash-badge" />
<up-link v-if="isFile" :to="{ entity: address }">
{{ address }}
</up-link>
<template v-else>
<up-link v-if="link" :to="{ entity: address }">
{{ inferredIds.join(" | ") || address }}
<Marquee>
<up-link v-if="isFile" :to="{ entity: address }">
{{ address }}
</up-link>
<template v-else>
{{ inferredIds.join(" | ") || address }}
<up-link v-if="link" :to="{ entity: address }">
{{ inferredIds.join(" | ") || address }}
</up-link>
<template v-else>
{{ inferredIds.join(" | ") || address }}
</template>
</template>
</template>
</Marquee>
</div>
</template>
<script lang="ts">
import { identify, useEntity } from "@/lib/entity";
import {
computed,
ComputedRef,
defineComponent,
onMounted,
ref,
} from "vue";
import { computed, ComputedRef, defineComponent, onMounted, ref } from "vue";
import HashBadge from "./HashBadge.vue";
import UpLink from "./UpLink.vue";
import Marquee from "./Marquee.vue";
export default defineComponent({
components: { HashBadge, UpLink },
components: { HashBadge, UpLink, Marquee },
name: "Address",
props: {
address: {

76
ui/src/components/Marquee.vue Normal file
View File

@ -0,0 +1,76 @@
<template>
<div
class="marquee"
:class="{ overflowed }"
:style="`--shift-width: ${shiftWidth}`"
ref="root"
>
<div class="inner" ref="inner">
<slot></slot>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
export default defineComponent({
name: "Marquee",
setup() {
const root = ref<HTMLDivElement | null>(null);
const inner = ref<HTMLDivElement | null>(null);
const overflowed = ref(false);
const shiftWidth = ref("unset");
onMounted(() => {
const resizeObserver = new ResizeObserver(() => {
overflowed.value = root.value!.scrollWidth > root.value!.clientWidth;
shiftWidth.value = `-${
inner.value!.clientWidth - root.value!.clientWidth
}px`;
});
resizeObserver.observe(inner.value!);
});
return {
root,
inner,
overflowed,
shiftWidth,
};
},
});
</script>
<style scoped lang="scss">
.marquee {
line-height: 1;
overflow: hidden;
}
.inner {
white-space: nowrap;
display: inline-block;
}
</style>
<style lang="scss">
.overflowed .inner {
animation: marquee 12s ease-in-out infinite;
--padding: .5em;
}
@keyframes marquee {
0% {
transform: translateX(var(--padding));
}
50% {
transform: translateX(calc(var(--shift-width) - var(--padding)));
}
100% {
transform: translateX(var(--padding));
}
}
</style>

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

@ -21,6 +21,11 @@
{{ types[typeAddr]?.name || "???" }}
</h3>
<table>
<colgroup>
<col class="attr-action-col" />
<col />
<col />
</colgroup>
<tr>
<th></th>
<th>Attribute</th>
@ -30,16 +35,20 @@
<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>
<Marquee>{{ entry.attribute }}</Marquee>
</td>
<td>
<Marquee>
<Address
link
v-if="entry.value.t === 'Address'"
:address="entry.value.c"
/>
<template v-else>
{{ entry.value.c }}
</template>
</Marquee>
</td>
</tr>
</table>
@ -50,6 +59,11 @@
Other attributes
</h3>
<table>
<colgroup>
<col class="attr-action-col" />
<col />
<col />
</colgroup>
<tr>
<th></th>
<th>Attribute</th>
@ -59,16 +73,20 @@
<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>
<Marquee>{{ entry.attribute }}</Marquee>
</td>
<td>
<Marquee>
<Address
link
v-if="entry.value.t === 'Address'"
:address="entry.value.c"
/>
<template v-else>
{{ entry.value.c }}
</template>
</Marquee>
</td>
</tr>
<tr>
@ -94,10 +112,14 @@
</tr>
<tr v-for="[id, entry] in backlinks" :key="id">
<td>
<Address link :address="entry.entity" />
<Marquee>
<Address link :address="entry.entity" />
</Marquee>
</td>
<td>
{{ entry.attribute }}
<Marquee>
{{ entry.attribute }}
</Marquee>
</td>
</tr>
</table>
@ -113,6 +135,7 @@
<script lang="ts">
import Address from "@/components/Address.vue";
import BlobPreview from "@/components/BlobPreview.vue";
import Marquee from "@/components/Marquee.vue";
import { query, useEntity } from "@/lib/entity";
import { UpType } from "@/lib/types";
import { IEntry } from "@/types/base";
@ -123,6 +146,7 @@ export default defineComponent({
components: {
Address,
BlobPreview,
Marquee,
},
props: {
address: {
@ -248,12 +272,9 @@ export default defineComponent({
</script>
<style lang="scss">
.inspect {
overflow: auto;
}
table {
width: 100%;
table-layout: fixed;
th {
text-align: left;
@ -270,8 +291,8 @@ table {
}
}
sl-input {
max-width: 8em;
.attr-action-col {
width: 2em;
}
}