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

merge remote with local

Browse Source
This commit is contained in:
Milos Holba
2021-02-06 16:29:55 +01:00
parent 847bcec22f e984ae6beb
commit 44158c74e3
23 changed files with 945 additions and 977 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
public/mix-manifest.json
View File

@@ -27,9 +27,9 @@
"/chunks/database.js": "/chunks/database.js?id=1fc78cfeb3befbd92423",
"/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=f7ff36abf37571173944",
"/chunks/environment-setup.js": "/chunks/environment-setup.js?id=a2eed5073e52410cab54",
"/chunks/files.js": "/chunks/files.js?id=6a283c2c9f8a02500bc6",
"/chunks/files.js": "/chunks/files.js?id=b738eb9054e663cc32b7",
"/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js?id=b646ec02fb9d6a497e74",
"/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=21632550b02db8bfd464",
"/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=48524061ae633d993344",
"/chunks/files~chunks/shared-page.js": "/chunks/files~chunks/shared-page.js?id=47ade53389e84dd64310",
"/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=d5e39543eeb619cb5513",
"/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=be9304e6ba2c61b6cab3",
@@ -57,7 +57,7 @@
"/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=b671f4f3198119b48449",
"/chunks/shared-files.js": "/chunks/shared-files.js?id=b13068f12911fbf79f74",
"/chunks/shared-page.js": "/chunks/shared-page.js?id=09252cb95089d52ee56a",
"/chunks/sign-in.js": "/chunks/sign-in.js?id=0212907c9bf1cdbd99ed",
"/chunks/sign-in.js": "/chunks/sign-in.js?id=7b6565f5df2060b45bc0",
"/chunks/sign-up.js": "/chunks/sign-up.js?id=39de7293c26fb3cef1a3",
"/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=57235ac99a66b55fbf7c",
"/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=51a2856dd0631053b42e",
@@ -117,5 +117,9 @@
"/js/main.94786b794f722913db2f.hot-update.js": "/js/main.94786b794f722913db2f.hot-update.js",
"/js/main.5b97e99de82c004b7040.hot-update.js": "/js/main.5b97e99de82c004b7040.hot-update.js",
"/js/main.0994c3cbbe38c708be78.hot-update.js": "/js/main.0994c3cbbe38c708be78.hot-update.js",
"/js/main.1743a74cb9afb57f23a8.hot-update.js": "/js/main.1743a74cb9afb57f23a8.hot-update.js"
"/js/main.1743a74cb9afb57f23a8.hot-update.js": "/js/main.1743a74cb9afb57f23a8.hot-update.js",
"/js/main.4d61823678463591028f.hot-update.js": "/js/main.4d61823678463591028f.hot-update.js",
"/chunks/files.4d61823678463591028f.hot-update.js": "/chunks/files.4d61823678463591028f.hot-update.js",
"/chunks/files~chunks/shared-files~chunks/shared-page.4d61823678463591028f.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.4d61823678463591028f.hot-update.js",
"/chunks/sign-in.4d61823678463591028f.hot-update.js": "/chunks/sign-in.4d61823678463591028f.hot-update.js"
}

1
resources/js/App.vue
View File

@@ -59,7 +59,6 @@
<CookieDisclaimer/>
<!--Background vignette-->
<Vignette/>
</div>
</template>

8
resources/js/components/FilesView/DesktopToolbar.vue
View File

@@ -25,22 +25,22 @@
<SearchBar/>
</div>
<!--Files controlls-->
<!--Creating controls-->
<div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
<ToolbarButtonUpload :class="{ 'is-inactive': canUploadInView || !hasCapacity }" :action="$t('actions.upload')"/>
<ToolbarButton :class="{ 'is-inactive': canCreateFolderInView }" @click.native="createFolder" source="folder-plus" :action="$t('actions.create_folder')"/>
</div>
<div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
<!--File Controls-->
<div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor']) && ! $isMobile()">
<ToolbarButton source="move" :class="{ 'is-inactive': canMoveInView }" :action="$t('actions.move')" @click.native="moveItem"/>
<ToolbarButton v-if="!$isThisLocation(['public'])" source="share" :class="{ 'is-inactive': canShareInView }" :action="$t('actions.share')" @click.native="shareItem"/>
<ToolbarButton source="trash" :class="{ 'is-inactive': canDeleteInView }" :action="$t('actions.delete')" @click.native="deleteItem"/>
</div>
<!--View options-->
<!--View Controls-->
<div class="toolbar-button-wrapper">
<ToolbarButton source="preview-sorting" class="preview-sorting" :action="$t('actions.sorting_view')" :class="{ active: sortingAndPreview }" @click.stop.native="sortingAndPreview = !sortingAndPreview"/>
<ToolbarButton :action="$t('actions.info_panel')" :class="{ active: fileInfoVisible }" @click.native="$store.dispatch('fileInfoToggle')" source="info"/>
</div>
</div>

159
resources/js/components/FilesView/DragUI.vue
View File

@@ -1,72 +1,77 @@
<template>
<MultiSelected :title="title" :subtitle="subtitle" id="multi-select-ui" v-show="dragged" />
<MultiSelected :title="title" :subtitle="subtitle" id="multi-select-ui" v-show="isVisible"/>
</template>
<script>
import MultiSelected from '@/components/FilesView/MultiSelected'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
import { mapGetters } from 'vuex'
import { events } from '@/bus'
export default {
name:"DragUI",
components: {MultiSelected},
computed: {
...mapGetters(['fileInfoDetail']),
title(){
export default {
name: 'DragUI',
components: { MultiSelected },
computed: {
...mapGetters(['fileInfoDetail']),
title() {
let filesLength = this.fileInfoDetail.length,
hasDraggedItem = this.fileInfoDetail.includes(this.draggedItem)
// Title for multiple selected items
if(this.fileInfoDetail.length > 1 && this.fileInfoDetail.includes(this.draggedItem)) {
return this.$t('file_detail.selected_multiple')
}
// Title for multiple selected items
if (filesLength > 1 && hasDraggedItem) {
return this.$t('file_detail.selected_multiple')
}
// Title for single item
if((this.fileInfoDetail.length < 2 || !this.fileInfoDetail.includes(this.draggedItem)) && this.draggedItem ) {
return this.draggedItem.name
}
},
subtitle(){
// Subtitle for multiple selected items
if(this.fileInfoDetail.length > 1 && this.fileInfoDetail.includes(this.draggedItem) ) {
return this.fileInfoDetail.length + ' ' + this.$tc('file_detail.items', this.fileInfoDetail.length)
}
if((this.fileInfoDetail.length < 2 || !this.fileInfoDetail.includes(this.draggedItem)) && this.draggedItem) {
// Subtitle for single folder
if(this.draggedItem.type === 'folder') {
return this.draggedItem.items == 0 ? this.$t('folder.empty') : this.$tc('folder.item_counts', this.draggedItem.items)
}
// Subtitle for single file
if(this.draggedItem !== 'folder' && this.draggedItem.mimetype){
return '.'+this.draggedItem.mimetype
}
}
},
},
data () {
return {
dragged: false,
draggedItem: undefined
// Title for single item
if ((filesLength < 2 || !hasDraggedItem) && this.draggedItem) {
return this.draggedItem.name
}
},
mounted () {
subtitle() {
let filesLength = this.fileInfoDetail.length,
hasDraggedItem = this.fileInfoDetail.includes(this.draggedItem)
// Hnadle Drag & Drop Ghost show
events.$on('dragstart', (data) => {
setTimeout(() => {
this.dragged = true
}, 50);
this.draggedItem = data
})
events.$on('drop', () => {
this.dragged = false
})
// Subtitle for multiple selected items
if (filesLength > 1 && hasDraggedItem) {
return filesLength + ' ' + this.$tc('file_detail.items', filesLength)
}
if ((filesLength < 2 || !hasDraggedItem) && this.draggedItem) {
// Subtitle for single folder
if (this.draggedItem.type === 'folder') {
return this.draggedItem.items == 0 ? this.$t('folder.empty') : this.$tc('folder.item_counts', this.draggedItem.items)
}
// Subtitle for single file
if (this.draggedItem !== 'folder' && this.draggedItem.mimetype) {
return '.' + this.draggedItem.mimetype
}
}
}
},
data() {
return {
isVisible: false,
draggedItem: undefined
}
},
created() {
// Handle Drag & Drop Ghost show
events.$on('dragstart', data => {
this.draggedItem = data
setTimeout(() => {
this.isVisible = true
}, 100)
})
events.$on('drop', () => {
this.isVisible = false
})
}
}
</script>
<style lang="scss" scoped>
@@ -82,38 +87,44 @@ import {events} from '@/bus'
padding: 10px;
border-radius: 8px;
box-shadow: 0 7px 25px 1px rgba(0, 0, 0, 0.12);
background:white;
/deep/.text{
.title {
color: $text;
}
.count {
color: $text-muted;
}
background: white;
/deep/ .text {
.title {
color: $text;
}
/deep/.icon-wrapper {
.icon {
stroke: $theme;
}
.count {
color: $text-muted;
}
}
/deep/ .icon-wrapper {
.icon {
stroke: $theme;
}
}
}
@media (prefers-color-scheme: dark) {
#multi-select-ui {
background: $dark_mode_foreground;
/deep/.text {
/deep/ .text {
.title {
color: $dark_mode_text_primary;
}
.count {
color: $dark_mode_text_secondary;
}
}
/deep/.icon-wrapper {
.icon {
}
/deep/ .icon-wrapper {
.icon {
stroke: $theme;
}
}
}
}
}
}

6
resources/js/components/FilesView/FileItemGrid.vue
View File

@@ -347,7 +347,7 @@ export default {
}
.select-box-active {
background-color: $text;
background-color: $theme;
.icon {
stroke: white;
@@ -601,10 +601,10 @@ export default {
}
.select-box-active {
background-color: #f4f5f6;
background-color: lighten($theme, 5%);
.icon {
stroke: $text;
stroke: white;
}
}

22
resources/js/components/FilesView/FileItemList.vue
View File

@@ -1,9 +1,14 @@
<template>
<div class="file-wrapper" @click.stop="clickedItem" @dblclick="goToItem" spellcheck="false">
<!--List preview-->
<div :draggable="canDrag" @dragstart="$emit('dragstart')" @drop="
drop()
area = false" @dragleave="dragLeave" @dragover.prevent="dragEnter" class="file-item" :class="{'is-clicked' : isClicked , 'no-clicked' : !isClicked && this.$isMobile(), 'is-dragenter': area }">
<div
:draggable="canDrag"
@dragstart="$emit('dragstart')"
@drop="drop()"
@dragleave="dragLeave"
@dragover.prevent="dragEnter"
class="file-item" :class="{'is-clicked' : isClicked , 'no-clicked' : !isClicked && this.$isMobile(), 'is-dragenter': area }"
>
<!-- MultiSelecting for the mobile version -->
<transition name="slide-from-left">
<div class="check-select" v-if="mobileMultiSelect">
@@ -99,7 +104,7 @@ export default {
})
return false
}
// If folder have set some emoji
if(this.data.icon_emoji)
return this.data.icon_emoji
@@ -161,6 +166,7 @@ export default {
},
methods: {
drop() {
this.area = false
events.$emit('drop')
},
showItemActions() {
@@ -358,10 +364,10 @@ export default {
}
.select-box-active {
background-color: #f4f5f6;
background-color: $theme;
.icon {
stroke: $text;
stroke: white;
}
}
}
@@ -563,10 +569,10 @@ export default {
}
.select-box-active {
background-color: lighten($dark_mode_foreground, 10%);
background-color: $theme;
.icon {
stroke: $theme;
stroke: white;
}
}
}

2
resources/js/components/FilesView/FilePreviewNavigationPanel.vue
View File

@@ -6,7 +6,7 @@
<p class="title">{{ fileInfoDetail[0].name }}</p>
<span class="file-count"> ({{ showingImageIndex + ' ' + $t('pronouns.of') + ' ' + filteredFiles.length }}) </span>
</div>
<span id="fast-preview-menu" class="fast-menu-icon" @click.stop="menuOpen" v-if="$checkPermission(['master', 'editor'])">
<span id="fast-preview-menu" class="fast-menu-icon" @click.stop="menuOpen" v-if="$checkPermission(['master', 'editor', 'visitor'])">
<more-horizontal-icon class="more-icon" size="14"> </more-horizontal-icon>
</span>
</div>

2
resources/js/components/FilesView/MediaFullPreview.vue
View File

@@ -5,7 +5,7 @@
<audio class="file audio" :class="{ 'file-shadow': !isMobileDevice }" v-if="fileInfoDetail[0].type == 'audio'" :src="currentFile.file_url" controlsList="nodownload" controls></audio>
<img v-if="fileInfoDetail[0].type === 'image' && currentFile.thumbnail" class="file" :class="{ 'file-shadow': !isMobileDevice }" id="image" :src="currentFile.file_url" />
<div class="video-wrapper" v-if="fileInfoDetail[0].type === 'video' && currentFile.file_url">
<video :src="currentFile.file_url" class="video" :class="{ 'file-shadow': !isMobileDevice }" controlsList="nodownload" disablePictureInPicture playsinline controls />
<video :src="currentFile.file_url" class="video" :class="{ 'file-shadow': !isMobileDevice }" controlsList="nodownload" disablePictureInPicture playsinline controls autoplay />
</div>
</div>
</div>

926
resources/js/components/FilesView/MobileMenu.vue
View File

File diff suppressed because it is too large Load Diff

2
resources/js/components/FilesView/MobileSortingAndPreview.vue
View File

@@ -42,7 +42,7 @@ import { events } from '@/bus'
@media (prefers-color-scheme: dark) {
.options {
background: $dark_mode_background;
background: $dark_mode_foreground;
}
}

8
resources/js/components/FilesView/ProcessingPopup.vue
View File

@@ -1,13 +1,13 @@
<template>
<transition name="popup">
<div class="popup" v-if="isZippingFiles">
<div class="popup" v-if="processingPopup">
<div class="popup-wrapper">
<div class="popup-content">
<div class="spinner-wrapper">
<Spinner/>
</div>
<h1 class="title">{{ $t('popup_zipping.title') }}</h1>
<p class="message">{{ $t('popup_zipping.message') }}</p>
<h1 class="title">{{ processingPopup.title }}</h1>
<p class="message">{{ processingPopup.message }}</p>
</div>
</div>
</div>
@@ -25,7 +25,7 @@ export default {
},
computed: {
...mapGetters([
'isZippingFiles'
'processingPopup'
])
}
}

4
resources/js/components/Others/CookieDisclaimer.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="cookie-wrapper" v-if="isVisibleDisclaimer && config.isSaaS">
<span class="close-icon">
<x-icon @click="closeDisclaimer" size="12"></x-icon>
<span @click="closeDisclaimer" class="close-icon">
<x-icon size="12"></x-icon>
</span>
<i18n path="cookie_disclaimer.description" tag="p">
<router-link :to="{name: 'DynamicPage', params: {slug: 'cookie-policy'}}">{{ $t('cookie_disclaimer.button') }}</router-link>

704
resources/js/components/Others/SetFolderIcon.vue
View File

@@ -87,408 +87,412 @@
</template>
<script>
import {SmileIcon, FolderIcon, ChevronDownIcon, XIcon} from 'vue-feather-icons'
import TabWrapper from '@/components/Others/TabWrapper'
import TabOption from '@/components/Others/TabOption'
import Emoji from '@/components/Others/Emoji'
import lodash from 'lodash'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
import { SmileIcon, FolderIcon, ChevronDownIcon, XIcon } from 'vue-feather-icons'
import TabWrapper from '@/components/Others/TabWrapper'
import TabOption from '@/components/Others/TabOption'
import Emoji from '@/components/Others/Emoji'
import lodash from 'lodash'
import { mapGetters } from 'vuex'
import { events } from '@/bus'
export default {
name: "SetFolderIcon",
props: ['folderData', 'unique_id'],
components: {
ChevronDownIcon ,
TabWrapper,
TabOption,
FolderIcon,
SmileIcon,
XIcon,
Emoji
export default {
name: "SetFolderIcon",
props: ['folderData', 'unique_id'],
components: {
ChevronDownIcon ,
TabWrapper,
TabOption,
FolderIcon,
SmileIcon,
XIcon,
Emoji
},
computed: {
...mapGetters(['emojis', 'emojiGroups']),
allEmoji() {
return _.groupBy(this.emojis, 'group')
},
computed: {
...mapGetters(['emojis', 'emojiGroups']),
allEmoji() {
return _.groupBy(this.emojis,'group')
},
},
data () {
return {
selectedEmoji: undefined,
selectedColor: undefined,
searchInput: '',
filteredEmojis: [],
selectOpen: false,
groupInView: 'Smileys & Emotion',
colors: ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
'#80B300', '#809900', '#E6B3B3', '#6680B3']
}
},
methods: {
checkGroupInView: _.debounce(function() {
this.emojiGroups.forEach(group => {
let element = document.getElementById(`group-${group.name}`).getBoundingClientRect()
let groupBox = document.getElementById('group-box').getBoundingClientRect()
// Check if the group is in the viewport of group-box
if(element.top < groupBox.top && element.bottom > groupBox.top){
this.groupInView = group.name
}
})
}, 200),
scrollToGroup(name) {
let group = document.getElementById(`group-${name}`)
group.scrollIntoView({behavior: "smooth"})
this.groupInView = name
},
filterEmojis: _.debounce(function(emoji){
this.filteredEmojis = this.emojis.filter(emoji => emoji.name.includes(this.searchInput))
}, 800),
openMenu() {
this.selectOpen = ! this.selectOpen
this.searchInput = ''
this.groupInView = 'Smileys & Emotion'
},
setIcon(value) {
if(value.emoji){
this.selectedEmoji = value.emoji
this.selectedColor = undefined
}
if(value.color) {
this.selectedColor = value.color
this.selectedEmoji = undefined
}
events.$emit('setFolderIcon', {'value':value, 'unique_id':this.unique_id})
this.selectOpen = false
},
resetEmoji(){
this.selectedEmoji = undefined
events.$emit('setFolderIcon', undefined)
}
},
mounted () {
this.selectOpen = false
events.$on('unClick', () => {
this.selectOpen = false
})
},
data () {
return {
selectedEmoji: undefined,
selectedColor: undefined,
searchInput: '',
filteredEmojis: [],
selectOpen: false,
groupInView: 'Smileys & Emotion',
colors: [ '#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6',
'#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
'#80B300', '#809900', '#E6B3B3', '#6680B3' ]
}
},
methods: {
checkGroupInView: _.debounce(function() {
this.emojiGroups.forEach(group => {
let element = document.getElementById(`group-${group.name}`).getBoundingClientRect()
let groupBox = document.getElementById('group-box').getBoundingClientRect()
// Check if the group is in the viewport of group-box
if(element.top < groupBox.top && element.bottom > groupBox.top){
this.groupInView = group.name
}
})
}, 200),
scrollToGroup( name ) {
let group = document.getElementById(`group-${name}`)
group.scrollIntoView({ behavior: "smooth" })
this.groupInView = name
},
filterEmojis: _.debounce(function( emoji ){
this.filteredEmojis = this.emojis.filter(emoji => emoji.name.includes(this.searchInput))
}, 800),
openMenu() {
this.selectOpen = ! this.selectOpen
this.searchInput = ''
this.groupInView = 'Smileys & Emotion'
},
setIcon( value ) {
if(value.emoji){
this.selectedEmoji = value.emoji
this.selectedColor = undefined
}
if(value.color) {
this.selectedColor = value.color
this.selectedEmoji = undefined
}
events.$emit('setFolderIcon', { 'value':value, 'unique_id':this.unique_id })
this.selectOpen = false
},
resetEmoji(){
this.selectedEmoji = undefined
events.$emit('setFolderIcon', undefined)
}
},
mounted () {
this.selectOpen = false
events.$on('unClick', () => {
this.selectOpen = false
})
}
}
</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';
.color-pick-wrapper {
.color-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
.single-color {
width: 40px;
height: 40px;
list-style: none;
margin: 8px;
border-radius: 8px;
cursor: pointer;
.color-pick-wrapper {
.color-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20px;
.single-color {
width: 40px;
height: 40px;
list-style: none;
margin: 8px;
border-radius: 8px;
cursor: pointer;
&.active-color {
border: 2px solid $text;
}
&.active-color {
border: 2px solid $text;
}
&:hover {
border: 2px solid $text;
}
&:hover {
border: 2px solid $text;
}
}
}
}
.select-emoji-wrapper{
margin-bottom: 20px;
.select-emoji-wrapper{
margin-bottom: 20px;
}
.main-label {
@include font-size(14);
font-weight: 700;
margin-bottom: 8px;
display: block;
}
.emoji-wrapper {
height: 350px;
width: 100%;
position: absolute;
border: 1px solid transparent;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
border-radius: 8px;
background: white;
display: flex;
flex-direction: column;
padding: 10px;
top: 152px;
.loader {
width: 100%;
height: 100%;
position: relative;
}
.main-label {
@include font-size(14);
font-weight: 700;
margin-bottom: 8px;
display: block;
}
.groups-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 20px;
.emoji-wrapper {
height: 350px;
width: 100%;
position: absolute;
border: 1px solid transparent;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
border-radius: 8px;
background: white;
display: flex;
flex-direction: column;
padding: 10px;
top: 152px;
.active {
background: $light_background;
border-radius: 8px;
}
.loader {
width: 100%;
height: 100%;
position: relative;
}
.group-option {
list-style: none;
width: 45px;
height: 45px;
padding: 6px;
cursor: pointer;
.groups-list{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 20px;
.active {
&:hover {
background: $light_background;
border-radius: 8px;
}
.group-option {
list-style: none;
width: 45px;
height: 45px;
padding: 6px;
cursor: pointer;
&:hover {
background: $light_background;
border-radius: 8px;
}
}
}
.emoji-input {
width: 100%;
border-radius: 8px;
padding: 4px;
margin-bottom: 20px;
background: $light_background;
border: none;
padding: 13px 20px;
font-weight: 700;
&::placeholder {
font-weight: 700;
color: $light_text;
}
}
.group-wrapper {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
overflow-y: scroll;
padding: 0px;
.emoji-input {
width: 100%;
border-radius: 8px;
padding: 4px;
margin-bottom: 20px;
background: $light_background;
border: none;
padding: 13px 20px;
font-weight: 700;
.options-wrapper {
display: flex;
flex-wrap: wrap;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0px;
}
.options-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.group-name-label {
width: 100%;
@include font-size(14);
font-weight: 700;
margin-bottom: 10px;
}
.option {
list-style: none;
width: 45px;
height: 45px;
padding: 6px;
cursor: pointer;
&:hover {
background: $light_background;
border-radius: 8px;
}
}
.not-found {
align-self: center;
margin:auto;
font-weight: 700;
padding: 10px;
border-radius: 8px;
background:$light_background ;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
}
}
&::placeholder {
font-weight: 700;
color: $light_text;
}
}
.select-input-wrapper{
height: 50px;
padding: 13px 20px;
border: 1px solid transparent;
border-radius: 8px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
cursor: pointer;
.group-wrapper {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
overflow: hidden;
overflow-y: scroll;
padding: 0px;
.select-input-icon-wrapper {
width: 22px;
height: 22px;
border-radius: 6px;
.options-wrapper {
display: flex;
justify-content: center;
align-items: center;
&:hover {
background: $light_background !important;
flex-wrap: wrap;
margin-bottom: 10px;
.select-input-icon {
line {
stroke: $theme;
}
&:last-child {
margin-bottom: 0px;
}
}
.options-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.group-name-label {
width: 100%;
@include font-size(14);
font-weight: 700;
margin-bottom: 10px;
}
.option {
list-style: none;
width: 45px;
height: 45px;
padding: 6px;
cursor: pointer;
&:hover {
background: $light_background;
border-radius: 8px;
}
}
.not-found {
align-self: center;
margin:auto;
font-weight: 700;
padding: 10px;
border-radius: 8px;
background:$light_background ;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
}
}
}
}
.select-input-wrapper {
height: 50px;
padding: 13px 20px;
border: 1px solid transparent;
border-radius: 8px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
.select-input-icon-wrapper {
width: 22px;
height: 22px;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background: $light_background !important;
.select-input-icon {
line {
stroke: $text;
stroke: $theme;
}
}
}
.select-input-icon {
line {
stroke: $text;
}
}
}
.select-input {
@include font-size(16);
font-weight: 700;
display: flex;
flex-direction: row;
align-items: center;
.emoji-preview {
margin-right: 10px;
}
}
.not-selected {
span {
color: rgba($text, 0.5);
@include font-size(15);
font-weight: 700
}
}
}
.wrapper {
margin-bottom: 10px;
}
.set-folder-icon {
position: relative;
}
.slide-in-enter-active {
transition: all 5s ease;
}
.slide-in-enter
{
opacity: 0;
transform: translateY(-50px);
}
@media (prefers-color-scheme: dark) {
.color-pick-wrapper{
.color-wrapper{
.single-color {
&.active-color {
border: 2px solid ;
}
&:hover {
border: 2px solid $dark_mode_text_primary;
}
}
}
}
.emoji-wrapper {
background: $dark_mode_background;
.emoji-input {
background: $dark_mode_foreground ;
}
.groups-list{
.active{
background: $dark_mode_foreground !important;
}
.group-option {
&:hover {
background: $dark_mode_foreground !important;
}
}
}
.select-input {
@include font-size(16);
font-weight: 700;
display: flex;
flex-direction: row;
align-items: center;
.emoji-preview {
margin-right: 10px;
.options-wrapper {
.option {
&:hover {
background: $dark_mode_foreground !important;
}
}
.not-found {
background: $dark_mode_foreground !important;
}
}
}
.select-input-wrapper {
background: $dark_mode_foreground;
.not-selected {
span {
color: rgba($text, 0.5);
@include font-size(15);
font-weight: 700
color:$dark_mode_text_secondary;
}
}
}
.wrapper {
margin-bottom: 10px;
}
.set-folder-icon {
position: relative;
}
.slide-in-enter-active {
transition: all 5s ease;
}
.slide-in-enter
{
opacity: 0;
transform: translateY(-50px);
}
@media (prefers-color-scheme: dark) {
.color-pick-wrapper{
.color-wrapper{
.single-color {
&.active-color {
border: 2px solid ;
}
&:hover {
border: 2px solid $dark_mode_text_primary;
}
}
}
}
.emoji-wrapper {
background: $dark_mode_background;
.emoji-input {
background: $dark_mode_foreground ;
}
.groups-list{
.active{
background: $dark_mode_foreground !important;
}
.group-option {
&:hover {
background: $dark_mode_foreground !important;
}
}
}
.options-wrapper {
.option {
&:hover {
background: $dark_mode_foreground !important;
}
}
.not-found {
background: $dark_mode_foreground !important;
}
}
}
.select-input-wrapper {
background: $dark_mode_foreground;
.not-selected {
span {
color:$dark_mode_text_secondary;
}
}
.select-input-icon-wrapper {
&:hover {
background: rgba($theme, 0.1) !important;
.select-input-icon {
line {
stroke: $theme !important;
}
}
}
.select-input-icon-wrapper {
&:hover {
background: rgba($theme, 0.1) !important;
.select-input-icon {
line {
stroke:$dark_mode_text_primary !important;
stroke: $theme !important;
}
}
}
}
.select-input-icon {
line {
stroke:$dark_mode_text_primary !important;
}
}
}
}
}
</style>

8
resources/js/components/Others/TabWrapper.vue
View File

@@ -61,10 +61,11 @@
margin-bottom: 20px;
cursor: pointer;
align-items: center;
background: $light_background;
background: white;
color: $text;
border-radius: 8px;
overflow: hidden;
border: 1px solid #E8E9EB;
.tab-title {
@include font-size(14);
@@ -78,10 +79,10 @@
padding: 8px;
&.active {
background: $text;
background: $light_background;
.tab-title {
color: $light_background;
color: $text;
}
}
}
@@ -101,6 +102,7 @@
@media (prefers-color-scheme: dark) {
.tab-wrapper {
background: $dark_mode_foreground;
border-color: transparent;
.tab.active {
background: rgba($theme, 0.1);

4
resources/js/components/Others/Vignette.vue
View File

@@ -12,10 +12,10 @@
name: 'Vignette',
computed: {
...mapGetters([
'isZippingFiles'
'processingPopup'
]),
isVisible() {
return this.isZippingFiles || this.isVisibleVignette
return this.processingPopup || this.isVisibleVignette
},
},
data() {

2
resources/js/i18n/lang/cn.json
View File

@@ -284,7 +284,7 @@
"upload": "上传",
"select": "Select",
"no_options": "No Options Available",
"zip_folder": "Zip Folder"
"zip_folder": "Zip and Download"
},
"mobile_selecting": {
"select_all": "Select All",

8
resources/js/i18n/lang/en.json
View File

@@ -286,7 +286,7 @@
"upload": "Upload",
"select": "Select",
"no_options": "No Options Available",
"zip_folder": "Zip Folder"
"zip_folder": "Zip and Download"
},
"mobile_selecting": {
"select_all": "Select All",
@@ -308,9 +308,9 @@
"paginate_info": "Showing 1 - {visible} from {total} records"
},
"empty_page": {
"call_to_action": "Upload File",
"description": "Upload some files here easily via upload button",
"title": "There is Nothing"
"call_to_action": "Upload Files",
"description": "Upload some files here easily via upload button.",
"title": "Upload Your First File"
},
"errors": {
"capacity_digit": "The storage capacity must be lower than 10 digit number."

3
resources/js/main.js vendored
View File

@@ -90,8 +90,9 @@ Vue.use(Helpers);
Vue.config.productionTip = false;
// Handle position of Drag & Drop Ghost
document.addEventListener('drag', (event) => {
document.addEventListener('drag', event => {
let multiSelect = document.getElementById('multi-select-ui')
multiSelect.style.top = event.clientY + 20 + 'px'
multiSelect.style.left = event.clientX + 'px'

2
resources/js/store/modules/app.js vendored
View File

@@ -1,7 +1,7 @@
import i18n from '@/i18n/index'
const defaultState = {
fileInfoPanelVisible: localStorage.getItem('file_info_visibility') == 'true' || false,
fileInfoPanelVisible: localStorage.getItem('file_info_visibility') == 'true' || true,
FilePreviewType: localStorage.getItem('preview_type') || 'list',
config: undefined,
index: undefined,

15
resources/js/store/modules/fileFunctions.js vendored
View File

@@ -6,13 +6,16 @@ import axios from 'axios'
import Vue from 'vue'
const defaultState = {
isZippingFiles: false,
processingPopup: undefined,
}
const actions = {
downloadFolder: ({commit, getters}, folder) => {
commit('ZIPPING_FILE_STATUS', true)
commit('PROCESSING_POPUP', {
title: i18n.t('popup_zipping.title'),
message: i18n.t('popup_zipping.message'),
})
// Get route
let route = getters.sharedDetail && !getters.sharedDetail.protected
@@ -27,7 +30,7 @@ const actions = {
Vue.prototype.$isSomethingWrong()
})
.finally(() => {
commit('ZIPPING_FILE_STATUS', false)
commit('PROCESSING_POPUP', undefined)
})
},
@@ -379,13 +382,13 @@ const actions = {
}
const mutations = {
ZIPPING_FILE_STATUS(state, status) {
state.isZippingFiles = status
PROCESSING_POPUP(state, status) {
state.processingPopup = status
}
}
const getters = {
isZippingFiles: state => state.isZippingFiles
processingPopup: state => state.processingPopup
}
export default {

11
resources/js/store/modules/userAuth.js vendored
View File

@@ -39,11 +39,18 @@ const actions = {
})
},
logOut: ({getters, commit}) => {
let popup = setTimeout(() => {
commit('PROCESSING_POPUP', {
title: 'Logging Out',
message: 'Wait a second...',
})
}, 300)
axios
.get(getters.api + '/logout')
.then(() => {
// Commit Remove Access Token from vuex storage
clearTimeout(popup)
commit('DESTROY_DATA')
router.push({name: 'SignIn'})

1
resources/js/views/Auth/SignIn.vue
View File

@@ -208,6 +208,7 @@
},
created() {
this.$scrollTop()
this.$store.commit('PROCESSING_POPUP', undefined)
}
}
</script>

12
resources/js/views/FilePages/Files.vue
View File

@@ -188,18 +188,6 @@ export default {
events.$on('drop', () => {
this.dragInProgress = false
})
},
beforeRouteLeave(to, from, next) {
// Inquire user about his willing to step back to sign in page
if (to.name === 'SignIn') {
if (window.confirm(this.$t('alerts.leave_to_sign_in'))) {
next()
} else {
next(false)
}
} else {
next()
}
}
}
</script>