removed moment lib, added readme for RelativeDateTime & moved it to subdirectory

This commit is contained in:
Ulf Gebhardt 2019-04-10 14:26:38 +02:00
parent 87fbdb576d
commit 6961f50b78
No known key found for this signature in database
GPG Key ID: 44C888923CC8E7F3
5 changed files with 32 additions and 83 deletions

View File

@ -0,0 +1,7 @@
### Example
Relative time from 08.03.2017
```
<hc-relative-date-time dateTime="03.08.2017" />
```

View File

@ -3,8 +3,6 @@
</template>
<script>
import moment from 'moment'
export default {
name: 'HcRelativeDateTime',
props: {
@ -21,11 +19,6 @@ export default {
absoluteTime: null
}
},
computed: {
locale() {
return this.$i18n.locale() || 'en'
}
},
watch: {
locale() {
this.calcRelativeDateTime()
@ -45,17 +38,18 @@ export default {
},
methods: {
calcRelativeDateTime() {
// Reset Timer
clearTimeout(this.timeout)
let t = moment(this.dateTime).locale(this.locale)
this.absoluteTime = t.format('llll')
this.relativeDateTime = t.utc().fromNow()
// Calculate Relative Date
this.relativeDateTime = this.$filters.relativeDateTime(this.dateTime)
if (!process.browser) {
return
}
if (
// TODO It is unclear what exactly this does and how to archive it
/*if (
this.relativeDateTime ===
t
.add(this.interval, 'milliseconds')
@ -63,7 +57,9 @@ export default {
.fromNow()
) {
this.interval += 15000
}
}*/
// Recalculate Timer
this.timeout = setTimeout(() => {
this.calcRelativeDateTime()
}, this.interval)

View File

@ -3,36 +3,16 @@
<div
style="display: inline-block; float: left; margin-right: 4px; height: 100%; vertical-align: middle;"
>
<ds-avatar
style="display: inline-block; vertical-align: middle;"
size="32px"
/>
<ds-avatar style="display: inline-block; vertical-align: middle;" size="32px"/>
</div>
<div style="display: inline-block; height: 100%; vertical-align: middle;">
<b
class="username"
style="vertical-align: middle;"
>Anonymus</b>
<b class="username" style="vertical-align: middle;">Anonymus</b>
</div>
</div>
<dropdown
v-else
:class="{'disabled-content': user.disabled}"
placement="top-start"
offset="0"
>
<template
slot="default"
slot-scope="{openMenu, closeMenu, isOpen}"
>
<nuxt-link
:to="userLink"
:class="['user', isOpen && 'active']"
>
<div
@mouseover="openMenu(true)"
@mouseleave="closeMenu(true)"
>
<dropdown v-else :class="{'disabled-content': user.disabled}" placement="top-start" offset="0">
<template slot="default" slot-scope="{openMenu, closeMenu, isOpen}">
<nuxt-link :to="userLink" :class="['user', isOpen && 'active']">
<div @mouseover="openMenu(true)" @mouseleave="closeMenu(true)">
<div
style="display: inline-block; float: left; margin-right: 4px; height: 100%; vertical-align: middle;"
>
@ -50,17 +30,10 @@
>{{ user.name | truncate(trunc, 18) }}</b>
</div>
<!-- Time -->
<div
v-if="dateTime"
style="display: inline;"
>
<ds-text
align="right"
size="small"
color="soft"
>
<ds-icon name="clock" />&nbsp;
<hc-relative-date-time :date-time="dateTime" />
<div v-if="dateTime" style="display: inline;">
<ds-text align="right" size="small" color="soft">
<ds-icon name="clock"/>
<hc-relative-date-time :date-time="dateTime"/>
</ds-text>
</div>
</div>
@ -68,10 +41,7 @@
</template>
<template slot="popover">
<div style="min-width: 250px">
<hc-badges
v-if="user.badges && user.badges.length"
:badges="user.badges"
/>
<hc-badges v-if="user.badges && user.badges.length" :badges="user.badges"/>
<ds-text
v-if="user.location"
align="center"
@ -80,17 +50,13 @@
style="margin-top: 5px"
bold
>
<ds-icon name="map-marker" />
<ds-icon name="map-marker"/>
{{ user.location.name }}
</ds-text>
<ds-flex style="margin-top: -10px">
<ds-flex-item class="ds-tab-nav-item">
<ds-space margin="small">
<ds-number
:count="fanCount"
:label="$t('profile.followers')"
size="x-large"
/>
<ds-number :count="fanCount" :label="$t('profile.followers')" size="x-large"/>
</ds-space>
</ds-flex-item>
<ds-flex-item class="ds-tab-nav-item ds-tab-nav-item-active">
@ -110,11 +76,7 @@
</ds-space>
</ds-flex-item>
</ds-flex>
<ds-flex
v-if="!itsMe"
gutter="x-small"
style="margin-bottom: 0;"
>
<ds-flex v-if="!itsMe" gutter="x-small" style="margin-bottom: 0;">
<ds-flex-item :width="{base: 3}">
<hc-follow-button
:follow-id="user.id"
@ -125,7 +87,7 @@
</ds-flex-item>
<ds-flex-item :width="{base: 1}">
<ds-button fullwidth>
<ds-icon name="user-times" />
<ds-icon name="user-times"/>
</ds-button>
</ds-flex-item>
</ds-flex>
@ -138,7 +100,7 @@
<script>
import { mapGetters } from 'vuex'
import HcRelativeDateTime from '~/components/RelativeDateTime.vue'
import HcRelativeDateTime from '~/components/RelativeDateTime'
import HcFollowButton from '~/components/FollowButton.vue'
import HcBadges from '~/components/Badges.vue'
import Dropdown from '~/components/Dropdown'

View File

@ -47,7 +47,6 @@
"graphql": "~14.2.1",
"jsonwebtoken": "~8.5.1",
"linkify-it": "~2.1.0",
"moment": "^2.24.0",
"nuxt": "~2.4.5",
"nuxt-env": "~0.1.0",
"string-hash": "^1.1.3",
@ -82,4 +81,4 @@
"vue-jest": "~3.0.4",
"vue-svg-loader": "~0.12.0"
}
}
}

View File

@ -1368,11 +1368,6 @@
"@types/express-serve-static-core" "*"
"@types/mime" "*"
"@types/stack-utils@^1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
"@types/strip-bom@^3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@types/strip-bom/-/strip-bom-3.0.0.tgz#14a8ec3956c2e81edb7520790aecf21c290aebd2"
@ -7104,11 +7099,6 @@ mkdirp@0.5.1, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkd
dependencies:
minimist "0.0.8"
moment@^2.24.0:
version "2.24.0"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
move-concurrently@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@ -9806,11 +9796,6 @@ stack-trace@0.0.10:
resolved "https://registry.yarnpkg.com/stack-trace/-/stack-trace-0.0.10.tgz#547c70b347e8d32b4e108ea1a2a159e5fdde19c0"
integrity sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA=
stack-utils@^1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.2.tgz#33eba3897788558bebfc2db059dc158ec36cebb8"
integrity sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==
stackframe@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.0.4.tgz#357b24a992f9427cba6b545d96a14ed2cbca187b"