Move to vue-material-design-icons

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2022-05-11 21:39:54 +02:00
parent cb27f36f66
commit 9de6a61ea5
26 changed files with 183 additions and 129 deletions

View File

@@ -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;
}
}
}