Follow-up for date tooltip (#766)

- ​load the Tooltip component on demand
- to show date in format same to Github and Gitea use it for commit ago time tooltips
This commit is contained in:
Anbraten 2022-02-14 11:02:17 +01:00 committed by GitHub
parent 905350fa15
commit 637291db4e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 47 additions and 13 deletions

View file

@ -20,6 +20,7 @@
"@kyvg/vue3-notification": "2.3.4",
"@meforma/vue-toaster": "1.2.2",
"ansi-to-html": "0.7.2",
"dayjs": "1.10.7",
"floating-vue": "2.0.0-beta.5",
"fuse.js": "6.4.6",
"humanize-duration": "3.27.0",

View file

@ -7,7 +7,10 @@
<div class="flex flex-col mt-2">
<div class="flex space-x-2 items-center">
<Icon name="since" />
<span v-tooltip="'Created at ' + created">{{ since }}</span>
<Tooltip>
<span>{{ since }}</span>
<template #popper><span class="font-bold">Created</span> {{ created }}</template>
</Tooltip>
</div>
<div class="flex space-x-2 items-center">
<Icon name="duration" />
@ -19,6 +22,7 @@
</template>
<script lang="ts">
import { Tooltip } from 'floating-vue';
import { defineComponent, PropType, toRef } from 'vue';
import Icon from '~/components/atomic/Icon.vue';
@ -29,7 +33,7 @@ import { BuildFeed } from '~/lib/api/types';
export default defineComponent({
name: 'BuildFeedItem',
components: { BuildStatusIcon, Icon },
components: { BuildStatusIcon, Icon, Tooltip },
props: {
build: {

View file

@ -60,7 +60,10 @@
<div class="flex space-x-2 items-center min-w-0">
<Icon name="since" />
<span v-tooltip="'Created at ' + created" class="truncate">{{ since }}</span>
<Tooltip>
<span>{{ since }}</span>
<template #popper><span class="font-bold">Created</span> {{ created }}</template>
</Tooltip>
</div>
</div>
</div>
@ -68,6 +71,7 @@
</template>
<script lang="ts">
import { Tooltip } from 'floating-vue';
import { defineComponent, PropType, toRef } from 'vue';
import Icon from '~/components/atomic/Icon.vue';
@ -81,7 +85,7 @@ import { Build } from '~/lib/api/types';
export default defineComponent({
name: 'BuildItem',
components: { Icon, BuildStatusIcon, ListItem, BuildRunningIcon },
components: { Icon, BuildStatusIcon, ListItem, BuildRunningIcon, Tooltip },
props: {
build: {

View file

@ -1,11 +1,14 @@
import { computed, Ref } from 'vue';
import { useDate } from '~/compositions/useDate';
import { useElapsedTime } from '~/compositions/useElapsedTime';
import { Build } from '~/lib/api/types';
import { prettyDuration } from '~/utils/duration';
import { convertEmojis } from '~/utils/emoji';
import timeAgo from '~/utils/timeAgo';
const { toLocaleString } = useDate();
export default (build: Ref<Build | undefined>) => {
const sinceRaw = computed(() => {
if (!build.value) {
@ -104,8 +107,8 @@ export default (build: Ref<Build | undefined>) => {
const start = build.value.created_at || 0;
// sv-SE is in format YYYY-MM-DD HH:m:s
return new Date(start * 1000).toLocaleString('sv-SE');
return toLocaleString(new Date(start * 1000));
});
return { since, duration, message, prettyRef, created };
};

View file

@ -0,0 +1,18 @@
import dayjs from 'dayjs';
import advancedFormat from 'dayjs/plugin/advancedFormat';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
dayjs.extend(timezone);
dayjs.extend(utc);
dayjs.extend(advancedFormat);
export function useDate() {
function toLocaleString(date: Date) {
return dayjs(date).format('MMM D, YYYY, HH:mm z');
}
return {
toLocaleString,
};
}

View file

@ -2,7 +2,6 @@ import 'windi.css';
import 'floating-vue/dist/style.css'; // eslint-disable-line no-restricted-imports
import '~/compositions/useFavicon';
import { Tooltip, VClosePopper, VTooltip } from 'floating-vue';
import { createPinia } from 'pinia';
import { createApp } from 'vue';
@ -16,11 +15,6 @@ const app = createApp(App);
app.use(router);
app.use(notifications);
app.directive('tooltip', VTooltip);
app.directive('close-popper', VClosePopper);
app.component('v-tooltip', Tooltip); // eslint-disable-line vue/component-definition-name-casing
app.component('VTooltip', Tooltip);
app.use(createPinia());
app.mount('#app');

View file

@ -51,7 +51,10 @@
<div class="flex justify-between gap-x-4 text-gray-500 flex-shrink-0 pb-2 md:p-0 mx-auto md:mr-0">
<div class="flex space-x-1 items-center flex-shrink-0">
<Icon name="since" />
<span v-tooltip="'Created at ' + created">{{ since }}</span>
<Tooltip>
<span>{{ since }}</span>
<template #popper><span class="font-bold">Created</span> {{ created }}</template>
</Tooltip>
</div>
<div class="flex space-x-1 items-center flex-shrink-0">
<Icon name="duration" />
@ -66,6 +69,7 @@
</template>
<script lang="ts">
import { Tooltip } from 'floating-vue';
import {
computed,
defineComponent,
@ -105,6 +109,7 @@ export default defineComponent({
IconButton,
Tabs,
Tab,
Tooltip,
},
props: {

View file

@ -862,6 +862,11 @@ csstype@^2.6.8:
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa"
integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==
dayjs@1.10.7:
version "1.10.7"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.7.tgz#2cf5f91add28116748440866a0a1d26f3a6ce468"
integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==
debug@^2.6.9:
version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"