nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-28 11:00:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Create Folder - ContextMenu,add X icon for rename popup input, Dekstoptolbar icons,Recent uploads sorting,Windows scroller in nav sidebar,Change color of Delere in context menu

Browse Source
This commit is contained in:
Milos Holba
2021-01-18 20:00:26 +01:00
parent a0c39bd955
commit 4b1e5fcb46
14 changed files with 316 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/FilesView/ContextMenu.vue
+13 -7
View File
@@ -86,13 +86,17 @@
<!-- Base location with MASTER permission-->
<div v-if="$isThisLocation(['base', 'participant_uploads', 'latest']) && $checkPermission('master') && !showFromPreview" id="menu-list" class="menu-options">
<!-- No Files options -->
<OptionGroup v-if="!$isThisLocation(['participant_uploads', 'latest']) && multiSelectContextMenu && noItems">
<Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder"/>
</OptionGroup>
<!-- Single options -->
<OptionGroup v-if="!$isThisLocation(['participant_uploads', 'latest']) && multiSelectContextMenu">
<Option @click.native="addToFavourites" v-if="item && isFolder " :title="isInFavourites
? $t('context_menu.remove_from_favourites')
: $t('context_menu.add_to_favourites')" icon="favourites"/>
<Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder"/>
</OptionGroup>
@@ -117,7 +121,6 @@
<Option @click.native="addToFavourites" v-if="item && !hasFile" :title=" isInFavourites
? $t('context_menu.remove_from_favourites')
: $t('context_menu.add_to_favourites')" icon="favourites"/>
<Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder"/>
</OptionGroup>
<OptionGroup v-if="item && !multiSelectContextMenu">
@@ -133,11 +136,13 @@
<!-- Base & Public location with EDITOR permission-->
<div v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor') && !showFromPreview " id="menu-list" class="menu-options">
<!-- Single options -->
<OptionGroup v-if="multiSelectContextMenu">
<!-- No Files options -->
<OptionGroup v-if="multiSelectContextMenu && noItems">
<Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder"/>
</OptionGroup>
<!-- Single options -->
<OptionGroup v-if="item && multiSelectContextMenu">
<Option @click.native="renameItem" :title=" $t('context_menu.rename')" icon="rename"/>
<Option @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item"/>
@@ -151,9 +156,6 @@
</OptionGroup>
<!-- Multi options -->
<OptionGroup v-if="!multiSelectContextMenu">
<Option @click.native="createFolder" :title="$t('context_menu.create_folder')" icon="create-folder"/>
</OptionGroup>
<OptionGroup v-if="item && !multiSelectContextMenu">
<Option @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item"/>
@@ -199,6 +201,10 @@ export default {
},
computed: {
...mapGetters(['user', 'fileInfoDetail']),
noItems(){
if(!this.item)
return true
},
hasFolder() {
// Check if selected items includes some folder
resources/js/components/FilesView/DesktopToolbar.vue
+8 -5
View File
@@ -103,7 +103,7 @@ export default {
return !this.$isThisLocation(['base', 'public'])
},
canDeleteInView() {
return !this.$isThisLocation([
let locations = [
'trash',
'trash-root',
'base',
@@ -111,19 +111,22 @@ export default {
'latest',
'shared',
'public'
])
]
return !this.$isThisLocation(locations) || this.fileInfoDetail.length === 0
},
canUploadInView() {
return !this.$isThisLocation(['base', 'public'])
},
canMoveInView() {
return !this.$isThisLocation([
let locations = [
'base',
'participant_uploads',
'latest',
'shared',
'public'
])
]
return !this.$isThisLocation(locations) || this.fileInfoDetail.length === 0
},
canShareInView() {
let locations = [
@@ -134,7 +137,7 @@ export default {
'public'
]
return !this.$isThisLocation(locations) || this.fileInfoDetail.length > 1
return !this.$isThisLocation(locations) || this.fileInfoDetail.length > 1 || this.fileInfoDetail.length === 0
}
},
data() {
resources/js/components/FilesView/Option.vue
+16 -2
View File
@@ -1,7 +1,7 @@
<template>
<li class="menu-option">
<div class="icon">
<trash-2-icon v-if="icon === 'trash'" size="17"></trash-2-icon>
<trash-2-icon v-if="icon === 'trash'" :class="{'danger' : icon === 'trash'}" size="17"></trash-2-icon>
<life-buoy-icon v-if="icon === 'restore'" size="17"></life-buoy-icon>
<trash-icon v-if="icon === 'empty-trash'" size="17"></trash-icon>
<eye-icon v-if="icon ==='detail'" size="17"></eye-icon>
@@ -14,7 +14,7 @@
<smile-icon v-if="icon === 'no-options'" size="17"></smile-icon>
<paperclip-icon v-if="icon === 'zip-folder'" size="17"></paperclip-icon>
</div>
<div class="text-label">
<div class="text-label" :class="{'danger' : icon === 'trash'}">
{{ title }}
</div>
</li>
@@ -71,6 +71,20 @@ import {
display: flex;
align-items: center;
.danger {
color: $danger !important;
path,
line,
polyline,
rect,
circle,
polygon {
stroke: $danger !important;
}
}
.icon {
margin-right: 20px;
line-height: 0;
resources/js/components/Others/RenameItem.vue
+61 -1
View File
@@ -15,7 +15,12 @@
<!--Set password-->
<ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Name" rules="required" v-slot="{ errors }">
<label class="input-label">{{ $t('popup_rename.label') }}:</label>
<input v-model="pickedItem.name" :class="{'is-error': errors[0]}" ref="input" type="text" :placeholder="$t('popup_rename.placeholder')">
<div class="input">
<input v-model="pickedItem.name" :class="{'is-error': errors[0]}" ref="input" type="text" :placeholder="$t('popup_rename.placeholder')">
<div @click="pickedItem.name = ''" class="close-icon-wrapper">
<x-icon class="close-icon" size="14"/>
</div>
</div>
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
@@ -57,6 +62,7 @@
import ThumbnailItem from '@/components/Others/ThumbnailItem'
import ActionButton from '@/components/Others/ActionButton'
import ButtonBase from '@/components/FilesView/ButtonBase'
import {XIcon} from 'vue-feather-icons'
import {required} from 'vee-validate/dist/rules'
import {events} from '@/bus'
import axios from 'axios'
@@ -75,6 +81,7 @@
PopupHeader,
ButtonBase,
required,
XIcon,
},
computed: {
itemTypeTitle() {
@@ -147,7 +154,60 @@
@import "@assets/vue-file-manager/_inapp-forms.scss";
@import '@assets/vue-file-manager/_forms';
.input {
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
.close-icon-wrapper {
width: 22px;
height: 22px;
position: absolute;
cursor: pointer;
right: 21px;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background: $light_background;
.close-icon {
line {
stroke: $theme;
}
}
}
.close-icon {
line {
stroke: rgba($text-muted, 0.3);
}
}
}
}
.item-thumbnail {
margin-bottom: 20px;
}
@media (prefers-color-scheme: dark) {
.close-icon-wrapper {
&:hover {
background: rgba($theme, 0.1) !important;
.close-icon {
line {
stroke: $theme !important;
}
}
}
.close-icon {
line {
stroke: rgba($dark_mode_text_primary, 0.3) !important;
}
}
}
}
</style>
resources/js/components/Others/SetFolderIcon.vue
+9 -1
View File
@@ -60,13 +60,21 @@
<script>
import {SmileIcon, FolderIcon, ChevronDownIcon } from 'vue-feather-icons'
import TableWrapper from '@/components/Others/TableWrapper'
import TableOption from '@/components/Others/TableOption'
import emojis from '../../emoji.json'
import {events} from '@/bus'
export default {
name: "SetFolderIcon",
props: ['folderData', 'unique_id'],
components: {SmileIcon, FolderIcon, ChevronDownIcon },
components: {
ChevronDownIcon ,
TableWrapper,
TableOption,
FolderIcon,
SmileIcon,
},
computed: {
allEmoji() {
let emojisList = this.emojis
resources/js/components/Others/ShareCreate.vue
+21 -1
View File
@@ -25,6 +25,11 @@
<div class="successfully-send"> {{$t('shared_form.email_successfully_send_message')}} </div>
</div>
<div class="info-box">
<InfoBox >
{{$t('shared_form.email_successfully_send_message')}}
</InfoBox>
</div>
<!--Form to set sharing-->
@@ -111,7 +116,10 @@
import ThumbnailItem from '@/components/Others/ThumbnailItem'
import ActionButton from '@/components/Others/ActionButton'
import CopyInput from '@/components/Others/Forms/CopyInput'
import TableWrapper from '@/components/Others/TableWrapper'
import TableOption from '@/components/Others/TableOption'
import ButtonBase from '@/components/FilesView/ButtonBase'
import InfoBox from '@/components/Others/Forms/InfoBox'
import {LinkIcon, MailIcon } from 'vue-feather-icons'
import {required} from 'vee-validate/dist/rules'
import {mapGetters} from 'vuex'
@@ -128,6 +136,8 @@
ActionButton,
PopupWrapper,
PopupActions,
TableWrapper,
TableOption,
PopupContent,
PopupHeader,
EmailsInput,
@@ -137,7 +147,8 @@
CopyInput,
MailIcon,
required,
LinkIcon
LinkIcon,
InfoBox
},
computed: {
...mapGetters([
@@ -265,6 +276,15 @@
@import "@assets/vue-file-manager/_inapp-forms.scss";
@import '@assets/vue-file-manager/_forms';
.info-box {
padding: 0px 20px;
/deep/.info-box {
height: 40px;
display: flex;
align-items: center;
}
}
.successfully-send-wrapper {
padding: 0px 20px;
margin-bottom: 20px;
resources/js/components/Others/TableOption.vue
+68
View File
@@ -0,0 +1,68 @@
<template>
<div :class="{'active' : active}">
<div class="wrapper">
<mail-icon v-if="icon === 'email'" class="icon" size="17"/>
<link-icon v-if="icon === 'link'" class="icon" size="17"/>
<smile-icon v-if="icon === 'emoji'" class="icon" size="17"/>
<folder-icon v-if="icon === 'folder'" class="icon" size="17"/>
<b>{{title}}</b>
<slot></slot>
</div>
</div>
</template>
<script>
import {
LinkIcon,
MailIcon,
SmileIcon,
FolderIcon } from 'vue-feather-icons'
export default {
name: "TableOption",
props: ['title', 'icon', 'active'],
components: {
LinkIcon,
MailIcon,
SmileIcon,
FolderIcon
}
}
</script>
<style scoped lang="scss">
@import "@assets/vue-file-manager/_inapp-forms.scss";
@import '@assets/vue-file-manager/_forms';
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.icon {
margin-right: 10px;
path,
polyline {
color: $theme !important;
}
}
.active {
background: $text;
b {
color: $light_background !important;
}
}
@media (prefers-color-scheme: dark) {
.active {
background: $dark_mode_text_primary;
h1 {
color: $dark_mode_foreground !important;
}
}
}
</style>
resources/js/components/Others/TableWrapper.vue
+75
View File
@@ -0,0 +1,75 @@
<template>
<div class="table-wrapper">
<slot>
<child @click="setTab"></child>
</slot>
</div>
</template>
<script>
import TableOption from '@/components/Others/TableOption'
export default {
name: "TableWrapper",
components: {TableOption},
data () {
return {
tabList: []
}
},
methods: {
setTab(tab){
console.log('setTab')
this.$children.find(child => child._props.title === tab)
}
},
mounted () {
this.$children.map(child => {
this.tabList.push(child._props.title)
})
console.log(this.$children)
}
}
</script>
<style scoped lang="scss">
@import "@assets/vue-file-manager/_inapp-forms.scss";
@import '@assets/vue-file-manager/_forms';
.table-wrapper {
display: flex;
justify-content: center;
padding: 0px 20px;
margin-bottom: 20px;
cursor: pointer;
& > * {
width: 100%;
height: 42px;
display: flex;
justify-content: center;
align-items: center;
background: $light_background;
color: $text;
}
& > :first-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
& > :last-child {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
}
@media (prefers-color-scheme: dark) {
.table-wrapper {
& > * {
background: $dark_mode_foreground;
color: $dark_mode_text_primary;
}
}
}
</style>
resources/js/components/Sidebar/ContentSidebar.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<section class="content-sidebar">
<section class="content-sidebar" id="content-sidebar">
<slot></slot>
</section>
</template>