ahtlon/deck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Move duedate to separate component

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2020-07-11 10:41:41 +02:00
parent e3f1cdecc7
commit 24900629a6
4 changed files with 168 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/cards/CardBadges.vue
View File

@@ -21,7 +21,11 @@
-->
<template>
<<<<<<< HEAD
<div v-if="card" class="badges">
=======
<div class="badges" v-if="card">
>>>>>>> 37196bbf... Move duedate to separate component
<div v-if="card.commentsUnread > 0" class="icon icon-comment" />
<div v-if="card.description && checkListCount > 0" class="card-tasks icon icon-checkmark">
@@ -55,7 +59,11 @@ export default {
return (this.card.description.match(/^\s*([*+-]|(\d\.))\s+\[\s*(\s|x)\s*\](.*)$/gim) || []).length
},
checkListCheckedCount() {
<<<<<<< HEAD
return (this.card.description.match(/^\s*([*+-]|(\d\.))\s+\[\s*x\s*\](.*)$/gim) || []).length
=======
return (this.card.description.match(/^\s*(\*|-|(\d\.))\s+\[\s*x\s*\](.*)$/gim) || []).length
>>>>>>> 37196bbf... Move duedate to separate component
},
},
}

118
src/components/cards/CardItem.vue
View File

@@ -47,17 +47,11 @@
<input type="button" class="icon-confirm" @click="finishedEdit(card)">
</form>
<div v-if="!editing" class="duedate right">
<transition name="zoom">
<div v-if="card.duedate" :class="dueIcon">
<span>{{ relativeDate }}</span>
</div>
</transition>
</div>
<DueDate v-if="!editing" :card="card" />
<CardMenu v-if="!editing && compactMode" :card="card" class="right" />
</div>
<transition-group v-if="card.labels.length"
<transition-group v-if="card.labels && card.labels.length"
name="zoom"
tag="ul"
class="labels"
@@ -76,16 +70,16 @@
<script>
import ClickOutside from 'vue-click-outside'
import { mapState, mapGetters } from 'vuex'
import moment from 'moment'
import CardBadges from './CardBadges'
import Color from '../../mixins/color'
import labelStyle from '../../mixins/labelStyle'
import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
import CardMenu from './CardMenu'
import DueDate from './badges/DueDate'
export default {
name: 'CardItem',
components: { CardBadges, AttachmentDragAndDrop, CardMenu },
components: { CardBadges, AttachmentDragAndDrop, CardMenu, DueDate },
directives: {
ClickOutside,
},
@@ -128,29 +122,7 @@ export default {
currentCard() {
return this.card && this.$route && this.$route.params.cardId === this.card.id
},
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()
},
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() {
@@ -226,42 +198,7 @@ export default {
}
}
.labels {
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
display: flex;
flex-direction: row;
margin-left: $card-padding;
margin-right: $card-padding;
margin-top: -5px;
li {
flex-grow: 0;
flex-shrink: 1;
display: flex;
flex-direction: row;
overflow: hidden;
padding: 0px 5px;
border-radius: 15px;
font-size: 85%;
margin-right: 3px;
margin-bottom: 3px;
&:hover {
overflow: unset;
}
span {
flex-grow: 0;
flex-shrink: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
@import './../../css/labels';
.card-controls {
display: flex;
@@ -282,49 +219,6 @@ export default {
align-items: flex-start;
}
.icon.due {
background-position: 4px center;
border-radius: 3px;
margin-top: 9px;
margin-bottom: 9px;
padding: 3px 4px;
padding-right: 0;
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;
padding: 3px 4px;
}
&.now {
background-color: var(--color-warning);
opacity: .7;
padding: 3px 4px;
}
&.next {
background-color: var(--color-background-dark);
opacity: .7;
padding: 3px 4px;
}
span {
margin-left: 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
.compact {
min-height: 44px;

115
src/components/cards/badges/DueDate.vue Normal file
View File

@@ -0,0 +1,115 @@
<!--
- @copyright Copyright (c) 2020 Julius Härtl <jus@bitgrid.net>
-
- @author Julius Härtl <jus@bitgrid.net>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->
<template>
<div class="duedate" v-if="card">
<transition name="zoom">
<div v-if="card.duedate" :class="dueIcon">
<span>{{ relativeDate }}</span>
</div>
</transition>
</div>
</template>
<script>
import moment from '@nextcloud/moment'
export default {
name: 'DueDate',
props: {
card: {
type: Object,
default: null,
},
},
computed: {
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'
},
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()
},
dueDateTooltip() {
return moment(this.card.duedate).format('LLLL')
},
}
}
</script>
<style lang="scss" coped>
.icon.due {
background-position: 4px center;
border-radius: 3px;
margin-top: 9px;
margin-bottom: 9px;
padding: 3px 4px;
padding-right: 0;
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;
padding: 3px 4px;
}
&.now {
background-color: var(--color-warning);
opacity: .7;
padding: 3px 4px;
}
&.next {
background-color: var(--color-background-dark);
opacity: .7;
padding: 3px 4px;
}
span {
margin-left: 20px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
</style>

39
src/css/labels.scss Normal file
View File

@@ -0,0 +1,39 @@
$card-spacing: 10px;
$card-padding: 10px;
.labels {
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
display: flex;
flex-direction: row;
margin-left: $card-padding;
margin-right: $card-padding;
margin-top: -5px;
li {
flex-grow: 0;
flex-shrink: 1;
display: flex;
flex-direction: row;
overflow: hidden;
padding: 0px 5px;
border-radius: 15px;
font-size: 85%;
margin-right: 3px;
margin-bottom: 3px;
&:hover {
overflow: unset;
}
span {
flex-grow: 0;
flex-shrink: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}