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

Refactor app navigation to use @nextcloud/vue components

Browse Source 
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
2020-05-23 16:17:24 +02:00
parent 1d589fe3e6
commit ddb59c8f66
4 changed files with 233 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/navigation/AppNavigationAddBoard.vue
View File

@@ -20,38 +20,30 @@
-
-->
<template>
<li id="deck-navigation-add"
<AppNavigationItem v-if="!editing"
:title="t('deck', 'Create new board')"
:class="[{'icon-loading-small': loading, 'editing': editing}, classes]">
<a class="icon-add" href="#" @click.prevent.stop="startCreateBoard">
{{ t('deck', 'Create new board') }}
</a>
<!-- edit entry -->
<div v-if="editing" class="app-navigation-entry-edit">
<ColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper">
<div :style="{ backgroundColor: color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
</ColorPicker>
<form @submit.prevent.stop="createBoard">
<input :placeholder="t('deck', 'New board title')" type="text" required>
<input type="submit" value="" class="icon-confirm">
<input type="submit"
value=""
class="icon-close"
@click.stop.prevent="cancelEdit">
</form>
<!-- <ColorPicker v-model="color" /> -->
</div>
</li>
icon="icon-add"
@click.prevent.stop="startCreateBoard" />
<div v-else class="board-create">
<ColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper">
<div :style="{ backgroundColor: color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
</ColorPicker>
<form @submit.prevent.stop="createBoard">
<input :placeholder="t('deck', 'New board title')" type="text" required>
<input type="submit" value="" class="icon-confirm">
<Actions><ActionButton icon="icon-close" @click.stop.prevent="cancelEdit" /></Actions>
</form>
</div>
</template>
<script>
import { ColorPicker } from '@nextcloud/vue'
import { ColorPicker, ActionButton, Actions, AppNavigationItem } from '@nextcloud/vue'
const randomColor = () => '#' + ((1 << 24) * Math.random() | 0).toString(16)
export default {
name: 'AppNavigationAddBoard',
components: { ColorPicker },
components: { ColorPicker, AppNavigationItem, ActionButton, Actions },
directives: {},
props: {},
data() {
@@ -59,7 +51,7 @@ export default {
classes: [],
editing: false,
loading: false,
color: '#000000',
color: randomColor(),
}
},
computed: {},
@@ -76,27 +68,38 @@ export default {
color: this.color.substring(1),
})
this.editing = false
this.color = randomColor()
},
cancelEdit(e) {
this.editing = false
this.item.edit.reset(e)
this.color = randomColor()
},
},
}
</script>
<style lang="scss" scoped>
#app-navigation .app-navigation-entry-edit div {
width: auto;
display: block;
.board-create {
order: 1;
display: flex;
height: 44px;
form {
display: flex;
flex-grow: 1;
input[type="text"] {
flex-grow: 1;
}
}
}
.app-navigation-entry-bullet-wrapper {
position: absolute;
left: 33px;
width: 44px !important;
margin: 6px;
width: 44px;
height: 44px;
.color0 {
width: 30px !important;
margin: 5px;
margin-left: 7px;
height: 30px;
border-radius: 50%;
background-size: 14px;