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

Use sidebar component for board sidebar

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2019-04-26 16:23:12 +02:00
parent e7400fe1e5
commit b854015e16
2 changed files with 22 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Sidebar.vue
View File

@@ -21,9 +21,7 @@
-->
<template>
<div id="app-sidebar">
<router-view name="sidebar" />
</div>
<router-view name="sidebar" />
</template>
<script>

124
src/components/board/BoardSidebar.vue
View File

@@ -21,88 +21,48 @@
-->
<template>
<div class="sidebar">
<div v-if="board">
<div class="sidebar-header">
<h3>{{ board.title }}</h3>
</div>
<app-sidebar
:actions="[]"
:title="board.title"
@close="closeSidebar">
<ul class="tab-headers">
<li v-for="tab in tabs" :class="{ 'selected': tab.isSelected }" :key="tab.name">
<a @click="setSelectedHeader(tab.name)">{{ tab.name }}</a>
</li>
</ul>
<AppSidebarTab name="Sharing" icon="icon-shared">
<SharingTabSidebard :board="board" />
</AppSidebarTab>
<div class="tabsContainer">
<div class="tab">
<div v-if="activeTab === 'Sharing'">
<SharingTabSidebard :board="board" />
</div>
<AppSidebarTab name="Tags" icon="icon-tag">
<TagsTabSidebard :board="board" />
</AppSidebarTab>
<div
v-if="activeTab === 'Tags'"
id="board-detail-labels">
<TagsTabSidebard :board="board" />
</div>
<AppSidebarTab name="Deleted items" icon="icon-delete">
<DeletedTabSidebard :board="board" />
</AppSidebarTab>
<div
v-if="activeTab === 'Deleted items'">
<DeletedTabSidebard :board="board" />
</div>
<AppSidebarTab name="Timeline" icon="icon-activity">
<TimelineTabSidebard :board="board" />
</AppSidebarTab>
<div
v-if="activeTab === 'Timeline'">
<TimelineTabSidebard :board="board" />
</div>
</div>
</div>
</div>
</div>
</app-sidebar>
</template>
<script>
import { Avatar, Multiselect } from 'nextcloud-vue'
import { mapState } from 'vuex'
import SharingTabSidebard from './SharingTabSidebard'
import TagsTabSidebard from './TagsTabSidebard'
import DeletedTabSidebard from './DeletedTabSidebard'
import TimelineTabSidebard from './TimelineTabSidebard'
import { AppSidebar, AppSidebarTab } from 'nextcloud-vue'
export default {
name: 'BoardSidebar',
components: {
Avatar,
Multiselect,
AppSidebar,
AppSidebarTab,
SharingTabSidebard,
TagsTabSidebard,
DeletedTabSidebard,
TimelineTabSidebard
},
props: {
},
data() {
return {
activeTab: 'Sharing',
tabs: [
{
name: 'Sharing',
isSelected: true
},
{
name: 'Tags',
isSelected: false
},
{
name: 'Deleted items',
isSelected: false
},
{
name: 'Timeline',
isSelected: false
}
]
}
},
computed: {
...mapState({
board: state => state.currentBoard,
@@ -111,50 +71,8 @@ export default {
},
methods: {
closeSidebar() {
this.$store.dispatch('toggleSidebar')
},
setSelectedHeader(tabName) {
this.activeTab = tabName
this.tabs.forEach(tab => {
tab.isSelected = (tab.name === tabName)
})
this.$router.push({ name: 'board' })
}
}
}
</script>
<style lang="scss" scoped>
.sidebar-header {
h3 {
font-size: 14pt;
padding: 15px 15px 3px;
margin: 0;
overflow: hidden;
}
}
.icon-close {
position: absolute;
top: 0px;
right: 0px;
padding: 14px;
height: 24px;
width: 24px;
}
ul.tab-headers {
margin: 15px 15px 0 15px;
li {
display: inline-block;
padding: 12px;
&.selected {
color: #000;
border-bottom: 1px solid #4d4d4d;
font-weight: 600;
}
}
}
.tabsContainer {
.tab {
padding: 0 15px 15px;
}
}
</style>