2019-07-26 18:16:37 +00:00
|
|
|
<template>
|
2019-08-24 17:10:20 +00:00
|
|
|
<div
|
|
|
|
:class="{
|
|
|
|
Bookmarks__BookmarksList: true,
|
|
|
|
'Bookmarks__BookmarksList--GridView': viewMode === 'grid'
|
|
|
|
}"
|
|
|
|
>
|
2019-08-15 13:38:39 +00:00
|
|
|
<CreateBookmark v-if="newBookmark" />
|
|
|
|
<CreateFolder v-if="newFolder" />
|
2019-08-13 19:35:32 +00:00
|
|
|
<template v-if="$route.name === 'folder' || $route.name === 'home'">
|
|
|
|
<BookmarksListFolder
|
|
|
|
v-for="folder in folderChildren"
|
|
|
|
:key="'f' + folder.id"
|
|
|
|
:folder="folder"
|
|
|
|
/>
|
|
|
|
</template>
|
2019-08-04 21:49:07 +00:00
|
|
|
<template v-if="bookmarks.length">
|
2019-08-13 19:35:32 +00:00
|
|
|
<BookmarksListBookmark
|
2019-08-04 21:49:07 +00:00
|
|
|
v-for="bookmark in bookmarks"
|
2019-08-13 19:35:32 +00:00
|
|
|
:key="'b' + bookmark.id"
|
2019-08-04 21:49:07 +00:00
|
|
|
:bookmark="bookmark"
|
|
|
|
/>
|
|
|
|
</template>
|
2019-08-13 19:35:32 +00:00
|
|
|
<div
|
|
|
|
v-else-if="!loading && !folderChildren.length"
|
|
|
|
class="Bookmarks__BookmarksList_Empty"
|
|
|
|
>
|
2019-08-04 21:49:07 +00:00
|
|
|
<h2>No bookmarks here</h2>
|
|
|
|
<p>Try changing your query or add some using the button on the left.</p>
|
|
|
|
</div>
|
|
|
|
<div v-if="loading" class="Bookmarks__BookmarksList_Loading">
|
|
|
|
<span class="icon-loading" />
|
|
|
|
</div>
|
|
|
|
</div>
|
2019-07-26 18:16:37 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2019-08-13 19:35:32 +00:00
|
|
|
import BookmarksListBookmark from './BookmarksListBookmark';
|
|
|
|
import BookmarksListFolder from './BookmarksListFolder';
|
2019-08-04 21:49:07 +00:00
|
|
|
import CreateBookmark from './CreateBookmark';
|
2019-08-15 13:38:39 +00:00
|
|
|
import CreateFolder from './CreateFolder';
|
2019-08-13 19:35:32 +00:00
|
|
|
import { actions } from '../store';
|
2019-07-26 18:16:37 +00:00
|
|
|
|
|
|
|
export default {
|
2019-08-13 19:35:32 +00:00
|
|
|
name: 'BookmarksList',
|
2019-07-26 18:16:37 +00:00
|
|
|
components: {
|
2019-08-13 19:35:32 +00:00
|
|
|
BookmarksListBookmark,
|
|
|
|
BookmarksListFolder,
|
2019-08-15 13:38:39 +00:00
|
|
|
CreateBookmark,
|
|
|
|
CreateFolder
|
2019-07-26 18:16:37 +00:00
|
|
|
},
|
|
|
|
props: {
|
|
|
|
bookmarks: {
|
|
|
|
type: Array,
|
|
|
|
required: true
|
2019-08-04 21:49:07 +00:00
|
|
|
},
|
2019-08-13 19:35:32 +00:00
|
|
|
loading: {
|
2019-08-04 21:49:07 +00:00
|
|
|
type: Boolean,
|
|
|
|
required: true
|
2019-08-13 19:35:32 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
folderChildren() {
|
2019-08-20 14:19:21 +00:00
|
|
|
if (this.$route.name !== 'home' && this.$route.name !== 'folder') {
|
|
|
|
return [];
|
|
|
|
}
|
2019-08-13 19:35:32 +00:00
|
|
|
const folderId = this.$route.params.folder || '-1';
|
|
|
|
if (!folderId) return [];
|
|
|
|
const folder = this.$store.getters.getFolder(folderId)[0];
|
|
|
|
if (!folder) return [];
|
|
|
|
return folder.children;
|
2019-08-04 21:49:07 +00:00
|
|
|
},
|
2019-08-13 19:35:32 +00:00
|
|
|
newBookmark() {
|
|
|
|
return this.$store.state.displayNewBookmark;
|
2019-08-04 21:49:07 +00:00
|
|
|
},
|
2019-08-15 13:38:39 +00:00
|
|
|
newFolder() {
|
|
|
|
return this.$store.state.displayNewFolder;
|
2019-08-24 17:10:20 +00:00
|
|
|
},
|
|
|
|
viewMode() {
|
|
|
|
return this.$store.state.viewMode;
|
2019-07-26 18:16:37 +00:00
|
|
|
}
|
|
|
|
},
|
2019-08-04 21:49:07 +00:00
|
|
|
created() {},
|
2019-08-15 13:38:39 +00:00
|
|
|
methods: {}
|
2019-07-26 18:16:37 +00:00
|
|
|
};
|
|
|
|
</script>
|
2019-08-04 21:49:07 +00:00
|
|
|
<style>
|
|
|
|
.Bookmarks__BookmarksList
|
|
|
|
> *:first-child:not(.Bookmarks__BookmarksList_Loading):not(.Bookmarks__BookmarksList_Empty) {
|
|
|
|
border-top: 1px solid var(--color-border);
|
|
|
|
}
|
|
|
|
.Bookmarks__BookmarksList_Loading,
|
|
|
|
.Bookmarks__BookmarksList_Empty {
|
|
|
|
width: 200px;
|
|
|
|
margin: 200px auto;
|
|
|
|
}
|
|
|
|
.Bookmarks__BookmarksList_Loading {
|
|
|
|
text-align: center;
|
|
|
|
}
|
2019-08-24 17:10:20 +00:00
|
|
|
|
|
|
|
.Bookmarks__BookmarksList--GridView {
|
|
|
|
display: flex;
|
|
|
|
flex-flow: wrap;
|
|
|
|
}
|
|
|
|
.Bookmarks__BookmarksList--GridView > .Bookmarks__BookmarksList__Folder,
|
|
|
|
.Bookmarks__BookmarksList--GridView > .Bookmarks__BookmarksList__Bookmark,
|
|
|
|
.Bookmarks__BookmarksList--GridView > .Bookmarks__CreateFolder,
|
|
|
|
.Bookmarks__BookmarksList--GridView > .Bookmarks__CreateBookmark {
|
|
|
|
width: 200px;
|
2019-08-25 15:10:06 +00:00
|
|
|
max-width: 300px;
|
2019-08-24 17:10:20 +00:00
|
|
|
flex: 1;
|
|
|
|
height: 200px;
|
|
|
|
align-items: flex-end;
|
|
|
|
background: rgb(255, 255, 255);
|
|
|
|
margin: 10px 0 0 10px;
|
|
|
|
border: 1px solid var(--color-border);
|
|
|
|
}
|
2019-08-04 21:49:07 +00:00
|
|
|
</style>
|