mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-30 11:35:59 +00:00
- Toggle for enable/disable landing page
- New app screenshots for landing page - frontend build - some ui fixes
This commit is contained in:
Peter Papp
@@ -23,14 +23,13 @@
|
||||
<!-- Single options -->
|
||||
<OptionGroup v-if="multiSelectContextMenu">
|
||||
<Option @click.native="restoreItem" v-if="item" :title="$t('context_menu.restore')" icon="restore"/>
|
||||
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash"/>
|
||||
<Option @click.native="deleteItem" v-if="item" :title="$t('context_menu.delete')" icon="trash"/>
|
||||
<Option @click.native="emptyTrash" :title="$t('context_menu.empty_trash')" icon="empty-trash"/>
|
||||
</OptionGroup>
|
||||
|
||||
<OptionGroup v-if="item && multiSelectContextMenu">
|
||||
<Option @click.native="ItemDetail" :title="$t('context_menu.detail')" icon="detail"/>
|
||||
<Option @click.native="downloadItem" v-if="!isFolder" :title="$t('context_menu.download')" icon="download"/>
|
||||
<Option @click.native="downloadFolder" :title="$t('context_menu.zip_folder')" icon="zip-folder"/>
|
||||
</OptionGroup>
|
||||
|
||||
<!-- Multi options -->
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<PopupWrapper name="rename-item">
|
||||
<!--Title-->
|
||||
<PopupHeader :title="$t('popup_rename.title', {item: itemTypeTitle})" icon="edit" />
|
||||
<PopupHeader :title="$t('popup_rename.title', {item: itemTypeTitle})" icon="edit"/>
|
||||
|
||||
<!--Content-->
|
||||
<PopupContent>
|
||||
@@ -30,184 +30,174 @@
|
||||
|
||||
</ValidationObserver>
|
||||
|
||||
|
||||
|
||||
|
||||
</PopupContent>
|
||||
|
||||
<!--Actions-->
|
||||
<PopupActions>
|
||||
<ButtonBase
|
||||
class="popup-button"
|
||||
@click.native="$closePopup()"
|
||||
button-style="secondary"
|
||||
>{{ $t('popup_move_item.cancel') }}
|
||||
<ButtonBase class="popup-button" @click.native="$closePopup()" button-style="secondary">{{ $t('popup_move_item.cancel') }}
|
||||
</ButtonBase>
|
||||
<ButtonBase
|
||||
class="popup-button"
|
||||
@click.native="changeName"
|
||||
button-style="theme"
|
||||
>{{ $t('popup_share_edit.save') }}
|
||||
<ButtonBase class="popup-button" @click.native="changeName" button-style="theme">{{ $t('popup_share_edit.save') }}
|
||||
</ButtonBase>
|
||||
</PopupActions>
|
||||
</PopupWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
|
||||
import PopupActions from '@/components/Others/Popup/PopupActions'
|
||||
import PopupContent from '@/components/Others/Popup/PopupContent'
|
||||
import PopupHeader from '@/components/Others/Popup/PopupHeader'
|
||||
import SetFolderIcon from '@/components/Others/SetFolderIcon'
|
||||
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'
|
||||
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
|
||||
import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
|
||||
import PopupActions from '@/components/Others/Popup/PopupActions'
|
||||
import PopupContent from '@/components/Others/Popup/PopupContent'
|
||||
import PopupHeader from '@/components/Others/Popup/PopupHeader'
|
||||
import SetFolderIcon from '@/components/Others/SetFolderIcon'
|
||||
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'
|
||||
|
||||
export default {
|
||||
name: 'RenameItem',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SetFolderIcon,
|
||||
ThumbnailItem,
|
||||
ActionButton,
|
||||
PopupWrapper,
|
||||
PopupActions,
|
||||
PopupContent,
|
||||
PopupHeader,
|
||||
ButtonBase,
|
||||
required,
|
||||
XIcon,
|
||||
export default {
|
||||
name: 'RenameItem',
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
SetFolderIcon,
|
||||
ThumbnailItem,
|
||||
ActionButton,
|
||||
PopupWrapper,
|
||||
PopupActions,
|
||||
PopupContent,
|
||||
PopupHeader,
|
||||
ButtonBase,
|
||||
required,
|
||||
XIcon
|
||||
},
|
||||
computed: {
|
||||
itemTypeTitle() {
|
||||
return this.pickedItem && this.pickedItem.type === 'folder' ? this.$t('types.folder') : this.$t('types.file')
|
||||
},
|
||||
computed: {
|
||||
itemTypeTitle() {
|
||||
return this.pickedItem && this.pickedItem.type === 'folder' ? this.$t('types.folder') : this.$t('types.file')
|
||||
},
|
||||
moreOptionsTitle() {
|
||||
return this.isMoreOptions ? this.$t('shared_form.button_close_options') : this.$t('shared_form.button_folder_icon_open')
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pickedItem: undefined,
|
||||
isMoreOptions:false,
|
||||
setFolderIcon: undefined,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
moreOptions(){
|
||||
this.isMoreOptions = ! this.isMoreOptions
|
||||
|
||||
this.setFolderIcon = undefined
|
||||
},
|
||||
changeName() {
|
||||
if (this.pickedItem.name && this.pickedItem.name !== '') {
|
||||
|
||||
let item = {
|
||||
unique_id: this.pickedItem.unique_id,
|
||||
type: this.pickedItem.type,
|
||||
name: this.pickedItem.name,
|
||||
folder_icon: this.setFolderIcon ? this.setFolderIcon : null
|
||||
}
|
||||
|
||||
// Rename item request
|
||||
this.$store.dispatch('renameItem', item)
|
||||
|
||||
// Rename item in view
|
||||
events.$emit('change:name', item)
|
||||
|
||||
this.$closePopup()
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
|
||||
// Show popup
|
||||
events.$on('popup:open', args => {
|
||||
|
||||
if (args.name !== 'rename-item') return
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.input.focus()
|
||||
})
|
||||
|
||||
this.isMoreOptions = false
|
||||
|
||||
this.setFolderIcon = undefined
|
||||
|
||||
// Store picked item
|
||||
this.pickedItem = args.item
|
||||
})
|
||||
|
||||
events.$on('setFolderIcon', (icon) => {
|
||||
this.setFolderIcon = ! icon ? undefined : icon.value
|
||||
})
|
||||
moreOptionsTitle() {
|
||||
return this.isMoreOptions ? this.$t('shared_form.button_close_options') : this.$t('shared_form.button_folder_icon_open')
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pickedItem: undefined,
|
||||
isMoreOptions: false,
|
||||
setFolderIcon: undefined
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
moreOptions() {
|
||||
this.isMoreOptions = !this.isMoreOptions
|
||||
|
||||
this.setFolderIcon = undefined
|
||||
},
|
||||
changeName() {
|
||||
if (this.pickedItem.name && this.pickedItem.name !== '') {
|
||||
|
||||
let item = {
|
||||
unique_id: this.pickedItem.unique_id,
|
||||
type: this.pickedItem.type,
|
||||
name: this.pickedItem.name,
|
||||
folder_icon: this.setFolderIcon ? this.setFolderIcon : null
|
||||
}
|
||||
|
||||
// Rename item request
|
||||
this.$store.dispatch('renameItem', item)
|
||||
|
||||
// Rename item in view
|
||||
events.$emit('change:name', item)
|
||||
|
||||
this.$closePopup()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
// Show popup
|
||||
events.$on('popup:open', args => {
|
||||
|
||||
if (args.name !== 'rename-item') return
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.$refs.input.focus()
|
||||
})
|
||||
|
||||
this.isMoreOptions = false
|
||||
|
||||
this.setFolderIcon = undefined
|
||||
|
||||
// Store picked item
|
||||
this.pickedItem = args.item
|
||||
})
|
||||
|
||||
events.$on('setFolderIcon', (icon) => {
|
||||
this.setFolderIcon = !icon ? undefined : icon.value
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/vue-file-manager/_inapp-forms.scss";
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
@import "@assets/vue-file-manager/_inapp-forms.scss";
|
||||
@import '@assets/vue-file-manager/_forms';
|
||||
|
||||
.input {
|
||||
position: relative;
|
||||
.input {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.close-icon-wrapper {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
right: 15px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
justify-content: center;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.close-icon {
|
||||
line {
|
||||
stroke: rgba($text-muted, 0.3);
|
||||
stroke: $theme;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.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($text-muted, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-thumbnail {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.close-icon-wrapper {
|
||||
&:hover {
|
||||
|
||||
.close-icon {
|
||||
line {
|
||||
stroke: rgba($dark_mode_text_primary, 0.3) !important;
|
||||
stroke: $theme !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
line {
|
||||
stroke: rgba($dark_mode_text_primary, 0.3) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user