opensourcemirror
/
nextcloud-notes
mirror of https://github.com/nextcloud/notes.git
1
0
Fork 0
Code Issues Releases Wiki Activity

switch to @nextcloud/vue 1.0

This commit is contained in:
korelstar 2019-10-25 14:00:07 +02:00 committed by GitHub
parent 35f5d12025
commit aa49799483
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 414 additions and 580 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/app-navigation.scss
View File

@ -1,4 +1,4 @@
#app-navigation li.collapsible.category-header:not(.open) a {
.app-navigation-entry.category-header:not(.app-navigation-entry--opened) .app-navigation-entry__title {
font-weight: bold;
}
@ -12,25 +12,26 @@
}
/* icons for sidebar */
.nav-icon-files {
.icon-files {
@include icon-color('folder', 'notes', $color-black);
}
.nav-icon-emptyfolder {
.icon-emptyfolder {
@include icon-color('folder-empty', 'notes', $color-black);
}
.nav-icon-recent {
.icon-recent {
@include icon-color('recent', 'notes', $color-black);
}
.app-navigation-entry-utils-menu-button {
.app-navigation-entry__utils .action-item {
visibility: hidden;
}
.active .app-navigation-entry-utils-menu-button,
li:hover .app-navigation-entry-utils-menu-button,
li:focus .app-navigation-entry-utils-menu-button {
li.actionsOpen .app-navigation-entry__utils .action-item,
li.active .app-navigation-entry__utils .action-item,
li:hover .app-navigation-entry__utils .action-item,
li:focus .app-navigation-entry__utils .action-item {
visibility: visible;
}

775
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -13,10 +13,10 @@
},
"dependencies": {
"@babel/polyfill": "^7.6.0",
"@nextcloud/vue": "^1.0.0",
"easymde": "^2.8.0",
"markdown-it": "^10.0.0",
"nextcloud-axios": "^0.2.1",
"nextcloud-vue": "^0.12.6",
"vue": "^2.6.10",
"vue-router": "^3.1.3",
"vuex": "^3.1.1"

2
src/App.vue
View File

@ -31,7 +31,7 @@ import {
AppNavigation,
AppNavigationNew,
Content,
} from 'nextcloud-vue'
} from '@nextcloud/vue'
import AppSettings from './components/AppSettings'
import NavigationList from './components/NavigationList'
import NotesService from './NotesService'

2
src/components/AppSettings.vue
View File

@ -27,7 +27,7 @@
<script>
import {
AppNavigationSettings,
} from 'nextcloud-vue'
} from '@nextcloud/vue'
import NotesService from '../NotesService'
import store from '../store'

2
src/components/Loading.vue
View File

@ -5,7 +5,7 @@
import {
AppContent,
} from 'nextcloud-vue'
} from '@nextcloud/vue'
export default {
name: 'Loading',

76
src/components/NavigationCategoriesItem.vue
View File

@ -1,14 +1,43 @@
<template>
<AppNavigationItem
:item="mainItem"
:title="title"
icon="icon-files"
class="app-navigation-noclose separator-below"
:class="{ 'category-header': selectedCategory !== null }"
:open.sync="open"
/>
:allow-collapse="true"
@click.prevent.stop="onToggleCategories"
>
<template>
<AppNavigationItem
:title="t('notes', 'All notes')"
icon="icon-recent"
@click.prevent.stop="onSelectCategory(null)"
>
<AppNavigationCounter slot="counter">
{{ numNotes }}
</AppNavigationCounter>
</AppNavigationItem>
<AppNavigationItem v-for="category in categories"
:key="category.name"
:title="categoryTitle(category.name)"
:icon="category.name === '' ? 'icon-emptyfolder' : 'icon-files'"
@click.prevent.stop="onSelectCategory(category.name)"
>
<AppNavigationCounter slot="counter">
{{ category.count }}
</AppNavigationCounter>
</AppNavigationItem>
</template>
</AppNavigationItem>
</template>
<script>
import {
AppNavigationItem,
} from 'nextcloud-vue'
AppNavigationCounter,
} from '@nextcloud/vue'
import NotesService from '../NotesService'
import store from '../store'
@ -17,6 +46,7 @@ export default {
components: {
AppNavigationItem,
AppNavigationCounter,
},
props: {
@ -41,40 +71,20 @@ export default {
return NotesService.getCategories(1, true)
},
categoryItems() {
const itemAllNotes = {
text: this.t('notes', 'All notes'),
icon: 'nav-icon-recent',
action: this.onSelectCategory.bind(this, null),
utils: {
counter: this.numNotes,
},
}
const itemsCategories = this.categories.map(category => (
{
text: NotesService.categoryLabel(category.name),
icon: category.name === '' ? 'nav-icon-emptyfolder' : 'nav-icon-files',
action: this.onSelectCategory.bind(this, category.name),
utils: {
counter: category.count,
},
}
))
return [ itemAllNotes, ...itemsCategories ]
},
mainItem() {
return {
text: this.selectedCategory === null ? this.t('notes', 'Categories') : NotesService.categoryLabel(this.selectedCategory),
icon: 'nav-icon-files',
collapsible: true,
classes: 'app-navigation-noclose separator-below' + (this.selectedCategory === null ? '' : ' category-header'),
children: this.categoryItems,
}
title() {
return this.selectedCategory === null ? this.t('notes', 'Categories') : NotesService.categoryLabel(this.selectedCategory)
},
},
methods: {
categoryTitle(category) {
return NotesService.categoryLabel(category)
},
onToggleCategories() {
this.open = !this.open
},
onSelectCategory(category) {
this.open = false
this.$emit('category-selected', category)

24
src/components/NavigationList.vue
View File

@ -36,11 +36,15 @@
<!-- list of notes -->
<template v-for="item in noteItems">
<AppNavigationItem v-if="category!==null && category!==item.category"
:key="item.category" :item="categoryToItem(item.category)"
<AppNavigationCaption v-if="category!==null && category!==item.category"
:key="item.category"
icon="icon-files"
class="app-navigation-noclose"
:title="categoryToLabel(item.category)"
@click.native="$emit('category-selected', item.category)"
/>
<AppNavigationCaption v-if="category===null && item.timeslot"
:key="item.timeslot" :text="item.timeslot"
:key="item.timeslot" :title="item.timeslot"
/>
<NavigationNoteItem v-for="note in item.notes"
:key="note.id" :note="note"
@ -53,9 +57,8 @@
<script>
import {
AppNavigationItem,
AppNavigationCaption,
} from 'nextcloud-vue'
} from '@nextcloud/vue'
import NavigationCategoriesItem from './NavigationCategoriesItem'
import NavigationNoteItem from './NavigationNoteItem'
import NotesService from '../NotesService'
@ -66,7 +69,6 @@ export default {
components: {
AppNavigationCaption,
AppNavigationItem,
NavigationCategoriesItem,
NavigationNoteItem,
},
@ -145,14 +147,8 @@ export default {
]
},
categoryToItem(category) {
const label = '…/' + category.substring(this.category.length + 1)
return {
text: NotesService.categoryLabel(label),
classes: 'app-navigation-caption caption-item app-navigation-noclose',
icon: 'nav-icon-files',
action: this.$emit.bind(this, 'category-selected', category),
}
categoryToLabel(category) {
return NotesService.categoryLabel(category.substring(this.category.length + 1))
},
getTimeslotFromNote(note) {

88
src/components/NavigationNoteItem.vue
View File

@ -1,17 +1,37 @@
<template>
<AppNavigationItem :item="item" :menu-open.sync="menuOpen" />
<AppNavigationItem
:title="title"
:icon="icon"
:menu-open.sync="actionsOpen"
:to="{ name: 'note', params: { noteId: note.id.toString() } }"
:class="{ actionsOpen }"
>
<template slot="actions">
<ActionButton :icon="actionFavoriteIcon" @click="onToggleFavorite">
{{ actionFavoriteText }}
</ActionButton>
<ActionButton icon="icon-files-dark" @click="onCategorySelected">
{{ actionCategoryText }}
</ActionButton>
<ActionButton :icon="actionDeleteIcon" @click="onDeleteNote">
{{ t('notes', 'Delete note') }}
</ActionButton>
</template>
</AppNavigationItem>
</template>
<script>
import {
ActionButton,
AppNavigationItem,
} from 'nextcloud-vue'
} from '@nextcloud/vue'
import NotesService from '../NotesService'
export default {
name: 'NavigationNoteItem',
components: {
ActionButton,
AppNavigationItem,
},
@ -28,51 +48,43 @@ export default {
favorite: false,
delete: false,
},
menuOpen: false,
actionsOpen: false,
}
},
computed: {
item() {
icon() {
let icon = ''
if (this.note.error) {
icon = 'nav-icon icon-error-color'
} else if (this.note.favorite) {
icon = 'nav-icon icon-starred'
}
let iconActionFavorite = this.note.favorite ? 'icon-star-dark' : 'icon-starred'
return icon
},
title() {
return this.note.title + (this.note.unsaved ? ' *' : '')
},
actionFavoriteText() {
return this.note.favorite ? this.t('notes', 'Remove from favorites') : this.t('notes', 'Add to favorites')
},
actionFavoriteIcon() {
let icon = this.note.favorite ? 'icon-star-dark' : 'icon-starred'
if (this.loading.favorite) {
iconActionFavorite += ' loading'
}
return {
text: this.note.title + (this.note.unsaved ? ' *' : ''),
icon: icon,
router: {
name: 'note',
params: {
noteId: this.note.id.toString(),
},
},
utils: {
actions: [
{
text: this.note.favorite ? this.t('notes', 'Remove from favorites') : this.t('notes', 'Add to favorites'),
icon: iconActionFavorite,
action: this.onToggleFavorite,
},
{
text: NotesService.categoryLabel(this.note.category),
icon: 'icon-files-dark',
action: this.onCategorySelected,
},
{
text: this.t('notes', 'Delete note'),
icon: 'icon-delete' + (this.loading.delete ? ' loading' : ''),
action: this.onDeleteNote,
},
],
},
icon += ' loading'
}
return icon
},
actionCategoryText() {
return NotesService.categoryLabel(this.note.category)
},
actionDeleteIcon() {
return 'icon-delete' + (this.loading.delete ? ' loading' : '')
},
},
@ -84,12 +96,12 @@ export default {
})
.finally(() => {
this.loading.favorite = false
this.menuOpen = false
this.actionsOpen = false
})
},
onCategorySelected() {
this.menuOpen = false
this.actionsOpen = false
this.$emit('category-selected', this.note.category)
},
@ -103,7 +115,7 @@ export default {
})
.finally(() => {
this.loading.delete = false
this.menuOpen = false
this.actionsOpen = false
})
// TODO implement undo
},

2
src/components/Note.vue
View File

@ -54,7 +54,7 @@ import {
ActionButton,
AppContent,
Tooltip,
} from 'nextcloud-vue'
} from '@nextcloud/vue'
import TheEditor from './EditorEasyMDE'
import ThePreview from './EditorMarkdownIt'
import NotesService from '../NotesService'

2
src/components/Sidebar.vue
View File

@ -53,7 +53,7 @@ import {
AppSidebar,
Multiselect,
Tooltip,
} from 'nextcloud-vue'
} from '@nextcloud/vue'
import NotesService from '../NotesService'
import store from '../store'

2
src/components/Welcome.vue
View File

@ -28,7 +28,7 @@
import {
AppContent,
} from 'nextcloud-vue'
} from '@nextcloud/vue'
export default {
name: 'Welcome',