Merge pull request #1669 from nextcloud/enh/design-card
Adjust card design
This commit is contained in:
Julius Härtl
GitHub
@@ -40,6 +40,7 @@
|
||||
"@nextcloud/vue": "^1.4.1",
|
||||
"blueimp-md5": "^2.13.0",
|
||||
"dompurify": "^2.0.8",
|
||||
"moment": "^2.24.0",
|
||||
"nextcloud-vue-collections": "^0.7.2",
|
||||
"p-queue": "^6.3.0",
|
||||
"url-search-params-polyfill": "^8.0.0",
|
||||
|
||||
@@ -276,7 +276,7 @@ export default {
|
||||
this.copiedCard = JSON.parse(JSON.stringify(this.currentCard))
|
||||
this.allLabels = this.currentCard.labels
|
||||
|
||||
if (this.currentCard.assignedUsers.length > 0) {
|
||||
if (this.currentCard.assignedUsers && this.currentCard.assignedUsers.length > 0) {
|
||||
this.assignedUsers = this.currentCard.assignedUsers.map((item) => item.participant)
|
||||
} else {
|
||||
this.assignedUsers = []
|
||||
|
||||
@@ -22,16 +22,10 @@
|
||||
|
||||
<template>
|
||||
<div class="badges">
|
||||
<div v-if="false && card.description" class="icon icon-edit" />
|
||||
|
||||
<div v-if="card.commentsUnread > 0" class="icon icon-comment" />
|
||||
|
||||
<div v-if="card.duedate" :class="dueIcon">
|
||||
<span>{{ relativeDate }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="card.description && checkListCount > 0" class="card-tasks icon icon-checkmark">
|
||||
<span>{{ checkListCheckedCount }}/{{ checkListCount }}</span>
|
||||
{{ checkListCheckedCount }}/{{ checkListCount }}
|
||||
</div>
|
||||
|
||||
<div v-if="card.attachmentCount > 0" class="icon-attach icon icon-attach-dark">
|
||||
@@ -39,22 +33,79 @@
|
||||
</div>
|
||||
|
||||
<AvatarList :users="card.assignedUsers" />
|
||||
|
||||
<div @click.stop.prevent>
|
||||
<Actions v-if="canEdit">
|
||||
<ActionButton v-if="showArchived === false" icon="icon-user" @click="assignCardToMe()">
|
||||
{{ t('deck', 'Assign to me') }}
|
||||
</ActionButton>
|
||||
<ActionButton icon="icon-archive" @click="archiveUnarchiveCard()">
|
||||
{{ t('deck', (showArchived ? 'Unarchive card' : 'Archive card')) }}
|
||||
</ActionButton>
|
||||
<ActionButton v-if="showArchived === false" icon="icon-delete" @click="deleteCard()">
|
||||
{{ t('deck', 'Delete card') }}
|
||||
</ActionButton>
|
||||
<ActionButton icon="icon-external" @click.stop="modalShow=true">
|
||||
{{ t('deck', 'Move card') }}
|
||||
</ActionButton>
|
||||
<ActionButton icon="icon-settings-dark" @click="openCard">
|
||||
{{ t('deck', 'Card details') }}
|
||||
</ActionButton>
|
||||
</Actions>
|
||||
</div>
|
||||
<Modal v-if="modalShow" title="Move card to another board" @close="modalShow=false">
|
||||
<div class="modal__content">
|
||||
<Multiselect v-model="selectedBoard"
|
||||
:placeholder="t('deck', 'Select a board')"
|
||||
:options="boards"
|
||||
label="title"
|
||||
@select="loadStacksFromBoard" />
|
||||
<Multiselect v-model="selectedStack"
|
||||
:placeholder="t('deck', 'Select a stack')"
|
||||
:options="stacksFromBoard"
|
||||
label="title" />
|
||||
|
||||
<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
|
||||
{{ t('deck', 'Move card') }}
|
||||
</button>
|
||||
<button @click="modalShow=false">
|
||||
{{ t('deck', 'Cancel') }}
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AvatarList from './AvatarList'
|
||||
import moment from '@nextcloud/moment'
|
||||
import { Modal, Actions, ActionButton, Multiselect } from '@nextcloud/vue'
|
||||
import { mapGetters, mapState } from 'vuex'
|
||||
import axios from '@nextcloud/axios'
|
||||
|
||||
export default {
|
||||
name: 'CardBadges',
|
||||
components: { AvatarList },
|
||||
components: { AvatarList, Actions, ActionButton, Modal, Multiselect },
|
||||
props: {
|
||||
id: {
|
||||
type: Number,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
modalShow: false,
|
||||
selectedBoard: '',
|
||||
selectedStack: '',
|
||||
stacksFromBoard: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'canEdit',
|
||||
]),
|
||||
...mapState({
|
||||
showArchived: state => state.showArchived,
|
||||
currentBoard: state => state.currentBoard,
|
||||
}),
|
||||
checkListCount() {
|
||||
return (this.card.description.match(/\[\s*\x*\]/g) || []).length
|
||||
},
|
||||
@@ -67,28 +118,53 @@ export default {
|
||||
card() {
|
||||
return this.$store.getters.cardById(this.id)
|
||||
},
|
||||
dueDateTooltip() {
|
||||
return moment(this.card.duedate).format('LLLL')
|
||||
isBoardAndStackChoosen() {
|
||||
if (this.selectedBoard === '' || this.selectedStack === '') {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
},
|
||||
relativeDate() {
|
||||
const diff = moment(this.$root.time).diff(this.card.duedate, 'seconds')
|
||||
if (diff >= 0 && diff < 45) {
|
||||
return t('core', 'seconds ago')
|
||||
}
|
||||
return moment(this.card.duedate).fromNow()
|
||||
boards() {
|
||||
return this.$store.getters.boards.filter(board => {
|
||||
return board.id !== this.currentBoard.id
|
||||
})
|
||||
},
|
||||
dueIcon() {
|
||||
const days = Math.floor(moment(this.card.duedate).diff(this.$root.time, 'seconds') / 60 / 60 / 24)
|
||||
if (days < 0) {
|
||||
return 'icon-calendar due icon overdue'
|
||||
},
|
||||
methods: {
|
||||
openCard() {
|
||||
this.$router.push({ name: 'card', params: { cardId: this.id } })
|
||||
},
|
||||
deleteCard() {
|
||||
this.$store.dispatch('deleteCard', this.card)
|
||||
},
|
||||
archiveUnarchiveCard() {
|
||||
this.$store.dispatch('archiveUnarchiveCard', { ...this.card, archived: !this.card.archived })
|
||||
},
|
||||
assignCardToMe() {
|
||||
this.copiedCard = Object.assign({}, this.card)
|
||||
this.$store.dispatch('assignCardToUser', {
|
||||
card: this.copiedCard,
|
||||
assignee: {
|
||||
userId: OC.getCurrentUser().uid,
|
||||
type: 0,
|
||||
},
|
||||
})
|
||||
},
|
||||
moveCard() {
|
||||
this.copiedCard = Object.assign({}, this.card)
|
||||
this.copiedCard.stackId = this.selectedStack.id
|
||||
this.$store.dispatch('moveCard', this.copiedCard)
|
||||
this.modalShow = false
|
||||
},
|
||||
async loadStacksFromBoard(board) {
|
||||
try {
|
||||
console.debug(board)
|
||||
const url = OC.generateUrl('/apps/deck/stacks/' + board.id)
|
||||
const response = await axios.get(url)
|
||||
this.stacksFromBoard = response.data
|
||||
} catch (err) {
|
||||
return err
|
||||
}
|
||||
if (days === 0) {
|
||||
return 'icon-calendar-dark due icon now'
|
||||
}
|
||||
if (days === 1) {
|
||||
return 'icon-calendar-dark due icon next'
|
||||
}
|
||||
return 'icon-calendar-dark due icon'
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -102,7 +178,7 @@ export default {
|
||||
|
||||
.icon {
|
||||
opacity: 0.5;
|
||||
padding: 12px 14px;
|
||||
padding: 12px 18px;
|
||||
padding-right: 4px;
|
||||
margin-right: 5px;
|
||||
background-position: left;
|
||||
@@ -153,4 +229,27 @@ export default {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity .125s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.modal__content {
|
||||
width: 25vw;
|
||||
min-width: 250px;
|
||||
height: 120px;
|
||||
text-align: center;
|
||||
margin: 20px 20px 60px 20px;
|
||||
|
||||
.multiselect {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal__content button {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -47,44 +47,11 @@
|
||||
<input type="button" class="icon-confirm" @click="finishedEdit(card)">
|
||||
</form>
|
||||
|
||||
<Actions v-if="canEdit && !editing" @click.stop.prevent>
|
||||
<ActionButton v-if="showArchived === false" icon="icon-user" @click="assignCardToMe()">
|
||||
{{ t('deck', 'Assign to me') }}
|
||||
</ActionButton>
|
||||
<ActionButton icon="icon-archive" @click="archiveUnarchiveCard()">
|
||||
{{ t('deck', (showArchived ? 'Unarchive card' : 'Archive card')) }}
|
||||
</ActionButton>
|
||||
<ActionButton v-if="showArchived === false" icon="icon-delete" @click="deleteCard()">
|
||||
{{ t('deck', 'Delete card') }}
|
||||
</ActionButton>
|
||||
<ActionButton icon="icon-external" @click.stop="modalShow=true">
|
||||
{{ t('deck', 'Move card') }}
|
||||
</ActionButton>
|
||||
<ActionButton icon="icon-settings-dark" @click="openCard">
|
||||
{{ t('deck', 'Card details') }}
|
||||
</ActionButton>
|
||||
</Actions>
|
||||
|
||||
<Modal v-if="modalShow" title="Move card to another board" @close="modalShow=false">
|
||||
<div class="modal__content">
|
||||
<Multiselect v-model="selectedBoard"
|
||||
:placeholder="t('deck', 'Select a board')"
|
||||
:options="boards"
|
||||
label="title"
|
||||
@select="loadStacksFromBoard" />
|
||||
<Multiselect v-model="selectedStack"
|
||||
:placeholder="t('deck', 'Select a stack')"
|
||||
:options="stacksFromBoard"
|
||||
label="title" />
|
||||
|
||||
<button :disabled="!isBoardAndStackChoosen" class="primary" @click="moveCard">
|
||||
{{ t('deck', 'Move card') }}
|
||||
</button>
|
||||
<button @click="modalShow=false">
|
||||
{{ t('deck', 'Cancel') }}
|
||||
</button>
|
||||
<div v-if="!editing" class="right">
|
||||
<div v-if="card.duedate" :class="dueIcon">
|
||||
<span>{{ relativeDate }}</span>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
<ul v-if="card.labels && card.labels.length > 0" class="labels" @click="openCard">
|
||||
<li v-for="label in card.labels" :key="label.id" :style="labelStyle(label)">
|
||||
@@ -99,11 +66,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Modal, Actions, ActionButton, Multiselect } from '@nextcloud/vue'
|
||||
import ClickOutside from 'vue-click-outside'
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import axios from '@nextcloud/axios'
|
||||
|
||||
import moment from 'moment'
|
||||
import CardBadges from './CardBadges'
|
||||
import Color from '../../mixins/color'
|
||||
import labelStyle from '../../mixins/labelStyle'
|
||||
@@ -111,7 +76,7 @@ import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
|
||||
|
||||
export default {
|
||||
name: 'CardItem',
|
||||
components: { Modal, CardBadges, Actions, ActionButton, Multiselect, AttachmentDragAndDrop },
|
||||
components: { CardBadges, AttachmentDragAndDrop },
|
||||
directives: {
|
||||
ClickOutside,
|
||||
},
|
||||
@@ -124,13 +89,8 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menuOpened: false,
|
||||
editing: false,
|
||||
copiedCard: '',
|
||||
modalShow: false,
|
||||
selectedBoard: '',
|
||||
selectedStack: '',
|
||||
stacksFromBoard: [],
|
||||
copiedCard: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -145,34 +105,37 @@ export default {
|
||||
card() {
|
||||
return this.$store.getters.cardById(this.id)
|
||||
},
|
||||
boards() {
|
||||
return this.$store.getters.boards.filter(board => {
|
||||
return board.id !== this.currentBoard.id
|
||||
})
|
||||
},
|
||||
menu() {
|
||||
return []
|
||||
},
|
||||
currentCard() {
|
||||
return this.$route.params.cardId === this.id
|
||||
},
|
||||
isBoardAndStackChoosen() {
|
||||
if (this.selectedBoard === '' || this.selectedStack === '') {
|
||||
return false
|
||||
relativeDate() {
|
||||
const diff = moment(this.$root.time).diff(this.card.duedate, 'seconds')
|
||||
if (diff >= 0 && diff < 45) {
|
||||
return t('core', 'seconds ago')
|
||||
}
|
||||
return true
|
||||
return moment(this.card.duedate).fromNow()
|
||||
},
|
||||
dueIcon() {
|
||||
const days = Math.floor(moment(this.card.duedate).diff(this.$root.time, 'seconds') / 60 / 60 / 24)
|
||||
if (days < 0) {
|
||||
return 'icon-calendar due icon overdue'
|
||||
}
|
||||
if (days === 0) {
|
||||
return 'icon-calendar-dark due icon now'
|
||||
}
|
||||
if (days === 1) {
|
||||
return 'icon-calendar-dark due icon next'
|
||||
}
|
||||
return 'icon-calendar-dark due icon'
|
||||
},
|
||||
dueDateTooltip() {
|
||||
return moment(this.card.duedate).format('LLLL')
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openCard() {
|
||||
this.$router.push({ name: 'card', params: { cardId: this.id } })
|
||||
},
|
||||
togglePopoverMenu() {
|
||||
this.menuOpened = !this.menuOpened
|
||||
},
|
||||
hidePopoverMenu() {
|
||||
this.menuOpened = false
|
||||
},
|
||||
startEditing(card) {
|
||||
this.copiedCard = Object.assign({}, card)
|
||||
this.editing = true
|
||||
@@ -186,39 +149,6 @@ export default {
|
||||
cancelEdit() {
|
||||
this.editing = false
|
||||
},
|
||||
deleteCard() {
|
||||
this.$store.dispatch('deleteCard', this.card)
|
||||
},
|
||||
archiveUnarchiveCard() {
|
||||
this.copiedCard = Object.assign({}, this.card)
|
||||
this.copiedCard.archived = !this.copiedCard.archived
|
||||
this.$store.dispatch('archiveUnarchiveCard', this.copiedCard)
|
||||
},
|
||||
assignCardToMe() {
|
||||
this.copiedCard = Object.assign({}, this.card)
|
||||
this.$store.dispatch('assignCardToUser', {
|
||||
card: this.copiedCard,
|
||||
assignee: {
|
||||
userId: OC.getCurrentUser().uid,
|
||||
type: 0,
|
||||
},
|
||||
})
|
||||
},
|
||||
async loadStacksFromBoard(board) {
|
||||
try {
|
||||
const url = OC.generateUrl('/apps/deck/stacks/' + board.id)
|
||||
const response = await axios.get(url)
|
||||
this.stacksFromBoard = response.data
|
||||
} catch (err) {
|
||||
return err
|
||||
}
|
||||
},
|
||||
moveCard() {
|
||||
this.copiedCard = Object.assign({}, this.card)
|
||||
this.copiedCard.stackId = this.selectedStack.id
|
||||
this.$store.dispatch('moveCard', this.copiedCard)
|
||||
this.modalShow = false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -227,13 +157,6 @@ export default {
|
||||
$card-spacing: 10px;
|
||||
$card-padding: 10px;
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity .125s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
body.dark .card {
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
@@ -290,8 +213,8 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
padding: 1px 3px;
|
||||
border-radius: 3px;
|
||||
padding: 3px 7px;
|
||||
border-radius: 15px;
|
||||
font-size: 85%;
|
||||
margin-right: 3px;
|
||||
margin-bottom: 3px;
|
||||
@@ -314,13 +237,56 @@ export default {
|
||||
.card-controls {
|
||||
display: flex;
|
||||
margin-left: $card-padding;
|
||||
margin-right: $card-padding;
|
||||
& > div {
|
||||
display: flex;
|
||||
max-height: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-right: 9px;
|
||||
}
|
||||
|
||||
.icon.due {
|
||||
background-position: 4px center;
|
||||
border-radius: 3px;
|
||||
margin-top: 9px;
|
||||
margin-bottom: 9px;
|
||||
padding: 3px 4px;
|
||||
font-size: 90%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
opacity: .5;
|
||||
flex-shrink: 1;
|
||||
z-index: 2;
|
||||
|
||||
.icon {
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
&.overdue {
|
||||
background-color: var(--color-error);
|
||||
color: var(--color-primary-text);
|
||||
opacity: .7;
|
||||
}
|
||||
&.now {
|
||||
background-color: var(--color-warning);
|
||||
opacity: .7;
|
||||
}
|
||||
&.next {
|
||||
background-color: var(--color-background-dark);
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 20px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.compact {
|
||||
min-height: 50px;
|
||||
@@ -340,20 +306,4 @@ export default {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.modal__content {
|
||||
width: 25vw;
|
||||
min-width: 250px;
|
||||
height: 120px;
|
||||
text-align: center;
|
||||
margin: 20px 20px 60px 20px;
|
||||
|
||||
.multiselect {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal__content button {
|
||||
float: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user