{{ t('deck', 'Loading board') }}
+
+ {{ t('deck', 'No lists available') }}
+
+ {{ t('deck', 'Create a new list to add cards to this board') }}
+
+
+
+
- @import "../../css/animations.scss";
+ @import '../../css/animations.scss';
$board-spacing: 15px;
$stack-spacing: 10px;
$stack-width: 300px;
+ form {
+ text-align: center;
+ display: flex;
+ width: 100%;
+ max-width: 200px;
+ margin: auto;
+ margin-top: 20px;
+
+ input[type=text] {
+ flex-grow: 1;
+ }
+ }
+
.board-wrapper {
position: relative;
width: 100%;
diff --git a/src/components/board/DeletedTabSidebar.vue b/src/components/board/DeletedTabSidebar.vue
index 9cae68061..fc4cc82d4 100644
--- a/src/components/board/DeletedTabSidebar.vue
+++ b/src/components/board/DeletedTabSidebar.vue
@@ -89,6 +89,12 @@ export default {
li {
display: flex;
height: 44px;
+
+ &:hover, &:active, &.focus {
+ button {
+ opacity: 1;
+ }
+ }
}
span {
@@ -119,12 +125,5 @@ export default {
background-color: transparent;
opacity: 0.5;
}
- li {
- &:hover, &:active, &.focus {
- button {
- opacity: 1;
- }
- }
- }
}
diff --git a/src/components/board/SharingTabSidebar.vue b/src/components/board/SharingTabSidebar.vue
index e2b4b667d..2948b6e51 100644
--- a/src/components/board/SharingTabSidebar.vue
+++ b/src/components/board/SharingTabSidebar.vue
@@ -178,20 +178,25 @@ export default {
#shareWithList {
margin-bottom: 20px;
}
+
#shareWithList li {
display: flex;
align-items: center;
}
+
.username {
padding: 12px 9px;
flex-grow: 1;
}
+
.board-owner-label {
opacity: .7;
}
+
.avatarLabel {
padding: 6px
}
+
.avatardiv {
background-color: #f5f5f5;
border-radius: 16px;
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index b8fffd335..8f2b35186 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -25,21 +25,24 @@
-
+
-
+
{{ t('deck', 'Archive all cards') }}
@@ -47,7 +50,7 @@
{{ t('deck', 'Delete list') }}
-
+
{{ t('deck', 'Add card') }}
@@ -57,7 +60,7 @@
-
@@ -59,15 +59,18 @@ export default {
},
},
computed: {
+ boardsSorted() {
+ return [...this.filteredBoards].sort((a, b) => (a.title < b.title) ? -1 : 1)
+ },
filteredBoards() {
const query = this.$store.getters.getSearchQuery
return this.$store.getters.filteredBoards.filter((board) => {
- return board.title.toLowerCase().includes(query.toLowerCase())
+ return board.deletedAt <= 0 && board.title.toLowerCase().includes(query.toLowerCase())
})
},
},
watch: {
- navFilter: function(value) {
+ navFilter(value) {
this.$store.commit('setBoardFilter', value)
},
},
@@ -83,6 +86,11 @@ export default {
display: flex;
}
+ .board-list-row:not(.board-list-header-row):hover {
+ transition: background-color 0.3s ease;
+ background-color: var(--color-background-dark);
+ }
+
.board-list-header-row {
color: var(--color-text-lighter);
}
diff --git a/src/components/card/AttachmentList.vue b/src/components/card/AttachmentList.vue
index 67ae39117..cb54e0a27 100644
--- a/src/components/card/AttachmentList.vue
+++ b/src/components/card/AttachmentList.vue
@@ -21,8 +21,27 @@
-->
-
+
diff --git a/src/components/card/CardSidebarTabAttachments.vue b/src/components/card/CardSidebarTabAttachments.vue
index 819423aa3..560921551 100644
--- a/src/components/card/CardSidebarTabAttachments.vue
+++ b/src/components/card/CardSidebarTabAttachments.vue
@@ -21,113 +21,27 @@
-->
-
-
-
-
-
+
+
{{ stack.title }}
-
+
{{ stack.title }}
{{ stack.title }}
{{ t('deck', 'Archive all cards in this list') }}
- + @@ -112,7 +115,9 @@ import { mapGetters, mapState } from 'vuex' import { Container, Draggable } from 'vue-smooth-dnd' + import { Actions, ActionButton, Modal } from '@nextcloud/vue' +import { showError } from '@nextcloud/dialogs' import CardItem from '../cards/CardItem' export default { @@ -141,14 +146,17 @@ export default { stateCardCreating: false, animate: false, modalArchivAllCardsShow: false, - archiveAllCardsProgress: null, - stackLen: 0, + stackTransfer: { + total: 0, + current: null, + }, } }, computed: { ...mapGetters([ 'canManage', 'canEdit', + 'isArchived', ]), ...mapState({ showArchived: state => state.showArchived, @@ -200,9 +208,9 @@ export default { }, archiveAllCardsFromStack(stack) { - this.stackLen = this.cardsByStack.length + this.stackTransfer.total = this.cardsByStack.length this.cardsByStack.forEach((card, index) => { - this.archiveAllCardsProgress = index + this.stackTransfer.current = index this.$store.dispatch('archiveUnarchiveCard', { ...card, archived: true }) }) this.modalArchivAllCardsShow = false @@ -234,7 +242,7 @@ export default { }) this.$router.push({ name: 'card', params: { cardId: newCard.id } }) } catch (e) { - OCP.Toast.error('Could not create card: ' + e.response.data.message) + showError('Could not create card: ' + e.response.data.message) } finally { this.stateCardCreating = false } @@ -263,12 +271,14 @@ export default { margin: 3px -3px; margin-right: -10px; margin-top: 0; - margin-bottom: 0; + margin-bottom: 3px; background-color: var(--color-main-background-translucent); + cursor: grab; h3, form { flex-grow: 1; display: flex; + cursor: inherit; input[type=text] { flex-grow: 1; @@ -276,6 +286,13 @@ export default { } } + .stack--title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: calc($stack-width - 60px); + } + .stack--card-add { position: sticky; top: 52px; @@ -310,6 +327,7 @@ export default { border: none; } } + .stack .smooth-dnd-container.vertical { margin-top: 3px; } @@ -322,6 +340,7 @@ export default { .slide-top-leave-active { transition: all 100ms ease; } + .slide-top-enter, .slide-top-leave-to { transform: translateY(-10px); opacity: 0; @@ -334,10 +353,6 @@ export default { min-height: 100px; text-align: center; margin: 20px 20px 20px 20px; - - .multiselect { - margin-bottom: 10px; - } } .modal__content button { diff --git a/src/components/board/TagsTabSidebar.vue b/src/components/board/TagsTabSidebar.vue index cb73a23fc..a2f61eb86 100644 --- a/src/components/board/TagsTabSidebar.vue +++ b/src/components/board/TagsTabSidebar.vue @@ -1,7 +1,7 @@-
-
- +
-
- - {{ label.title }} ++ {{ label.title }}- - +
+ ++ {{ t('deck', 'Edit') }} + ++ @@ -48,14 +54,15 @@ type="submit" value="" class="icon-confirm"> - ++ {{ t('deck', 'Delete') }} + ++ -+ {{ t('deck', 'Cancel') }} + +- Title + {{ t('deck', 'Title') }}- Members + {{ t('deck', 'Members') }}
-
+
+
{{ card.title }}
@@ -47,15 +47,18 @@
-
+
{{ relativeDate }}
+
+
@@ -78,10 +81,11 @@ import CardBadges from './CardBadges'
import Color from '../../mixins/color'
import labelStyle from '../../mixins/labelStyle'
import AttachmentDragAndDrop from '../AttachmentDragAndDrop'
+import CardMenu from './CardMenu'
export default {
name: 'CardItem',
- components: { CardBadges, AttachmentDragAndDrop },
+ components: { CardBadges, AttachmentDragAndDrop, CardMenu },
directives: {
ClickOutside,
},
@@ -106,6 +110,7 @@ export default {
}),
...mapGetters([
'canEdit',
+ 'isArchived',
]),
card() {
return this.$store.getters.cardById(this.id)
@@ -137,16 +142,9 @@ export default {
return moment(this.card.duedate).format('LLLL')
},
},
- watch: {
- currentCard(newValue) {
- if (newValue) {
- this.$nextTick(() => this.$el.scrollIntoView())
- }
- },
- },
methods: {
openCard() {
- this.$router.push({ name: 'card', params: { cardId: this.id } })
+ this.$router.push({ name: 'card', params: { cardId: this.id } }).catch(() => {})
},
startEditing(card) {
this.copiedCard = Object.assign({}, card)
@@ -175,6 +173,10 @@ export default {
border: 1px solid var(--color-border);
}
+ .card:hover {
+ box-shadow: 0 0 5px 1px var(--color-box-shadow);
+ }
+
.card {
transition: box-shadow 0.1s ease-in-out;
box-shadow: 0 0 2px 0 var(--color-box-shadow);
@@ -189,7 +191,7 @@ export default {
.card-upper {
display: flex;
- min-height: 50px;
+ min-height: 44px;
form {
display: flex;
padding: 5px 7px;
@@ -200,7 +202,7 @@ export default {
}
h3 {
- margin: 14px $card-padding;
+ margin: 12px $card-padding;
flex-grow: 1;
font-size: 100%;
overflow-x: hidden;
@@ -227,7 +229,7 @@ export default {
display: flex;
flex-direction: row;
overflow: hidden;
- padding: 3px 7px;
+ padding: 0px 5px;
border-radius: 15px;
font-size: 85%;
margin-right: 3px;
@@ -257,10 +259,14 @@ export default {
}
}
}
+
+ .duedate {
+ margin-right: 9px;
+ }
+
.right {
display: flex;
align-items: flex-start;
- margin-right: 9px;
}
.icon.due {
@@ -269,6 +275,7 @@ export default {
margin-top: 9px;
margin-bottom: 9px;
padding: 3px 4px;
+ padding-right: 0;
font-size: 90%;
display: flex;
align-items: center;
@@ -284,14 +291,17 @@ export default {
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 {
@@ -303,8 +313,11 @@ export default {
}
.compact {
- min-height: 50px;
+ min-height: 44px;
+ .duedate {
+ margin-right: 0;
+ }
&.has-labels {
padding-bottom: $card-padding;
}
diff --git a/src/components/cards/CardMenu.vue b/src/components/cards/CardMenu.vue
new file mode 100644
index 000000000..a40592f3c
--- /dev/null
+++ b/src/components/cards/CardMenu.vue
@@ -0,0 +1,188 @@
+
+
+
+
+
+
+
+ {{ t('deck', 'Assign to me') }}
+
+
+ {{ t('deck', 'Unassign myself') }}
+
+
+ {{ showArchived ? t('deck', 'Unarchive card') : t('deck', 'Archive card') }}
+
+
+ {{ t('deck', 'Delete card') }}
+
+
+ {{ t('deck', 'Move card') }}
+
+
+ {{ t('deck', 'Card details') }}
+
+
+
+
+
+ {{ t('deck', 'Move card to another board') }}
+
+
+
+
+
+
diff --git a/src/components/navigation/AppNavigation.vue b/src/components/navigation/AppNavigation.vue
index f56996595..ffd16a029 100644
--- a/src/components/navigation/AppNavigation.vue
+++ b/src/components/navigation/AppNavigation.vue
@@ -21,67 +21,66 @@
-->
-
+
+
+
+
+ {{ t('deck', 'Limiting Deck will block users not part of those groups from creating their own boards. Users will still be able to work on boards that have been shared with them.') }}
+
+
+
+
+
+
+
-
{{ relativeDate }}
+
+
+
+
+
+
+
diff --git a/src/components/navigation/AppNavigation.vue b/src/components/navigation/AppNavigation.vue
index f56996595..ffd16a029 100644
--- a/src/components/navigation/AppNavigation.vue
+++ b/src/components/navigation/AppNavigation.vue
@@ -21,67 +21,66 @@
-->
-
+
+
+
+
+
+ {{ t('deck', 'Assign to me') }}
+
+
+ {{ t('deck', 'Unassign myself') }}
+
+
+ {{ showArchived ? t('deck', 'Unarchive card') : t('deck', 'Archive card') }}
+
+
+ {{ t('deck', 'Delete card') }}
+
+
+ {{ t('deck', 'Move card') }}
+
+
+ {{ t('deck', 'Card details') }}
+
+
+
+
+
+ {{ t('deck', 'Move card to another board') }}
+
+
+ {{ t('deck', 'Limiting Deck will block users not part of those groups from creating their own boards. Users will still be able to work on boards that have been shared with them.') }}
+