Skip to content

Commit

Permalink
🚸 click the last element of folder nav to set bookmark folder
Browse files Browse the repository at this point in the history
  • Loading branch information
@Benbinbin
Benbinbin committed May 9, 2023
1 parent 4d78f1d commit bb42c55
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 30 deletions.
54 changes: 30 additions & 24 deletions src/popup/components/BookmarkFolderSession.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Icon as Iconify } from '@iconify/vue';
import FolderGrid from './FolderGrid.vue';
import SearchFolder from './SearchFolder.vue';
const props = defineProps(['nodeTreeId'])
const props = defineProps(['nodeTreeId']);
/**
* select folder
Expand All @@ -20,7 +20,7 @@ const bookmarkFolderId = inject('bookmarkFolderId');
const setBookmarkFolderId = inject('setBookmarkFolderId');
const resetBookmarkFolder = () => {
setBookmarkFolderId(bookmarkOriginFolderId.value)
setBookmarkFolderId(bookmarkOriginFolderId.value);
}
// the folder node selected (an object without children property)
Expand All @@ -29,8 +29,8 @@ const selectFolderNode = ref(null) // an object
// get the node tree object
watch(bookmarkFolderId, async () => {
if(bookmarkFolderId.value) {
const result = await chrome.bookmarks.get(bookmarkFolderId.value)
selectFolderNode.value = result[0]
const result = await chrome.bookmarks.get(bookmarkFolderId.value);
selectFolderNode.value = result[0];
}
}, { immediate: true })
Expand All @@ -42,16 +42,18 @@ const setNewFolder = inject('setNewFolder');
*/
// node tree (with children property)
// nodeTreeId is folder id of node tree start point
const nodeTreeId = ref(props.nodeTreeId)
const nodeTree = ref(null) // an object (data structure is a tree)
const nodeTreeId = ref(props.nodeTreeId);
const nodeTreeFolder = ref(null);
const nodeTree = ref(null); // an object (data structure is a tree)
// set the node tree id manually or automatically
const setNodeTreeId = (id) => {
nodeTreeId.value = id
showFolderSearch.value = false
nodeTreeId.value = id;
showFolderSearch.value = false;
}
provide('nodeTreeId', nodeTreeId)
provide('setNodeTreeId', setNodeTreeId)
provide('nodeTreeId', nodeTreeId);
provide('setNodeTreeId', setNodeTreeId);
watch(bookmarkOriginFolderId, async () => {
Expand All @@ -60,17 +62,17 @@ watch(bookmarkOriginFolderId, async () => {
// watch the nodeTreeId change and get the node tree object
watch(nodeTreeId, async () => {
const result = await chrome.bookmarks.getSubTree(nodeTreeId.value)
const targetNodeTree = result[0]
const result = await chrome.bookmarks.getSubTree(nodeTreeId.value);
const targetNodeTree = result[0];
// sort the nodeTree children nodes
// move the folder node to top
targetNodeTree.children.sort((nodeA, nodeB) => {
if (nodeA.children && !nodeB.children) {
return -1
return -1;
} else if (!nodeA.children && nodeB.children) {
return 1
return 1;
} else {
return 0
return 0;
}
})
nodeTree.value = targetNodeTree
Expand All @@ -79,30 +81,34 @@ watch(nodeTreeId, async () => {
/**
* folder path in component header navbar
*/
const folderPath = ref([])
const folderPath = ref([]);
const getFolderPath = async (id) => {
const resultForFolderNode = await chrome.bookmarks.get(id)
const folderNode = resultForFolderNode[0]
folderPath.value.unshift(folderNode)
const resultForFolderNode = await chrome.bookmarks.get(id);
const folderNode = resultForFolderNode[0];
folderPath.value.unshift(folderNode);
if (folderNode.parentId) {
// recursion get the folder path
// from the node tree top folder to the root folder
getFolderPath(folderNode.parentId)
getFolderPath(folderNode.parentId);
}
}
// watch the nodeTreeId change and update the folder path
watch(nodeTreeId, async () => {
const resultForFolderNode = await chrome.bookmarks.get(nodeTreeId.value);
nodeTreeFolder.value = resultForFolderNode[0];
// reset folder path
folderPath.value = []
await getFolderPath(nodeTreeId.value)
folderPath.value = [];
if (nodeTreeFolder.value?.parentId) {
await getFolderPath(nodeTreeFolder.value.parentId);
}
}, { immediate: true })
/**
* search folder
*/
const showFolderSearch = ref(false)
const showFolderSearch = ref(false);
</script>
<template>
Expand Down Expand Up @@ -139,7 +145,7 @@ const showFolderSearch = ref(false)
</div>
</div>
<div class="w-full">
<FolderGrid v-if="nodeTree" v-show="!showFolderSearch" :folder-path="folderPath" :nodes="nodeTree.children"></FolderGrid>
<FolderGrid v-if="nodeTree" v-show="!showFolderSearch" :node-tree-folder="nodeTreeFolder" :folder-path="folderPath" :nodes="nodeTree.children"></FolderGrid>
<SearchFolder v-show="showFolderSearch" :show-state="showFolderSearch" @hide="showFolderSearch = false"></SearchFolder>
</div>
</section>
Expand Down
22 changes: 16 additions & 6 deletions src/popup/components/FolderGrid.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { useGetFaviconURL } from '@/composables/getFaviconURL';
import { useGetTranslation } from '@/composables/getTranslation';
import FolderGridItem from './FolderGridItem.vue';
const props = defineProps(['folderPath', 'nodes']);
const props = defineProps(['nodeTreeFolder', 'folderPath', 'nodes', ]);
const showBookmark = ref(true)
provide('showBookmark', showBookmark)
Expand All @@ -15,6 +15,7 @@ const setNodeTreeId = inject('setNodeTreeId')
const selectFolderType = inject('selectFolderType')
const bookmarkFolderId = inject('bookmarkFolderId')
const setBookmarkFolderId = inject('setBookmarkFolderId')
// new folder
const newFolder = inject('newFolder')
Expand Down Expand Up @@ -58,17 +59,26 @@ const setNewFolderHandler = () => {
<div class="rounded-md shadow shadow-orange-100">
<!-- grid header -->
<div class="px-2 py-1.5 flex justify-between items-start gap-4 bg-orange-50/50 border-b border-orange-200 rounded-t-md shadow shadow-orange-50">
<div class="grow flex justify-start items-start">
<div class="grow flex justify-start items-start gap-1">
<button :title="useGetTranslation('popup_main_bookmark_folder_section_toggle_bookmark_btn_title')" @click="showBookmark = !showBookmark" class="shrink-0 p-1 rounded transition-colors duration-300" :class="showBookmark ? 'hover:bg-orange-100' : 'hover:bg-orange-200'">
<img src="@/assets/nut-mark.svg" alt="nut mark icon" class="w-4 h-4" :class="showBookmark ? 'opacity-100' : 'opacity-30'">
</button>
<!-- folder path -->
<div class="flex flex-wrap justify-start items-center gap-1">
<div v-for="(folder, index) in props.folderPath" :key="folder.id" class="flex justify-center items-center gap-0.5 text-orange-500">
<div class="flex flex-wrap justify-start items-center gap-0.5">
<template v-for="folder in props.folderPath" :key="folder.id">
<span class="text-orange-500 text-xs select-none">/</span>
<button :title="useGetTranslation('popup_main_bookmark_folder_section_folder_path_nav_btn_title')" class="px-1.5 py-1 text-xs font-bold rounded transition-colors duration-300"
:class="selectFolderType === 'old' && bookmarkFolderId === folder.id ? 'text-green-500 hover:bg-green-100 ' : 'text-orange-500 hover:bg-orange-100 '"
:class="selectFolderType === 'old' && bookmarkFolderId === folder.id ? 'text-green-500 hover:bg-green-100' : 'text-orange-500 hover:bg-orange-100'"
@click="setNodeTreeId(folder.id)">{{ folder.id === '0' ? useGetTranslation('popup_main_bookmark_folder_section_folder_path_nav_root_btn_content') : (folder.title || useGetTranslation('bookmark_folder_default_name')) }}</button>
<span v-if="index < props.folderPath.length -1">/</span>
</template>
<span class="text-orange-500 text-xs select-none">/</span>
<button v-if="props.nodeTreeFolder && props.nodeTreeFolder.id !== '0'" class="px-1.5 py-1 text-xs font-bold hover:text-green-500 hover:bg-green-100 rounded transition-colors duration-300"
:class="props.nodeTreeFolder && selectFolderType === 'old' && bookmarkFolderId === props.nodeTreeFolder.id ? 'text-green-500' : 'text-orange-500'"
@click="setBookmarkFolderId(props.nodeTreeFolder.id)">
{{ props.nodeTreeFolder.title || useGetTranslation('bookmark_folder_default_name') }}
</button>
<div v-if="props.nodeTreeFolder && props.nodeTreeFolder.id === '0'" class="px-1.5 py-1 text-xs font-bold text-orange-500 rounded select-none">
{{ useGetTranslation('popup_main_bookmark_folder_section_folder_path_nav_root_btn_content') }}
</div>
</div>
</div>
Expand Down

0 comments on commit bb42c55

Please sign in to comment.