%PDF-
%PDF-
Mini Shell
Mini Shell
<!--
- 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>
Zerion Mini Shell 1.0