Move to vue-material-design-icons
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
@@ -24,19 +24,23 @@
|
||||
<div v-if="card" class="badges">
|
||||
<div v-if="card.commentsCount > 0"
|
||||
v-tooltip="commentsHint"
|
||||
class="icon icon-comment"
|
||||
:class="{ 'icon-comment--unread': card.commentsUnread > 0 }"
|
||||
class="icon-badge"
|
||||
@click.stop="openComments">
|
||||
{{ card.commentsCount }}
|
||||
<CommentUnreadIcon v-if="card.commentsUnread > 0" size="16" />
|
||||
<CommentIcon v-else size="16" />
|
||||
<span>{{ card.commentsCount }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="card.description && checkListCount > 0" class="card-tasks icon icon-checkmark">
|
||||
{{ checkListCheckedCount }}/{{ checkListCount }}
|
||||
<div v-if="card.description && checkListCount > 0" class="icon-badge">
|
||||
<CheckmarkIcon :size="16" :title="t('deck', 'Todo items')" />
|
||||
<span>{{ checkListCheckedCount }}/{{ checkListCount }}</span>
|
||||
</div>
|
||||
<div v-else-if="card.description.trim() && checkListCount == 0" class="icon icon-description" />
|
||||
|
||||
<div v-if="card.attachmentCount > 0" class="icon-attach icon icon-attach-dark">
|
||||
{{ card.attachmentCount }}
|
||||
<TextIcon v-else-if="card.description.trim() && checkListCount == 0" size="16" decorative />
|
||||
|
||||
<div v-if="card.attachmentCount > 0" class="icon-badge">
|
||||
<AttachmentIcon size="16" />
|
||||
<span>{{ card.attachmentCount }}</span>
|
||||
</div>
|
||||
|
||||
<AvatarList :users="card.assignedUsers" />
|
||||
@@ -47,10 +51,15 @@
|
||||
<script>
|
||||
import AvatarList from './AvatarList'
|
||||
import CardMenu from './CardMenu'
|
||||
import TextIcon from 'vue-material-design-icons/Text.vue'
|
||||
import AttachmentIcon from 'vue-material-design-icons/Paperclip.vue'
|
||||
import CheckmarkIcon from 'vue-material-design-icons/CheckboxMarked.vue'
|
||||
import CommentIcon from 'vue-material-design-icons/Comment.vue'
|
||||
import CommentUnreadIcon from 'vue-material-design-icons/CommentAccount.vue'
|
||||
|
||||
export default {
|
||||
name: 'CardBadges',
|
||||
components: { AvatarList, CardMenu },
|
||||
components: { AvatarList, CardMenu, TextIcon, AttachmentIcon, CheckmarkIcon, CommentIcon, CommentUnreadIcon },
|
||||
props: {
|
||||
card: {
|
||||
type: Object,
|
||||
@@ -89,18 +98,13 @@ export default {
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
|
||||
.icon {
|
||||
opacity: 0.5;
|
||||
padding: 10px 20px;
|
||||
padding-right: 4px;
|
||||
margin-right: 5px;
|
||||
background-position: left;
|
||||
background-size: 16px;
|
||||
.icon-badge {
|
||||
opacity: .7;
|
||||
display: flex;
|
||||
margin-right: 2px;
|
||||
|
||||
span {
|
||||
margin-left: 18px;
|
||||
}
|
||||
&.icon-comment--unread {
|
||||
opacity: 1;
|
||||
padding: 10px 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user