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

Restructures the app main, nav and sidebar

Browse Source
This commit is contained in:
Michael Weimann
2018-12-02 12:24:55 +01:00
parent 6ae42b1007
commit 18b03550cc
11 changed files with 348 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/App.vue
View File

@@ -21,11 +21,77 @@
-->
<template>
<router-view />
<div
id="content"
v-bind:class="{ 'nav-hidden': navHidden, 'sidebar-hidden': sidebarHidden }">
<AppNavigation :menu="menu" />
<div id="app-content">
<Controls></Controls>
<router-view />
</div>
<div id="app-sidebar">
<component v-bind:is="sidebarComponent"></component>
</div>
</div>
</template>
<script>
import { AppNavigation } from 'nextcloud-vue'
import Controls from './components/Controls'
import { mapState } from 'vuex'
import Sidebar from './components/Sidebar'
export default {
name: 'App'
name: 'App',
components: {
AppNavigation,
Controls,
Sidebar
},
computed: mapState({
navHidden: state => state.nav.hidden,
sidebarHidden: state => state.sidebar.hidden,
menu: state => state.nav.menu,
sidebarComponent: state => state.sidebar.component
})
}
</script>
<style lang="scss" scoped>
#content {
#app-content {
transition: margin-left 100ms ease;
}
#app-sidebar {
transition: width 100ms ease;
}
&.nav-hidden {
#app-content {
margin-left: 0;
}
}
&.sidebar-hidden {
#app-sidebar {
max-width: 0;
min-width: 0;
}
}
}
.deck-main {
bottom: 0;
overflow: auto;
position: absolute;
top: 44px;
width: 100%;
}
</style>

0
src/views/Board.vue → src/components/Board.vue
View File

44
src/components/Controls.vue Normal file
View File

@@ -0,0 +1,44 @@
<!--
* @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
*
* @author Michael Weimann <mail@michael-weimann.eu>
*
* @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>
<div id="app-navigation-toggle-custom" class="icon-menu" v-on:click="toggleNav"></div>
</div>
</template>
<script>
export default {
name: "Controls",
methods: {
toggleNav() {
this.$store.dispatch('nav/toggle')
}
}
}
</script>
<style lang="scss" scoped>
</style>

0
src/views/List.vue → src/components/List.vue
View File

36
src/components/Main.vue Normal file
View File

@@ -0,0 +1,36 @@
<!--
- @copyright Copyright (c) 2018 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="deck-main">
Main
</div>
</template>
<script>
export default {
name: 'Main'
}
</script>
<style lang="scss" scoped>
</style>

2
src/views/Sidebar.vue → src/components/Sidebar.vue
View File

@@ -21,7 +21,7 @@
-->
<template>
<div />
<div>sidebar</div>
</template>
<script>

2
src/router.js
View File

@@ -24,7 +24,7 @@ import Vue from 'vue'
import Router from 'vue-router'
import { generateUrl } from 'nextcloud-server/dist/router'
const Main = () => import('./views/Main')
const Main = () => import('./components/Main')
Vue.use(Router)

13
src/store/main.js
View File

@@ -22,13 +22,20 @@
import Vue from 'vue'
import Vuex from 'vuex'
import nav from './modules/nav'
import sidebar from './modules/sidebar'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
modules: {
},
strict: debug
modules: {
nav,
sidebar
},
strict: debug,
state: {},
mutations: {},
actions: {}
})

135
src/store/modules/nav.js Normal file
View File

@@ -0,0 +1,135 @@
/*
* @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
*
* @author Michael Weimann <mail@michael-weimann.eu>
*
* @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/>.
*
*/
// nav stuff
// todo maybe move out of nav.js directly and import here
import { translate as t } from 'nextcloud-server/dist/l10n'
let defaultCategories = [
{
id: 'deck-boards',
classes: [],
icon: 'icon-deck',
text: t('deck', 'All boards'),
router: {
name: 'boards'
}
},
{
id: 'deck-boards-archived',
classes: [],
icon: 'icon-archive',
text: t('deck', 'Archived boards'),
router: {
name: 'boards.archived'
}
},
{
id: 'deck-boards-shared',
classes: [],
icon: 'icon-shared',
text: t('deck', 'Shared boards'),
router: {
name: 'boards.shared'
}
}
]
const boardActions = [
{
action: () => {},
icon: 'icon-edit',
text: t('deck', 'Edit board')
},
{
action: () => {},
icon: 'icon-archive',
text: t('deck', 'Archive board')
},
{
action: () => {},
icon: 'icon-delete',
text: t('deck', 'Delete board')
},
{
action: () => {},
icon: 'icon-settings',
text: t('deck', 'Board details')
}
]
const boards = [
{
id: 'deck-board-1',
classes: [],
bullet: '#00cc00',
text: 'Example board',
router: {
name: 'board',
params: { id: 1 }
},
utils: {
actions: boardActions
}
}
]
const addButton = {
icon: 'icon-add',
text: t('deck', 'Create new board'),
action: () => {}
}
// initial state
const state = {
hidden: false,
menu: {
items: defaultCategories.concat(boards).concat([addButton]),
loading: false
}
}
// getters
const getters = {}
// actions
const actions = {
toggle ({ commit }) {
commit('toggle')
}
}
// mutations
const mutations = {
toggle (state) {
state.hidden = !state.hidden
}
}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}

53
src/store/modules/sidebar.js Normal file
View File

@@ -0,0 +1,53 @@
/*
* @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net>
*
* @author Michael Weimann <mail@michael-weimann.eu>
*
* @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/>.
*
*/
// initial state
const state = {
hidden: true,
component: 'Sidebar'
}
// getters
const getters = {}
// actions
const actions = {
toggle ({ commit }) {
commit('toggle')
}
}
// mutations
const mutations = {
toggle (state) {
state.hidden = !state.hidden
}
}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}

130
src/views/Main.vue
View File

@@ -1,130 +0,0 @@
<!--
- @copyright Copyright (c) 2018 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 id="content">
<AppNavigation :menu="menu" />
<div id="app-content">
content
</div>
<div id="app-sidebar">
sidebar
</div>
</div>
</template>
<style scoped>
</style>
<script>
import { AppNavigation } from 'nextcloud-vue'
export default {
name: 'Main',
components: {
AppNavigation
},
computed: {
// TODO: move to mixin so we can use it in separate views (see mail app)
menu() {
let defaultCategories = [
{
id: 'deck-boards',
classes: [],
icon: 'icon-deck',
text: t('deck', 'All boards'),
router: {
name: 'boards'
}
},
{
id: 'deck-boards-archived',
classes: [],
icon: 'icon-archive',
text: t('deck', 'Archived boards'),
router: {
name: 'boards.archived'
}
},
{
id: 'deck-boards-shared',
classes: [],
icon: 'icon-shared',
text: t('deck', 'Shared boards'),
router: {
name: 'boards.shared'
}
}
]
const boardActions = [
{
action: () => {},
icon: 'icon-edit',
text: t('deck', 'Edit board')
},
{
action: () => {},
icon: 'icon-archive',
text: t('deck', 'Archive board')
},
{
action: () => {},
icon: 'icon-delete',
text: t('deck', 'Delete board')
},
{
action: () => {},
icon: 'icon-settings',
text: t('deck', 'Board details')
}
]
let boards = [
{
id: 'deck-board-1',
classes: [],
bullet: '#00cc00',
text: 'Example board',
router: {
name: 'board',
params: { id: 1 }
},
utils: {
actions: boardActions
}
}
]
const addButton = {
icon: 'icon-add',
text: t('deck', 'Create new board'),
action: () => {}
}
return {
items: defaultCategories.concat(boards).concat([addButton]),
loading: false
}
}
}
}
</script>