diff options
Diffstat (limited to 'src/components/Sidebar.vue')
| -rw-r--r-- | src/components/Sidebar.vue | 164 |
1 files changed, 164 insertions, 0 deletions
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue new file mode 100644 index 000000000..33923f89b --- /dev/null +++ b/src/components/Sidebar.vue @@ -0,0 +1,164 @@ +<template> + <AppNavigation> + <AddFeed v-if="showAddFeed" @close="closeShowAddFeed()"></AddFeed> + <AppNavigationNew + :text="t('news','Subscribe')" + button-id="new-feed-button" + button-class="icon-add" + @click="showShowAddFeed()"/> + + <ul id="locations" class="with-icon"> + + <AppNavigationNewItem :title="t('news','New folder')" + icon="icon-add-folder" + @new-item="newFolder"> + </AppNavigationNewItem> + + <AppNavigationItem :title="t('news','Unread articles')" icon="icon-rss"> + <template #actions> + <ActionButton icon="icon-checkmark" @click="alert('Edit')"> + t('news','Mark read') + </ActionButton> + </template> + <template #counter> + <CounterBubble>5</CounterBubble> + </template> + </AppNavigationItem> + <AppNavigationItem :title="t('news','All articles')" icon="icon-rss"> + <template #actions> + <ActionButton icon="icon-checkmark" @click="alert('Edit')"> + t('news','Mark read') + </ActionButton> + </template> + </AppNavigationItem> + <AppNavigationItem :title="t('news','Starred')" icon="icon-starred"> + <template #counter> + <CounterBubble>35</CounterBubble> + </template> + </AppNavigationItem> + + <AppNavigationItem v-for="folder in folders" :title="folder.name" icon="icon-folder" + :allowCollapse="true"> + <template #default> + <AppNavigationItem v-for="feed in folder.feeds" :title="feed.title" > + <template #icon> + <img :src="feed.faviconLink" v-if="feed.faviconLink" alt="feedIcon"> + <div class="icon-rss" v-if="!feed.faviconLink"></div> + </template> + <template #actions> + <ActionButton icon="icon-checkmark" @click="alert('Mark read')"> + {{ t('news', 'Mark read') }} + </ActionButton> + <ActionButton icon="icon-pinned" @click="alert('Rename')"> + {{ t('news', 'Unpin from top') }} + </ActionButton> + <ActionButton icon="icon-caret-dark" @click="deleteFolder(folder)"> + {{ t('news', 'Newest first') }} + </ActionButton> + <ActionButton icon="icon-caret-dark" @click="deleteFolder(folder)"> + {{ t('news', 'Oldest first') }} + </ActionButton> + <ActionButton icon="icon-caret-dark" @click="deleteFolder(folder)"> + {{ t('news', 'Default order') }} + </ActionButton> + <ActionButton icon="icon-full-text-disabled" @click="deleteFolder(folder)"> + {{ t('news', 'Enable full text') }} + </ActionButton> + <ActionButton icon="icon-full-text-enabled" @click="deleteFolder(folder)"> + {{ t('news', 'Disable full text') }} + </ActionButton> + <ActionButton icon="icon-updatemode-default" @click="deleteFolder(folder)"> + {{ t('news', 'Unread updated') }} + </ActionButton> + <ActionButton icon="icon-updatemode-unread" @click="deleteFolder(folder)"> + {{ t('news', 'Ignore updated') }} + </ActionButton> + <ActionButton icon="icon-icon-rss" @click="deleteFolder(folder)"> + {{ t('news', 'Open feed URL') }} + </ActionButton> + <ActionButton icon="icon-icon-rename" @click="deleteFolder(folder)"> + {{ t('news', 'Rename') }} + </ActionButton> + <ActionButton icon="icon-delete" @click="deleteFolder(folder)"> + {{ t('news', 'Delete') }} + </ActionButton> + </template> + </AppNavigationItem> + </template> + <template #counter v-if="folder.feedCount > 0"> + <CounterBubble>{{ folder.feedCount }}</CounterBubble> + </template> + <template #actions> + <ActionButton icon="icon-checkmark" @click="alert('Mark read')"> + {{ t('news', 'Mark read') }} + </ActionButton> + <ActionButton icon="icon-rename" @click="alert('Rename')"> + {{ t('news', 'Rename') }} + </ActionButton> + <ActionButton icon="icon-delete" @click="deleteFolder(folder)"> + {{ t('news', 'Delete') }} + </ActionButton> + </template> + </AppNavigationItem> + + <AppNavigationItem :title="t('news','Explore')" + icon="icon-link" + :to="{ name: 'explore' }"> + <template #counter> + <CounterBubble>35</CounterBubble> + </template> + </AppNavigationItem> + </ul> + </AppNavigation> +</template> + +<script> +import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation' +import AppNavigationNew from '@nextcloud/vue/dist/Components/AppNavigationNew' +import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem' +import AppNavigationNewItem from '@nextcloud/vue/dist/Components/AppNavigationNewItem' +import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter' +import CounterBubble from '@nextcloud/vue/dist/Components/CounterBubble' +import ActionButton from '@nextcloud/vue/dist/Components/ActionButton' +import AddFeed from "./AddFeed"; + +export default { + components: { + AppNavigation, + AppNavigationNew, + AppNavigationItem, + AppNavigationNewItem, + AppNavigationCounter, + CounterBubble, + ActionButton, + AddFeed + }, + props: { + showAddFeed: false, + }, + computed: { + folders() { + return this.$store.state.folders + }, + }, + methods: { + newFolder(value) { + const folderName = value.trim(); + const folder = {name: folderName}; + this.$store.dispatch('addFolder', {folder}) + }, + deleteFolder(folder) { + this.$store.dispatch('deleteFolder', {folder}) + window.location.reload(true); + }, + showShowAddFeed() { + this.showAddFeed = true; + }, + closeShowAddFeed() { + this.showAddFeed = false; + } + }, + created() { + } +} +</script> |