import { NcAvatar, NcPopoverMenu, Tooltip } from '@nextcloud/vue'
import { generateUrl } from '@nextcloud/router'
+import AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'
export default {
name: 'AvatarList',
components: {
NcAvatar,
NcPopoverMenu,
+ AccountMultiple,
},
directives: {
tooltip: Tooltip,
@@ -151,7 +153,6 @@ export default {
diff --git a/src/components/cards/CardCover.vue b/src/components/cards/CardCover.vue
index b685aeb59..f8efbcf24 100644
--- a/src/components/cards/CardCover.vue
+++ b/src/components/cards/CardCover.vue
@@ -85,6 +85,10 @@ export default {
.card-cover {
height: 100px;
display: flex;
+ margin-top: -8px;
+ margin-left: -8px;
+ margin-right: -8px;
+
.image-wrapper {
flex: 1;
position: relative;
diff --git a/src/components/cards/CardItem.vue b/src/components/cards/CardItem.vue
index c6c007efd..3312e223f 100644
--- a/src/components/cards/CardItem.vue
+++ b/src/components/cards/CardItem.vue
@@ -64,24 +64,29 @@
-
-
-
-
+
-
-
- {{ label.title }}
-
-
+
+
+
+ {{ label.title }}
+
+
+
+
-
@@ -95,13 +100,11 @@ import Color from '../../mixins/color.js'
import labelStyle from '../../mixins/labelStyle.js'
import AttachmentDragAndDrop from '../AttachmentDragAndDrop.vue'
import CardMenu from './CardMenu.vue'
-import Done from './badges/Done.vue'
-import DueDate from './badges/DueDate.vue'
import CardCover from './CardCover.vue'
export default {
name: 'CardItem',
- components: { CardBadges, AttachmentDragAndDrop, CardMenu, DueDate, CardCover, Done },
+ components: { CardBadges, AttachmentDragAndDrop, CardMenu, CardCover },
directives: {
ClickOutside,
},
@@ -165,6 +168,39 @@ export default {
labelsSorted() {
return [...this.card.labels].sort((a, b) => (a.title < b.title) ? -1 : 1)
},
+ hasLabels() {
+ return this.card.labels.length > 0
+ },
+ hasBadges() {
+ return this.card.done
+ || this.card.duedate
+ || this.idBadge
+ || this.card.commentsCount > 0
+ || this.card.description
+ || this.card.attachmentCount > 0
+ || this.card.assignedUsers.length > 0
+ },
+ idBadge() {
+ return this.$store.getters.config('cardIdBadge')
+ },
+ showMenuAtTitle() {
+ if (this.editing) {
+ return false
+ }
+ return this.compactMode || (!this.compactMode && !this.hasBadges && !this.hasLabels)
+ },
+ showMenuAtLabels() {
+ if (this.compactMode) {
+ return false
+ }
+ return !this.hasBadges && this.hasLabels
+ },
+ showMenuAtBadges() {
+ if (this.compactMode) {
+ return false
+ }
+ return this.hasBadges
+ },
},
watch: {
currentCard(newValue) {
@@ -219,8 +255,12 @@ export default {
font-size: 100%;
background-color: var(--color-main-background);
margin-bottom: $card-spacing;
+ padding: $card-padding;
border: 2px solid var(--color-border);
width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
&:deep(*) {
cursor: pointer;
@@ -240,7 +280,6 @@ export default {
.card-upper {
display: flex;
- min-height: 44px;
form {
display: flex;
padding: 3px 5px;
@@ -251,13 +290,14 @@ export default {
}
h3 {
- margin: 5px $card-padding;
+ margin: 0;
padding: 6px;
flex-grow: 1;
font-size: 100%;
overflow: hidden;
word-wrap: break-word;
padding-left: 4px;
+ align-self: center;
&.editable {
cursor: text;
@@ -270,6 +310,10 @@ export default {
input[type=text] {
font-size: 100%;
}
+ .card-menu {
+ height: 44px;
+ align-self: end;
+ }
}
/* stylelint-disable-next-line no-invalid-position-at-import-rule */
@@ -277,13 +321,6 @@ export default {
.card-controls {
display: flex;
- margin-left: $card-padding;
- margin-right: $card-padding;
-
- & > div {
- display: flex;
- max-height: 44px;
- }
}
&.card__editable .card-controls {
margin-right: 0;
@@ -291,10 +328,15 @@ export default {
&.card__archived {
background-color: var(--color-background-dark);
}
- }
+ .card-labels {
+ display: flex;
+ align-items: end;
- .duedate {
- margin-right: 9px;
+ .labels {
+ flex-wrap: wrap;
+ align-self: flex-start;
+ }
+ }
}
.right {
@@ -346,6 +388,11 @@ export default {
.card {
@include dark-card;
}
+ }
+ @media print {
+ .card-menu {
+ display: none;
+ }
}
diff --git a/src/components/cards/CardMenu.vue b/src/components/cards/CardMenu.vue
index 91acc65bd..c1d355095 100644
--- a/src/components/cards/CardMenu.vue
+++ b/src/components/cards/CardMenu.vue
@@ -21,7 +21,7 @@
-->
-
+