Skip to content

Commit

Permalink
feat: Implement Trashbin UI
Browse files Browse the repository at this point in the history 
Signed-off-by: Marcel Klehr <mklehr@gmx.net>
  • Loading branch information
@marcelklehr
marcelklehr committed May 26, 2024
1 parent b6b2131 commit f80bce5
Show file tree
Hide file tree
Showing 14 changed files with 300 additions and 106 deletions.
111 changes: 67 additions & 44 deletions src/components/Bookmark.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,56 +40,71 @@
</div>
</template>
<template #actions>
<NcActionButton :close-after-click="true"
@click="onDetails">
<template #icon>
<InformationVariantIcon :size="20" />
</template>
{{ t('bookmarks', 'Details') }}
</NcActionButton>
<NcActionCheckbox @change="onSelect">
{{ t('bookmarks', 'Select bookmark') }}
</NcActionCheckbox>
<NcActionButton :close-after-click="true"
@click="onRename">
<template #icon>
<PencilIcon :size="20" />
</template>
{{ t('bookmarks', 'Rename') }}
</NcActionButton>
<NcActionButton :close-after-click="true"
@click="onCopyUrl">
<template #icon>
<ContentCopyIcon :size="20" />
</template>
{{ t('bookmarks', 'Copy link') }}
</NcActionButton>
<NcActionButton :close-after-click="true" @click="onMove">
<template #icon>
<FolderMoveIcon :size="20" />
</template>
{{ t('bookmarks', 'Move') }}
</NcActionButton>
<NcActionButton :close-after-click="true" @click="onCopy">
<template #icon>
<FolderPlusIcon :size="20" />
</template>
{{ t('bookmarks', 'Add to folders') }}
</NcActionButton>
<NcActionButton :close-after-click="true"
@click="onDelete">
<template #icon>
<DeleteIcon :size="20" />
</template>
{{ t('bookmarks', 'Delete') }}
</NcActionButton>
<template v-if="!isTrashbin">
<NcActionButton :close-after-click="true"
@click="onDetails">
<template #icon>
<InformationVariantIcon :size="20" />
</template>
{{ t('bookmarks', 'Details') }}
</NcActionButton>
<NcActionCheckbox @change="onSelect">
{{ t('bookmarks', 'Select bookmark') }}
</NcActionCheckbox>
<NcActionButton :close-after-click="true"
@click="onRename">
<template #icon>
<PencilIcon :size="20" />
</template>
{{ t('bookmarks', 'Rename') }}
</NcActionButton>
<NcActionButton :close-after-click="true"
@click="onCopyUrl">
<template #icon>
<ContentCopyIcon :size="20" />
</template>
{{ t('bookmarks', 'Copy link') }}
</NcActionButton>
<NcActionButton :close-after-click="true" @click="onMove">
<template #icon>
<FolderMoveIcon :size="20" />
</template>
{{ t('bookmarks', 'Move') }}
</NcActionButton>
<NcActionButton :close-after-click="true" @click="onCopy">
<template #icon>
<FolderPlusIcon :size="20" />
</template>
{{ t('bookmarks', 'Add to folders') }}
</NcActionButton>
<NcActionButton :close-after-click="true" @click="onDelete">
<template #icon>
<DeleteIcon :size="20" />
</template>
{{ t('bookmarks', 'Put bookmark into trash bin') }}
</NcActionButton>
</template>
<template v-else>
<NcActionButton :close-after-click="true" @click="onDelete">
<template #icon>
<UndeleteIcon :size="20" />
</template>
{{ t('bookmarks', 'Restore bookmark') }}
</NcActionButton>
<NcActionButton :close-after-click="true" @click="onDelete">
<template #icon>
<DeleteForeverIcon :size="20" />
</template>
{{ t('bookmarks', 'Delete bookmark permanently') }}
</NcActionButton>
</template>
</template>
</Item>
</template>
<script>
import Item from './Item.vue'
import { NcActionButton, NcActionCheckbox } from '@nextcloud/vue'
import { FolderPlusIcon, FolderMoveIcon, ContentCopyIcon, PencilIcon, InformationVariantIcon, DeleteIcon, BookmarksIcon } from './Icons.js'
import { UndeleteIcon, DeleteForeverIcon, FolderPlusIcon, FolderMoveIcon, ContentCopyIcon, PencilIcon, InformationVariantIcon, DeleteIcon, BookmarksIcon } from './Icons.js'
import { getCurrentUser } from '@nextcloud/auth'
import { generateUrl } from '@nextcloud/router'
import { actions, mutations } from '../store/index.js'
Expand All @@ -107,6 +122,8 @@ export default {
PencilIcon,
InformationVariantIcon,
DeleteIcon,
DeleteForeverIcon,
UndeleteIcon,
BookmarksIcon,
},
props: {
Expand Down Expand Up @@ -197,6 +214,12 @@ export default {
background() {
return this.viewMode === 'grid' ? this.backgroundImage : undefined
},
folder() {
return this.$store.getters.getFolder(this.$store.state.fetchState.query.folder)[0]
},
isTrashbin() {
return this.folder.softDeleted || this.$route.name === this.routes.TRASHBIN
},
},
mounted() {
this.fetchBackgroundImage()
Expand Down
11 changes: 11 additions & 0 deletions src/components/BookmarksList.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,13 @@
'bookmarkslist--gridview': viewMode === 'grid',
'bookmarkslist--with-description': descriptionShown,
}">
<div v-if="$route.name === routes.TRASHBIN && (bookmarks.length || subFolders.length)" class="bookmarkslist__description">
<NcNoteCard type="info">
{{
t('bookmarks', 'These are your deleted items.')
}}
</NcNoteCard>
</div>
<div v-if="$route.name === routes.ARCHIVED && bookmarks.length" class="bookmarkslist__description">
<NcNoteCard type="info">
{{
Expand Down Expand Up @@ -149,6 +156,10 @@ export default {
return Object.keys(this.$store.state.sharedFoldersById)
.map(folderId => this.$store.getters.getFolder(folderId)[0])
}
if (this.$route.name === this.routes.TRASHBIN) {
// Show deleted folders
return this.$store.state.deletedFolders
}
if (this.$route.name === this.routes.SEARCH) {
// Search folders
const searchFolder = (folder) => {
Expand Down
29 changes: 23 additions & 6 deletions src/components/Controls.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
<template>
<div :class="['controls', $store.state.public && 'wide']">
<div class="controls__left">
<TrashbinIcon v-if="isTrashbin" :size="20" />
<h2 v-if="isTrashbin">
{{ t('bookmarks', 'Trash Bin') }}
</h2>
<NcActions v-if="$route.name === routes.FOLDER || ($route.name === routes.SEARCH && Number($route.params.folder) !== -1)">
<NcActionButton @click="onClickBack">
<template #icon>
Expand All @@ -16,8 +20,8 @@
</NcActionButton>
</NcActions>
<template v-if="$route.name === routes.FOLDER || ($route.name === routes.SEARCH && Number($route.params.folder) !== -1)">
<h2><FolderIcon :size="20" /> <span>{{ folder.title }}</span></h2>
<NcActions v-if="permissions.canShare">
<h2><FolderIcon :size="20" /> <span :class="{strikethrough: isTrashbin}">{{ folder.title }}</span></h2>
<NcActions v-if="permissions.canShare && !isTrashbin">
<NcActionButton :close-after-click="true" @click="onOpenFolderShare">
<template #icon>
<ShareVariantIcon :size="20" />
Expand All @@ -37,7 +41,7 @@
:placeholder="t('bookmarks', 'Select one or more tags')"
@input="onTagsChange" />
</template>
<NcActions v-if="!isPublic"
<NcActions v-if="!isPublic && !isTrashbin"
v-tooltip="t('bookmarks', 'New')"
:name="t('bookmarks', 'New')">
<template #icon>
Expand Down Expand Up @@ -87,7 +91,7 @@
{{ option.description }}
</NcActionButton>
</NcActions>
<NcActions force-menu>
<NcActions v-if="!isTrashbin" force-menu>
<template #icon>
<RssIcon :size="20" />
</template>
Expand All @@ -100,7 +104,8 @@
{{ !$store.state.public? t('bookmarks', 'The RSS feed requires authentication with your Nextcloud credentials') : '' }}
</NcActionButton>
</NcActions>
<NcTextField :value.sync="search"
<NcTextField v-if="!isTrashbin"
:value.sync="search"
:label="t('bookmarks','Search')"
:placeholder="t('bookmarks','Search')"
class="inline-search"
Expand All @@ -112,7 +117,7 @@
</template>
<script>
import { NcSelect, NcActions, NcActionButton, NcActionInput, NcActionRouter, NcTextField } from '@nextcloud/vue'
import { MagnifyIcon, EarthIcon, ViewGridIcon, ViewListIcon, PlusIcon, FolderIcon, ArrowLeftIcon, RssIcon, SortAlphabeticalAscendingIcon, SortBoolAscendingIcon, SortClockAscendingOutlineIcon, SortCalendarAscendingIcon, SortNumericAscendingIcon, SortAscendingIcon, ShareVariantIcon, TagIcon } from './Icons.js'
import { TrashbinIcon, MagnifyIcon, EarthIcon, ViewGridIcon, ViewListIcon, PlusIcon, FolderIcon, ArrowLeftIcon, RssIcon, SortAlphabeticalAscendingIcon, SortBoolAscendingIcon, SortClockAscendingOutlineIcon, SortCalendarAscendingIcon, SortNumericAscendingIcon, SortAscendingIcon, ShareVariantIcon, TagIcon } from './Icons.js'
import { actions, mutations } from '../store/index.js'
import { generateUrl } from '@nextcloud/router'
import BulkEditing from './BulkEditing.vue'
Expand All @@ -121,6 +126,7 @@ export default {
name: 'Controls',
components: {
BulkEditing,
TrashbinIcon,
NcSelect,
NcActions,
NcActionButton,
Expand Down Expand Up @@ -161,11 +167,18 @@ export default {
}
},
computed: {
isTrashbin() {
return this.$route.name === this.routes.TRASHBIN || (this.$route.name === this.routes.FOLDER && this.folder && this.folder.softDeleted)
},
backLink() {
if (this.folder && this.folderPath.length > 1) {
return { name: this.routes.FOLDER, params: { folder: this.folder.parent_folder } }
}
if (this.isTrashbin) {
return { name: this.routes.TRASHBIN }
}
return { name: this.routes.HOME }
},
permissions() {
Expand Down Expand Up @@ -328,6 +341,10 @@ export default {
height: 45px;
}
.controls .strikethrough {
text-decoration: line-through;
}
.controls.wide {
padding: 0 8px;
}
Expand Down
92 changes: 55 additions & 37 deletions src/components/Folder.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,48 +43,58 @@
</div>
</template>
<template #actions>
<NcActionButton :close-after-click="true" @click="onDetails">
<template #icon>
<InformationVariantIcon :size="20" />
</template>
{{ t('bookmarks', 'Details') }}
</NcActionButton>
<NcActionCheckbox @change="clickSelect">
{{ t('bookmarks', 'Select folder') }}
</NcActionCheckbox>
<NcActionButton v-if="permissions.canShare"
icon="icon-share"
:close-after-click="true"
@click="onShare">
<template #icon>
<ShareVariantIcon :size="20" />
</template>
{{ t('bookmarks', 'Share folder') }}
</NcActionButton>
<NcActionButton :close-after-click="true" @click="onRename">
<template #icon>
<PencilIcon :size="20" />
</template>
{{ t('bookmarks', 'Rename folder') }}
</NcActionButton>
<NcActionButton :close-after-click="true" @click="onMove">
<template #icon>
<FolderMoveIcon :size="20" :fill-color="colorMainText" />
</template>
{{ t('bookmarks', 'Move folder') }}
</NcActionButton>
<NcActionButton :close-after-click="true" @click="onDelete">
<template #icon>
<DeleteIcon :size="20" />
</template>
{{ t('bookmarks', 'Delete folder') }}
</NcActionButton>
<template v-if="!isTrashbin">
<NcActionButton :close-after-click="true" @click="onDetails">
<template #icon>
<InformationVariantIcon :size="20" />
</template>
{{ t('bookmarks', 'Details') }}
</NcActionButton>
<NcActionCheckbox @change="clickSelect">
{{ t('bookmarks', 'Select folder') }}
</NcActionCheckbox>
<NcActionButton v-if="permissions.canShare"
icon="icon-share"
:close-after-click="true"
@click="onShare">
<template #icon>
<ShareVariantIcon :size="20" />
</template>
{{ t('bookmarks', 'Share folder') }}
</NcActionButton>
<NcActionButton :close-after-click="true" @click="onRename">
<template #icon>
<PencilIcon :size="20" />
</template>
{{ t('bookmarks', 'Rename folder') }}
</NcActionButton>
<NcActionButton :close-after-click="true" @click="onMove">
<template #icon>
<FolderMoveIcon :size="20" :fill-color="colorMainText" />
</template>
{{ t('bookmarks', 'Move folder') }}
</NcActionButton>
</template>
<template v-else>
<NcActionButton :close-after-click="true" @click="onDelete">
<template #icon>
<UndeleteIcon :size="20" />
</template>
{{ t('bookmarks', 'Restore folder') }}
</NcActionButton>
<NcActionButton :close-after-click="true" @click="onDelete">
<template #icon>
<DeleteForeverIcon :size="20" />
</template>
{{ t('bookmarks', 'Delete folder permanently') }}
</NcActionButton>
</template>
</template>
</Item>
</template>
<script>
import { getCurrentUser } from '@nextcloud/auth'
import { FolderMoveIcon, FolderIcon, ShareVariantIcon, DeleteIcon, PencilIcon, InformationVariantIcon } from './Icons.js'
import { UndeleteIcon, DeleteForeverIcon, FolderMoveIcon, FolderIcon, ShareVariantIcon, DeleteIcon, PencilIcon, InformationVariantIcon } from './Icons.js'
import { NcActionButton, NcActionCheckbox } from '@nextcloud/vue'
import { actions, mutations } from '../store/index.js'
import Item from './Item.vue'
Expand All @@ -99,6 +109,8 @@ export default {
FolderMoveIcon,
ShareVariantIcon,
DeleteIcon,

Check failure on line 111 in src/components/Folder.vue

View workflow job for this annotation

GitHub Actions / eslint node16.x 

The "DeleteIcon" component has been registered but not used
DeleteForeverIcon,
UndeleteIcon,
PencilIcon,
InformationVariantIcon,
},
Expand All @@ -122,6 +134,12 @@ export default {
const currentUser = getCurrentUser()
return currentUser && this.folder.userId === currentUser.uid
},
containingFolder() {
return this.$store.getters.getFolder(this.$store.state.fetchState.query.folder)[0]
},
isTrashbin() {
return this.containingFolder.softDeleted || this.$route.name === this.routes.TRASHBIN
},
permissions() {
return this.$store.getters.getPermissionsForFolder(this.folder.id)
},
Expand Down
Loading

0 comments on commit f80bce5

Please sign in to comment.