This commit is contained in:
Ulf Gebhardt 2019-04-09 11:07:41 +02:00
parent 0664fc044c
commit bc868044ef
No known key found for this signature in database
GPG Key ID: 44C888923CC8E7F3
5 changed files with 127 additions and 53 deletions

View File

@ -1,16 +1,19 @@
<template>
<ds-tag>
<ds-icon size="large" :name="icon"/>
<ds-icon
size="large"
:name="icon"
/>
{{ name }}
</ds-tag>
</template>
<script>
export default {
name: 'hc-category',
name: 'HcCategory',
props: {
icon: { type: String },
name: { type: String }
icon: { type: String, required: true },
name: { type: String, required: true }
}
}
</script>

View File

@ -6,10 +6,11 @@
import moment from 'moment'
export default {
name: 'hc-relative-date-time',
name: 'HcRelativeDateTime',
props: {
dateTime: {
type: [Date, String]
type: [Date, String],
required: true
}
},
data() {
@ -33,6 +34,15 @@ export default {
this.calcRelativeDateTime()
}
},
created() {
this.calcRelativeDateTime()
},
mounted() {
this.calcRelativeDateTime()
},
destroyed() {
clearTimeout(this.timeout)
},
methods: {
calcRelativeDateTime() {
clearTimeout(this.timeout)
@ -58,15 +68,6 @@ export default {
this.calcRelativeDateTime()
}, this.interval)
}
},
created() {
this.calcRelativeDateTime()
},
mounted() {
this.calcRelativeDateTime()
},
destroyed() {
clearTimeout(this.timeout)
}
}
</script>

View File

@ -1,15 +1,15 @@
<template>
<ds-tag>
<ds-icon name="tag"/>
<ds-icon name="tag" />
{{ name }}
</ds-tag>
</template>
<script>
export default {
name: 'hc-tag',
name: 'HcTag',
props: {
name: { type: String }
name: { type: String, required: true }
}
}
</script>

View File

@ -3,16 +3,36 @@
<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;"
>
@ -30,10 +50,17 @@
>{{ 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 :dateTime="dateTime"/>
<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" />
</ds-text>
</div>
</div>
@ -41,7 +68,10 @@
</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"
@ -50,13 +80,17 @@
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">
@ -76,7 +110,11 @@
</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"
@ -87,7 +125,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>

View File

@ -1,12 +1,18 @@
<template>
<transition name="fade" appear>
<transition
name="fade"
appear
>
<ds-card
v-if="post && ready"
:image="post.image"
:class="{'post-card': true, 'disabled-content': post.disabled}"
>
<ds-space margin-bottom="small"/>
<hc-user :user="post.author" :dateTime="post.createdAt"/>
<ds-space margin-bottom="small" />
<hc-user
:user="post.author"
:date-time="post.createdAt"
/>
<no-ssr>
<content-menu
placement="bottom-end"
@ -15,31 +21,46 @@
:is-owner="isAuthor(post.author.id)"
/>
</no-ssr>
<ds-space margin-bottom="small"/>
<ds-heading tag="h3" no-margin>{{ post.title }}</ds-heading>
<ds-space margin-bottom="small"/>
<ds-space margin-bottom="small" />
<ds-heading
tag="h3"
no-margin
>
{{ post.title }}
</ds-heading>
<ds-space margin-bottom="small" />
<!-- Content -->
<!-- eslint-disable vue/no-v-html -->
<!-- TODO: replace editor content with tiptap render view -->
<div class="content hc-editor-content" v-html="post.content"/>
<div
class="content hc-editor-content"
v-html="post.content"
/>
<!-- eslint-enable vue/no-v-html -->
<ds-space margin="xx-large"/>
<ds-space margin="xx-large" />
<!-- Categories -->
<div class="categories">
<ds-space margin="xx-small"/>
<ds-space margin="xx-small" />
<hc-category
v-for="category in post.categories"
v-tooltip="{content: category.name, placement: 'top-start', delay: { show: 300 }}"
:key="category.id"
v-tooltip="{content: category.name, placement: 'top-start', delay: { show: 300 }}"
:icon="category.icon"
:name="category.name"
/>
</div>
<ds-space margin-bottom="small"/>
<ds-space margin-bottom="small" />
<!-- Tags -->
<div class="tags" v-if="post.tags && post.tags.length">
<ds-space margin="xx-small"/>
<hc-tag v-for="tag in post.tags" :key="tag.id" :name="tag.name"/>
<div
v-if="post.tags && post.tags.length"
class="tags"
>
<ds-space margin="xx-small" />
<hc-tag
v-for="tag in post.tags"
:key="tag.id"
:name="tag.name"
/>
</div>
<!-- Shout Button -->
<hc-shout-button
@ -49,12 +70,12 @@
:is-shouted="post.shoutedByCurrentUser"
:post-id="post.id"
/>
<ds-space margin="small"/>
<ds-space margin="small" />
<!-- Comments -->
<ds-section slot="footer">
<h3 style="margin-top: 0;">
<span>
<ds-icon name="comments"/>
<ds-icon name="comments" />
<ds-tag
v-if="post.comments"
style="margin-top: -4px; margin-left: -12px; position: absolute;"
@ -64,11 +85,22 @@
>{{ post.commentsCount }}</ds-tag>&nbsp; Comments
</span>
</h3>
<ds-space margin-bottom="large"/>
<div v-if="post.comments" id="comments" class="comments">
<comment v-for="comment in post.comments" :key="comment.id" :comment="comment"/>
<ds-space margin-bottom="large" />
<div
v-if="post.comments"
id="comments"
class="comments"
>
<comment
v-for="comment in post.comments"
:key="comment.id"
:comment="comment"
/>
</div>
<hc-empty v-else icon="messages"/>
<hc-empty
v-else
icon="messages"
/>
</ds-section>
</ds-card>
</transition>