nextcloud
/
bookmarks
mirror of https://github.com/nextcloud/bookmarks
0
0
Fork 0
Code Issues Releases Wiki Activity

migrate(nc-vue): Upgrade to v8.x 

fixes #2034
fixes #1157

Signed-off-by: Marcel Klehr <mklehr@gmx.net>
This commit is contained in:
Marcel Klehr 2024-01-28 16:27:48 +01:00
parent a2932534a7
commit 649c067969
15 changed files with 2803 additions and 361 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3038
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -28,7 +28,7 @@
"@nextcloud/initial-state": "^2.0.0",
"@nextcloud/l10n": "^2.1.0",
"@nextcloud/router": "^2.1.2",
"@nextcloud/vue": "^7.12.0",
"@nextcloud/vue": "8.x",
"@nextcloud/vue-dashboard": "^2.0.1",
"@nextcloud/vue-richtext": "^2.1.0-beta.6",
"async-parallel": "^1.2.3",

2
src/components/BookmarkContent.vue
View File

@ -8,7 +8,7 @@
<div v-if="isActive && scrapingEnabled && archiveEnabled && hasMinLength && !archivedFile && isWebLink" class="bookmark-content">
<div v-if="bookmark.textContent" class="content" v-html="content" />
<div v-else>
<NcEmptyContent :title="t('bookmarks', 'Content pending')"
<NcEmptyContent :name="t('bookmarks', 'Content pending')"
:description="t('bookmarks', 'This content is being downloaded for offline use. Please check back later.')">
<template #icon>
<DownloadIcon />

2
src/components/BulkEditing.vue
View File

@ -6,7 +6,7 @@
<template>
<div class="bulkediting">
<NcActions :primary="true" :menu-title="selectionDescription">
<NcActions :primary="true" :menu-name="selectionDescription">
<NcActionButton close-after-click @click="onBulkOpen">
<template #icon>
<OpenInNewIcon />

12
src/components/Controls.vue
View File

@ -28,7 +28,7 @@
</template>
<template v-if="$route.name === routes.TAGS">
<TagIcon />
<NcMultiselect class="controls__tags"
<NcSelect class="controls__tags"
:value="tags"
:auto-limit="false"
:limit="7"
@ -39,7 +39,7 @@
</template>
<NcActions v-if="!isPublic"
v-tooltip="t('bookmarks', 'New')"
:title="t('bookmarks', 'New')">
:name="t('bookmarks', 'New')">
<template #icon>
<PlusIcon />
</template>
@ -111,7 +111,7 @@
</div>
</template>
<script>
import { NcMultiselect, NcActions, NcActionButton, NcActionInput, NcActionRouter, NcTextField } from '@nextcloud/vue'
import { NcSelect, NcActions, NcActionButton, NcActionInput, NcActionRouter, NcTextField } from '@nextcloud/vue'
import MagnifyIcon from 'vue-material-design-icons/Magnify.vue'
import EarthIcon from 'vue-material-design-icons/Earth.vue'
import ViewGridIcon from 'vue-material-design-icons/ViewGrid.vue'
@ -136,7 +136,7 @@ export default {
name: 'Controls',
components: {
BulkEditing,
NcMultiselect,
NcSelect,
NcActions,
NcActionButton,
NcActionInput,
@ -306,7 +306,7 @@ export default {
</script>
<style>
.controls {
padding: 4px 8px 0 44px;
padding: 4px 8px 0 50px;
display: flex;
position: absolute;
z-index: 100;
@ -371,6 +371,6 @@ export default {
.controls__right .inline-search {
max-width: 150px !important;
position: relative;
top: 4px;
top: -4px;
}
</style>

2
src/components/CopyDialog.vue
View File

@ -5,7 +5,7 @@
-->
<template>
<NcModal v-if="showNcModal" :title="title" @close="onClose">
<NcModal v-if="showNcModal" :name="title" @close="onClose">
<div class="copy-dialog">
<FolderPicker :title="title" :filter="filterFolders" @submit="onSubmit" />
</div>

2
src/components/FirstRun.vue
View File

@ -6,7 +6,7 @@
<template>
<div class="bookmarkslist__emptyBookmarks">
<NcEmptyContent :title="t('bookmarks', 'Welcome to Bookmarks')" :description="t('bookmarks', 'This app allows you to manage links to your favorite places on the web. Sort your bookmarks into folders, label them with tags and share them with others! The app will regularly check all your links for availability and display unavailable links. If you add a link to a file on the web, the file will be automatically downloaded to your Nextcloud Files. You can also import bookmarks exported from other services or directly sync bookmarks from all your browsers with this app.')">
<NcEmptyContent :name="t('bookmarks', 'Welcome to Bookmarks')" :description="t('bookmarks', 'This app allows you to manage links to your favorite places on the web. Sort your bookmarks into folders, label them with tags and share them with others! The app will regularly check all your links for availability and display unavailable links. If you add a link to a file on the web, the file will be automatically downloaded to your Nextcloud Files. You can also import bookmarks exported from other services or directly sync bookmarks from all your browsers with this app.')">
<template #icon>
<StarShootingIcon />
</template>

2
src/components/FolderPickerDialog.vue
View File

@ -5,7 +5,7 @@
-->
<template>
<NcModal v-if="show" :title="t('bookmarks', 'Select folder')" @close="onClose">
<NcModal v-if="show" :name="t('bookmarks', 'Select folder')" @close="onClose">
<div class="folderpicker-dialog">
<FolderPicker :title="t('bookmarks', 'Select folder')" @submit="onSelect" />
</div>

2
src/components/MoveDialog.vue
View File

@ -5,7 +5,7 @@
-->
<template>
<NcModal v-if="showNcModal" :title="title" @close="onClose">
<NcModal v-if="showNcModal" :name="title" @close="onClose">
<div class="move-dialog">
<FolderPicker :title="title" :filter="filterFolders" @submit="onSubmit" />
</div>

52
src/components/Navigation.vue
View File

@ -9,59 +9,59 @@
<template #list>
<NcAppNavigationItem key="menu-home"
:to="{ name: routes.HOME }"
:title="t('bookmarks', 'All bookmarks')"
:name="t('bookmarks', 'All bookmarks')"
:exact="true">
<HomeIcon slot="icon" />
<NcAppNavigationCounter slot="counter">
<NcCounterBubble slot="counter">
{{ allBookmarksCount | largeNumbers }}
</NcAppNavigationCounter>
</NcCounterBubble>
</NcAppNavigationItem>
<NcAppNavigationItem key="menu-recent"
:to="{ name: routes.RECENT }"
:title="t('bookmarks', 'Recent')">
:name="t('bookmarks', 'Recent')">
<HistoryIcon slot="icon" />
</NcAppNavigationItem>
<NcAppNavigationItem key="menu-shared-folders"
:to="{ name: routes.SHARED_FOLDERS }"
:title="t('bookmarks', 'Shared with you')">
:name="t('bookmarks', 'Shared with you')">
<ShareVariantIcon slot="icon" />
<NcAppNavigationCounter v-show="Boolean(sharedFoldersCount)" slot="counter">
<NcCounterBubble v-show="Boolean(sharedFoldersCount)" slot="counter">
{{ sharedFoldersCount | largeNumbers }}
</NcAppNavigationCounter>
</NcCounterBubble>
</NcAppNavigationItem>
<NcAppNavigationItem key="menu-archived"
:to="{ name: routes.ARCHIVED }"
:title="t('bookmarks', 'Files')">
:name="t('bookmarks', 'Files')">
<FileDocumentMultipleIcon slot="icon" />
<NcAppNavigationCounter v-show="Boolean(archivedBookmarksCount)" slot="counter">
<NcCounterBubble v-show="Boolean(archivedBookmarksCount)" slot="counter">
{{ archivedBookmarksCount }}
</NcAppNavigationCounter>
</NcCounterBubble>
</NcAppNavigationItem>
<NcAppNavigationItem key="menu-duplicated"
:to="{ name: routes.DUPLICATED }"
:title="t('bookmarks', 'Duplicates')">
:name="t('bookmarks', 'Duplicates')">
<VectorLinkIcon slot="icon" />
<NcAppNavigationCounter v-show="Boolean(duplicatedBookmarksCount)" slot="counter">
<NcCounterBubble v-show="Boolean(duplicatedBookmarksCount)" slot="counter">
{{ duplicatedBookmarksCount | largeNumbers }}
</NcAppNavigationCounter>
</NcCounterBubble>
</NcAppNavigationItem>
<NcAppNavigationItem key="menu-unavailable"
:to="{ name: routes.UNAVAILABLE }"
:title="t('bookmarks', 'Broken links')">
:name="t('bookmarks', 'Broken links')">
<LinkVariantOffIcon slot="icon" />
<NcAppNavigationCounter v-show="Boolean(unavailableBookmarksCount)" slot="counter">
<NcCounterBubble v-show="Boolean(unavailableBookmarksCount)" slot="counter">
{{ unavailableBookmarksCount | largeNumbers }}
</NcAppNavigationCounter>
</NcCounterBubble>
</NcAppNavigationItem>
<NcAppNavigationSpacer />
<NcAppNavigationNewItem key="menu-new-tag"
:title="t('bookmarks', 'New tag')"
:name="t('bookmarks', 'New tag')"
@new-item="onNewTag">
<TagPlusIcon slot="icon" />
</NcAppNavigationNewItem>
<template v-if="Boolean(tags.length)">
<NcAppNavigationItem key="menu-tags"
:title="t('bookmarks', 'Search tags')"
:name="t('bookmarks', 'Search tags')"
@click="onSearchTags">
<TagMultipleIcon slot="icon" />
</NcAppNavigationItem>
@ -72,12 +72,12 @@
:force-menu="true"
:edit-label="t('bookmarks', 'Rename')"
:editable="!isPublic"
:title="tag.name"
@update:title="onRenameTag(tag.name, $event)">
:name="tag.name"
@update:name="onRenameTag(tag.name, $event)">
<TagIcon slot="icon" />
<NcAppNavigationCounter slot="counter">
<NcCounterBubble slot="counter">
{{ tag.count | largeNumbers }}
</NcAppNavigationCounter>
</NcCounterBubble>
<template v-if="!isPublic" slot="actions">
<NcActionButton :close-after-click="true" @click="onDeleteTag(tag.name)">
<template #icon>
@ -89,13 +89,13 @@
</NcAppNavigationItem>
<NcAppNavigationItem key="menu-untagged"
:to="{ name: routes.UNTAGGED }"
:title="t('bookmarks', 'Untagged')">
:name="t('bookmarks', 'Untagged')">
<TagOffIcon slot="icon" />
</NcAppNavigationItem>
</template>
<template v-if="Number(bookmarksLimit) > 0">
<NcAppNavigationSpacer />
<NcAppNavigationItem :pinned="true" :title="t('bookmarks', '{used} bookmarks of {available} available', {used: allBookmarksCount, available: bookmarksLimit})">
<NcAppNavigationItem :pinned="true" :name="t('bookmarks', '{used} bookmarks of {available} available', {used: allBookmarksCount, available: bookmarksLimit})">
<template #icon>
<GaugeIcon />
</template>
@ -112,7 +112,7 @@
</template>
<script>
import { NcActionButton, NcAppNavigation, NcAppNavigationItem, NcAppNavigationNewItem, NcAppNavigationCounter, NcAppNavigationSettings, NcAppNavigationSpacer } from '@nextcloud/vue'
import { NcActionButton, NcAppNavigation, NcAppNavigationItem, NcAppNavigationNewItem, NcCounterBubble, NcAppNavigationSettings, NcAppNavigationSpacer } from '@nextcloud/vue'
import HomeIcon from 'vue-material-design-icons/Home.vue'
import HistoryIcon from 'vue-material-design-icons/History.vue'
import TagOffIcon from 'vue-material-design-icons/TagOff.vue'
@ -135,7 +135,7 @@ export default {
NcAppNavigation,
NcAppNavigationItem,
NcAppNavigationNewItem,
NcAppNavigationCounter,
NcCounterBubble,
NcAppNavigationSettings,
NcAppNavigationSpacer,
NcActionButton,

16
src/components/NoBookmarks.vue
View File

@ -7,35 +7,35 @@
<template>
<div class="bookmarkslist__emptyBookmarks">
<NcEmptyContent v-if="$route.name === routes.ARCHIVED"
:title="t('bookmarks', 'No bookmarked files')"
:name="t('bookmarks', 'No bookmarked files')"
:description="t('bookmarks', 'Bookmarks to files like photos or PDFs will automatically be saved to your Nextcloud files, so you can still find them even when the link goes offline.')">
<template #icon>
<FileDocumentMultipleIcon />
</template>
</NcEmptyContent>
<NcEmptyContent v-else-if="$route.name === routes.UNAVAILABLE"
:title="t('bookmarks', 'No broken links')"
:name="t('bookmarks', 'No broken links')"
:description="t('bookmarks', 'Bookmarked links are checked regularly and the ones that cannot be reached are listed here.')">
<template #icon>
<LinkVariantOffIcon />
</template>
</NcEmptyContent>
<NcEmptyContent v-else-if="$route.name === routes.SHARED_FOLDERS"
:title="t('bookmarks', 'No shared folders')"
:name="t('bookmarks', 'No shared folders')"
:description="t('bookmarks', 'You can share bookmark folders with others. All folders shared with you are listed here.')">
<template #icon>
<ShareVariantIcon />
</template>
</NcEmptyContent>
<NcEmptyContent v-else-if="$route.name === routes.DUPLICATED"
:title="t('bookmarks', 'No duplicated bookmarks')"
:name="t('bookmarks', 'No duplicated bookmarks')"
:description="t('bookmarks', 'One bookmark can be in multiple folders at once. Updating it will update all copies. All duplicated bookmarks are listed here for convenience.')">
<template #icon>
<VectorLinkIcon />
</template>
</NcEmptyContent>
<NcEmptyContent v-else
:title="t('bookmarks', 'No bookmarks here')"
:name="t('bookmarks', 'No bookmarks here')"
:description="t('bookmarks', 'Add bookmarks manually or import bookmarks from a HTML file.')">
<template #icon>
<StarShootingIcon />
@ -110,6 +110,7 @@ export default {
.bookmarkslist__emptyBookmarks {
width: 500px;
margin: 0 auto;
margin-top: 100px;
}
.import {
@ -122,4 +123,9 @@ export default {
button {
margin-bottom: 15px;
}
.empty-content {
display: flex;
height: 100%;
}
</style>

16
src/components/SidebarBookmark.vue
View File

@ -7,14 +7,14 @@
<template>
<NcAppSidebar v-if="isActive"
class="sidebar"
:title="bookmark.title"
:title-editable="editingTitle"
:title-placeholder="t('bookmarks', 'Title')"
:name="bookmark.title"
:name-editable="editingTitle"
:name-placeholder="t('bookmarks', 'Title')"
:subtitle="addedDate"
:background="background"
@update:active="activeTab = $event"
@update:title="onEditTitleUpdate"
@submit-title="onEditTitleSubmit"
@update:name="onEditTitleUpdate"
@submit-name="onEditTitleSubmit"
@dismiss-editing="onEditTitleCancel"
@close="onClose">
<template v-if="!editingTitle" slot="secondary-actions">
@ -81,7 +81,7 @@
</div>
<div class="details__line">
<TagIcon :aria-label="t('bookmarks', 'Tags')" :title="t('bookmarks', 'Tags')" />
<NcMultiselect class="tags"
<NcSelect class="tags"
:value="tags"
:auto-limit="false"
:limit="7"
@ -124,7 +124,7 @@
</NcAppSidebar>
</template>
<script>
import { NcAppSidebar, NcRichContenteditable, NcActionButton, NcActions, NcMultiselect, NcAppSidebarTab, NcButton } from '@nextcloud/vue'
import { NcAppSidebar, NcRichContenteditable, NcActionButton, NcActions, NcSelect, NcAppSidebarTab, NcButton } from '@nextcloud/vue'
import FileDocumentIcon from 'vue-material-design-icons/FileDocument.vue'
import FolderIcon from 'vue-material-design-icons/Folder.vue'
import InformationVariantIcon from 'vue-material-design-icons/InformationVariant.vue'
@ -145,7 +145,7 @@ const MAX_RELATIVE_DATE = 1000 * 60 * 60 * 24 * 7 // one week
export default {
name: 'SidebarBookmark',
components: { NcAppSidebar, NcAppSidebarTab, NcMultiselect, NcActions, NcActionButton, NcRichContenteditable, FileDocumentIcon, FolderIcon, InformationVariantIcon, PencilIcon, ArrowRightIcon, TagIcon, OpenInNewIcon, CloseIcon, PencilBoxIcon, DownloadIcon, NcButton },
components: { NcAppSidebar, NcAppSidebarTab, NcSelect, NcActions, NcActionButton, NcRichContenteditable, FileDocumentIcon, FolderIcon, InformationVariantIcon, PencilIcon, ArrowRightIcon, TagIcon, OpenInNewIcon, CloseIcon, PencilBoxIcon, DownloadIcon, NcButton },
data() {
return {
title: '',

8
src/components/SidebarFolder.vue
View File

@ -7,7 +7,7 @@
<template>
<NcAppSidebar v-if="isActive"
class="sidebar"
:title="folder.title"
:name="folder.title"
:active.sync="activeTab"
@close="onClose">
<NcAppSidebarTab id="folder-details"
@ -30,7 +30,7 @@
</template>
<div class="participant-select">
<AccountIcon :class="{'share__avatar': true }" />
<NcMultiselect v-model="participant"
<NcSelect v-model="participant"
label="displayName"
track-by="user"
class="participant-select__selection"
@ -126,7 +126,7 @@
</NcAppSidebar>
</template>
<script>
import { NcAppSidebar, NcUserBubble, NcActionSeparator, NcActionCheckbox, NcActionButton, NcActions, NcMultiselect, NcAvatar, NcAppSidebarTab } from '@nextcloud/vue'
import { NcAppSidebar, NcUserBubble, NcActionSeparator, NcActionCheckbox, NcActionButton, NcActions, NcSelect, NcAvatar, NcAppSidebarTab } from '@nextcloud/vue'
import { getCurrentUser } from '@nextcloud/auth'
import { generateUrl, generateOcsUrl } from '@nextcloud/router'
import axios from '@nextcloud/axios'
@ -145,7 +145,7 @@ import AccountIcon from 'vue-material-design-icons/Account.vue'
export default {
name: 'SidebarFolder',
components: { NcAppSidebar, NcAppSidebarTab, NcAvatar, NcMultiselect, NcActionButton, NcActionCheckbox, NcActions, NcUserBubble, NcActionSeparator, EyeIcon, PencilIcon, ShareAllIcon, ShareVariantIcon, InformationVariantIcon, ClipboardIcon, RssIcon, PlusIcon, DeleteIcon, LinkIcon, AccountIcon },
components: { NcAppSidebar, NcAppSidebarTab, NcAvatar, NcSelect, NcActionButton, NcActionCheckbox, NcActions, NcUserBubble, NcActionSeparator, EyeIcon, PencilIcon, ShareAllIcon, ShareVariantIcon, InformationVariantIcon, ClipboardIcon, RssIcon, PlusIcon, DeleteIcon, LinkIcon, AccountIcon },
data() {
return {
participantSearchResults: [],

6
src/components/ViewBookmarklet.vue
View File

@ -19,7 +19,7 @@
<input v-model="bookmark.url" type="text" :placeholder="t('bookmarks', 'Enter bookmark URL')">
</label>
<label><figure class="icon-tag" /> {{ t('bookmarks', 'Tags') }}
<NcMultiselect class="sidebar__tags"
<NcSelect class="sidebar__tags"
:value="bookmark.tags"
:auto-limit="false"
:limit="7"
@ -52,7 +52,7 @@
</template>
<script>
import { NcContent, NcAppContent, NcMultiselect } from '@nextcloud/vue'
import { NcContent, NcAppContent, NcSelect } from '@nextcloud/vue'
import { actions } from '../store/index.js'
import FolderPickerDialog from './FolderPickerDialog.vue'
@ -61,7 +61,7 @@ export default {
components: {
FolderPickerDialog,
NcContent,
NcMultiselect,
NcSelect,
NcAppContent,
},
props: {

2
src/components/WhatsnewModal.vue
View File

@ -5,7 +5,7 @@
-->
<template>
<NcModal v-if="showModal" :title="t('bookmarks', `What's new?`)" @close="onClose">
<NcModal v-if="showModal" :name="t('bookmarks', `What's new?`)" @close="onClose">
<div class="whatsnew">
<h3>✨ {{ t('bookmarks', 'What\'s new in Bookmarks?') }}</h3>
<ul>