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

add SetFolderIcon for CreateFolder on mobile device, change SetFolderIcon payload

Browse Source
This commit is contained in:
Milos Holba
2021-02-26 17:14:21 +01:00
parent 7a963cf5b3
commit 7dd4e65d77
11 changed files with 87 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/Others/CreateFolder.vue
+25 -2
View File
@@ -16,6 +16,10 @@
<input v-model="name" :class="{'is-error': errors[0]}" type="text" ref="input" :placeholder="$t('popup_create_folder.placeholder')">
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<SetFolderIcon v-if="isMoreOptions"/>
<ActionButton @click.native.stop="moreOptions" :icon="isMoreOptions ? 'x' : 'pencil-alt'">{{ moreOptionsTitle }}</ActionButton>
</ValidationObserver>
</PopupContent>
@@ -44,11 +48,11 @@
import PopupContent from '@/components/Others/Popup/PopupContent'
import PopupHeader from '@/components/Others/Popup/PopupHeader'
import ThumbnailItem from '@/components/Others/ThumbnailItem'
import SetFolderIcon from '@/components/Others/SetFolderIcon'
import ActionButton from '@/components/Others/ActionButton'
import ButtonBase from '@/components/FilesView/ButtonBase'
import {required} from 'vee-validate/dist/rules'
import {events} from '@/bus'
import axios from 'axios'
export default {
name: 'CreateFolder',
@@ -56,6 +60,7 @@
ValidationProvider,
ValidationObserver,
ThumbnailItem,
SetFolderIcon,
ActionButton,
PopupWrapper,
PopupActions,
@@ -64,19 +69,29 @@
ButtonBase,
required,
},
computed: {
moreOptionsTitle() {
return this.isMoreOptions ? this.$t('shared_form.button_close_options') : this.$t('shared_form.button_folder_icon_open')
}
},
data() {
return {
name: undefined,
isMoreOptions: false,
folderIcon: undefined
}
},
methods: {
moreOptions() {
this.isMoreOptions = !this.isMoreOptions
},
async createFolder() {
// Validate fields
const isValid = await this.$refs.createForm.validate();
if (isValid) {
this.$store.dispatch('createFolder', this.name)
this.$store.dispatch('createFolder', {'name':this.name, 'icon': this.folderIcon})
this.$closePopup()
@@ -85,11 +100,19 @@
},
},
mounted() {
events.$on('setFolderIcon', (icon) => {
this.folderIcon = icon
})
events.$on('popup:open', ({name}) => {
if (name === 'create-folder' && ! this.$isMobile())
this.$nextTick(() => this.$refs.input.focus())
})
events.$on('setFolderIcon', (icon) => {
this.setFolderIcon = icon
})
}
}
</script>
resources/js/components/Others/RenameItem.vue
+2 -3
View File
@@ -56,7 +56,6 @@ 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'
export default {
name: 'RenameItem',
@@ -100,7 +99,7 @@ export default {
unique_id: this.pickedItem.unique_id,
type: this.pickedItem.type,
name: this.pickedItem.name,
folder_icon: this.setFolderIcon ? this.setFolderIcon : null
icon: this.setFolderIcon ? this.setFolderIcon : null
}
// Rename item request
@@ -133,7 +132,7 @@ export default {
})
events.$on('setFolderIcon', (icon) => {
this.setFolderIcon = icon.value
this.setFolderIcon = icon
})
}
}
resources/js/components/Others/SetFolderIcon.vue
+17 -13
View File
@@ -53,7 +53,7 @@ export default {
if( this.selectedColor ) {
this.selectedEmoji = undefined
events.$emit('setFolderIcon', { 'value': color })
events.$emit('setFolderIcon', color )
}
},
@@ -64,25 +64,29 @@ export default {
if( this.selectedEmoji ) {
this.selectedColor = undefined
events.$emit('setFolderIcon', { 'value': this.selectedEmoji ==='default' ? 'default' : emoji })
events.$emit('setFolderIcon', this.selectedEmoji ==='default' ? 'default' : emoji )
}
},
},
created() {
if(this.folderData) {
// If folder have already set some color set this color to selected color
this.folderData.icon_color ? this.selectedColor = this.folderData.icon_color : ''
// If folder have already set some color set this color to selected color
this.folderData.icon_color ? this.selectedColor = this.folderData.icon_color : ''
// If folder have already set some emojit set this emoji to selected emoji
this.folderData.icon_emoji ? this.selectedEmoji = this.folderData.icon_emoji : ''
// If folder have already set some emojit set this emoji to selected emoji
this.folderData.icon_emoji ? this.selectedEmoji = this.folderData.icon_emoji : ''
}
},
destroyed () {
// After close SetFolderIcon set the saved folder icon for thumbnail
let color = {'color': this.folderData.icon_color }
let emoji = {'emoji': this.folderData.icon_emoji }
events.$emit('setFolderIcon', { 'value': this.folderData.icon_emoji ? emoji : color })
if(this.folderData) {
// After close SetFolderIcon set the saved folder icon for thumbnail
let color = {'color': this.folderData.icon_color }
let emoji = {'emoji': this.folderData.icon_emoji }
events.$emit('setFolderIcon', this.folderData.icon_emoji ? emoji : color )
}
}
}
</script>