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

General design enhancements and scroll area changes

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2020-01-25 08:42:30 +01:00
parent b42ce6219c
commit 3adadc23d0
21 changed files with 225 additions and 2351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
src/components/board/Board.vue
View File

@@ -21,11 +21,16 @@
-->
<template>
<div>
<div class="board-wrapper">
<Controls :board="board" />
<div v-if="board" class="board">
<div v-if="loading" class="emptycontent">
<div class="icon icon-loading" />
<h2>{{ t('deck', 'Loading board') }}</h2>
<p />
</div>
<div v-else-if="board" class="board">
<Container lock-axix="y" orientation="horizontal" @drop="onDropStack">
<Draggable v-for="stack in stacksByBoard" :key="stack.id" class="stack">
<Draggable v-for="stack in stacksByBoard" :key="stack.id">
<Stack :stack="stack" />
</Draggable>
</Container>
@@ -75,9 +80,6 @@ export default {
stacksByBoard() {
return this.$store.getters.stacksByBoard(this.board.id)
},
/* cardsByStack() {
return (id) => this.$store.getters.cardsByStack(id)
} */
},
watch: {
id: 'fetchData',
@@ -89,34 +91,17 @@ export default {
this.fetchData()
},
methods: {
fetchData() {
this.$store.dispatch('loadBoardById', this.id).then(response => {
this.$store.dispatch('loadStacks', this.id).then(response => {
this.loading = false
})
})
/* this.boardApi.loadById(this.id)
.then((board) => {
this.$store.dispatch('setCurrentBoard', board)
this.$store.dispatch('loadStacks', board)
this.$store.dispatch('setAssignableUsers', board.users)
this.loading = false
this.$store.state.labels = board.labels
}) */
async fetchData() {
this.loading = true
await this.$store.dispatch('loadBoardById', this.id)
await this.$store.dispatch('loadStacks', this.id)
this.loading = false
},
onDropStack({ removedIndex, addedIndex }) {
this.$store.dispatch('orderStack', { stack: this.stacksByBoard[removedIndex], removedIndex, addedIndex })
},
/* onDropCard({ removedIndex, addedIndex }) {
}, */
/* payloadForCard(stackId) {
return index => {
return this.cardsByStack(stackId)[index]
}
}, */
createStack() {
const newStack = {
title: 'FooBar',
@@ -125,9 +110,6 @@ export default {
}
this.$store.dispatch('createStack', newStack)
},
/* deleteStack(stack) {
this.$store.dispatch('deleteStack', stack)
} */
},
}
</script>
@@ -138,28 +120,61 @@ export default {
$stack-spacing: 10px;
$stack-width: 300px;
.board-wrapper {
position: relative;
width: 100%;
height: 100%;
max-height: calc(100vh - 50px);
}
.board {
margin-left: $board-spacing;
position: relative;
height: calc(100% - 44px);
overflow-x: scroll;
}
.stack {
width: $stack-width;
padding: $stack-spacing;
padding-top: 0;
}
/*
.smooth-dnd-container.vertical {
/**
* Combined rules to handle proper board scrolling and
* drag and drop behavior
*/
.smooth-dnd-container.horizontal {
display: flex;
flex-direction: column;
}
align-items: stretch;
.smooth-dnd-draggable-wrapper::v-deep {
display: flex;
height: auto;
.smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper {
overflow: initial;
}
.stack {
display: flex;
flex-direction: column;
.smooth-dnd-container.vertical .smooth-dnd-draggable-wrapper {
height: auto;
} */
.smooth-dnd-container.vertical {
flex-grow: 1;
display: flex;
flex-direction: column;
padding: 3px;
padding-top: 0;
/**
* Use this to scroll each stack individually
* This currenly has the issue that the popover menu will be cut off
*/
/*
overflow-x: scroll;
height: calc(100vh - 50px - 44px * 2 - 30px);
max-height: calc(100vh - 50px - 44px * 2 - 30px);
*/
}
.smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper {
overflow: initial;
}
.smooth-dnd-container.vertical .smooth-dnd-draggable-wrapper {
height: auto;
}
}
}
}
</style>

1
src/components/board/SharingTabSidebar.vue
View File

@@ -2,6 +2,7 @@
<div>
<Multiselect
v-model="addAcl"
:placeholder="t('deck', 'Share board with a user, group or circle …')"
:options="formatedSharees"
:user-select="true"
label="displayName"

64
src/components/board/Stack.vue
View File

@@ -36,23 +36,23 @@
value="">
</form>
</transition>
<Actions>
<Actions :force-menu="true">
<ActionButton icon="icon-delete" @click="deleteStack(stack)">
{{ t('deck', 'Delete stack') }}
</ActionButton>
</Actions>
<Actions>
<ActionButton icon="icon-add" @click="showAddCard=true">
{{ t('deck', 'Add card') }}
</ActionButton>
</Actions>
</div>
<Container :get-child-payload="payloadForCard(stack.id)" group-name="stack" @drop="($event) => onDropCard(stack.id, $event)">
<Draggable v-for="card in cardsByStack(stack.id)" :key="card.id">
<CardItem v-if="card" :id="card.id" />
</Draggable>
</Container>
<form class="stack--card-add" @submit.prevent="clickAddCard()">
<form v-if="showAddCard" class="stack--card-add" @submit.prevent="clickAddCard()">
<label for="new-stack-input-main" class="hidden-visually">Add a new card</label>
<input id="new-stack-input-main"
v-model="newCardTitle"
v-focus
type="text"
class="no-close"
placeholder="Add a new card"
@@ -62,6 +62,12 @@
type="submit"
value="">
</form>
<Container :get-child-payload="payloadForCard(stack.id)" group-name="stack" @drop="($event) => onDropCard(stack.id, $event)">
<Draggable v-for="card in cardsByStack(stack.id)" :key="card.id">
<CardItem v-if="card" :id="card.id" />
</Draggable>
</Container>
</div>
</template>
@@ -93,6 +99,7 @@ export default {
editing: false,
copiedStack: '',
newCardTitle: '',
showAddCard: false,
}
},
computed: {
@@ -147,6 +154,7 @@ export default {
}
this.$store.dispatch('addCard', newCard)
this.newCardTitle = ''
this.showAddCard = false
},
},
}
@@ -155,29 +163,24 @@ export default {
<style lang="scss" scoped>
$stack-spacing: 10px;
$stack-width: 300px;
$stack-width: 260px;
.stack {
width: $stack-width;
padding: $stack-spacing;
padding-top: 0;
}
.smooth-dnd-container.vertical {
display: flex;
flex-direction: column;
}
.smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper {
overflow: initial;
}
.smooth-dnd-container.vertical .smooth-dnd-draggable-wrapper {
height: auto;
margin-left: $stack-spacing;
margin-right: $stack-spacing;
}
.stack--header {
display: flex;
position: sticky;
top: 0;
z-index: 100;
padding: 3px;
margin: 3px -3px;
margin-right: -10px;
margin-top: 0;
background-color: var(--color-main-background-translucent);
h3, form {
flex-grow: 1;
@@ -191,10 +194,23 @@ export default {
.stack--card-add {
display: flex;
margin-left: 3px;
margin-right: 3px;
box-shadow: 0 0 3px #aaa;
border-radius: 3px;
margin-bottom: 15px;
input[type=text] {
flex-grow: 1;
}
input {
border: none;
}
}
/**
* Rules to handle scrolling behaviour are inherited from Board.vue
*/
</style>

18
src/components/board/TagsTabSidebar.vue
View File

@@ -133,6 +133,7 @@ export default {
</script>
<style scoped lang="scss">
.labels li {
display: flex;
margin-bottom: 3px;
.label-title {
@@ -144,14 +145,21 @@ export default {
}
}
&:not(.editing) button {
width: 40px;
height: 34px;
width: 44px;
margin: 0;
margin-left: -3px;
}
}
.labels li {
display: flex;
.color-picker {
display: flex;
}
.color-picker-button {
width: 100px;
margin-left: 20px;
border-radius: 6px;
}
&.editing {
display: block;
}