mirror of https://github.com/nextcloud/bookmarks
76 lines
2.1 KiB
Vue
76 lines
2.1 KiB
Vue
<!--
|
|
- Copyright (c) 2021. The Nextcloud Bookmarks contributors.
|
|
-
|
|
- This file is licensed under the Affero General Public License version 3 or later. See the COPYING file.
|
|
-->
|
|
|
|
<template>
|
|
<div class="dragImage">
|
|
<FolderIcon v-if="$store.state.selection.folders.length" :fill-color="colorPrimaryElement" />
|
|
<EarthIcon v-else :fill-color="colorPrimaryElement" /><span class="description">{{ selectionDescription }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import FolderIcon from 'vue-material-design-icons/Folder.vue'
|
|
import EarthIcon from 'vue-material-design-icons/Earth.vue'
|
|
export default {
|
|
name: 'DragImage',
|
|
components: { FolderIcon, EarthIcon },
|
|
computed: {
|
|
selectionDescription() {
|
|
if (this.$store.state.selection.bookmarks.length !== 0 && this.$store.state.selection.folders.length !== 0) {
|
|
return this.t('bookmarks',
|
|
'{folders} folders and {bookmarks} bookmarks',
|
|
{ folders: this.$store.state.selection.folders.length, bookmarks: this.$store.state.selection.bookmarks.length }
|
|
)
|
|
}
|
|
if (this.$store.state.selection.bookmarks.length !== 0) {
|
|
if (this.$store.state.selection.bookmarks.length === 1) {
|
|
return this.$store.state.selection.bookmarks[0].title
|
|
}
|
|
return this.n('bookmarks',
|
|
'%n bookmark',
|
|
'%n bookmarks',
|
|
this.$store.state.selection.bookmarks.length
|
|
)
|
|
}
|
|
if (this.$store.state.selection.folders.length !== 0) {
|
|
if (this.$store.state.selection.folders.length === 1) {
|
|
return this.$store.state.selection.folders[0].title
|
|
}
|
|
return this.n('bookmarks',
|
|
'%n folder',
|
|
'%n folders',
|
|
this.$store.state.selection.folders.length
|
|
)
|
|
}
|
|
return ''
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dragImage {
|
|
background: var(--color-main-background);
|
|
border: 1px solid var(--color-border);
|
|
box-shadow: #efefef7d 0px 0 13px 0px;
|
|
border-radius: var(--border-radius-large);
|
|
width: 250px;
|
|
height: 1.5em;
|
|
padding: 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.dragImage .description {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
flex-grow: 1;
|
|
height: 1.5em;
|
|
display: inline-block;
|
|
margin-left: 3px;
|
|
}
|
|
</style>
|