diff options
Diffstat (limited to 'src/components/Sidebar.vue')
| -rw-r--r-- | src/components/Sidebar.vue | 155 |
1 files changed, 89 insertions, 66 deletions
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index 33923f89b..e73719fff 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -1,20 +1,18 @@ <template> <AppNavigation> - <AddFeed v-if="showAddFeed" @close="closeShowAddFeed()"></AddFeed> - <AppNavigationNew - :text="t('news','Subscribe')" + <AddFeed v-if="showAddFeed" @close="closeShowAddFeed()" /> + <AppNavigationNew :text="t('news', 'Subscribe')" button-id="new-feed-button" button-class="icon-add" - @click="showShowAddFeed()"/> + @click="showShowAddFeed()" /> <ul id="locations" class="with-icon"> + <AppNavigationNewItem :title="t('news', 'New folder')" + icon="icon-add-folder" + @new-item="newFolder" /> - <AppNavigationNewItem :title="t('news','New folder')" - icon="icon-add-folder" - @new-item="newFolder"> - </AppNavigationNewItem> - - <AppNavigationItem :title="t('news','Unread articles')" icon="icon-rss"> + <AppNavigationItem :title="t('news', 'Unread articles')" + icon="icon-rss"> <template #actions> <ActionButton icon="icon-checkmark" @click="alert('Edit')"> t('news','Mark read') @@ -24,86 +22,109 @@ <CounterBubble>5</CounterBubble> </template> </AppNavigationItem> - <AppNavigationItem :title="t('news','All articles')" icon="icon-rss"> + <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"> + <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"> + <AppNavigationItem v-for="folder in folders" + :key="folder.name" + :title="folder.name" + icon="icon-folder" + :allow-collapse="true"> <template #default> - <AppNavigationItem v-for="feed in folder.feeds" :title="feed.title" > + <AppNavigationItem v-for="feed in folder.feeds" + :key="feed.name" + :title="feed.title"> <template #icon> - <img :src="feed.faviconLink" v-if="feed.faviconLink" alt="feedIcon"> - <div class="icon-rss" v-if="!feed.faviconLink"></div> + <img v-if="feed.faviconLink" + :src="feed.faviconLink" + alt="feedIcon"> + <div v-if="!feed.faviconLink" class="icon-rss" /> </template> <template #actions> - <ActionButton icon="icon-checkmark" @click="alert('Mark read')"> - {{ t('news', 'Mark read') }} + <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 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 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 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 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 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 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 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 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 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 icon="icon-icon-rename" + @click="deleteFolder(folder)"> + {{ t("news", "Rename") }} </ActionButton> - <ActionButton icon="icon-delete" @click="deleteFolder(folder)"> - {{ t('news', 'Delete') }} + <ActionButton icon="icon-delete" + @click="deleteFolder(folder)"> + {{ t("news", "Delete") }} </ActionButton> </template> </AppNavigationItem> </template> - <template #counter v-if="folder.feedCount > 0"> + <template v-if="folder.feedCount > 0" #counter> <CounterBubble>{{ folder.feedCount }}</CounterBubble> </template> <template #actions> - <ActionButton icon="icon-checkmark" @click="alert('Mark read')"> - {{ t('news', 'Mark read') }} + <ActionButton icon="icon-checkmark" + @click="alert('Mark read')"> + {{ t("news", "Mark read") }} </ActionButton> <ActionButton icon="icon-rename" @click="alert('Rename')"> - {{ t('news', 'Rename') }} + {{ t("news", "Rename") }} </ActionButton> - <ActionButton icon="icon-delete" @click="deleteFolder(folder)"> - {{ t('news', 'Delete') }} + <ActionButton icon="icon-delete" + @click="deleteFolder(folder)"> + {{ t("news", "Delete") }} </ActionButton> </template> </AppNavigationItem> - <AppNavigationItem :title="t('news','Explore')" - icon="icon-link" - :to="{ name: 'explore' }"> + <AppNavigationItem :title="t('news', 'Explore')" + icon="icon-link" + :to="{ name: 'explore' }"> <template #counter> <CounterBubble>35</CounterBubble> </template> @@ -113,14 +134,15 @@ </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 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"; +import AddFeed from './AddFeed' export default { components: { @@ -128,37 +150,38 @@ export default { AppNavigationNew, AppNavigationItem, AppNavigationNewItem, - AppNavigationCounter, + // AppNavigationCounter, CounterBubble, ActionButton, - AddFeed + AddFeed, }, - props: { - showAddFeed: false, + data() { + return { + showAddFeed: false, + } }, computed: { folders() { return this.$store.state.folders }, }, + created() {}, methods: { newFolder(value) { - const folderName = value.trim(); - const folder = {name: folderName}; - this.$store.dispatch('addFolder', {folder}) + const folderName = value.trim() + const folder = { name: folderName } + this.$store.dispatch('addFolder', { folder }) }, deleteFolder(folder) { - this.$store.dispatch('deleteFolder', {folder}) - window.location.reload(true); + this.$store.dispatch('deleteFolder', { folder }) + window.location.reload(true) }, showShowAddFeed() { - this.showAddFeed = true; + this.showAddFeed = true }, closeShowAddFeed() { - this.showAddFeed = false; - } + this.showAddFeed = false + }, }, - created() { - } } </script> |