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> <template>
<div id="app-sidebar"> <router-view name="sidebar" />
<router-view name="sidebar" />
</div>
</template> </template>
<script> <script>

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

@@ -21,88 +21,48 @@
--> -->
<template> <template>
<div class="sidebar"> <app-sidebar
<div v-if="board"> :actions="[]"
<div class="sidebar-header"> :title="board.title"
<h3>{{ board.title }}</h3> @close="closeSidebar">
</div>
<ul class="tab-headers"> <AppSidebarTab name="Sharing" icon="icon-shared">
<li v-for="tab in tabs" :class="{ 'selected': tab.isSelected }" :key="tab.name"> <SharingTabSidebard :board="board" />
<a @click="setSelectedHeader(tab.name)">{{ tab.name }}</a> </AppSidebarTab>
</li>
</ul>
<div class="tabsContainer"> <AppSidebarTab name="Tags" icon="icon-tag">
<div class="tab"> <TagsTabSidebard :board="board" />
<div v-if="activeTab === 'Sharing'"> </AppSidebarTab>
<SharingTabSidebard :board="board" />
</div>
<div <AppSidebarTab name="Deleted items" icon="icon-delete">
v-if="activeTab === 'Tags'" <DeletedTabSidebard :board="board" />
id="board-detail-labels"> </AppSidebarTab>
<TagsTabSidebard :board="board" />
</div>
<div <AppSidebarTab name="Timeline" icon="icon-activity">
v-if="activeTab === 'Deleted items'"> <TimelineTabSidebard :board="board" />
<DeletedTabSidebard :board="board" /> </AppSidebarTab>
</div>
<div </app-sidebar>
v-if="activeTab === 'Timeline'">
<TimelineTabSidebard :board="board" />
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
import { Avatar, Multiselect } from 'nextcloud-vue'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import SharingTabSidebard from './SharingTabSidebard' import SharingTabSidebard from './SharingTabSidebard'
import TagsTabSidebard from './TagsTabSidebard' import TagsTabSidebard from './TagsTabSidebard'
import DeletedTabSidebard from './DeletedTabSidebard' import DeletedTabSidebard from './DeletedTabSidebard'
import TimelineTabSidebard from './TimelineTabSidebard' import TimelineTabSidebard from './TimelineTabSidebard'
import { AppSidebar, AppSidebarTab } from 'nextcloud-vue'
export default { export default {
name: 'BoardSidebar', name: 'BoardSidebar',
components: { components: {
Avatar, AppSidebar,
Multiselect, AppSidebarTab,
SharingTabSidebard, SharingTabSidebard,
TagsTabSidebard, TagsTabSidebard,
DeletedTabSidebard, DeletedTabSidebard,
TimelineTabSidebard 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: { computed: {
...mapState({ ...mapState({
board: state => state.currentBoard, board: state => state.currentBoard,
@@ -111,50 +71,8 @@ export default {
}, },
methods: { methods: {
closeSidebar() { closeSidebar() {
this.$store.dispatch('toggleSidebar') this.$router.push({ name: 'board' })
},
setSelectedHeader(tabName) {
this.activeTab = tabName
this.tabs.forEach(tab => {
tab.isSelected = (tab.name === tabName)
})
} }
} }
} }
</script> </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>