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

added prettier

Browse Source
This commit is contained in:
Čarodej
2022-02-01 12:21:38 +01:00
parent 5ae875233b
commit b38b532cbe
284 changed files with 25410 additions and 25338 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.prettierrc.yaml
+5
View File
@@ -0,0 +1,5 @@
trailingComma: "es5"
tabWidth: 4
semi: false
singleQuote: true
printWidth: 120
package-lock.json
Generated
+221 -1
View File
@@ -1968,6 +1968,15 @@
"integrity": "sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==", "integrity": "sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==",
"dev": true "dev": true
}, },
"argparse": {
"version": "1.0.10",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
"dev": true,
"requires": {
"sprintf-js": "~1.0.2"
}
},
"array-find-index": { "array-find-index": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz", "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
@@ -2449,6 +2458,12 @@
"integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=", "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk=",
"dev": true "dev": true
}, },
"builtin-modules": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.2.0.tgz",
"integrity": "sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA==",
"dev": true
},
"builtin-status-codes": { "builtin-status-codes": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz", "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
@@ -2471,6 +2486,32 @@
"get-intrinsic": "^1.0.2" "get-intrinsic": "^1.0.2"
} }
}, },
"caller-callsite": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
"integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
"dev": true,
"requires": {
"callsites": "^2.0.0"
},
"dependencies": {
"callsites": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
"integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
"dev": true
}
}
},
"caller-path": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
"integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
"dev": true,
"requires": {
"caller-callsite": "^2.0.0"
}
},
"callsites": { "callsites": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -3431,6 +3472,12 @@
"integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=", "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
"dev": true "dev": true
}, },
"detect-newline": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-2.1.0.tgz",
"integrity": "sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=",
"dev": true
},
"detect-node": { "detect-node": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz", "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
@@ -3710,6 +3757,12 @@
"estraverse": "^4.1.1" "estraverse": "^4.1.1"
} }
}, },
"esprima": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
"dev": true
},
"esrecurse": { "esrecurse": {
"version": "4.3.0", "version": "4.3.0",
"resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz", "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
@@ -4049,6 +4102,18 @@
"pkg-dir": "^4.1.0" "pkg-dir": "^4.1.0"
} }
}, },
"find-line-column": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/find-line-column/-/find-line-column-0.5.2.tgz",
"integrity": "sha1-2wAjj/hoVRoYLnShA0FtKVqYyMo=",
"dev": true
},
"find-root": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
"integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
"dev": true
},
"find-up": { "find-up": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz", "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
@@ -4713,6 +4778,107 @@
"resolve-cwd": "^3.0.0" "resolve-cwd": "^3.0.0"
} }
}, },
"import-sort": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/import-sort/-/import-sort-6.0.0.tgz",
"integrity": "sha512-XUwSQMGAGmcW/wfshFE0gXgb1NPF6ibbQD6wDr3KRDykZf/lZj0jf58Bwa02xNb8EE59oz7etFe9OHnJocUW5Q==",
"dev": true,
"requires": {
"detect-newline": "^2.1.0",
"import-sort-parser": "^6.0.0",
"import-sort-style": "^6.0.0",
"is-builtin-module": "^3.0.0",
"resolve": "^1.8.1"
}
},
"import-sort-config": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/import-sort-config/-/import-sort-config-6.0.0.tgz",
"integrity": "sha512-FJpF2F3+30JXqH1rJKeajxoSCHCueai3/0ntDN4y3GJL5pjnLDt/VjCy5FzjH7u0NHnllL/zVEf1wfmsVxJlPQ==",
"dev": true,
"requires": {
"cosmiconfig": "^5.0.5",
"find-root": "^1.0.0",
"minimatch": "^3.0.4",
"resolve-from": "^4.0.0"
},
"dependencies": {
"cosmiconfig": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
"integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
"dev": true,
"requires": {
"import-fresh": "^2.0.0",
"is-directory": "^0.3.1",
"js-yaml": "^3.13.1",
"parse-json": "^4.0.0"
}
},
"import-fresh": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
"integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
"dev": true,
"requires": {
"caller-path": "^2.0.0",
"resolve-from": "^3.0.0"
},
"dependencies": {
"resolve-from": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
"integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
"dev": true
}
}
},
"parse-json": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
"integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
"dev": true,
"requires": {
"error-ex": "^1.3.1",
"json-parse-better-errors": "^1.0.1"
}
}
}
},
"import-sort-parser": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/import-sort-parser/-/import-sort-parser-6.0.0.tgz",
"integrity": "sha512-H5L+d6HnqHvThB0GmAA3/43Sv74oCwL0iMk3/ixOv0LRJ69rCyHXeG/+UadMHrD2FefEmgPIWboEPAG7gsQrkA==",
"dev": true
},
"import-sort-parser-babylon": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/import-sort-parser-babylon/-/import-sort-parser-babylon-6.0.0.tgz",
"integrity": "sha512-NyShTiNhTh4Vy7kJUVe6CuvOaQAzzfSIT72wtp3CzGjz8bHjNj59DCAjncuviicmDOgVAgmLuSh1WMcLYAMWGg==",
"dev": true,
"requires": {
"@babel/core": "^7.2.2",
"@babel/parser": "^7.0.0-beta.54",
"@babel/traverse": "^7.0.0-beta.54",
"@babel/types": "^7.0.0-beta.54",
"find-line-column": "^0.5.2"
}
},
"import-sort-parser-typescript": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/import-sort-parser-typescript/-/import-sort-parser-typescript-6.0.0.tgz",
"integrity": "sha512-pgxnr3I156DonupQriNsgDb2zJN9TxrqCCIN1rwT/6SDO1rkJb+a0fjqshCjlgacTSA92oPAp1eAwmQUeZi3dw==",
"dev": true,
"requires": {
"typescript": "^3.2.4"
}
},
"import-sort-style": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/import-sort-style/-/import-sort-style-6.0.0.tgz",
"integrity": "sha512-z0H5PKs7YoDeKxNYXv2AA1mjjZFY07fjeNCXUdTM3ymJtWeeEoTm8CQkFm2l+KPZoMczIvdwzJpWkkOamBnsPw==",
"dev": true
},
"in-publish": { "in-publish": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.1.tgz", "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.1.tgz",
@@ -4788,6 +4954,15 @@
"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==", "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
"dev": true "dev": true
}, },
"is-builtin-module": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.1.0.tgz",
"integrity": "sha512-OV7JjAgOTfAFJmHZLvpSTb4qi0nIILDV1gWPYDnDJUTNFM5aGlRAhk4QcT8i7TuAleeEV5Fdkqn3t4mS+Q11fg==",
"dev": true,
"requires": {
"builtin-modules": "^3.0.0"
}
},
"is-core-module": { "is-core-module": {
"version": "2.8.1", "version": "2.8.1",
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.1.tgz",
@@ -4805,6 +4980,12 @@
"has-tostringtag": "^1.0.0" "has-tostringtag": "^1.0.0"
} }
}, },
"is-directory": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
"integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
"dev": true
},
"is-docker": { "is-docker": {
"version": "2.2.1", "version": "2.2.1",
"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
@@ -4967,6 +5148,16 @@
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
"dev": true "dev": true
}, },
"js-yaml": {
"version": "3.14.1",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
"integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
"dev": true,
"requires": {
"argparse": "^1.0.7",
"esprima": "^4.0.0"
}
},
"jsbn": { "jsbn": {
"version": "0.1.1", "version": "0.1.1",
"resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz", "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
@@ -6812,8 +7003,25 @@
"version": "2.5.1", "version": "2.5.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz", "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
"integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==", "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==",
"dev": true
},
"prettier-plugin-import-sort": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/prettier-plugin-import-sort/-/prettier-plugin-import-sort-0.0.7.tgz",
"integrity": "sha512-O0KlUSq+lwvh+UiN3wZDT6wWkf7TNxTVv2/XXE5KqpRNbFJq3nRg2ftzBYFFO8QGpdWIrOB0uCTCtFjIxmVKQw==",
"dev": true, "dev": true,
"optional": true "requires": {
"import-sort": "^6.0.0",
"import-sort-config": "^6.0.0",
"import-sort-parser-babylon": "^6.0.0",
"import-sort-parser-typescript": "^6.0.0"
}
},
"prettier-plugin-tailwindcss": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.4.tgz",
"integrity": "sha512-kt3YFWqxcG9+bilBI0hPF7RjQZNtgBRvjJZGw6B2MNAjPqlfcYIiZnNaIEnq4XimKLTzZYxz6jQnUXmSQ/5njg==",
"dev": true
}, },
"pretty-time": { "pretty-time": {
"version": "1.1.0", "version": "1.1.0",
@@ -7744,6 +7952,12 @@
} }
} }
}, },
"sprintf-js": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
"integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
"dev": true
},
"sshpk": { "sshpk": {
"version": "1.17.0", "version": "1.17.0",
"resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz", "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.17.0.tgz",
@@ -8219,6 +8433,12 @@
"mime-types": "~2.1.24" "mime-types": "~2.1.24"
} }
}, },
"typescript": {
"version": "3.9.10",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz",
"integrity": "sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==",
"dev": true
},
"unicode-canonical-property-names-ecmascript": { "unicode-canonical-property-names-ecmascript": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
package.json
+3
View File
@@ -15,6 +15,9 @@
"cross-env": "^5.1", "cross-env": "^5.1",
"laravel-mix": "^6.0.41", "laravel-mix": "^6.0.41",
"postcss": "^8.4.5", "postcss": "^8.4.5",
"prettier": "^2.5.1",
"prettier-plugin-import-sort": "0.0.7",
"prettier-plugin-tailwindcss": "^0.1.4",
"resolve-url-loader": "^2.3.1", "resolve-url-loader": "^2.3.1",
"sass": "^1.49.0", "sass": "^1.49.0",
"sass-loader": "^8.0.2", "sass-loader": "^8.0.2",
resources/js/App.vue
+40 -50
View File
@@ -1,6 +1,5 @@
<template> <template>
<div> <div>
<!--UI components--> <!--UI components-->
<Alert /> <Alert />
<ToasterWrapper /> <ToasterWrapper />
@@ -21,12 +20,12 @@
</template> </template>
<script> <script>
import ToasterWrapper from "./components/Others/Notifications/ToasterWrapper"; import ToasterWrapper from './components/Others/Notifications/ToasterWrapper'
import CookieDisclaimer from "./components/Others/CookieDisclaimer"; import CookieDisclaimer from './components/Others/CookieDisclaimer'
import Spinner from "./components/FilesView/Spinner"; import Spinner from './components/FilesView/Spinner'
import Vignette from "./components/Others/Vignette"; import Vignette from './components/Others/Vignette'
import Alert from "./components/FilesView/Alert"; import Alert from './components/FilesView/Alert'
import RestrictionWarningBar from "./RestrictionWarningBar" import RestrictionWarningBar from './RestrictionWarningBar'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { events } from './bus' import { events } from './bus'
@@ -38,79 +37,64 @@ export default {
ToasterWrapper, ToasterWrapper,
Vignette, Vignette,
Spinner, Spinner,
Alert Alert,
}, },
data() { data() {
return { return {
isLoaded: false isLoaded: false,
} }
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['config', 'user']),
'config',
'user',
]),
}, },
watch: { watch: {
'config.defaultThemeMode': function () { 'config.defaultThemeMode': function () {
this.handleDarkMode() this.handleDarkMode()
} },
}, },
methods: { methods: {
spotlightListener(e) { spotlightListener(e) {
if (e.key === 'k' && e.metaKey) { if (e.key === 'k' && e.metaKey) {
events.$emit('spotlight:show'); events.$emit('spotlight:show')
} }
}, },
handleDarkMode() { handleDarkMode() {
const app = document.getElementsByTagName("html")[0]; const app = document.getElementsByTagName('html')[0]
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)'); const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)')
if (this.config.defaultThemeMode === 'dark') { if (this.config.defaultThemeMode === 'dark') {
app.classList.add('dark')
app.classList.add("dark")
this.$store.commit('UPDATE_DARK_MODE_STATUS', true) this.$store.commit('UPDATE_DARK_MODE_STATUS', true)
} else if (this.config.defaultThemeMode === 'light') { } else if (this.config.defaultThemeMode === 'light') {
app.classList.remove('dark')
app.classList.remove("dark")
this.$store.commit('UPDATE_DARK_MODE_STATUS', false) this.$store.commit('UPDATE_DARK_MODE_STATUS', false)
} else if (this.config.defaultThemeMode === 'system' && prefersDarkScheme.matches) { } else if (this.config.defaultThemeMode === 'system' && prefersDarkScheme.matches) {
app.classList.add('dark')
app.classList.add("dark")
this.$store.commit('UPDATE_DARK_MODE_STATUS', true) this.$store.commit('UPDATE_DARK_MODE_STATUS', true)
} else if (this.config.defaultThemeMode === 'system' && !prefersDarkScheme.matches) { } else if (this.config.defaultThemeMode === 'system' && !prefersDarkScheme.matches) {
app.classList.remove('dark')
app.classList.remove("dark")
this.$store.commit('UPDATE_DARK_MODE_STATUS', false) this.$store.commit('UPDATE_DARK_MODE_STATUS', false)
} }
} },
}, },
beforeMount() { beforeMount() {
window.matchMedia('(prefers-color-scheme: dark)') window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
.addEventListener('change', () => {
this.handleDarkMode() this.handleDarkMode()
}); })
// Get installation state // Get installation state
let installation = this.$root.$data.config.installation let installation = this.$root.$data.config.installation
if (['setup-disclaimer', 'setup-database'].includes(installation)) if (['setup-disclaimer', 'setup-database'].includes(installation)) this.isLoaded = true
this.isLoaded = true
// Redirect to database verify code // Redirect to database verify code
if (installation === 'setup-database') if (installation === 'setup-database') this.$router.push({ name: 'StatusCheck' })
this.$router.push({name: 'StatusCheck'})
// Redirect to starting installation process // Redirect to starting installation process
if (installation === 'setup-disclaimer') if (installation === 'setup-disclaimer') this.$router.push({ name: 'InstallationDisclaimer' })
this.$router.push({name: 'InstallationDisclaimer'})
if (installation === 'setup-done') if (installation === 'setup-done')
this.$store.dispatch('getLanguageTranslations', this.$root.$data.config.locale) this.$store.dispatch('getLanguageTranslations', this.$root.$data.config.locale).then(() => {
.then(() => {
this.isLoaded = true this.isLoaded = true
// Store config to vuex // Store config to vuex
@@ -119,8 +103,8 @@ export default {
rootDirectory: { rootDirectory: {
name: this.$t('locations.home'), name: this.$t('locations.home'),
location: 'base', location: 'base',
id: undefined id: undefined,
} },
}) })
}) })
}, },
@@ -129,11 +113,11 @@ export default {
document.body.classList.add('windows') document.body.classList.add('windows')
} }
window.addEventListener("keydown", this.spotlightListener); window.addEventListener('keydown', this.spotlightListener)
}, },
destroyed() { destroyed() {
window.removeEventListener("keydown", this.spotlightListener); window.removeEventListener('keydown', this.spotlightListener)
} },
} }
</script> </script>
@@ -148,7 +132,7 @@ input:-webkit-autofill {
[v-cloak], [v-cloak],
[v-cloak] > * { [v-cloak] > * {
display: none display: none;
} }
* { * {
@@ -166,7 +150,13 @@ input:-webkit-autofill {
} }
.vue-feather { .vue-feather {
path, circle, line, rect, polyline, ellipse, polygon { path,
circle,
line,
rect,
polyline,
ellipse,
polygon {
color: inherit; color: inherit;
} }
} }
@@ -178,17 +168,17 @@ input:-webkit-autofill {
// Dark mode support // Dark mode support
.dark { .dark {
* { * {
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
} }
body, html { body,
html {
background: $dark_mode_background; background: $dark_mode_background;
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
img { img {
opacity: .95; opacity: 0.95;
} }
} }
} }
resources/js/RestrictionWarningBar.vue
+2 -2
View File
@@ -1,6 +1,6 @@
<template> <template>
<div v-if="$store.getters.isLimitedUser" class="bg-red-500 text-center py-1"> <div v-if="$store.getters.isLimitedUser" class="bg-red-500 py-1 text-center">
<router-link :to="{name: 'Billing'}" class="text-white font-bold text-xs"> <router-link :to="{ name: 'Billing' }" class="text-xs font-bold text-white">
{{ $t('Your functionality is restricted. Please review your billing settings.') }} {{ $t('Your functionality is restricted. Please review your billing settings.') }}
</router-link> </router-link>
</div> </div>
resources/js/bootstrap.js
Vendored
+3 -3
View File
@@ -1,4 +1,4 @@
window._ = require('lodash'); window._ = require('lodash')
/** /**
* We'll load the axios HTTP library which allows us to easily issue requests * We'll load the axios HTTP library which allows us to easily issue requests
@@ -6,9 +6,9 @@ window._ = require('lodash');
* CSRF token as a header based on the value of the "XSRF" token cookie. * CSRF token as a header based on the value of the "XSRF" token cookie.
*/ */
window.axios = require('axios'); window.axios = require('axios')
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
/** /**
* Echo exposes an expressive API for subscribing to channels and listening * Echo exposes an expressive API for subscribing to channels and listening
resources/js/components/Admin/AppInputButton.vue
+4 -12
View File
@@ -1,14 +1,11 @@
<template> <template>
<div :class="{'mb-7': !isLast}" class="sm:flex justify-between sm:space-x-8 sm:space-x-2 sm:space-y-0 space-y-4 w-full"> <div :class="{ 'mb-7': !isLast }" class="w-full justify-between space-y-4 sm:flex sm:space-x-8 sm:space-x-2 sm:space-y-0">
<!--Label for input--> <!--Label for input-->
<div class="leading-5"> <div class="leading-5">
<label class="text-sm font-bold dark:text-gray-200 text-gray-700 mb-1.5 block"> <label class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"> {{ title }}: </label>
{{ title }}:
</label>
<!--Input Description--> <!--Input Description-->
<span v-if="description" class="text-xs text-gray-500 leading-4 block" v-html="description"></span> <span v-if="description" class="block text-xs leading-4 text-gray-500" v-html="description"></span>
<!--Input Description--> <!--Input Description-->
<span v-if="error" class="error-message"> <span v-if="error" class="error-message">
@@ -26,11 +23,6 @@
<script> <script>
export default { export default {
name: 'AppInputButton', name: 'AppInputButton',
props: [ props: ['description', 'isLast', 'title', 'error'],
'description',
'isLast',
'title',
'error',
]
} }
</script> </script>
resources/js/components/Admin/AppInputSwitch.vue
+4 -12
View File
@@ -1,14 +1,11 @@
<template> <template>
<div :class="{'mb-7': !isLast}" class="flex items-center justify-between sm:space-x-8 space-x-2 w-full"> <div :class="{ 'mb-7': !isLast }" class="flex w-full items-center justify-between space-x-2 sm:space-x-8">
<!--Label for input--> <!--Label for input-->
<div class="leading-5"> <div class="leading-5">
<label class="text-sm font-bold dark:text-gray-200 text-gray-700 mb-1.5 block"> <label class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"> {{ title }}: </label>
{{ title }}:
</label>
<!--Input Description--> <!--Input Description-->
<span v-if="description" class="text-xs text-gray-500 leading-4 block" v-html="description"></span> <span v-if="description" class="block text-xs leading-4 text-gray-500" v-html="description"></span>
<!--Input Description--> <!--Input Description-->
<span v-if="error" class="error-message"> <span v-if="error" class="error-message">
@@ -26,11 +23,6 @@
<script> <script>
export default { export default {
name: 'AppInputSwitch', name: 'AppInputSwitch',
props: [ props: ['description', 'isLast', 'title', 'error'],
'description',
'isLast',
'title',
'error',
]
} }
</script> </script>
resources/js/components/Admin/AppInputText.vue
+4 -12
View File
@@ -1,32 +1,24 @@
<template> <template>
<div :class="{ 'mb-7': !isLast }"> <div :class="{ 'mb-7': !isLast }">
<!--Label for input--> <!--Label for input-->
<label v-if="title" class="text-sm font-bold dark:text-gray-200 text-gray-700 mb-1.5 block"> <label v-if="title" class="mb-1.5 block text-sm font-bold text-gray-700 dark:text-gray-200"> {{ title }}: </label>
{{ title }}:
</label>
<!--Form element--> <!--Form element-->
<slot></slot> <slot></slot>
<!--Input Description--> <!--Input Description-->
<span v-if="error" class="text-red-800 pt-2 text-xs"> <span v-if="error" class="pt-2 text-xs text-red-800">
{{ error }} {{ error }}
</span> </span>
<!--Input Description--> <!--Input Description-->
<small v-if="description" class="text-xs text-gray-500 pt-2 leading-4 block" v-html="description"></small> <small v-if="description" class="block pt-2 text-xs leading-4 text-gray-500" v-html="description"></small>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'AppInputText', name: 'AppInputText',
props: [ props: ['description', 'isLast', 'title', 'error'],
'description',
'isLast',
'title',
'error',
]
} }
</script> </script>
resources/js/components/Admin/CardNavigation.vue
+17 -12
View File
@@ -1,10 +1,17 @@
<template> <template>
<div id="card-navigation" style="height: 62px" class="mb-7"> <div id="card-navigation" style="height: 62px" class="mb-7">
<div :class="{'fixed top-0 left-0 right-0 px-6 rounded-none backdrop-filter backdrop-blur-lg dark:bg-dark-foreground bg-white bg-opacity-50 z-10': fixedNav}"> <div
<div class="whitespace-nowrap overflow-x-auto"> :class="{
'fixed top-0 left-0 right-0 z-10 rounded-none bg-white bg-opacity-50 px-6 backdrop-blur-lg backdrop-filter dark:bg-dark-foreground': fixedNav,
}"
>
<div class="overflow-x-auto whitespace-nowrap">
<router-link <router-link
class="inline-block text-sm font-bold px-4 py-5 border-b-2 border-transparent border-bottom-theme" class="border-bottom-theme inline-block border-b-2 border-transparent px-4 py-5 text-sm font-bold"
:class="{'text-theme': routeName === page.route, 'dark:text-gray-100 text-gray-600': routeName !== page.route}" :class="{
'text-theme': routeName === page.route,
'text-gray-600 dark:text-gray-100': routeName !== page.route,
}"
v-for="(page, i) in pages" v-for="(page, i) in pages"
:to="{ name: page.route }" :to="{ name: page.route }"
:key="i" :key="i"
@@ -20,13 +27,11 @@
<script> <script>
export default { export default {
name: 'CardNavigation', name: 'CardNavigation',
props: [ props: ['pages'],
'pages'
],
computed: { computed: {
routeName() { routeName() {
return this.$route.name return this.$route.name
} },
}, },
data() { data() {
return { return {
@@ -35,11 +40,11 @@ export default {
}, },
created() { created() {
// Handle fixed mobile navigation // Handle fixed mobile navigation
window.addEventListener("scroll", () => { window.addEventListener('scroll', () => {
let card = document.getElementById('card-navigation') let card = document.getElementById('card-navigation')
this.fixedNav = card.getBoundingClientRect().top < 0; this.fixedNav = card.getBoundingClientRect().top < 0
}); })
} },
} }
</script> </script>
resources/js/components/Admin/DotLabel.vue
+2 -6
View File
@@ -10,15 +10,11 @@
<script> <script>
export default { export default {
name: 'DotLabel', name: 'DotLabel',
props: [ props: ['color', 'title'],
'color',
'title',
],
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.label { .label {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -32,7 +28,7 @@
flex: none; flex: none;
&.success { &.success {
background: #0ABB87; background: #0abb87;
} }
&.danger { &.danger {
resources/js/components/Admin/ProgressLine.vue
+34 -24
View File
@@ -1,59 +1,69 @@
<template> <template>
<div> <div>
<div class="flex items-center mb-4 rounded dark:bg-2x-dark-foreground bg-light-300 h-2.5"> <div class="mb-4 flex h-2.5 items-center rounded bg-light-300 dark:bg-2x-dark-foreground">
<div v-for="(chart, i) in data" :key="i" :style="{width: (chart.progress > 1 ? chart.progress : 0) + '%'}" class="chart-wrapper"> <div
v-for="(chart, i) in data"
:key="i"
:style="{
width: (chart.progress > 1 ? chart.progress : 0) + '%',
}"
class="chart-wrapper"
>
<!--<DotLabel class="label" :class="{'offset-top': chart.progress < 5}" :color="chart.color" :title="chart.value" />--> <!--<DotLabel class="label" :class="{'offset-top': chart.progress < 5}" :color="chart.color" :title="chart.value" />-->
<!--Only singe line--> <!--Only singe line-->
<span <span
v-if="data.length === 1" v-if="data.length === 1"
:class="[{ :class="[
'border-r-2 dark:border-gray-800 border-white rounded-tl-lg rounded-bl-lg': chart.progress < 100, {
'border-none rounded-lg': chart.progress >= 100 'rounded-tl-lg rounded-bl-lg border-r-2 border-white dark:border-gray-800': chart.progress < 100,
}, chart.color]" 'rounded-lg border-none': chart.progress >= 100,
class="chart-progress w-full h-2.5 block" },
chart.color,
]"
class="chart-progress block h-2.5 w-full"
> >
</span> </span>
<!--Multiple line--> <!--Multiple line-->
<span <span
v-if="data.length > 1 && chart.progress > 0" v-if="data.length > 1 && chart.progress > 0"
:class="[{ :class="[
'rounded-tl-lg rounded-bl-lg border-r-2 dark:border-gray-800 border-white': i === 0, {
'border-r-2 dark:border-gray-800 border-white': i < (data.length - 1), 'rounded-tl-lg rounded-bl-lg border-r-2 border-white dark:border-gray-800': i === 0,
'rounded-tr-lg rounded-br-lg': i === (data.length - 1), 'border-r-2 border-white dark:border-gray-800': i < data.length - 1,
}, chart.color]" 'rounded-tr-lg rounded-br-lg': i === data.length - 1,
class="chart-progress w-full h-2.5 block" },
chart.color,
]"
class="chart-progress block h-2.5 w-full"
></span> ></span>
</div> </div>
</div> </div>
<footer class="flex items-center w-full overflow-x-auto"> <footer class="flex w-full items-center overflow-x-auto">
<DotLabel v-for="(chart, i) in data" :key="i" :color="chart.color" :title="chart.title" class="mr-5" /> <DotLabel v-for="(chart, i) in data" :key="i" :color="chart.color" :title="chart.title" class="mr-5" />
</footer> </footer>
</div> </div>
</template> </template>
<script> <script>
import DotLabel from "./DotLabel"; import DotLabel from './DotLabel'
export default { export default {
name: 'ProgressLine', name: 'ProgressLine',
props: [ props: ['data'],
'data',
],
components: { components: {
DotLabel, DotLabel,
} },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.chart-progress { .chart-progress {
&.success { &.success {
background: #0ABB87; background: #0abb87;
box-shadow: 0 3px 10px rgba(#0ABB87, 0.5); box-shadow: 0 3px 10px rgba(#0abb87, 0.5);
} }
&.danger { &.danger {
@@ -84,8 +94,8 @@
.dark .chart-progress { .dark .chart-progress {
&.secondary { &.secondary {
background: #282A2F !important; background: #282a2f !important;
box-shadow: 0 3px 10px rgba(#282A2F, 0.5) !important; box-shadow: 0 3px 10px rgba(#282a2f, 0.5) !important;
} }
} }
</style> </style>
resources/js/components/Admin/WidgetLatestRegistrations.vue
+122 -96
View File
@@ -1,59 +1,68 @@
<template> <template>
<DatatableWrapper @init="isLoading = false" api="/api/admin/dashboard/newbies" :paginator="false" :columns="columns" class="overflow-x-auto mt-6"> <DatatableWrapper @init="isLoading = false" api="/api/admin/dashboard/newbies" :paginator="false" :columns="columns" class="mt-6 overflow-x-auto">
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<!--Not a subscription--> <!--Not a subscription-->
<tr v-if="config.subscriptionType === 'none'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap"> <tr v-if="config.subscriptionType === 'none'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
<td class="py-3 md:pr-1 pr-3"> <td class="py-3 pr-3 md:pr-1">
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}"> <router-link
:to="{
name: 'UserDetail',
params: { id: row.data.id },
}"
>
<div class="flex items-center"> <div class="flex items-center">
<MemberAvatar <MemberAvatar :is-border="false" :size="44" :member="row.data.relationships.settings" />
:is-border="false"
:size="44"
:member="row.data.relationships.settings"
/>
<div class="ml-3 pr-10"> <div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;"> <b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
{{ row.data.relationships.settings.data.attributes.name }} {{ row.data.relationships.settings.data.attributes.name }}
</b> </b>
<span class="block text-xs dark:text-gray-500 text-gray-600"> <span class="block text-xs text-gray-600 dark:text-gray-500">
{{ row.data.attributes.email }} {{ row.data.attributes.email }}
</span> </span>
</div> </div>
</div> </div>
</router-link> </router-link>
</td> </td>
<td class="md:px-1 px-3"> <td class="px-3 md:px-1">
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)"> <ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
{{ row.data.attributes.role }} {{ row.data.attributes.role }}
</ColorLabel> </ColorLabel>
</td> </td>
<td class="md:px-1 px-3"> <td class="px-3 md:px-1">
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold"> <span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
{{ row.data.attributes.storage.used_formatted }} {{ row.data.attributes.storage.used_formatted }}
</span> </span>
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold"> <span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold"> - </span>
-
</span>
</td> </td>
<td class="md:px-1 px-3" v-if="config.storageLimit"> <td class="px-3 md:px-1" v-if="config.storageLimit">
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold"> <span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
{{ row.data.attributes.storage.capacity_formatted }} {{ row.data.attributes.storage.capacity_formatted }}
</span> </span>
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold"> <span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold"> - </span>
-
</span>
</td> </td>
<td class="md:px-1 px-3"> <td class="px-3 md:px-1">
<span class="text-sm font-bold"> <span class="text-sm font-bold">
{{ row.data.attributes.created_at }} {{ row.data.attributes.created_at }}
</span> </span>
</td> </td>
<td class="md:pl-1 pl-3 text-right"> <td class="pl-3 text-right md:pl-1">
<div class="flex space-x-2 w-full justify-end"> <div class="flex w-full justify-end space-x-2">
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDetail', params: {id: row.data.id}}"> <router-link
class="flex h-8 w-8 items-center justify-center rounded-md bg-light-background transition-colors hover:bg-green-100 dark:bg-2x-dark-foreground"
:to="{
name: 'UserDetail',
params: { id: row.data.id },
}"
>
<Edit2Icon size="15" class="opacity-75" /> <Edit2Icon size="15" class="opacity-75" />
</router-link> </router-link>
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDelete', params: {id: row.data.id}}"> <router-link
class="flex h-8 w-8 items-center justify-center rounded-md bg-light-background transition-colors hover:bg-red-100 dark:bg-2x-dark-foreground"
:to="{
name: 'UserDelete',
params: { id: row.data.id },
}"
>
<Trash2Icon size="15" class="opacity-75" /> <Trash2Icon size="15" class="opacity-75" />
</router-link> </router-link>
</div> </div>
@@ -61,63 +70,72 @@
</tr> </tr>
<!--Fixed subscription--> <!--Fixed subscription-->
<tr v-if="config.subscriptionType === 'fixed'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap"> <tr v-if="config.subscriptionType === 'fixed'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
<td class="py-3 md:pr-1 pr-3"> <td class="py-3 pr-3 md:pr-1">
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}"> <router-link
:to="{
name: 'UserDetail',
params: { id: row.data.id },
}"
>
<div class="flex items-center"> <div class="flex items-center">
<MemberAvatar <MemberAvatar :is-border="false" :size="44" :member="row.data.relationships.settings" />
:is-border="false"
:size="44"
:member="row.data.relationships.settings"
/>
<div class="ml-3 pr-10"> <div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;"> <b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
{{ row.data.relationships.settings.data.attributes.name }} {{ row.data.relationships.settings.data.attributes.name }}
</b> </b>
<span class="block text-xs dark:text-gray-500 text-gray-600"> <span class="block text-xs text-gray-600 dark:text-gray-500">
{{ row.data.attributes.email }} {{ row.data.attributes.email }}
</span> </span>
</div> </div>
</div> </div>
</router-link> </router-link>
</td> </td>
<td class="md:px-1 px-3"> <td class="px-3 md:px-1">
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)"> <ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
{{ row.data.attributes.role }} {{ row.data.attributes.role }}
</ColorLabel> </ColorLabel>
</td> </td>
<td class="md:px-1 px-3" v-if="config.isSaaS"> <td class="px-3 md:px-1" v-if="config.isSaaS">
<span class="text-sm font-bold"> <span class="text-sm font-bold">
{{ row.data.relationships.subscription ? $t('global.premium') : $t('global.free') }} {{ row.data.relationships.subscription ? $t('global.premium') : $t('global.free') }}
</span> </span>
</td> </td>
<td class="md:px-1 px-3"> <td class="px-3 md:px-1">
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold"> <span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
{{ row.data.attributes.storage.used_formatted }} {{ row.data.attributes.storage.used_formatted }}
</span> </span>
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold"> <span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold"> - </span>
-
</span>
</td> </td>
<td class="md:px-1 px-3" v-if="config.storageLimit"> <td class="px-3 md:px-1" v-if="config.storageLimit">
<span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold"> <span v-if="row.data.attributes.storage.capacity !== 0" class="text-sm font-bold">
{{ row.data.attributes.storage.capacity_formatted }} {{ row.data.attributes.storage.capacity_formatted }}
</span> </span>
<span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold"> <span v-if="row.data.attributes.storage.capacity === 0" class="text-sm font-bold"> - </span>
-
</span>
</td> </td>
<td class="md:px-1 px-3"> <td class="px-3 md:px-1">
<span class="text-sm font-bold"> <span class="text-sm font-bold">
{{ row.data.attributes.created_at }} {{ row.data.attributes.created_at }}
</span> </span>
</td> </td>
<td class="md:pl-1 pl-3 text-right"> <td class="pl-3 text-right md:pl-1">
<div class="flex space-x-2 w-full justify-end"> <div class="flex w-full justify-end space-x-2">
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDetail', params: {id: row.data.id}}"> <router-link
class="flex h-8 w-8 items-center justify-center rounded-md bg-light-background transition-colors hover:bg-green-100 dark:bg-2x-dark-foreground"
:to="{
name: 'UserDetail',
params: { id: row.data.id },
}"
>
<Edit2Icon size="15" class="opacity-75" /> <Edit2Icon size="15" class="opacity-75" />
</router-link> </router-link>
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDelete', params: {id: row.data.id}}"> <router-link
class="flex h-8 w-8 items-center justify-center rounded-md bg-light-background transition-colors hover:bg-red-100 dark:bg-2x-dark-foreground"
:to="{
name: 'UserDelete',
params: { id: row.data.id },
}"
>
<Trash2Icon size="15" class="opacity-75" /> <Trash2Icon size="15" class="opacity-75" />
</router-link> </router-link>
</div> </div>
@@ -125,52 +143,65 @@
</tr> </tr>
<!--Metered subscription--> <!--Metered subscription-->
<tr v-if="config.subscriptionType === 'metered'" class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap"> <tr v-if="config.subscriptionType === 'metered'" class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
<td class="py-3 md:pr-1 pr-3"> <td class="py-3 pr-3 md:pr-1">
<router-link :to="{name: 'UserDetail', params: {id: row.data.id}}"> <router-link
:to="{
name: 'UserDetail',
params: { id: row.data.id },
}"
>
<div class="flex items-center"> <div class="flex items-center">
<MemberAvatar <MemberAvatar :is-border="false" :size="44" :member="row.data.relationships.settings" />
:is-border="false"
:size="44"
:member="row.data.relationships.settings"
/>
<div class="ml-3 pr-10"> <div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;"> <b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
{{ row.data.relationships.settings.data.attributes.name }} {{ row.data.relationships.settings.data.attributes.name }}
</b> </b>
<span class="block text-xs dark:text-gray-500 text-gray-600"> <span class="block text-xs text-gray-600 dark:text-gray-500">
{{ row.data.attributes.email }} {{ row.data.attributes.email }}
</span> </span>
</div> </div>
</div> </div>
</router-link> </router-link>
</td> </td>
<td class="md:px-1 px-3"> <td class="px-3 md:px-1">
<ColorLabel :color="$getUserRoleColor(row.data.attributes.role)"> <ColorLabel :color="$getUserRoleColor(row.data.attributes.role)">
{{ row.data.attributes.role }} {{ row.data.attributes.role }}
</ColorLabel> </ColorLabel>
</td> </td>
<td class="md:px-1 px-3"> <td class="px-3 md:px-1">
<span class="text-sm font-bold"> <span class="text-sm font-bold">
{{ row.data.meta.usages.featureEstimates.storage.usage }} {{ row.data.meta.usages.featureEstimates.storage.usage }}
</span> </span>
</td> </td>
<td class="md:px-1 px-3"> <td class="px-3 md:px-1">
<span class="text-sm font-bold"> <span class="text-sm font-bold">
{{ row.data.meta.usages.costEstimate }} {{ row.data.meta.usages.costEstimate }}
</span> </span>
</td> </td>
<td class="md:px-1 px-3"> <td class="px-3 md:px-1">
<span class="text-sm font-bold"> <span class="text-sm font-bold">
{{ row.data.attributes.created_at }} {{ row.data.attributes.created_at }}
</span> </span>
</td> </td>
<td class="md:pl-1 pl-3 text-right"> <td class="pl-3 text-right md:pl-1">
<div class="flex space-x-2 w-full justify-end"> <div class="flex w-full justify-end space-x-2">
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-green-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDetail', params: {id: row.data.id}}"> <router-link
class="flex h-8 w-8 items-center justify-center rounded-md bg-light-background transition-colors hover:bg-green-100 dark:bg-2x-dark-foreground"
:to="{
name: 'UserDetail',
params: { id: row.data.id },
}"
>
<Edit2Icon size="15" class="opacity-75" /> <Edit2Icon size="15" class="opacity-75" />
</router-link> </router-link>
<router-link class="flex items-center justify-center w-8 h-8 rounded-md hover:bg-red-100 dark:bg-2x-dark-foreground bg-light-background transition-colors" :to="{name: 'UserDelete', params: {id: row.data.id}}"> <router-link
class="flex h-8 w-8 items-center justify-center rounded-md bg-light-background transition-colors hover:bg-red-100 dark:bg-2x-dark-foreground"
:to="{
name: 'UserDelete',
params: { id: row.data.id },
}"
>
<Trash2Icon size="15" class="opacity-75" /> <Trash2Icon size="15" class="opacity-75" />
</router-link> </router-link>
</div> </div>
@@ -181,19 +212,16 @@
</template> </template>
<script> <script>
import DatatableCellImage from "../Others/Tables/DatatableCellImage"; import DatatableCellImage from '../Others/Tables/DatatableCellImage'
import DatatableWrapper from "../Others/Tables/DatatableWrapper"; import DatatableWrapper from '../Others/Tables/DatatableWrapper'
import ColorLabel from "../Others/ColorLabel"; import ColorLabel from '../Others/ColorLabel'
import {Trash2Icon, Edit2Icon} from "vue-feather-icons" import { Trash2Icon, Edit2Icon } from 'vue-feather-icons'
import MemberAvatar from "../FilesView/MemberAvatar"; import MemberAvatar from '../FilesView/MemberAvatar'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
name: 'WidgetLatestRegistrations', name: 'WidgetLatestRegistrations',
props: [ props: ['icon', 'title'],
'icon',
'title'
],
components: { components: {
DatatableCellImage, DatatableCellImage,
DatatableWrapper, DatatableWrapper,
@@ -203,25 +231,23 @@
Edit2Icon, Edit2Icon,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['config']),
'config',
]),
columns() { columns() {
return { return {
metered: [ metered: [
{ {
label: this.$t('admin_page_user.table.name'), label: this.$t('admin_page_user.table.name'),
field: 'email', field: 'email',
sortable: true sortable: true,
}, },
{ {
label: this.$t('admin_page_user.table.role'), label: this.$t('admin_page_user.table.role'),
field: 'role', field: 'role',
sortable: true sortable: true,
}, },
{ {
label: this.$t('admin_page_user.table.storage_used'), label: this.$t('admin_page_user.table.storage_used'),
sortable: false sortable: false,
}, },
{ {
label: this.$t('Billing Est.'), label: this.$t('Billing Est.'),
@@ -230,23 +256,23 @@
{ {
label: this.$t('admin_page_user.table.created_at'), label: this.$t('admin_page_user.table.created_at'),
field: 'created_at', field: 'created_at',
sortable: true sortable: true,
}, },
{ {
label: this.$t('admin_page_user.table.action'), label: this.$t('admin_page_user.table.action'),
sortable: false sortable: false,
}, },
], ],
fixed: [ fixed: [
{ {
label: this.$t('admin_page_user.table.name'), label: this.$t('admin_page_user.table.name'),
field: 'email', field: 'email',
sortable: true sortable: true,
}, },
{ {
label: this.$t('admin_page_user.table.role'), label: this.$t('admin_page_user.table.role'),
field: 'role', field: 'role',
sortable: true sortable: true,
}, },
{ {
label: this.$t('admin_page_user.table.plan'), label: this.$t('admin_page_user.table.plan'),
@@ -254,7 +280,7 @@
}, },
{ {
label: this.$t('admin_page_user.table.storage_used'), label: this.$t('admin_page_user.table.storage_used'),
sortable: false sortable: false,
}, },
{ {
label: this.$t('Max Storage'), label: this.$t('Max Storage'),
@@ -264,27 +290,27 @@
{ {
label: this.$t('admin_page_user.table.created_at'), label: this.$t('admin_page_user.table.created_at'),
field: 'created_at', field: 'created_at',
sortable: true sortable: true,
}, },
{ {
label: this.$t('admin_page_user.table.action'), label: this.$t('admin_page_user.table.action'),
sortable: false sortable: false,
}, },
], ],
none: [ none: [
{ {
label: this.$t('admin_page_user.table.name'), label: this.$t('admin_page_user.table.name'),
field: 'email', field: 'email',
sortable: true sortable: true,
}, },
{ {
label: this.$t('admin_page_user.table.role'), label: this.$t('admin_page_user.table.role'),
field: 'role', field: 'role',
sortable: true sortable: true,
}, },
{ {
label: this.$t('admin_page_user.table.storage_used'), label: this.$t('admin_page_user.table.storage_used'),
sortable: false sortable: false,
}, },
{ {
label: this.$t('Max Storage'), label: this.$t('Max Storage'),
@@ -294,15 +320,15 @@
{ {
label: this.$t('admin_page_user.table.created_at'), label: this.$t('admin_page_user.table.created_at'),
field: 'created_at', field: 'created_at',
sortable: true sortable: true,
}, },
{ {
label: this.$t('admin_page_user.table.action'), label: this.$t('admin_page_user.table.action'),
sortable: false sortable: false,
}, },
], ],
}[this.config.subscriptionType] }[this.config.subscriptionType]
} },
}, },
data() { data() {
return { return {
resources/js/components/Admin/WidgetLatestTransactions.vue
+28 -41
View File
@@ -1,37 +1,29 @@
<template> <template>
<DatatableWrapper <DatatableWrapper api="/api/admin/dashboard/transactions" :columns="columns" class="overflow-x-auto">
api="/api/admin/dashboard/transactions"
:columns="columns"
class="overflow-x-auto"
>
<template slot-scope="{ row }"> <template slot-scope="{ row }">
<tr class="border-b dark:border-opacity-5 border-light border-dashed whitespace-nowrap"> <tr class="whitespace-nowrap border-b border-dashed border-light dark:border-opacity-5">
<td class="py-5 md:pr-1 pr-3"> <td class="py-5 pr-3 md:pr-1">
<span class="text-sm font-bold"> <span class="text-sm font-bold">
{{ row.data.attributes.note }} {{ row.data.attributes.note }}
</span> </span>
</td> </td>
<td class="md:px-1 px-3"> <td class="px-3 md:px-1">
<div v-if="row.data.relationships.user" class="flex items-center"> <div v-if="row.data.relationships.user" class="flex items-center">
<MemberAvatar <MemberAvatar :is-border="false" :size="36" :member="row.data.relationships.user" />
:is-border="false"
:size="36"
:member="row.data.relationships.user"
/>
<div class="ml-3 pr-10"> <div class="ml-3 pr-10">
<b class="text-sm font-bold block max-w-1 overflow-hidden text-ellipsis whitespace-nowrap" style="max-width: 155px;"> <b class="max-w-1 block overflow-hidden text-ellipsis whitespace-nowrap text-sm font-bold" style="max-width: 155px">
{{ row.data.relationships.user.data.attributes.name }} {{ row.data.relationships.user.data.attributes.name }}
</b> </b>
<span class="block text-xs dark:text-gray-500 text-gray-600"> <span class="block text-xs text-gray-600 dark:text-gray-500">
{{ row.data.relationships.user.data.attributes.email }} {{ row.data.relationships.user.data.attributes.email }}
</span> </span>
</div> </div>
</div> </div>
<span v-if="! row.data.relationships.user" class="text-xs text-gray-500 font-bold"> <span v-if="!row.data.relationships.user" class="text-xs font-bold text-gray-500">
{{ $t('User was deleted') }} {{ $t('User was deleted') }}
</span> </span>
</td> </td>
<td class="md:px-1 px-3"> <td class="px-3 md:px-1">
<ColorLabel v-if="config.subscriptionType === 'fixed'" :color="$getTransactionStatusColor(row.data.attributes.status)"> <ColorLabel v-if="config.subscriptionType === 'fixed'" :color="$getTransactionStatusColor(row.data.attributes.status)">
{{ row.data.attributes.status }} {{ row.data.attributes.status }}
</ColorLabel> </ColorLabel>
@@ -39,19 +31,19 @@
{{ row.data.attributes.type }} {{ row.data.attributes.type }}
</ColorLabel> </ColorLabel>
</td> </td>
<td class="md:px-1 px-3"> <td class="px-3 md:px-1">
<span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)"> <span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
{{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }} {{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
</span> </span>
</td> </td>
<td class="md:px-1 px-3"> <td class="px-3 md:px-1">
<span class="text-sm font-bold"> <span class="text-sm font-bold">
{{ row.data.attributes.created_at }} {{ row.data.attributes.created_at }}
</span> </span>
</td> </td>
<td class="md:pl-1 pl-3"> <td class="pl-3 md:pl-1">
<div class="text-right md:w-full w-32"> <div class="w-32 text-right md:w-full">
<img class="w-32 md:inline-block" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver"> <img class="w-32 md:inline-block" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver" />
</div> </div>
</td> </td>
</tr> </tr>
@@ -67,20 +59,17 @@
</template> </template>
<script> <script>
import DatatableCellImage from "../Others/Tables/DatatableCellImage"; import DatatableCellImage from '../Others/Tables/DatatableCellImage'
import DatatableWrapper from "../Others/Tables/DatatableWrapper"; import DatatableWrapper from '../Others/Tables/DatatableWrapper'
import ColorLabel from "../Others/ColorLabel"; import ColorLabel from '../Others/ColorLabel'
import {Trash2Icon, Edit2Icon} from "vue-feather-icons" import { Trash2Icon, Edit2Icon } from 'vue-feather-icons'
import MemberAvatar from "../FilesView/MemberAvatar" import MemberAvatar from '../FilesView/MemberAvatar'
import InfoBox from "../Others/Forms/InfoBox" import InfoBox from '../Others/Forms/InfoBox'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
name: 'WidgetLatestTransactions', name: 'WidgetLatestTransactions',
props: [ props: ['icon', 'title'],
'icon',
'title'
],
components: { components: {
DatatableCellImage, DatatableCellImage,
DatatableWrapper, DatatableWrapper,
@@ -91,9 +80,7 @@
InfoBox, InfoBox,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['config']),
'config',
]),
}, },
data() { data() {
return { return {
@@ -101,32 +88,32 @@
{ {
label: this.$t('Note'), label: this.$t('Note'),
field: 'note', field: 'note',
sortable: true sortable: true,
}, },
{ {
label: this.$t('User'), label: this.$t('User'),
field: 'user_id', field: 'user_id',
sortable: true sortable: true,
}, },
{ {
label: this.$t('Status'), label: this.$t('Status'),
field: 'status', field: 'status',
sortable: true sortable: true,
}, },
{ {
label: this.$t('admin_page_invoices.table.total'), label: this.$t('admin_page_invoices.table.total'),
field: 'amount', field: 'amount',
sortable: true sortable: true,
}, },
{ {
label: this.$t('Payed At'), label: this.$t('Payed At'),
field: 'created_at', field: 'created_at',
sortable: true sortable: true,
}, },
{ {
label: this.$t('Service'), label: this.$t('Service'),
field: 'driver', field: 'driver',
sortable: true sortable: true,
}, },
], ],
} }
resources/js/components/Admin/WidgetWrapper.vue
+4 -4
View File
@@ -1,11 +1,11 @@
<template> <template>
<div class="widget-card w-full"> <div class="widget-card w-full">
<div class="widget-content dark:bg-dark-foreground bg-white"> <div class="widget-content bg-white dark:bg-dark-foreground">
<div class="flex items-center"> <div class="flex items-center">
<users-icon v-if="icon === 'users'" size="16" class="vue-feather text-theme mr-3" /> <users-icon v-if="icon === 'users'" size="16" class="vue-feather text-theme mr-3" />
<star-icon v-if="icon === 'star'" size="16" class="vue-feather text-theme mr-3" /> <star-icon v-if="icon === 'star'" size="16" class="vue-feather text-theme mr-3" />
<hard-drive-icon v-if="icon === 'hard-drive'" size="16" class="vue-feather text-theme mr-3" /> <hard-drive-icon v-if="icon === 'hard-drive'" size="16" class="vue-feather text-theme mr-3" />
<b class="font-bold text-base"> <b class="text-base font-bold">
{{ title }} {{ title }}
</b> </b>
</div> </div>
@@ -24,7 +24,7 @@
ChevronRightIcon, ChevronRightIcon,
HardDriveIcon, HardDriveIcon,
StarIcon, StarIcon,
UsersIcon UsersIcon,
} },
} }
</script> </script>
resources/js/components/Auth/AuthButton.vue
+5 -11
View File
@@ -1,9 +1,9 @@
<template> <template>
<button class="group flex items-center border-2 dark:border-gray-300 border-black rounded-lg inline-block mx-auto px-7 py-2.5 whitespace-nowrap"> <button class="group mx-auto inline-block flex items-center whitespace-nowrap rounded-lg border-2 border-black px-7 py-2.5 dark:border-gray-300">
<span class="font-extrabold text-lg pr-1"> <span class="pr-1 text-lg font-extrabold">
{{ text }} {{ text }}
</span> </span>
<refresh-cw-icon v-if="loading" size="20" class="vue-feather text-theme -mr-1 sync-alt"/> <refresh-cw-icon v-if="loading" size="20" class="vue-feather text-theme sync-alt -mr-1" />
<chevron-right-icon v-if="!loading && icon" size="20" class="vue-feather text-theme -mr-1" /> <chevron-right-icon v-if="!loading && icon" size="20" class="vue-feather text-theme -mr-1" />
</button> </button>
</template> </template>
@@ -13,11 +13,7 @@
export default { export default {
name: 'AuthContent', name: 'AuthContent',
props: [ props: ['loading', 'icon', 'text'],
'loading',
'icon',
'text'
],
components: { components: {
ChevronRightIcon, ChevronRightIcon,
RefreshCwIcon, RefreshCwIcon,
@@ -29,12 +25,11 @@
}, },
created() { created() {
this.isVisible = this.visible this.isVisible = this.visible
} },
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.sync-alt { .sync-alt {
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }
@@ -47,5 +42,4 @@
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
</style> </style>
resources/js/components/Auth/AuthContent.vue
+3 -6
View File
@@ -1,5 +1,5 @@
<template> <template>
<div v-if="isVisible" class="text-center w-full max-w-xl"> <div v-if="isVisible" class="w-full max-w-xl text-center">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
@@ -7,10 +7,7 @@
<script> <script>
export default { export default {
name: 'AuthContent', name: 'AuthContent',
props: [ props: ['visible', 'name'],
'visible',
'name'
],
data() { data() {
return { return {
isVisible: false, isVisible: false,
@@ -18,6 +15,6 @@
}, },
created() { created() {
this.isVisible = this.visible this.isVisible = this.visible
} },
} }
</script> </script>
resources/js/components/Auth/AuthContentWrapper.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="flex justify-center items-center md:px-0 px-5"> <div class="flex items-center justify-center px-5 md:px-0">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>
resources/js/components/Auth/SocialiteAuthenticationButtons.vue
+5 -7
View File
@@ -1,5 +1,5 @@
<template> <template>
<div v-if="config.allowedFacebookLogin || config.allowedGoogleLogin || config.allowedGithubLogin" class="flex items-center justify-center mb-10"> <div v-if="config.allowedFacebookLogin || config.allowedGoogleLogin || config.allowedGithubLogin" class="mb-10 flex items-center justify-center">
<div v-if="config.allowedFacebookLogin" class="mx-5 cursor-pointer"> <div v-if="config.allowedFacebookLogin" class="mx-5 cursor-pointer">
<facebook-icon @click="socialiteRedirect('facebook')" /> <facebook-icon @click="socialiteRedirect('facebook')" />
</div> </div>
@@ -9,14 +9,14 @@
</div> </div>
<div v-if="config.allowedGoogleLogin" class="mx-5 cursor-pointer"> <div v-if="config.allowedGoogleLogin" class="mx-5 cursor-pointer">
<span @click="socialiteRedirect('google')" class="font-semibold text-3xl">G</span> <span @click="socialiteRedirect('google')" class="text-3xl font-semibold">G</span>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { FacebookIcon, GithubIcon } from 'vue-feather-icons' import { FacebookIcon, GithubIcon } from 'vue-feather-icons'
import {mapGetters} from "vuex"; import { mapGetters } from 'vuex'
export default { export default {
name: 'SocialiteAuthenticationButtons', name: 'SocialiteAuthenticationButtons',
@@ -25,9 +25,7 @@ export default {
GithubIcon, GithubIcon,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['config']),
'config'
])
}, },
methods: { methods: {
socialiteRedirect(provider) { socialiteRedirect(provider) {
@@ -35,6 +33,6 @@ export default {
this.$store.dispatch('socialiteRedirect', provider) this.$store.dispatch('socialiteRedirect', provider)
}, },
} },
} }
</script> </script>
resources/js/components/Desktop/PopoverItem.vue
+8 -14
View File
@@ -3,29 +3,23 @@
<!--Overlay component--> <!--Overlay component-->
<div <div
@click.capture="hidePopover" @click.capture="hidePopover"
class="absolute top-12 z-20 w-60 dark:bg-dark-foreground bg-white shadow-xl rounded-lg overflow-hidden" class="absolute top-12 z-20 w-60 overflow-hidden rounded-lg bg-white shadow-xl dark:bg-dark-foreground"
:class="{ 'right-0': side === 'left', 'left-0': side === 'right' }" :class="{ 'right-0': side === 'left', 'left-0': side === 'right' }"
> >
<slot></slot> <slot></slot>
</div> </div>
<!--Clickable layer to close overlays--> <!--Clickable layer to close overlays-->
<div <div @click="hidePopover" class="fixed top-0 left-0 right-0 bottom-0 z-10 cursor-pointer"></div>
@click="hidePopover"
class="fixed top-0 left-0 right-0 bottom-0 z-10 cursor-pointer"
></div>
</div> </div>
</template> </template>
<script> <script>
import {events} from "../../bus"; import { events } from '../../bus'
export default { export default {
name: 'PopoverItem', name: 'PopoverItem',
props: [ props: ['side', 'name'],
'side',
'name',
],
data() { data() {
return { return {
isVisible: false, isVisible: false,
@@ -33,15 +27,15 @@
}, },
methods: { methods: {
hidePopover() { hidePopover() {
setTimeout(() => this.isVisible = false, 10) setTimeout(() => (this.isVisible = false), 10)
} },
}, },
mounted() { mounted() {
events.$on('popover:open', name => { events.$on('popover:open', (name) => {
if (this.name === name) { if (this.name === name) {
this.isVisible = !this.isVisible this.isVisible = !this.isVisible
} }
}) })
} },
} }
</script> </script>
resources/js/components/Desktop/PopoverWrapper.vue
-1
View File
@@ -11,7 +11,6 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.popover-wrapper { .popover-wrapper {
position: relative; position: relative;
} }
resources/js/components/Desktop/ToolbarGroup.vue
-3
View File
@@ -11,7 +11,6 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.toolbar-button-wrapper { .toolbar-button-wrapper {
margin-left: 28px; margin-left: 28px;
display: flex; display: flex;
@@ -19,10 +18,8 @@
} }
@media only screen and (max-width: 1024px) { @media only screen and (max-width: 1024px) {
.toolbar-button-wrapper { .toolbar-button-wrapper {
margin-left: 25px; margin-left: 25px;
} }
} }
</style> </style>
resources/js/components/Desktop/ToolbarWrapper.vue
+3 -3
View File
@@ -11,11 +11,11 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "resources/sass/vuefilemanager/_variables"; @import 'resources/sass/vuefilemanager/_variables';
@import "resources/sass/vuefilemanager/_mixins"; @import 'resources/sass/vuefilemanager/_mixins';
.toolbar-tools { .toolbar-tools {
text-align: right; text-align: right;
display: flex;; display: flex;
} }
</style> </style>
resources/js/components/FilePreview/FilePreview.vue
+8 -16
View File
@@ -1,22 +1,14 @@
<template> <template>
<div <div v-if="isFullPreview" class="file-preview z-40" ref="filePreview" tabindex="-1" @keydown.esc="closeFilePreview" @keydown.right="next" @keydown.left="prev">
v-if="isFullPreview"
class="file-preview z-40"
ref="filePreview"
tabindex="-1"
@keydown.esc="closeFilePreview"
@keydown.right="next"
@keydown.left="prev"
>
<FilePreviewToolbar /> <FilePreviewToolbar />
<FilePreviewMedia /> <FilePreviewMedia />
</div> </div>
</template> </template>
<script> <script>
import FilePreviewToolbar from "./FilePreviewToolbar"; import FilePreviewToolbar from './FilePreviewToolbar'
import FilePreviewMedia from "./FilePreviewMedia"; import FilePreviewMedia from './FilePreviewMedia'
import {events} from "../../bus"; import { events } from '../../bus'
export default { export default {
name: 'FilePreview', name: 'FilePreview',
@@ -26,7 +18,7 @@
}, },
data() { data() {
return { return {
isFullPreview: false isFullPreview: false,
} }
}, },
methods: { methods: {
@@ -39,7 +31,7 @@
}, },
prev() { prev() {
events.$emit('file-preview:prev') events.$emit('file-preview:prev')
} },
}, },
updated() { updated() {
if (this.isFullPreview) { if (this.isFullPreview) {
@@ -47,9 +39,9 @@
} }
}, },
mounted() { mounted() {
events.$on('file-preview:show', () => this.isFullPreview = true) events.$on('file-preview:show', () => (this.isFullPreview = true))
events.$on('file-preview:hide', () => this.closeFilePreview()) events.$on('file-preview:hide', () => this.closeFilePreview())
} },
} }
</script> </script>
resources/js/components/FilePreview/FilePreviewMedia.vue
+20 -37
View File
@@ -1,6 +1,5 @@
<template> <template>
<div v-if="currentFile" class="file-preview-wrapper"> <div v-if="currentFile" class="file-preview-wrapper">
<!--Arrow navigation--> <!--Arrow navigation-->
<div v-if="files.length > 1" class="navigation-arrows"> <div v-if="files.length > 1" class="navigation-arrows">
<div @click.prevent="prev" class="prev"> <div @click.prevent="prev" class="prev">
@@ -14,7 +13,6 @@
<!--File preview--> <!--File preview-->
<div class="file-wrapper-preview"> <div class="file-wrapper-preview">
<!--Show PDF--> <!--Show PDF-->
<PdfFile v-if="isPDF" :file="currentFile" /> <PdfFile v-if="isPDF" :file="currentFile" />
@@ -30,14 +28,14 @@
<script> <script>
import { ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons' import { ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons'
import ToolbarButton from "../FilesView/ToolbarButton"; import ToolbarButton from '../FilesView/ToolbarButton'
import ImageFile from "./Media/ImageFile"; import ImageFile from './Media/ImageFile'
import PdfFile from "./Media/PdfFile"; import PdfFile from './Media/PdfFile'
import Audio from "./Media/Audio"; import Audio from './Media/Audio'
import Video from "./Media/Video"; import Video from './Media/Video'
import Spinner from "../FilesView/Spinner"; import Spinner from '../FilesView/Spinner'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import {events} from "../../bus"; import { events } from '../../bus'
export default { export default {
name: 'FilePreviewMedia', name: 'FilePreviewMedia',
@@ -52,15 +50,9 @@ export default {
Video, Video,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['fastPreview', 'clipboard', 'entries']),
'fastPreview',
'clipboard',
'entries',
]),
currentFile() { currentFile() {
return this.fastPreview return this.fastPreview ? this.fastPreview : this.files[Math.abs(this.currentIndex) % this.files.length]
? this.fastPreview
: this.files[Math.abs(this.currentIndex) % this.files.length]
}, },
isPDF() { isPDF() {
return this.currentFile.data.attributes.mimetype === 'pdf' return this.currentFile.data.attributes.mimetype === 'pdf'
@@ -73,7 +65,7 @@ export default {
}, },
isImage() { isImage() {
return this.currentFile.data.type === 'image' return this.currentFile.data.type === 'image'
} },
}, },
data() { data() {
return { return {
@@ -83,8 +75,7 @@ export default {
}, },
watch: { watch: {
files() { files() {
if (this.files.length === 0) if (this.files.length === 0) events.$emit('file-preview-wrapper:hide')
events.$emit('file-preview-wrapper:hide')
}, },
currentFile() { currentFile() {
if (this.clipboard[0]) { if (this.clipboard[0]) {
@@ -111,17 +102,11 @@ export default {
getFilesForView() { getFilesForView() {
let requestedFile = this.clipboard[0] let requestedFile = this.clipboard[0]
this.entries.map(element => { this.entries.map((element) => {
if (requestedFile.data.attributes.mimetype === 'pdf') { if (requestedFile.data.attributes.mimetype === 'pdf') {
if (element.data.attributes.mimetype === 'pdf') this.files.push(element)
if (element.data.attributes.mimetype === 'pdf')
this.files.push(element)
} else { } else {
if (element.data.type === requestedFile.data.type) this.files.push(element)
if (element.data.type === requestedFile.data.type)
this.files.push(element)
} }
}) })
@@ -148,14 +133,14 @@ export default {
if (this.currentIndex < 0) { if (this.currentIndex < 0) {
this.currentIndex = this.files.length - 1 this.currentIndex = this.files.length - 1
} }
} },
}, },
created() { created() {
events.$on('file-preview:next', () => this.next()) events.$on('file-preview:next', () => this.next())
events.$on('file-preview:prev', () => this.prev()) events.$on('file-preview:prev', () => this.prev())
this.getFilesForView() this.getFilesForView()
} },
} }
</script> </script>
@@ -164,8 +149,8 @@ export default {
@import '../../../sass/vuefilemanager/mixins'; @import '../../../sass/vuefilemanager/mixins';
.navigation-arrows { .navigation-arrows {
.prev,
.prev, .next { .next {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 45%; top: 45%;
@@ -234,17 +219,15 @@ export default {
} }
@media only screen and (max-width: 960px) { @media only screen and (max-width: 960px) {
.file-preview-wrapper { .file-preview-wrapper {
top: 53px; top: 53px;
} }
} }
.dark { .dark {
.navigation-arrows { .navigation-arrows {
.prev, .next { .prev,
.next {
color: $light-text; color: $light-text;
filter: drop-shadow(0px 1px 0 rgba(17, 19, 20, 1)); filter: drop-shadow(0px 1px 0 rgba(17, 19, 20, 1));
} }
resources/js/components/FilePreview/FilePreviewToolbar.vue
+29 -38
View File
@@ -1,9 +1,8 @@
<template> <template>
<div class="navigation-panel" v-if="currentFile"> <div class="navigation-panel" v-if="currentFile">
<div class="name-wrapper"> <div class="name-wrapper">
<!--Close icon--> <!--Close icon-->
<span @click="closeFullPreview" class="p-3 -m-3"> <span @click="closeFullPreview" class="-m-3 p-3">
<x-icon size="17" class="icon-close hover-text-theme" /> <x-icon size="17" class="icon-close hover-text-theme" />
</span> </span>
@@ -15,10 +14,9 @@
<!--Context menu handler--> <!--Context menu handler-->
<PopoverWrapper> <PopoverWrapper>
<!--Icon--> <!--Icon-->
<span @click.stop="showItemContextMenu" class="p-3 -m-3"> <span @click.stop="showItemContextMenu" class="-m-3 p-3">
<div class="py-0.5 px-1.5 align-middle inline-block rounded-md lg:bg-transparent dark:bg-dark-foreground bg-light-background transition-all duration-200"> <div class="inline-block rounded-md bg-light-background py-0.5 px-1.5 align-middle transition-all duration-200 dark:bg-dark-foreground lg:bg-transparent">
<more-horizontal-icon size="14" /> <more-horizontal-icon size="14" />
</div> </div>
</span> </span>
@@ -40,7 +38,10 @@
<!--Item metadata--> <!--Item metadata-->
<div class="created-at-wrapper"> <div class="created-at-wrapper">
<p>{{ currentFile.data.attributes.filesize }}, {{ currentFile.data.attributes.created_at }}</p> <p>
{{ currentFile.data.attributes.filesize }},
{{ currentFile.data.attributes.created_at }}
</p>
</div> </div>
<!--Icon actions--> <!--Icon actions-->
@@ -51,7 +52,14 @@
</div> </div>
<div class="navigation-tool-wrapper"> <div class="navigation-tool-wrapper">
<ToolbarButton @click.native="downloadItem" class="mobile-hide" source="download" :action="$t('actions.download')" /> <ToolbarButton @click.native="downloadItem" class="mobile-hide" source="download" :action="$t('actions.download')" />
<ToolbarButton v-if="canShareItem" @click.native="$shareFileOrFolder(currentFile)" class="mobile-hide" :class="{ 'is-inactive': !canShareItem }" source="share" :action="$t('actions.share')" /> <ToolbarButton
v-if="canShareItem"
@click.native="$shareFileOrFolder(currentFile)"
class="mobile-hide"
:class="{ 'is-inactive': !canShareItem }"
source="share"
:action="$t('actions.share')"
/>
<ToolbarButton v-if="isImage" @click.native="printMethod()" source="print" :action="$t('actions.print')" /> <ToolbarButton v-if="isImage" @click.native="printMethod()" source="print" :action="$t('actions.print')" />
</div> </div>
</div> </div>
@@ -59,15 +67,15 @@
</template> </template>
<script> <script>
import PopoverWrapper from "../Desktop/PopoverWrapper"; import PopoverWrapper from '../Desktop/PopoverWrapper'
import PopoverItem from "../Desktop/PopoverItem"; import PopoverItem from '../Desktop/PopoverItem'
import OptionGroup from "../FilesView/OptionGroup"; import OptionGroup from '../FilesView/OptionGroup'
import Option from "../FilesView/Option"; import Option from '../FilesView/Option'
import ToolbarButton from "../FilesView/ToolbarButton"; import ToolbarButton from '../FilesView/ToolbarButton'
import { XIcon, MoreHorizontalIcon } from 'vue-feather-icons' import { XIcon, MoreHorizontalIcon } from 'vue-feather-icons'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import {events} from "../../bus"; import { events } from '../../bus'
export default { export default {
name: 'FilePreviewToolbar', name: 'FilePreviewToolbar',
@@ -81,18 +89,12 @@
XIcon, XIcon,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['fastPreview', 'clipboard', 'entries']),
'fastPreview',
'clipboard',
'entries'
]),
currentFile() { currentFile() {
return this.fastPreview ? this.fastPreview : this.clipboard[0] return this.fastPreview ? this.fastPreview : this.clipboard[0]
}, },
sharingTitle() { sharingTitle() {
return this.currentFile.data.relationships.shared return this.currentFile.data.relationships.shared ? this.$t('context_menu.share_edit') : this.$t('context_menu.share')
? this.$t('context_menu.share_edit')
: this.$t('context_menu.share')
}, },
isImage() { isImage() {
return this.currentFile.data.type === 'image' return this.currentFile.data.type === 'image'
@@ -103,17 +105,11 @@
files() { files() {
let files = [] let files = []
this.entries.map(element => { this.entries.map((element) => {
if (this.currentFile.data.attributes.mimetype === 'pdf') { if (this.currentFile.data.attributes.mimetype === 'pdf') {
if (element.data.attributes.mimetype === 'pdf') files.push(element)
if (element.data.attributes.mimetype === 'pdf')
files.push(element)
} else { } else {
if (element.data.type === this.currentFile.data.type) files.push(element)
if (element.data.type === this.currentFile.data.type)
files.push(element)
} }
}) })
@@ -158,15 +154,12 @@
win.print() win.print()
}, },
downloadItem() { downloadItem() {
this.$downloadFile( this.$downloadFile(this.currentFile.data.attributes.file_url, this.currentFile.data.attributes.name + '.' + this.currentFile.data.attributes.mimetype)
this.currentFile.data.attributes.file_url,
this.currentFile.data.attributes.name + '.' + this.currentFile.data.attributes.mimetype
)
}, },
closeFullPreview() { closeFullPreview() {
events.$emit('file-preview:hide') events.$emit('file-preview:hide')
} },
} },
} }
</script> </script>
@@ -300,9 +293,7 @@
} }
@media (max-width: 960px) { @media (max-width: 960px) {
.context-menu { .context-menu {
.name-wrapper { .name-wrapper {
width: 67%; width: 67%;
} }
resources/js/components/FilePreview/Media/Audio.vue
+2 -9
View File
@@ -1,17 +1,10 @@
<template> <template>
<audio <audio :class="{ 'file-shadow': !$isMobile() }" class="file audio" :src="file.data.attributes.file_url" controls></audio>
:class="{'file-shadow': ! $isMobile() }"
class="file audio"
:src="file.data.attributes.file_url"
controls>
</audio>
</template> </template>
<script> <script>
export default { export default {
name: 'Audio', name: 'Audio',
props: [ props: ['file'],
'file'
],
} }
</script> </script>
resources/js/components/FilePreview/Media/ImageFile.vue
+6 -15
View File
@@ -1,27 +1,18 @@
<template> <template>
<img <img id="printable-file" class="file" :class="{ 'file-shadow': !$isMobile() }" :src="imageSource" />
id="printable-file"
class="file"
:class="{'file-shadow': ! $isMobile() }"
:src="imageSource"
/>
</template> </template>
<script> <script>
export default { export default {
name: 'ImageFile', name: 'ImageFile',
props: [ props: ['file'],
'file'
],
computed: { computed: {
imageSource() { imageSource() {
let windowWidth = window.innerWidth let windowWidth = window.innerWidth
if (windowWidth > 1280) if (windowWidth > 1280) return this.file.data.attributes.thumbnail.xl
return this.file.data.attributes.thumbnail.xl else return this.file.data.attributes.thumbnail.lg
else },
return this.file.data.attributes.thumbnail.lg },
}
}
} }
</script> </script>
resources/js/components/FilePreview/Media/PdfFile.vue
+7 -11
View File
@@ -11,7 +11,7 @@
<script> <script>
//todo: resolve pdf //todo: resolve pdf
import {events} from "../../../bus"; import { events } from '../../../bus'
//import pdf from 'pdfvuer' //import pdf from 'pdfvuer'
export default { export default {
@@ -19,13 +19,11 @@
components: { components: {
//pdf, //pdf,
}, },
props: [ props: ['file'],
'file'
],
watch: { watch: {
file() { file() {
this.getPdf() this.getPdf()
} },
}, },
data() { data() {
return { return {
@@ -39,7 +37,7 @@
this.pdfData = undefined this.pdfData = undefined
this.numPages = 0 this.numPages = 0
let self = this; let self = this
//self.pdfData = pdf.createLoadingTask(this.file.data.attributes.file_url); //self.pdfData = pdf.createLoadingTask(this.file.data.attributes.file_url);
@@ -51,9 +49,7 @@
} }
if (window.innerWidth > 960) { if (window.innerWidth > 960) {
this.documentSize = localStorage.getItem('documentSize') this.documentSize = localStorage.getItem('documentSize') ? parseInt(localStorage.getItem('documentSize')) : 50
? parseInt(localStorage.getItem('documentSize'))
: 50;
} }
}, },
zoomIn() { zoomIn() {
@@ -67,7 +63,7 @@
this.documentSize -= 10 this.documentSize -= 10
localStorage.setItem('documentSize', this.documentSize) localStorage.setItem('documentSize', this.documentSize)
} }
} },
}, },
created() { created() {
this.getDocumentSize() this.getDocumentSize()
@@ -75,7 +71,7 @@
events.$on('document-zoom:in', () => this.zoomIn()) events.$on('document-zoom:in', () => this.zoomIn())
events.$on('document-zoom:out', () => this.zoomOut()) events.$on('document-zoom:out', () => this.zoomOut())
} },
} }
</script> </script>
resources/js/components/FilePreview/Media/Video.vue
+1 -3
View File
@@ -16,9 +16,7 @@
<script> <script>
export default { export default {
name: 'Video', name: 'Video',
props: [ props: ['file'],
'file'
],
} }
</script> </script>
resources/js/components/FilesView/Alert.vue
+8 -14
View File
@@ -10,12 +10,7 @@
<p v-if="message" class="message">{{ message }}</p> <p v-if="message" class="message">{{ message }}</p>
</div> </div>
<div class="popup-actions"> <div class="popup-actions">
<ButtonBase <ButtonBase @click.native="closePopup" :button-style="buttonStyle" class="action-confirm">{{ button }} </ButtonBase>
@click.native="closePopup"
:button-style="buttonStyle"
class="action-confirm"
>{{ button }}
</ButtonBase>
</div> </div>
</div> </div>
</div> </div>
@@ -23,13 +18,13 @@
</template> </template>
<script> <script>
import ButtonBase from "./ButtonBase"; import ButtonBase from './ButtonBase'
import {events} from "../../bus"; import { events } from '../../bus'
export default { export default {
name: 'AlertPopup', name: 'AlertPopup',
components: { components: {
ButtonBase ButtonBase,
}, },
data() { data() {
return { return {
@@ -44,11 +39,11 @@
methods: { methods: {
closePopup() { closePopup() {
events.$emit('popup:close') events.$emit('popup:close')
} },
}, },
mounted() { mounted() {
// Show alert // Show alert
events.$on('alert:open', args => { events.$on('alert:open', (args) => {
this.isVisibleWrapper = true this.isVisibleWrapper = true
this.title = args.title this.title = args.title
@@ -72,7 +67,7 @@
}) })
// Show alert // Show alert
events.$on('success:open', args => { events.$on('success:open', (args) => {
this.isVisibleWrapper = true this.isVisibleWrapper = true
this.title = args.title this.title = args.title
@@ -91,7 +86,7 @@
events.$on('popup:close', () => { events.$on('popup:close', () => {
this.isVisibleWrapper = false this.isVisibleWrapper = false
}) })
} },
} }
</script> </script>
@@ -136,7 +131,6 @@
} }
.popup-content { .popup-content {
.title { .title {
@include font-size(22); @include font-size(22);
text-transform: uppercase; text-transform: uppercase;
resources/js/components/FilesView/ButtonBase.vue
+10 -9
View File
@@ -17,7 +17,7 @@
props: ['buttonStyle', 'loading'], props: ['buttonStyle', 'loading'],
components: { components: {
RefreshCwIcon, RefreshCwIcon,
} },
} }
</script> </script>
@@ -48,20 +48,20 @@
} }
&.theme-solid { &.theme-solid {
.content { .content {
color: white; color: white;
} }
} }
&.danger { &.danger {
background: rgba($danger, .1); background: rgba($danger, 0.1);
.content { .content {
color: $danger; color: $danger;
} }
polyline, path { polyline,
path {
stroke: $danger; stroke: $danger;
} }
} }
@@ -73,7 +73,8 @@
color: white; color: white;
} }
polyline, path { polyline,
path {
stroke: white; stroke: white;
} }
} }
@@ -85,7 +86,8 @@
color: $text; color: $text;
} }
polyline, path { polyline,
path {
stroke: $text; stroke: $text;
} }
} }
@@ -105,9 +107,7 @@
} }
.dark { .dark {
.button-base { .button-base {
&.secondary { &.secondary {
background: $dark_mode_foreground; background: $dark_mode_foreground;
@@ -115,7 +115,8 @@
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
} }
polyline, path { polyline,
path {
color: inherit; color: inherit;
} }
} }
resources/js/components/FilesView/ButtonUpload.vue
+4 -12
View File
@@ -1,15 +1,7 @@
<template> <template>
<label :class="buttonStyle" label="file" class="button file-input button-base"> <label :class="buttonStyle" label="file" class="button file-input button-base">
<slot></slot> <slot></slot>
<input <input accept="*" v-show="false" @change="emmitFiles" id="file" type="file" name="files[]" multiple />
accept="*"
v-show="false"
@change="emmitFiles"
id="file"
type="file"
name="files[]"
multiple
/>
</label> </label>
</template> </template>
@@ -19,14 +11,14 @@
props: ['buttonStyle'], props: ['buttonStyle'],
data() { data() {
return { return {
files: undefined files: undefined,
} }
}, },
methods: { methods: {
emmitFiles(e) { emmitFiles(e) {
this.$uploadFiles(e.target.files) this.$uploadFiles(e.target.files)
} },
} },
} }
</script> </script>
resources/js/components/FilesView/CheckBox.vue
+10 -9
View File
@@ -1,8 +1,11 @@
<template> <template>
<div> <div>
<div <div
class="w-5 h-5 flex items-center justify-center rounded-md" class="flex h-5 w-5 items-center justify-center rounded-md"
:class="{'bg-theme': isClicked, 'dark:bg-dark-foreground bg-light-background': !isClicked}" :class="{
'bg-theme': isClicked,
'bg-light-background dark:bg-dark-foreground': !isClicked,
}"
@click="changeState" @click="changeState"
> >
<CheckIcon v-if="isClicked" class="vue-feather text-white" size="17" /> <CheckIcon v-if="isClicked" class="vue-feather text-white" size="17" />
@@ -15,25 +18,23 @@ import {CheckIcon} from 'vue-feather-icons'
export default { export default {
name: 'CheckBox', name: 'CheckBox',
props: [ props: ['isClicked'],
'isClicked'
],
components: { components: {
CheckIcon CheckIcon,
}, },
data() { data() {
return { return {
isSwitched: undefined isSwitched: undefined,
} }
}, },
methods: { methods: {
changeState() { changeState() {
this.isSwitched = !this.isSwitched this.isSwitched = !this.isSwitched
this.$emit('input', this.isSwitched) this.$emit('input', this.isSwitched)
} },
}, },
mounted() { mounted() {
this.isSwitched = this.isClicked this.isSwitched = this.isClicked
} },
} }
</script> </script>
resources/js/components/FilesView/ContextMenu.vue
+9 -15
View File
@@ -3,11 +3,10 @@
v-show="isVisible" v-show="isVisible"
:style="{ top: positionY + 'px', left: positionX + 'px' }" :style="{ top: positionY + 'px', left: positionX + 'px' }"
@click="closeAndResetContextMenu" @click="closeAndResetContextMenu"
class="absolute w-60 shadow-lg rounded-xl z-20 dark:bg-2x-dark-foreground bg-white overflow-hidden" class="absolute z-20 w-60 overflow-hidden rounded-xl bg-white shadow-lg dark:bg-2x-dark-foreground"
ref="contextmenu" ref="contextmenu"
> >
<div id="menu-list" class="w-full"> <div id="menu-list" class="w-full">
<!--Show empty select contextmenu--> <!--Show empty select contextmenu-->
<slot name="empty-select" v-if="!item" /> <slot name="empty-select" v-if="!item" />
@@ -21,24 +20,19 @@
</template> </template>
<script> <script>
import {events} from "../../bus"; import { events } from '../../bus'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
name: 'ContextMenu', name: 'ContextMenu',
computed: { computed: {
...mapGetters([ ...mapGetters(['clipboard', 'user']),
'clipboard',
'user',
]),
isMultiSelectContextMenu() { isMultiSelectContextMenu() {
// If is context Menu open on multi selected items open just options for the multi selected items // If is context Menu open on multi selected items open just options for the multi selected items
if (this.clipboard.length > 1 && this.clipboard.includes(this.item)) if (this.clipboard.length > 1 && this.clipboard.includes(this.item)) return false
return false
// If is context Menu open for the non selected item open options for the single item // If is context Menu open for the non selected item open options for the single item
if (this.clipboard.length < 2 || !this.clipboard.includes(this.item)) if (this.clipboard.length < 2 || !this.clipboard.includes(this.item)) return true
return true
}, },
}, },
data() { data() {
@@ -46,7 +40,7 @@ export default {
item: undefined, item: undefined,
isVisible: false, isVisible: false,
positionX: 0, positionX: 0,
positionY: 0 positionY: 0,
} }
}, },
methods: { methods: {
@@ -87,7 +81,7 @@ export default {
// Show context menu // Show context menu
this.isVisible = true this.isVisible = true
} },
}, },
created() { created() {
events.$on('context-menu:hide', () => this.closeAndResetContextMenu()) events.$on('context-menu:hide', () => this.closeAndResetContextMenu())
@@ -100,7 +94,7 @@ export default {
setTimeout(() => this.showContextMenu(event, item), 10) setTimeout(() => this.showContextMenu(event, item), 10)
}) })
events.$on('context-menu:current-folder', folder => { events.$on('context-menu:current-folder', (folder) => {
this.item = folder this.item = folder
this.isVisible = !this.isVisible this.isVisible = !this.isVisible
@@ -111,6 +105,6 @@ export default {
this.positionX = container.offsetLeft this.positionX = container.offsetLeft
} }
}) })
} },
} }
</script> </script>
resources/js/components/FilesView/DesktopToolbar.vue
+111 -92
View File
@@ -1,33 +1,46 @@
<template> <template>
<div id="desktop-toolbar" class="lg:block hidden"> <div id="desktop-toolbar" class="hidden lg:block">
<div class="toolbar-wrapper"> <div class="toolbar-wrapper">
<div @click="goBack" class="location"> <div @click="goBack" class="location">
<div v-if="!isVisibleNavigationBars" @click="toggleNavigationBars" class="mr-2"> <div v-if="!isVisibleNavigationBars" @click="toggleNavigationBars" class="mr-2">
<menu-icon size="17" /> <menu-icon size="17" />
</div> </div>
<chevron-left-icon :class="{'opacity-0 -translate-x-3': ! currentFolder, 'opacity-100 translate-x-0': currentFolder }" class="icon-back transform transition-all duration-200" size="17" /> <chevron-left-icon
:class="{
'-translate-x-3 opacity-0': !currentFolder,
'translate-x-0 opacity-100': currentFolder,
}"
class="icon-back transform transition-all duration-200"
size="17"
/>
<span :class="{ '-translate-x-4': !currentFolder }" class="location-title transform transition-all duration-200"> <span :class="{ '-translate-x-4': !currentFolder }" class="location-title transform transition-all duration-200">
{{ $getCurrentLocationName() }} {{ $getCurrentLocationName() }}
</span> </span>
<span :class="{'-translate-x-4 opacity-0': ! currentFolder, 'translate-x-0 opacity-100': currentFolder}" @click.stop="folderActions" class="transform location-more group transition-all duration-200" id="folder-actions"> <span
:class="{
'-translate-x-4 opacity-0': !currentFolder,
'translate-x-0 opacity-100': currentFolder,
}"
@click.stop="folderActions"
class="location-more group transform transition-all duration-200"
id="folder-actions"
>
<more-horizontal-icon size="14" class="icon-more group-hover-text-theme" /> <more-horizontal-icon size="14" class="icon-more group-hover-text-theme" />
</span> </span>
</div> </div>
<ToolbarWrapper> <ToolbarWrapper>
<!--Search bar--> <!--Search bar-->
<ToolbarGroup class="ml-0"> <ToolbarGroup class="ml-0">
<SearchBar class="lg:block hidden" /> <SearchBar class="hidden lg:block" />
</ToolbarGroup> </ToolbarGroup>
<!--Create button for all pages except SharedWithMe--> <!--Create button for all pages except SharedWithMe-->
<ToolbarGroup v-if="$checkPermission(['master', 'editor']) && !$isThisRoute($route, ['SharedWithMe'])"> <ToolbarGroup v-if="$checkPermission(['master', 'editor']) && !$isThisRoute($route, ['SharedWithMe'])">
<span class="block lg:hidden">
<span class="lg:hidden block">
<ToolbarButton @click.stop.native="$openSpotlight()" source="search" :action="$t('Search files or folders')" /> <ToolbarButton @click.stop.native="$openSpotlight()" source="search" :action="$t('Search files or folders')" />
</span> </span>
@@ -41,7 +54,14 @@
</OptionGroup> </OptionGroup>
<OptionGroup> <OptionGroup>
<Option @click.stop.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" /> <Option @click.stop.native="$createTeamFolder" :title="$t('Create Team Folder')" icon="users" />
<Option @click.stop.native="$createFolder" :class="{'is-inactive': canCreateFolderInView || isTeamFolderHomepage }" :title="$t('actions.create_folder')" icon="folder-plus" /> <Option
@click.stop.native="$createFolder"
:class="{
'is-inactive': canCreateFolderInView || isTeamFolderHomepage,
}"
:title="$t('actions.create_folder')"
icon="folder-plus"
/>
</OptionGroup> </OptionGroup>
</PopoverItem> </PopoverItem>
</PopoverWrapper> </PopoverWrapper>
@@ -49,7 +69,7 @@
<!--Create button for shared with me page--> <!--Create button for shared with me page-->
<ToolbarGroup v-if="$isThisRoute($route, ['SharedWithMe'])"> <ToolbarGroup v-if="$isThisRoute($route, ['SharedWithMe'])">
<span class="lg:hidden block"> <span class="block lg:hidden">
<ToolbarButton @click.stop.native="$openSpotlight()" source="search" :action="$t('Search files or folders')" /> <ToolbarButton @click.stop.native="$openSpotlight()" source="search" :action="$t('Search files or folders')" />
</span> </span>
@@ -58,10 +78,22 @@
<PopoverItem name="desktop-create" side="left"> <PopoverItem name="desktop-create" side="left">
<OptionGroup> <OptionGroup>
<OptionUpload :class="{'is-inactive': canUploadInView || isSharedWithMeHomepage }" :title="$t('actions.upload')" /> <OptionUpload
:class="{
'is-inactive': canUploadInView || isSharedWithMeHomepage,
}"
:title="$t('actions.upload')"
/>
</OptionGroup> </OptionGroup>
<OptionGroup> <OptionGroup>
<Option @click.stop.native="$createFolder" :class="{'is-inactive': canCreateFolderInView || isSharedWithMeHomepage }" :title="$t('actions.create_folder')" icon="folder-plus" /> <Option
@click.stop.native="$createFolder"
:class="{
'is-inactive': canCreateFolderInView || isSharedWithMeHomepage,
}"
:title="$t('actions.create_folder')"
icon="folder-plus"
/>
</OptionGroup> </OptionGroup>
</PopoverItem> </PopoverItem>
</PopoverWrapper> </PopoverWrapper>
@@ -69,10 +101,13 @@
<!--File Controls--> <!--File Controls-->
<ToolbarGroup v-if="$checkPermission(['master', 'editor']) || ($isMobile() && $isThisRoute($route, ['SharedWithMe', 'TeamFolders']))"> <ToolbarGroup v-if="$checkPermission(['master', 'editor']) || ($isMobile() && $isThisRoute($route, ['SharedWithMe', 'TeamFolders']))">
<!--Team Heads--> <!--Team Heads-->
<PopoverWrapper v-if="$isThisRoute($route, ['TeamFolders', 'SharedWithMe'])"> <PopoverWrapper v-if="$isThisRoute($route, ['TeamFolders', 'SharedWithMe'])">
<TeamMembersButton @click.stop.native="showTeamFolderMenu" size="32" class="dark:hover:bg-dark-foreground hover:bg-light-background rounded-lg cursor-pointer py-0.5 pl-2 pr-0.5" /> <TeamMembersButton
@click.stop.native="showTeamFolderMenu"
size="32"
class="cursor-pointer rounded-lg py-0.5 pl-2 pr-0.5 hover:bg-light-background dark:hover:bg-dark-foreground"
/>
<PopoverItem name="team-folder" side="left"> <PopoverItem name="team-folder" side="left">
<TeamFolderPreview /> <TeamFolderPreview />
@@ -90,11 +125,39 @@
<!--Item actions--> <!--Item actions-->
<span v-if="!$isMobile()" class="whitespace-nowrap"> <span v-if="!$isMobile()" class="whitespace-nowrap">
<ToolbarButton v-if="canShowConvertToTeamFolder" @click.native="$convertAsTeamFolder(clipboard[0])" :class="{'is-inactive': ! canCreateTeamFolderInView }" source="user-plus" :action="$t('actions.convert_into_team_folder')" /> <ToolbarButton
<ToolbarButton v-if="! $isThisRoute($route, ['SharedWithMe', 'Public'])" @click.native="$shareFileOrFolder(clipboard[0])" :class="{'is-inactive': canShareInView }" source="share" :action="$t('actions.share')" /> v-if="canShowConvertToTeamFolder"
@click.native="$convertAsTeamFolder(clipboard[0])"
:class="{
'is-inactive': !canCreateTeamFolderInView,
}"
source="user-plus"
:action="$t('actions.convert_into_team_folder')"
/>
<ToolbarButton
v-if="!$isThisRoute($route, ['SharedWithMe', 'Public'])"
@click.native="$shareFileOrFolder(clipboard[0])"
:class="{ 'is-inactive': canShareInView }"
source="share"
:action="$t('actions.share')"
/>
<ToolbarButton @click.native="$moveFileOrFolder(clipboard[0])" :class="{'is-inactive': canMoveInView && ! canEdit }" source="move" :action="$t('actions.move')" /> <ToolbarButton
<ToolbarButton @click.native="$deleteFileOrFolder(clipboard[0])" :class="{'is-inactive': canDeleteInView && ! canEdit }" source="trash" :action="$t('actions.delete')" /> @click.native="$moveFileOrFolder(clipboard[0])"
:class="{
'is-inactive': canMoveInView && !canEdit,
}"
source="move"
:action="$t('actions.move')"
/>
<ToolbarButton
@click.native="$deleteFileOrFolder(clipboard[0])"
:class="{
'is-inactive': canDeleteInView && !canEdit,
}"
source="trash"
:action="$t('actions.delete')"
/>
</span> </span>
</ToolbarGroup> </ToolbarGroup>
@@ -116,21 +179,21 @@
</template> </template>
<script> <script>
import FileSortingOptions from "./FileSortingOptions"; import FileSortingOptions from './FileSortingOptions'
import UploadProgress from "./UploadProgress"; import UploadProgress from './UploadProgress'
import PopoverWrapper from "../Desktop/PopoverWrapper"; import PopoverWrapper from '../Desktop/PopoverWrapper'
import ToolbarWrapper from "../Desktop/ToolbarWrapper"; import ToolbarWrapper from '../Desktop/ToolbarWrapper'
import ToolbarButton from "./ToolbarButton"; import ToolbarButton from './ToolbarButton'
import OptionUpload from "./OptionUpload"; import OptionUpload from './OptionUpload'
import ToolbarGroup from "../Desktop/ToolbarGroup"; import ToolbarGroup from '../Desktop/ToolbarGroup'
import OptionGroup from "./OptionGroup"; import OptionGroup from './OptionGroup'
import TeamMembersButton from "../Teams/Components/TeamMembersButton" import TeamMembersButton from '../Teams/Components/TeamMembersButton'
import PopoverItem from "../Desktop/PopoverItem"; import PopoverItem from '../Desktop/PopoverItem'
import TeamFolderPreview from "../Teams/Components/TeamFolderPreview" import TeamFolderPreview from '../Teams/Components/TeamFolderPreview'
import { MenuIcon, ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons' import { MenuIcon, ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
import SearchBar from "./SearchBar"; import SearchBar from './SearchBar'
import Option from "./Option"; import Option from './Option'
import {events} from "../../bus"; import { events } from '../../bus'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
@@ -154,17 +217,10 @@
Option, Option,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['isVisibleNavigationBars', 'currentTeamFolder', 'currentFolder', 'sharedDetail', 'clipboard', 'user']),
'isVisibleNavigationBars',
'currentTeamFolder',
'currentFolder',
'sharedDetail',
'clipboard',
'user',
]),
canEdit() { canEdit() {
if (this.currentTeamFolder && this.user && this.clipboard[0]) { if (this.currentTeamFolder && this.user && this.clipboard[0]) {
let member = this.currentTeamFolder.data.relationships.members.data.find(member => member.data.id === this.user.data.id) let member = this.currentTeamFolder.data.relationships.members.data.find((member) => member.data.id === this.user.data.id)
return member.data.attributes.permission === 'can-edit' return member.data.attributes.permission === 'can-edit'
} }
@@ -172,9 +228,7 @@
return false return false
}, },
teamFolder() { teamFolder() {
return this.currentTeamFolder return this.currentTeamFolder ? this.currentTeamFolder : this.clipboard[0]
? this.currentTeamFolder
: this.clipboard[0]
}, },
isNotHomepage() { isNotHomepage() {
if (this.$isThisRoute(this.$route, ['Public'])) { if (this.$isThisRoute(this.$route, ['Public'])) {
@@ -184,12 +238,10 @@
return this.$route.params.id return this.$route.params.id
}, },
isTeamFolderHomepage() { isTeamFolderHomepage() {
return this.$isThisRoute(this.$route, ['TeamFolders']) return this.$isThisRoute(this.$route, ['TeamFolders']) && !this.$route.params.id
&& ! this.$route.params.id
}, },
isSharedWithMeHomepage() { isSharedWithMeHomepage() {
return this.$isThisRoute(this.$route, ['SharedWithMe']) return this.$isThisRoute(this.$route, ['SharedWithMe']) && !this.$route.params.id
&& ! this.$route.params.id
}, },
canCreateFolderInView() { canCreateFolderInView() {
return !this.$isThisRoute(this.$route, ['Files', 'Public', 'TeamFolders', 'SharedWithMe']) return !this.$isThisRoute(this.$route, ['Files', 'Public', 'TeamFolders', 'SharedWithMe'])
@@ -201,52 +253,22 @@
return !this.$isThisRoute(this.$route, ['Files', 'Public', 'TeamFolders', 'SharedWithMe']) return !this.$isThisRoute(this.$route, ['Files', 'Public', 'TeamFolders', 'SharedWithMe'])
}, },
canDeleteInView() { canDeleteInView() {
let routes = [ let routes = ['TeamFolders', 'SharedWithMe', 'RecentUploads', 'MySharedItems', 'Trash', 'Public', 'Files']
'TeamFolders', return !this.$isThisRoute(this.$route, routes) || this.clipboard.length === 0
'SharedWithMe',
'RecentUploads',
'MySharedItems',
'Trash',
'Public',
'Files',
]
return !this.$isThisRoute(this.$route, routes)
|| this.clipboard.length === 0
}, },
canMoveInView() { canMoveInView() {
let routes = [ let routes = ['SharedWithMe', 'RecentUploads', 'MySharedItems', 'Public', 'Files', 'TeamFolders']
'SharedWithMe', return !this.$isThisRoute(this.$route, routes) || this.clipboard.length === 0
'RecentUploads',
'MySharedItems',
'Public',
'Files',
'TeamFolders',
]
return ! this.$isThisRoute(this.$route, routes)
|| this.clipboard.length === 0
}, },
canShareInView() { canShareInView() {
let routes = [ let routes = ['TeamFolders', 'RecentUploads', 'MySharedItems', 'Public', 'Files']
'TeamFolders', return !this.$isThisRoute(this.$route, routes) || this.clipboard.length > 1 || this.clipboard.length === 0
'RecentUploads',
'MySharedItems',
'Public',
'Files',
]
return ! this.$isThisRoute(this.$route, routes)
|| this.clipboard.length > 1
|| this.clipboard.length === 0
}, },
canCreateTeamFolderInView() { canCreateTeamFolderInView() {
let routes = [ let routes = ['MySharedItems', 'Files']
'MySharedItems',
'Files',
]
return this.$isThisRoute(this.$route, routes) return this.$isThisRoute(this.$route, routes) && this.clipboard.length === 1 && this.clipboard[0].data.type === 'folder'
&& this.clipboard.length === 1 },
&& this.clipboard[0].data.type === 'folder'
}
}, },
methods: { methods: {
toggleNavigationBars() { toggleNavigationBars() {
@@ -256,8 +278,7 @@
if (this.isNotHomepage) this.$router.back() if (this.isNotHomepage) this.$router.back()
}, },
showTeamFolderMenu() { showTeamFolderMenu() {
if (this.teamFolder) if (this.teamFolder) events.$emit('popover:open', 'team-folder')
events.$emit('popover:open', 'team-folder')
}, },
showCreateMenu() { showCreateMenu() {
events.$emit('popover:open', 'desktop-create') events.$emit('popover:open', 'desktop-create')
@@ -273,8 +294,8 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "resources/sass/vuefilemanager/_variables"; @import 'resources/sass/vuefilemanager/_variables';
@import "resources/sass/vuefilemanager/_mixins"; @import 'resources/sass/vuefilemanager/_mixins';
.is-inactive { .is-inactive {
opacity: 0.25; opacity: 0.25;
@@ -344,7 +365,6 @@
@media only screen and (max-width: 1024px) { @media only screen and (max-width: 1024px) {
.location { .location {
.location-title { .location-title {
max-width: 120px; max-width: 120px;
} }
@@ -360,7 +380,6 @@
} }
.dark { .dark {
.toolbar .directory-name { .toolbar .directory-name {
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
} }
resources/js/components/FilesView/DragUI.vue
+9 -19
View File
@@ -1,27 +1,19 @@
<template> <template>
<TitlePreview <TitlePreview icon="check-square" :title="title" :subtitle="subtitle" id="drag-ui" v-show="isVisible" />
icon="check-square"
:title="title"
:subtitle="subtitle"
id="drag-ui"
v-show="isVisible"
/>
</template> </template>
<script> <script>
import TitlePreview from "./TitlePreview"; import TitlePreview from './TitlePreview'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { events } from '../../bus' import { events } from '../../bus'
export default { export default {
name: 'DragUI', name: 'DragUI',
components: { components: {
TitlePreview TitlePreview,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['clipboard']),
'clipboard'
]),
title() { title() {
let filesLength = this.clipboard.length, let filesLength = this.clipboard.length,
hasDraggedItem = this.clipboard.includes(this.draggedItem) hasDraggedItem = this.clipboard.includes(this.draggedItem)
@@ -46,7 +38,6 @@ export default {
} }
if ((filesLength < 2 || !hasDraggedItem) && this.draggedItem) { if ((filesLength < 2 || !hasDraggedItem) && this.draggedItem) {
// Subtitle for single folder // Subtitle for single folder
if (this.draggedItem.data.type === 'folder') { if (this.draggedItem.data.type === 'folder') {
return this.draggedItem.items == 0 ? this.$t('folder.empty') : this.$tc('folder.item_counts', this.draggedItem.items) return this.draggedItem.items == 0 ? this.$t('folder.empty') : this.$tc('folder.item_counts', this.draggedItem.items)
@@ -57,16 +48,16 @@ export default {
return '.' + this.draggedItem.data.attributes.mimetype return '.' + this.draggedItem.data.attributes.mimetype
} }
} }
} },
}, },
data() { data() {
return { return {
isVisible: false, isVisible: false,
draggedItem: undefined draggedItem: undefined,
} }
}, },
created() { created() {
events.$on('dragstart', data => { events.$on('dragstart', (data) => {
this.draggedItem = data this.draggedItem = data
setTimeout(() => { setTimeout(() => {
@@ -74,8 +65,8 @@ export default {
}, 100) }, 100)
}) })
events.$on('drop', () => this.isVisible = false) events.$on('drop', () => (this.isVisible = false))
} },
} }
</script> </script>
@@ -100,5 +91,4 @@ export default {
background: $dark_mode_foreground; background: $dark_mode_foreground;
} }
} }
</style> </style>
resources/js/components/FilesView/EmptyFilePage.vue
+6 -11
View File
@@ -1,20 +1,19 @@
<template> <template>
<div class="flex items-center justify-center h-full" v-if="isLoading || isEmpty"> <div class="flex h-full items-center justify-center" v-if="isLoading || isEmpty">
<!--Show message for user--> <!--Show message for user-->
<div v-if="!isLoading" class="text-content text-center"> <div v-if="!isLoading" class="text-content text-center">
<slot></slot> <slot></slot>
</div> </div>
<!--Show spinner when loading content--> <!--Show spinner when loading content-->
<div v-else class="sm:relative fixed top-0 bottom-0"> <div v-else class="fixed top-0 bottom-0 sm:relative">
<Spinner /> <Spinner />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Spinner from "./Spinner"; import Spinner from './Spinner'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
@@ -23,14 +22,11 @@
Spinner, Spinner,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['isLoading', 'entries']),
'isLoading',
'entries',
]),
isEmpty() { isEmpty() {
return this.entries && this.entries.length === 0 return this.entries && this.entries.length === 0
} },
} },
} }
</script> </script>
@@ -53,7 +49,6 @@
} }
.dark { .dark {
.title { .title {
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
} }
resources/js/components/FilesView/FileActionsMobile.vue
+6 -9
View File
@@ -1,6 +1,5 @@
<template> <template>
<div class="sticky dark:bg-dark-background bg-white top-14 pb-3 px-4 z-20 whitespace-nowrap overflow-x-auto lg:hidden block"> <div class="sticky top-14 z-20 block overflow-x-auto whitespace-nowrap bg-white px-4 pb-3 dark:bg-dark-background lg:hidden">
<!--Show Buttons--> <!--Show Buttons-->
<div v-if="!isMultiSelectMode" class="mobile-actions"> <div v-if="!isMultiSelectMode" class="mobile-actions">
<slot></slot> <slot></slot>
@@ -25,9 +24,9 @@
</template> </template>
<script> <script>
import MobileActionButton from "./MobileActionButton"; import MobileActionButton from './MobileActionButton'
import UploadProgress from "./UploadProgress"; import UploadProgress from './UploadProgress'
import {mapGetters} from "vuex"; import { mapGetters } from 'vuex'
export default { export default {
name: 'FileActionsMobile', name: 'FileActionsMobile',
@@ -36,9 +35,7 @@
UploadProgress, UploadProgress,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['isMultiSelectMode']),
'isMultiSelectMode'
])
}, },
methods: { methods: {
selectAll() { selectAll() {
@@ -50,7 +47,7 @@
disableMultiSelectMode() { disableMultiSelectMode() {
this.$store.commit('TOGGLE_MULTISELECT_MODE') this.$store.commit('TOGGLE_MULTISELECT_MODE')
}, },
} },
} }
</script> </script>
resources/js/components/FilesView/FileBrowser.vue
+21 -24
View File
@@ -3,9 +3,9 @@
:class="{ :class="{
'user-dropping-file': isDragging, 'user-dropping-file': isDragging,
'grid-view': itemViewType === 'grid' && !isVisibleSidebar, 'grid-view': itemViewType === 'grid' && !isVisibleSidebar,
'grid-view-sidebar': itemViewType === 'grid' && isVisibleSidebar 'grid-view-sidebar': itemViewType === 'grid' && isVisibleSidebar,
}" }"
class="lg:w-full lg:overflow-y-auto lg:h-full lg:px-0 px-4" class="px-4 lg:h-full lg:w-full lg:overflow-y-auto lg:px-0"
@drop.stop.prevent="uploadDroppedItems($event)" @drop.stop.prevent="uploadDroppedItems($event)"
@keydown.delete="deleteItems" @keydown.delete="deleteItems"
@dragover="dragEnter" @dragover="dragEnter"
@@ -28,8 +28,8 @@
</template> </template>
<script> <script>
import ItemHandler from "./ItemHandler"; import ItemHandler from './ItemHandler'
import {events} from "../../bus"; import { events } from '../../bus'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
@@ -38,13 +38,7 @@
ItemHandler, ItemHandler,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['isVisibleSidebar', 'currentFolder', 'itemViewType', 'clipboard', 'entries']),
'isVisibleSidebar',
'currentFolder',
'itemViewType',
'clipboard',
'entries'
]),
draggedItems() { draggedItems() {
// Set opacity for dragged items // Set opacity for dragged items
if (!this.clipboard.includes(this.draggingId)) { if (!this.clipboard.includes(this.draggingId)) {
@@ -54,7 +48,7 @@
if (this.clipboard.includes(this.draggingId)) { if (this.clipboard.includes(this.draggingId)) {
return this.clipboard return this.clipboard
} }
} },
}, },
data() { data() {
return { return {
@@ -64,7 +58,7 @@
}, },
methods: { methods: {
deleteItems() { deleteItems() {
if (this.clipboard.length > 0 && this.$checkPermission('master') || this.$checkPermission('editor')) { if ((this.clipboard.length > 0 && this.$checkPermission('master')) || this.$checkPermission('editor')) {
this.$store.dispatch('deleteItem') this.$store.dispatch('deleteItem')
} }
}, },
@@ -81,7 +75,7 @@
}, },
dragStart(data) { dragStart(data) {
let img = document.createElement('img') let img = document.createElement('img')
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
event.dataTransfer.setDragImage(img, 0, 0) event.dataTransfer.setDragImage(img, 0, 0)
events.$emit('dragstart', data) events.$emit('dragstart', data)
@@ -92,26 +86,29 @@
// TODO: founded issue on firefox // TODO: founded issue on firefox
}, },
dragFinish(data, event) { dragFinish(data, event) {
if (event.dataTransfer.items.length === 0) { if (event.dataTransfer.items.length === 0) {
// Prevent to drop on file or image // Prevent to drop on file or image
if (data.data.type !== 'folder' || this.draggingId === data) return if (data.data.type !== 'folder' || this.draggingId === data) return
// Prevent move selected folder to folder if in between selected folders // Prevent move selected folder to folder if in between selected folders
if (this.clipboard.find(item => item === data && this.clipboard.length > 1)) return if (this.clipboard.find((item) => item === data && this.clipboard.length > 1)) return
// Move item if is not included in selected items // Move item if is not included in selected items
if (!this.clipboard.includes(this.draggingId)) { if (!this.clipboard.includes(this.draggingId)) {
this.$store.dispatch('moveItem', {to_item: data, noSelectedItem: this.draggingId}) this.$store.dispatch('moveItem', {
to_item: data,
noSelectedItem: this.draggingId,
})
} }
// Move selected items to folder // Move selected items to folder
if (this.clipboard.length > 0 && this.clipboard.includes(this.draggingId)) { if (this.clipboard.length > 0 && this.clipboard.includes(this.draggingId)) {
this.$store.dispatch('moveItem', {to_item: data, noSelectedItem: null}) this.$store.dispatch('moveItem', {
to_item: data,
noSelectedItem: null,
})
} }
} else { } else {
// Get id from current folder // Get id from current folder
const id = data.data.type !== 'folder' ? this.currentFolder.data.id : data.data.id const id = data.data.type !== 'folder' ? this.currentFolder.data.id : data.data.id
@@ -133,7 +130,7 @@
// Clear clipboard // Clear clipboard
this.$store.commit('CLIPBOARD_CLEAR') this.$store.commit('CLIPBOARD_CLEAR')
} },
}, },
created() { created() {
events.$on('drop', () => { events.$on('drop', () => {
@@ -143,16 +140,16 @@
this.draggingId = undefined this.draggingId = undefined
}, 10) }, 10)
}) })
} },
} }
</script> </script>
<style> <style>
.grid-view { .grid-view {
@apply grid content-start xl:grid-cols-6 sm:grid-cols-4 grid-cols-3 xl:gap-4 lg:gap-2 @apply grid grid-cols-3 content-start sm:grid-cols-4 lg:gap-2 xl:grid-cols-6 xl:gap-4;
} }
.grid-view-sidebar { .grid-view-sidebar {
@apply grid content-start 2xl:grid-cols-5 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-3 xl:gap-4 lg:gap-2 @apply grid grid-cols-3 content-start md:grid-cols-2 lg:grid-cols-3 lg:gap-2 xl:grid-cols-4 xl:gap-4 2xl:grid-cols-5;
} }
</style> </style>
resources/js/components/FilesView/FileFilterMobile.vue
+9 -3
View File
@@ -9,14 +9,20 @@
</OptionGroup> </OptionGroup>
<OptionGroup> <OptionGroup>
<Option @click.native="goToTeamFolders" :title="$t('Team Folders')" icon="users" :is-active="$isThisRoute($route, 'TeamFolders')" :is-hover-disabled="true" /> <Option @click.native="goToTeamFolders" :title="$t('Team Folders')" icon="users" :is-active="$isThisRoute($route, 'TeamFolders')" :is-hover-disabled="true" />
<Option @click.native="goToSharedWithMe" :title="$t('Shared with Me')" icon="user-check" :is-active="$isThisRoute($route, 'SharedWithMe')" :is-hover-disabled="true" /> <Option
@click.native="goToSharedWithMe"
:title="$t('Shared with Me')"
icon="user-check"
:is-active="$isThisRoute($route, 'SharedWithMe')"
:is-hover-disabled="true"
/>
</OptionGroup> </OptionGroup>
</MenuMobileGroup> </MenuMobileGroup>
</MenuMobile> </MenuMobile>
</template> </template>
<script> <script>
import MenuMobileGroup from "../Mobile/MenuMobileGroup"; import MenuMobileGroup from '../Mobile/MenuMobileGroup'
import OptionGroup from '../FilesView/OptionGroup' import OptionGroup from '../FilesView/OptionGroup'
import MenuMobile from '../Mobile/MenuMobile' import MenuMobile from '../Mobile/MenuMobile'
import Option from '../FilesView/Option' import Option from '../FilesView/Option'
@@ -49,6 +55,6 @@ export default {
goToSharedWithMe() { goToSharedWithMe() {
this.$router.push({ name: 'SharedWithMe' }) this.$router.push({ name: 'SharedWithMe' })
}, },
} },
} }
</script> </script>
resources/js/components/FilesView/FileIconThumbnail.vue
+4 -5
View File
@@ -1,6 +1,6 @@
<template> <template>
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<span class="text-theme dark-text-theme lg:text-xs text-tiny font-semibold absolute z-10 inline-block mx-auto mt-1 w-7 text-ellipsis overflow-hidden text-center"> <span class="text-theme dark-text-theme absolute z-10 mx-auto mt-1 inline-block w-7 overflow-hidden text-ellipsis text-center text-tiny font-semibold lg:text-xs">
{{ entry.data.attributes.mimetype }} {{ entry.data.attributes.mimetype }}
</span> </span>
@@ -8,7 +8,8 @@
<path <path
stroke-width="0" stroke-width="0"
fill="#f4f5f6" fill="#f4f5f6"
d="M22.1666667,13.546875 L22.1666667,0 L2.375,0 C1.05885417,0 0,1.06582031 0,2.390625 L0,48.609375 C0,49.9341797 1.05885417,51 2.375,51 L35.625,51 C36.9411458,51 38,49.9341797 38,48.609375 L38,15.9375 L24.5416667,15.9375 C23.2354167,15.9375 22.1666667,14.8617187 22.1666667,13.546875 Z M38,12.1423828 L38,12.75 L25.3333333,12.75 L25.3333333,0 L25.9369792,0 C26.5703125,0 27.1739583,0.249023438 27.6192708,0.697265625 L37.3072917,10.4589844 C37.7526042,10.9072266 38,11.5148437 38,12.1423828 Z"></path> d="M22.1666667,13.546875 L22.1666667,0 L2.375,0 C1.05885417,0 0,1.06582031 0,2.390625 L0,48.609375 C0,49.9341797 1.05885417,51 2.375,51 L35.625,51 C36.9411458,51 38,49.9341797 38,48.609375 L38,15.9375 L24.5416667,15.9375 C23.2354167,15.9375 22.1666667,14.8617187 22.1666667,13.546875 Z M38,12.1423828 L38,12.75 L25.3333333,12.75 L25.3333333,0 L25.9369792,0 C26.5703125,0 27.1739583,0.249023438 27.6192708,0.697265625 L37.3072917,10.4589844 C37.7526042,10.9072266 38,11.5148437 38,12.1423828 Z"
></path>
</svg> </svg>
</div> </div>
</template> </template>
@@ -16,8 +17,6 @@
<script> <script>
export default { export default {
name: 'FileIconThumbnail', name: 'FileIconThumbnail',
props: [ props: ['entry'],
'entry'
]
} }
</script> </script>
resources/js/components/FilesView/FileSortingMobile.vue
+2 -2
View File
@@ -7,8 +7,8 @@
</template> </template>
<script> <script>
import FileSortingOptions from "./FileSortingOptions"; import FileSortingOptions from './FileSortingOptions'
import MenuMobileGroup from "../Mobile/MenuMobileGroup"; import MenuMobileGroup from '../Mobile/MenuMobileGroup'
import MenuMobile from '../Mobile/MenuMobile' import MenuMobile from '../Mobile/MenuMobile'
export default { export default {
resources/js/components/FilesView/FileSortingOptions.vue
+18 -19
View File
@@ -12,8 +12,7 @@
</template> </template>
<script> <script>
import OptionGroup from './OptionGroup'
import OptionGroup from "./OptionGroup";
import Option from './Option' import Option from './Option'
import { ArrowUpIcon } from 'vue-feather-icons' import { ArrowUpIcon } from 'vue-feather-icons'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
@@ -26,9 +25,7 @@ export default {
Option, Option,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['itemViewType']),
'itemViewType'
]),
isGrid() { isGrid() {
return this.itemViewType === 'grid' return this.itemViewType === 'grid'
}, },
@@ -36,24 +33,22 @@ export default {
return this.itemViewType === 'list' return this.itemViewType === 'list'
}, },
arrowForCreatedAtField() { arrowForCreatedAtField() {
if (this.filter.field !== 'created_at') if (this.filter.field !== 'created_at') return undefined
return undefined
return this.filter.sort === 'DESC' ? 'up' : 'down' return this.filter.sort === 'DESC' ? 'up' : 'down'
}, },
arrowForNameField() { arrowForNameField() {
if (this.filter.field !== 'name') if (this.filter.field !== 'name') return undefined
return undefined
return this.filter.sort === 'DESC' ? 'up' : 'down' return this.filter.sort === 'DESC' ? 'up' : 'down'
} },
}, },
data() { data() {
return { return {
filter: { filter: {
sort: 'DESC', sort: 'DESC',
field: undefined field: undefined,
} },
} }
}, },
methods: { methods: {
@@ -61,13 +56,17 @@ export default {
this.filter.field = field this.filter.field = field
// Set sorting direction // Set sorting direction
if (this.filter.sort === 'DESC') if (this.filter.sort === 'DESC') this.filter.sort = 'ASC'
this.filter.sort = 'ASC' else if (this.filter.sort === 'ASC') this.filter.sort = 'DESC'
else if (this.filter.sort === 'ASC')
this.filter.sort = 'DESC'
// Save to localStorage sorting options // Save to localStorage sorting options
localStorage.setItem('sorting', JSON.stringify({ sort: this.filter.sort, field: this.filter.field })) localStorage.setItem(
'sorting',
JSON.stringify({
sort: this.filter.sort,
field: this.filter.field,
})
)
// Update sorting state in vuex // Update sorting state in vuex
this.$store.commit('UPDATE_SORTING') this.$store.commit('UPDATE_SORTING')
@@ -82,7 +81,7 @@ export default {
}, },
changePreview(previewType) { changePreview(previewType) {
this.$store.dispatch('togglePreviewType', previewType) this.$store.dispatch('togglePreviewType', previewType)
} },
}, },
mounted() { mounted() {
let sorting = JSON.parse(localStorage.getItem('sorting')) let sorting = JSON.parse(localStorage.getItem('sorting'))
@@ -90,6 +89,6 @@ export default {
// Set default sorting if in not setup in LocalStorage // Set default sorting if in not setup in LocalStorage
this.filter.sort = sorting ? sorting.sort : 'DESC' this.filter.sort = sorting ? sorting.sort : 'DESC'
this.filter.field = sorting ? sorting.field : 'created_at' this.filter.field = sorting ? sorting.field : 'created_at'
} },
} }
</script> </script>
resources/js/components/FilesView/FolderIcon.vue
+5 -12
View File
@@ -1,24 +1,17 @@
<template> <template>
<div> <div>
<VueFolderIcon <VueFolderIcon v-if="!item.data.attributes.isTeamFolder" />
v-if="!item.data.attributes.isTeamFolder" <VueFolderTeamIcon v-if="item.data.attributes.isTeamFolder" style="width: 53px; height: 52px" />
/>
<VueFolderTeamIcon
v-if="item.data.attributes.isTeamFolder"
style="width: 53px; height: 52px"
/>
</div> </div>
</template> </template>
<script> <script>
import VueFolderTeamIcon from "./Icons/VueFolderTeamIcon" import VueFolderTeamIcon from './Icons/VueFolderTeamIcon'
import VueFolderIcon from "./Icons/VueFolderIcon" import VueFolderIcon from './Icons/VueFolderIcon'
export default { export default {
name: 'FolderIcon', name: 'FolderIcon',
props: [ props: ['item'],
'item',
],
components: { components: {
VueFolderTeamIcon, VueFolderTeamIcon,
VueFolderIcon, VueFolderIcon,
resources/js/components/FilesView/Icons/AlphabetIcon.vue
+19 -5
View File
@@ -1,5 +1,19 @@
<template> <template>
<svg class="alphabet-icon" fill="none" stroke="currentColor" stroke-width="2" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" :width="`${size}px`" :height="`${size}px`" viewBox="-2 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg
class="alphabet-icon"
fill="none"
stroke="currentColor"
stroke-width="2"
fill-rule="evenodd"
stroke-linecap="round"
stroke-linejoin="round"
:width="`${size}px`"
:height="`${size}px`"
viewBox="-2 0 15 15"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<polyline id="Path" points="11.1999993 13.1999991 5.59999967 0.199999094 0 13.1999991 5.59999967 0.199999094"></polyline> <polyline id="Path" points="11.1999993 13.1999991 5.59999967 0.199999094 0 13.1999991 5.59999967 0.199999094"></polyline>
<line x1="2.25" y1="8" x2="8.75" y2="8" id="Line-2"></line> <line x1="2.25" y1="8" x2="8.75" y2="8" id="Line-2"></line>
</svg> </svg>
@@ -7,15 +21,15 @@
<script> <script>
export default { export default {
props: ['size'] props: ['size'],
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.alphabet-icon { .alphabet-icon {
polyline,
polyline, line, g { line,
g {
color: inherit; color: inherit;
} }
} }
resources/js/components/FilesView/Icons/CloudPlusIcon.vue
+23 -7
View File
@@ -1,6 +1,23 @@
<template> <template>
<svg class="preview-list-icon" fill="none" stroke="currentColor" stroke-width="1.5" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" width="15px" height="15px" viewBox="0 0 17 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg
<path d="M14.2729998,10.7729998 C15.6774712,10.0073227 16.384111,8.38688297 15.9895447,6.83668332 C15.5949785,5.28648367 14.1996249,4.20105605 12.5999998,4.19999993 L11.7179998,4.19999993 C11.1377566,1.9556703 9.23470173,0.300843012 6.93154234,0.0378706728 C4.62838295,-0.225101666 2.40127934,0.958148431 1.33005562,3.01391529 C0.258831904,5.06968215 0.564955244,7.57295196 2.09999996,9.30999984" id="Path"></path> class="preview-list-icon"
fill="none"
stroke="currentColor"
stroke-width="1.5"
fill-rule="evenodd"
stroke-linecap="round"
stroke-linejoin="round"
width="15px"
height="15px"
viewBox="0 0 17 12"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
d="M14.2729998,10.7729998 C15.6774712,10.0073227 16.384111,8.38688297 15.9895447,6.83668332 C15.5949785,5.28648367 14.1996249,4.20105605 12.5999998,4.19999993 L11.7179998,4.19999993 C11.1377566,1.9556703 9.23470173,0.300843012 6.93154234,0.0378706728 C4.62838295,-0.225101666 2.40127934,0.958148431 1.33005562,3.01391529 C0.258831904,5.06968215 0.564955244,7.57295196 2.09999996,9.30999984"
id="Path"
></path>
<line x1="8.5" y1="7" x2="8.5" y2="12" id="Path"></line> <line x1="8.5" y1="7" x2="8.5" y2="12" id="Path"></line>
<line x1="6" y1="9.5" x2="11" y2="9.5" id="Path"></line> <line x1="6" y1="9.5" x2="11" y2="9.5" id="Path"></line>
</svg> </svg>
@@ -8,15 +25,14 @@
<script> <script>
export default { export default {
name: "CloudPlusIcon", name: 'CloudPlusIcon',
}; }
</script> </script>
<style lang="scss"> <style lang="scss">
.preview-list-icon { .preview-list-icon {
path,
path, line { line {
color: inherit; color: inherit;
} }
} }
resources/js/components/FilesView/Icons/FolderUploadIcon.vue
+20 -5
View File
@@ -1,6 +1,23 @@
<template> <template>
<svg class="preview-list-icon" fill="none" stroke="currentColor" stroke-width="1.5" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" :width="`${size}px`" :height="`${size}px`" viewBox="0 -2 14 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg
<path d="M0,10.6420028 C0,8.60583431 0,5.5515816 0,1.47924466 C0,0.662280392 0.633305625,0 1.4145277,0 L4.95084696,0 L6.36537467,2.21886699 L12.7307493,2.21886699 C13.5119714,2.21886699 14.145277,2.88114738 14.145277,3.69811164 C14.145277,7.76603445 14.145277,7.76603445 14.145277,11.8339573 C14.145277,12.6509215 13.5119714,13.3132019 12.7307493,13.3132019 C11.9928651,13.3132019 12.1671651,13.3132019 11.798223,13.3132019" id="Path"></path> class="preview-list-icon"
fill="none"
stroke="currentColor"
stroke-width="1.5"
fill-rule="evenodd"
stroke-linecap="round"
stroke-linejoin="round"
:width="`${size}px`"
:height="`${size}px`"
viewBox="0 -2 14 17"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<path
d="M0,10.6420028 C0,8.60583431 0,5.5515816 0,1.47924466 C0,0.662280392 0.633305625,0 1.4145277,0 L4.95084696,0 L6.36537467,2.21886699 L12.7307493,2.21886699 C13.5119714,2.21886699 14.145277,2.88114738 14.145277,3.69811164 C14.145277,7.76603445 14.145277,7.76603445 14.145277,11.8339573 C14.145277,12.6509215 13.5119714,13.3132019 12.7307493,13.3132019 C11.9928651,13.3132019 12.1671651,13.3132019 11.798223,13.3132019"
id="Path"
></path>
<polyline id="Path-Copy-8" points="9.49893123 9.53496452 6.74946561 6.60112928 4 9.53496452"></polyline> <polyline id="Path-Copy-8" points="9.49893123 9.53496452 6.74946561 6.60112928 4 9.53496452"></polyline>
<line x1="6.74946561" y1="6.60112928" x2="6.74946561" y2="13.2022586" id="Path-Copy-7"></line> <line x1="6.74946561" y1="6.60112928" x2="6.74946561" y2="13.2022586" id="Path-Copy-7"></line>
</svg> </svg>
@@ -8,14 +25,12 @@
<script> <script>
export default { export default {
props: ['size'] props: ['size'],
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.preview-list-icon { .preview-list-icon {
path, path,
line, line,
polyline { polyline {
resources/js/components/FilesView/Icons/SortingIcon.vue
+19 -6
View File
@@ -1,5 +1,19 @@
<template> <template>
<svg class="preview-list-icon" fill="none" stroke="currentColor" stroke-width="1.5" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" width="15px" height="15px" viewBox="0 0 20 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg
class="preview-list-icon"
fill="none"
stroke="currentColor"
stroke-width="1.5"
fill-rule="evenodd"
stroke-linecap="round"
stroke-linejoin="round"
width="15px"
height="15px"
viewBox="0 0 20 16"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<rect x="9.77777778" y="0" width="6.22222222" height="6.22222222"></rect> <rect x="9.77777778" y="0" width="6.22222222" height="6.22222222"></rect>
<rect x="9.77777778" y="9.77777778" width="6.22222222" height="6.22222222"></rect> <rect x="9.77777778" y="9.77777778" width="6.22222222" height="6.22222222"></rect>
<line x1="0" y1="2" x2="6" y2="2"></line> <line x1="0" y1="2" x2="6" y2="2"></line>
@@ -10,15 +24,14 @@
<script> <script>
export default { export default {
name: "SortingIcon", name: 'SortingIcon',
}; }
</script> </script>
<style lang="scss"> <style lang="scss">
.preview-list-icon { .preview-list-icon {
rect,
rect, line { line {
color: inherit; color: inherit;
} }
} }
resources/js/components/FilesView/Icons/VueFolderIcon.vue
+12 -12
View File
@@ -1,24 +1,24 @@
<template> <template>
<svg width="53px" height="52px" viewBox="0 0 53 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg width="53px" height="52px" viewBox="0 0 53 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M48.03125,6.5 L29.790833,6.5 C28.7431613,6.5 27.7373076,6.08896217 26.9894703,5.35523504 L22.6980297,1.14476496 C21.9501924,0.41103783 20.9443387,-6.36543387e-16 19.896667,0 L4.96875,0 L4.96875,0 C2.22455078,0 0,2.18257812 0,4.875 L0,34.125 C0,36.8174219 2.22455078,39 4.96875,39 L48.03125,39 C50.7754492,39 53,36.8174219 53,34.125 L53,11.375 C53,8.68257813 50.7754492,6.5 48.03125,6.5 Z" <path
d="M48.03125,6.5 L29.790833,6.5 C28.7431613,6.5 27.7373076,6.08896217 26.9894703,5.35523504 L22.6980297,1.14476496 C21.9501924,0.41103783 20.9443387,-6.36543387e-16 19.896667,0 L4.96875,0 L4.96875,0 C2.22455078,0 0,2.18257812 0,4.875 L0,34.125 C0,36.8174219 2.22455078,39 4.96875,39 L48.03125,39 C50.7754492,39 53,36.8174219 53,34.125 L53,11.375 C53,8.68257813 50.7754492,6.5 48.03125,6.5 Z"
class="svg-color-theme" class="svg-color-theme"
stroke="none" stroke="none"
stroke-width="0"> stroke-width="0"
></path>
</path> <path
<path d="M48.03125,6.5 L29.790833,6.5 C28.7431613,6.5 27.7373076,6.08896217 26.9894703,5.35523504 L22.6980297,1.14476496 C21.9501924,0.41103783 20.9443387,-6.36543387e-16 19.896667,0 L4.96875,0 L4.96875,0 C2.22455078,0 0,2.18257812 0,4.875 L0,34.125 C0,36.8174219 2.22455078,39 4.96875,39 L48.03125,39 C50.7754492,39 53,36.8174219 53,34.125 L53,11.375 C53,8.68257813 50.7754492,6.5 48.03125,6.5 Z" d="M48.03125,6.5 L29.790833,6.5 C28.7431613,6.5 27.7373076,6.08896217 26.9894703,5.35523504 L22.6980297,1.14476496 C21.9501924,0.41103783 20.9443387,-6.36543387e-16 19.896667,0 L4.96875,0 L4.96875,0 C2.22455078,0 0,2.18257812 0,4.875 L0,34.125 C0,36.8174219 2.22455078,39 4.96875,39 L48.03125,39 C50.7754492,39 53,36.8174219 53,34.125 L53,11.375 C53,8.68257813 50.7754492,6.5 48.03125,6.5 Z"
fill="black" fill="black"
fill-opacity="0.2" fill-opacity="0.2"
stroke="none" stroke="none"
stroke-width="0"> stroke-width="0"
></path>
</path> <path
<path d="M48.03125,12.75 C49.0609313,12.75 49.9941504,13.1577174 50.6692739,13.8201027 C51.3356976,14.4739525 51.75,15.3766531 51.75,16.375 L51.75,16.375 L51.75,34.125 C51.75,35.1233469 51.3356976,36.0260475 50.6692739,36.6798973 C49.9941504,37.3422826 49.0609313,37.75 48.03125,37.75 L48.03125,37.75 L4.96875,37.75 C3.93906868,37.75 3.00584961,37.3422826 2.33072613,36.6798973 C1.66430239,36.0260475 1.25,35.1233469 1.25,34.125 L1.25,34.125 L1.25,16.375 C1.25,15.3766531 1.66430239,14.4739525 2.33072613,13.8201027 C3.00584961,13.1577174 3.93906868,12.75 4.96875,12.75 L4.96875,12.75 Z" d="M48.03125,12.75 C49.0609313,12.75 49.9941504,13.1577174 50.6692739,13.8201027 C51.3356976,14.4739525 51.75,15.3766531 51.75,16.375 L51.75,16.375 L51.75,34.125 C51.75,35.1233469 51.3356976,36.0260475 50.6692739,36.6798973 C49.9941504,37.3422826 49.0609313,37.75 48.03125,37.75 L48.03125,37.75 L4.96875,37.75 C3.93906868,37.75 3.00584961,37.3422826 2.33072613,36.6798973 C1.66430239,36.0260475 1.25,35.1233469 1.25,34.125 L1.25,34.125 L1.25,16.375 C1.25,15.3766531 1.66430239,14.4739525 2.33072613,13.8201027 C3.00584961,13.1577174 3.93906868,12.75 4.96875,12.75 L4.96875,12.75 Z"
stroke-width="2" stroke-width="2"
class="svg-color-theme" class="svg-color-theme"
fill="green"> fill="green"
></path>
</path>
</svg> </svg>
</template> </template>
resources/js/components/FilesView/Icons/VueFolderTeamIcon.vue
+28 -16
View File
@@ -1,32 +1,44 @@
<template> <template>
<svg viewBox="0 0 53 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <svg viewBox="0 0 53 39" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="V2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="V2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="team-folder"> <g id="team-folder">
<path d="M48.03125,6.5 L29.790833,6.5 C28.7431613,6.5 27.7373076,6.08896217 26.9894703,5.35523504 L22.6980297,1.14476496 C21.9501924,0.41103783 20.9443387,-6.36543387e-16 19.896667,0 L4.96875,0 L4.96875,0 C2.22455078,0 0,2.18257812 0,4.875 L0,34.125 C0,36.8174219 2.22455078,39 4.96875,39 L48.03125,39 C50.7754492,39 53,36.8174219 53,34.125 L53,11.375 C53,8.68257813 50.7754492,6.5 48.03125,6.5 Z" <path
d="M48.03125,6.5 L29.790833,6.5 C28.7431613,6.5 27.7373076,6.08896217 26.9894703,5.35523504 L22.6980297,1.14476496 C21.9501924,0.41103783 20.9443387,-6.36543387e-16 19.896667,0 L4.96875,0 L4.96875,0 C2.22455078,0 0,2.18257812 0,4.875 L0,34.125 C0,36.8174219 2.22455078,39 4.96875,39 L48.03125,39 C50.7754492,39 53,36.8174219 53,34.125 L53,11.375 C53,8.68257813 50.7754492,6.5 48.03125,6.5 Z"
class="svg-color-theme" class="svg-color-theme"
stroke="none" stroke="none"
stroke-width="0"> stroke-width="0"
></path>
</path> <path
<path d="M48.03125,6.5 L29.790833,6.5 C28.7431613,6.5 27.7373076,6.08896217 26.9894703,5.35523504 L22.6980297,1.14476496 C21.9501924,0.41103783 20.9443387,-6.36543387e-16 19.896667,0 L4.96875,0 L4.96875,0 C2.22455078,0 0,2.18257812 0,4.875 L0,34.125 C0,36.8174219 2.22455078,39 4.96875,39 L48.03125,39 C50.7754492,39 53,36.8174219 53,34.125 L53,11.375 C53,8.68257813 50.7754492,6.5 48.03125,6.5 Z" d="M48.03125,6.5 L29.790833,6.5 C28.7431613,6.5 27.7373076,6.08896217 26.9894703,5.35523504 L22.6980297,1.14476496 C21.9501924,0.41103783 20.9443387,-6.36543387e-16 19.896667,0 L4.96875,0 L4.96875,0 C2.22455078,0 0,2.18257812 0,4.875 L0,34.125 C0,36.8174219 2.22455078,39 4.96875,39 L48.03125,39 C50.7754492,39 53,36.8174219 53,34.125 L53,11.375 C53,8.68257813 50.7754492,6.5 48.03125,6.5 Z"
fill="black" fill="black"
fill-opacity="0.2" fill-opacity="0.2"
stroke="none" stroke="none"
stroke-width="0"> stroke-width="0"
></path>
</path> <path
<path d="M48.03125,12.75 C49.0609313,12.75 49.9941504,13.1577174 50.6692739,13.8201027 C51.3356976,14.4739525 51.75,15.3766531 51.75,16.375 L51.75,16.375 L51.75,34.125 C51.75,35.1233469 51.3356976,36.0260475 50.6692739,36.6798973 C49.9941504,37.3422826 49.0609313,37.75 48.03125,37.75 L48.03125,37.75 L4.96875,37.75 C3.93906868,37.75 3.00584961,37.3422826 2.33072613,36.6798973 C1.66430239,36.0260475 1.25,35.1233469 1.25,34.125 L1.25,34.125 L1.25,16.375 C1.25,15.3766531 1.66430239,14.4739525 2.33072613,13.8201027 C3.00584961,13.1577174 3.93906868,12.75 4.96875,12.75 L4.96875,12.75 Z" d="M48.03125,12.75 C49.0609313,12.75 49.9941504,13.1577174 50.6692739,13.8201027 C51.3356976,14.4739525 51.75,15.3766531 51.75,16.375 L51.75,16.375 L51.75,34.125 C51.75,35.1233469 51.3356976,36.0260475 50.6692739,36.6798973 C49.9941504,37.3422826 49.0609313,37.75 48.03125,37.75 L48.03125,37.75 L4.96875,37.75 C3.93906868,37.75 3.00584961,37.3422826 2.33072613,36.6798973 C1.66430239,36.0260475 1.25,35.1233469 1.25,34.125 L1.25,34.125 L1.25,16.375 C1.25,15.3766531 1.66430239,14.4739525 2.33072613,13.8201027 C3.00584961,13.1577174 3.93906868,12.75 4.96875,12.75 L4.96875,12.75 Z"
stroke-width="2" stroke-width="2"
class="svg-color-theme" class="svg-color-theme"
fill="green"> fill="green"
></path>
</path> <g
<g id="Icon" transform="translate(8.000000, 20.000000)" class="svg-stroke-theme-darken" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3" stroke="black" stroke-opacity="0.25"> id="Icon"
<path d="M9.59999943,10.7999994 L9.59999943,9.59999943 C9.59999943,8.27451611 8.52548289,7.19999957 7.19999957,7.19999957 L2.39999986,7.19999957 C1.07451654,7.19999957 0,8.27451611 0,9.59999943 L0,10.7999994"></path> transform="translate(8.000000, 20.000000)"
class="svg-stroke-theme-darken"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.3"
stroke="black"
stroke-opacity="0.25"
>
<path
d="M9.59999943,10.7999994 L9.59999943,9.59999943 C9.59999943,8.27451611 8.52548289,7.19999957 7.19999957,7.19999957 L2.39999986,7.19999957 C1.07451654,7.19999957 0,8.27451611 0,9.59999943 L0,10.7999994"
></path>
<circle cx="4.79999971" cy="2.39999986" r="2.39999986"></circle> <circle cx="4.79999971" cy="2.39999986" r="2.39999986"></circle>
<path d="M13.1999992,10.7999994 L13.1999992,9.59999943 C13.1991834,8.50627014 12.4589985,7.55143166 11.3999993,7.27799957"></path> <path d="M13.1999992,10.7999994 L13.1999992,9.59999943 C13.1991834,8.50627014 12.4589985,7.55143166 11.3999993,7.27799957"></path>
<path d="M8.99999946,0.0779999954 C10.0619483,0.349901852 10.8047053,1.30679461 10.8047053,2.40299986 C10.8047053,3.4992051 10.0619483,4.45609786 8.99999946,4.72799972"></path> <path
d="M8.99999946,0.0779999954 C10.0619483,0.349901852 10.8047053,1.30679461 10.8047053,2.40299986 C10.8047053,3.4992051 10.0619483,4.45609786 8.99999946,4.72799972"
></path>
</g> </g>
</g> </g>
</g> </g>
resources/js/components/FilesView/ImageMetaData.vue
+6 -6
View File
@@ -96,14 +96,13 @@ export default {
formatGps(location, ref) { formatGps(location, ref) {
let data = [] let data = []
location.forEach(location => { location.forEach((location) => {
data.push(split(location, '/', 2)[0]) data.push(split(location, '/', 2)[0])
}) })
return `${data[0]}° ${data[1]}' ${data[2].substr(0, 4) / 100}" ${ref} ` return `${data[0]}° ${data[1]}' ${data[2].substr(0, 4) / 100}" ${ref} `
}
}, },
},
} }
</script> </script>
@@ -122,7 +121,8 @@ export default {
padding: 9px 0; padding: 9px 0;
border-bottom: 1px solid $light_mode_border; border-bottom: 1px solid $light_mode_border;
b, span { b,
span {
@include font-size(14); @include font-size(14);
color: $text; color: $text;
} }
@@ -130,12 +130,12 @@ export default {
} }
.dark { .dark {
.meta-data-list { .meta-data-list {
li { li {
border-color: $dark_mode_border_color; border-color: $dark_mode_border_color;
b, span { b,
span {
color: $dark_mode_text_primary !important; color: $dark_mode_text_primary !important;
} }
} }
resources/js/components/FilesView/InfoSidebar.vue
+34 -63
View File
@@ -1,10 +1,10 @@
<template> <template>
<div class="2xl:w-104 w-96 px-2.5 overflow-y-auto overflow-x-hidden h-screen lg:block hidden"> <div class="hidden h-screen w-96 overflow-y-auto overflow-x-hidden px-2.5 lg:block 2xl:w-104">
<!--Is empty clipboard--> <!--Is empty clipboard-->
<div v-if="isEmpty" class="flex items-center justify-center h-full"> <div v-if="isEmpty" class="flex h-full items-center justify-center">
<div class="text-center"> <div class="text-center">
<eye-off-icon size="28" class="vue-feather text-gray-400 inline-block mb-3" /> <eye-off-icon size="28" class="vue-feather mb-3 inline-block text-gray-400" />
<small class="text-sm block text-gray-400"> <small class="block text-sm text-gray-400">
{{ $t('messages.nothing_to_preview') }} {{ $t('messages.nothing_to_preview') }}
</small> </small>
</div> </div>
@@ -23,33 +23,18 @@
<div v-if="isSingleFile && !isEmpty"> <div v-if="isSingleFile && !isEmpty">
<FilePreviewDetail /> <FilePreviewDetail />
<TitlePreview <TitlePreview class="mb-6" :icon="clipboard[0].data.type" :title="clipboard[0].data.attributes.name" :subtitle="clipboard[0].data.attributes.mimetype" />
class="mb-6"
:icon="clipboard[0].data.type"
:title="clipboard[0].data.attributes.name"
:subtitle="clipboard[0].data.attributes.mimetype"
/>
<!--Filesize--> <!--Filesize-->
<ListInfoItem <ListInfoItem v-if="singleFile.data.attributes.filesize" :title="$t('file_detail.size')" :content="singleFile.data.attributes.filesize" />
v-if="singleFile.data.attributes.filesize"
:title="$t('file_detail.size')"
:content="singleFile.data.attributes.filesize"
/>
<!--Created At--> <!--Created At-->
<ListInfoItem <ListInfoItem :title="$t('file_detail.created_at')" :content="singleFile.data.attributes.created_at" />
:title="$t('file_detail.created_at')"
:content="singleFile.data.attributes.created_at"
/>
<!--Location--> <!--Location-->
<ListInfoItem <ListInfoItem v-if="$checkPermission(['master'])" :title="$t('file_detail.where')">
v-if="$checkPermission(['master'])" <div @click="$moveFileOrFolder(singleFile)" class="flex cursor-pointer items-center">
:title="$t('file_detail.where')" <span class="inline-block text-sm font-bold">
>
<div @click="$moveFileOrFolder(singleFile)" class="flex items-center cursor-pointer">
<span class="inline-block font-bold text-sm">
{{ singleFile.data.relationships.parent ? singleFile.data.relationships.parent.data.attributes.name : $t('locations.home') }} {{ singleFile.data.relationships.parent ? singleFile.data.relationships.parent.data.attributes.name : $t('locations.home') }}
</span> </span>
<Edit2Icon size="10" class="ml-2" /> <Edit2Icon size="10" class="ml-2" />
@@ -57,28 +42,22 @@
</ListInfoItem> </ListInfoItem>
<!--Team--> <!--Team-->
<ListInfoItem <ListInfoItem v-if="singleFile.data.attributes.isTeamFolder" :title="$t('Shared with the Team')">
v-if="singleFile.data.attributes.isTeamFolder" <div class="flex cursor-pointer items-center" @click="$updateTeamFolder(singleFile)">
:title="$t('Shared with the Team')"
>
<div class="flex items-center cursor-pointer" @click="$updateTeamFolder(singleFile)">
<TeamMembersPreview :folder="singleFile" :avatar-size="32" /> <TeamMembersPreview :folder="singleFile" :avatar-size="32" />
<Edit2Icon size="10" class="ml-2" /> <Edit2Icon size="10" class="ml-2" />
</div> </div>
</ListInfoItem> </ListInfoItem>
<!--Shared--> <!--Shared-->
<ListInfoItem <ListInfoItem v-if="$checkPermission('master') && singleFile.data.relationships.shared" :title="$t('file_detail.shared')">
v-if="$checkPermission('master') && singleFile.data.relationships.shared" <div @click="$shareFileOrFolder(singleFile)" class="mb-2 flex cursor-pointer items-center">
:title="$t('file_detail.shared')" <span class="inline-block text-sm font-bold">
>
<div @click="$shareFileOrFolder(singleFile)" class="flex items-center cursor-pointer mb-2">
<span class="inline-block font-bold text-sm">
{{ sharedInfo }} {{ sharedInfo }}
</span> </span>
<Edit2Icon size="10" class="ml-2" /> <Edit2Icon size="10" class="ml-2" />
</div> </div>
<div class="flex items-center w-full"> <div class="flex w-full items-center">
<lock-icon v-if="isLocked" @click="$shareFileOrFolder(singleFile)" size="17" class="hover-text-theme vue-feather cursor-pointer" /> <lock-icon v-if="isLocked" @click="$shareFileOrFolder(singleFile)" size="17" class="hover-text-theme vue-feather cursor-pointer" />
<unlock-icon v-if="!isLocked" @click="$shareFileOrFolder(singleFile)" size="17" class="hover-text-theme vue-feather cursor-pointer" /> <unlock-icon v-if="!isLocked" @click="$shareFileOrFolder(singleFile)" size="17" class="hover-text-theme vue-feather cursor-pointer" />
<CopyShareLink :item="singleFile" size="small" class="w-full pl-2.5" /> <CopyShareLink :item="singleFile" size="small" class="w-full pl-2.5" />
@@ -86,23 +65,17 @@
</ListInfoItem> </ListInfoItem>
<!--Author--> <!--Author-->
<ListInfoItem <ListInfoItem v-if="canShowAuthor" :title="$t('Author')">
v-if="canShowAuthor" <div class="mt-1.5 flex items-center">
:title="$t('Author')"
>
<div class="flex items-center mt-1.5">
<MemberAvatar :size="32" :member="singleFile.data.relationships.owner" /> <MemberAvatar :size="32" :member="singleFile.data.relationships.owner" />
<span class="ml-3 block font-bold font-sm"> <span class="font-sm ml-3 block font-bold">
{{ singleFile.data.relationships.owner.data.attributes.name }} {{ singleFile.data.relationships.owner.data.attributes.name }}
</span> </span>
</div> </div>
</ListInfoItem> </ListInfoItem>
<!--Metadata--> <!--Metadata-->
<ListInfoItem <ListInfoItem v-if="canShowMetaData" :title="$t('file_detail_meta.meta_data')">
v-if="canShowMetaData"
:title="$t('file_detail_meta.meta_data')"
>
<ImageMetaData /> <ImageMetaData />
</ListInfoItem> </ListInfoItem>
</div> </div>
@@ -110,14 +83,14 @@
</template> </template>
<script> <script>
import FilePreviewDetail from "../Others/FilePreviewDetail"; import FilePreviewDetail from '../Others/FilePreviewDetail'
import CopyShareLink from "../Others/Forms/CopyShareLink"; import CopyShareLink from '../Others/Forms/CopyShareLink'
import { Edit2Icon, LockIcon, UnlockIcon, EyeOffIcon } from 'vue-feather-icons' import { Edit2Icon, LockIcon, UnlockIcon, EyeOffIcon } from 'vue-feather-icons'
import ImageMetaData from "./ImageMetaData"; import ImageMetaData from './ImageMetaData'
import TitlePreview from "./TitlePreview"; import TitlePreview from './TitlePreview'
import TeamMembersPreview from "../Teams/Components/TeamMembersPreview" import TeamMembersPreview from '../Teams/Components/TeamMembersPreview'
import ListInfoItem from "../Others/ListInfoItem"; import ListInfoItem from '../Others/ListInfoItem'
import MemberAvatar from "./MemberAvatar" import MemberAvatar from './MemberAvatar'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
@@ -136,11 +109,7 @@
LockIcon, LockIcon,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['permissionOptions', 'clipboard', 'user']),
'permissionOptions',
'clipboard',
'user',
]),
isEmpty() { isEmpty() {
return this.clipboard.length === 0 return this.clipboard.length === 0
}, },
@@ -157,16 +126,18 @@
return this.clipboard[0].data.relationships.shared.protected return this.clipboard[0].data.relationships.shared.protected
}, },
sharedInfo() { sharedInfo() {
let title = this.permissionOptions.find(option => { let title = this.permissionOptions.find((option) => {
return option.value === this.clipboard[0].data.relationships.shared.permission return option.value === this.clipboard[0].data.relationships.shared.permission
}) })
return title ? this.$t(title.label) : this.$t('shared.can_download') return title ? this.$t(title.label) : this.$t('shared.can_download')
}, },
canShowAuthor() { canShowAuthor() {
return this.$isThisRoute(this.$route, ['SharedWithMe', 'TeamFolders']) return (
&& this.clipboard[0].data.type !== 'folder' this.$isThisRoute(this.$route, ['SharedWithMe', 'TeamFolders']) &&
&& this.user.data.id !== this.clipboard[0].data.relationships.owner.data.id this.clipboard[0].data.type !== 'folder' &&
this.user.data.id !== this.clipboard[0].data.relationships.owner.data.id
)
}, },
}, },
} }
resources/js/components/FilesView/ItemGrid.vue
+52 -64
View File
@@ -1,91 +1,89 @@
<template> <template>
<div <div
:class="{'dark:bg-dark-foreground bg-light-background': isClicked}" :class="{ 'bg-light-background dark:bg-dark-foreground': isClicked }"
class="flex flex-wrap items-center justify-center relative z-0 text-center lg:h-60 sm:h-56 h-48 px-1 pt-2 rounded-lg select-none border-2 border-transparent border-dashed dark:hover:bg-dark-foreground lg:hover:bg-light-background" class="relative z-0 flex h-48 select-none flex-wrap items-center justify-center rounded-lg border-2 border-dashed border-transparent px-1 pt-2 text-center dark:hover:bg-dark-foreground sm:h-56 lg:h-60 lg:hover:bg-light-background"
:draggable="canDrag" :draggable="canDrag"
spellcheck="false" spellcheck="false"
> >
<!--MultiSelecting for the mobile version--> <!--MultiSelecting for the mobile version-->
<CheckBox v-if="isMultiSelectMode" :is-clicked="isClicked" class="mr-5" /> <CheckBox v-if="isMultiSelectMode" :is-clicked="isClicked" class="mr-5" />
<div class="w-full"> <div class="w-full">
<!--Item thumbnail--> <!--Item thumbnail-->
<div class="relative mx-auto"> <div class="relative mx-auto">
<!--Emoji Icon--> <!--Emoji Icon-->
<Emoji <Emoji v-if="entry.data.attributes.emoji" :emoji="entry.data.attributes.emoji" class="mb-10 inline-block scale-150 transform text-5xl" />
v-if="entry.data.attributes.emoji"
:emoji="entry.data.attributes.emoji"
class="text-5xl transform scale-150 inline-block mb-10"
/>
<!--Folder Icon--> <!--Folder Icon-->
<FolderIcon v-if="isFolder && !entry.data.attributes.emoji" :item="entry" class="inline-block transform scale-150 lg:mt-2 lg:mb-8 mt-3 mb-5" /> <FolderIcon v-if="isFolder && !entry.data.attributes.emoji" :item="entry" class="mt-3 mb-5 inline-block scale-150 transform lg:mt-2 lg:mb-8" />
<!--File Icon--> <!--File Icon-->
<div v-if="isFile || isVideo || isAudio || (isImage && !entry.data.attributes.thumbnail)" class="relative w-24 mx-auto"> <div v-if="isFile || isVideo || isAudio || (isImage && !entry.data.attributes.thumbnail)" class="relative mx-auto w-24">
<!--Member thumbnail for team folders--> <!--Member thumbnail for team folders-->
<MemberAvatar <MemberAvatar
v-if="user && canShowAuthor" v-if="user && canShowAuthor"
:size="38" :size="38"
:is-border="true" :is-border="true"
:member="entry.data.relationships.owner" :member="entry.data.relationships.owner"
class="absolute lg:-bottom-7 right-2 -bottom-5 z-10 transform lg:scale-100 scale-75 z-10" class="absolute right-2 -bottom-5 z-10 z-10 scale-75 transform lg:-bottom-7 lg:scale-100"
/> />
<FileIconThumbnail :entry="entry" class="transform lg:scale-150 scale-125 lg:mb-12 lg:mt-6 mt-5 mb-10 z-0" /> <FileIconThumbnail :entry="entry" class="z-0 mt-5 mb-10 scale-125 transform lg:mb-12 lg:mt-6 lg:scale-150" />
</div> </div>
<!--Image thumbnail--> <!--Image thumbnail-->
<div v-if="isImage && entry.data.attributes.thumbnail" class="relative inline-block lg:w-36 lg:h-28 w-28 h-24 mb-4"> <div v-if="isImage && entry.data.attributes.thumbnail" class="relative mb-4 inline-block h-24 w-28 lg:h-28 lg:w-36">
<!--Member thumbnail for team folders--> <!--Member thumbnail for team folders-->
<MemberAvatar <MemberAvatar
v-if="user && canShowAuthor" v-if="user && canShowAuthor"
:size="38" :size="38"
:is-border="true" :is-border="true"
:member="entry.data.relationships.owner" :member="entry.data.relationships.owner"
class="absolute -right-3 -bottom-2.5 transform lg:scale-100 scale-75 z-10" class="absolute -right-3 -bottom-2.5 z-10 scale-75 transform lg:scale-100"
/> />
<img class="object-cover w-full h-full rounded-lg shadow-lg" :src="entry.data.attributes.thumbnail.sm" :alt="entry.data.attributes.name" loading="lazy" /> <img class="h-full w-full rounded-lg object-cover shadow-lg" :src="entry.data.attributes.thumbnail.sm" :alt="entry.data.attributes.name" loading="lazy" />
</div> </div>
</div> </div>
<!--Item Info--> <!--Item Info-->
<div class="text-center"> <div class="text-center">
<!--Item Title--> <!--Item Title-->
<b class="inline-block leading-3 text-sm hover:underline w-full text-ellipsis overflow-hidden whitespace-nowrap md:px-6 tracking-tigh" ref="name" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName"> <b
class="tracking-tigh inline-block w-full overflow-hidden text-ellipsis whitespace-nowrap text-sm leading-3 hover:underline md:px-6"
ref="name"
@input="renameItem"
@keydown.delete.stop
@click.stop
:contenteditable="canEditName"
>
{{ itemName }} {{ itemName }}
</b> </b>
<!--Item sub line--> <!--Item sub line-->
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<!--Shared Icon--> <!--Shared Icon-->
<div v-if="$checkPermission('master') && entry.data.relationships.shared"> <div v-if="$checkPermission('master') && entry.data.relationships.shared">
<link-icon size="12" class="mr-1.5 text-theme dark-text-theme vue-feather"/> <link-icon size="12" class="text-theme dark-text-theme vue-feather mr-1.5" />
</div> </div>
<!--File & Image sub line--> <!--File & Image sub line-->
<small v-if="!isFolder" class="block text-xs text-gray-500"> <small v-if="!isFolder" class="block text-xs text-gray-500">
{{ entry.data.attributes.filesize }}<span class="lg:inline-block hidden text-xs text-gray-500">, {{ timeStamp }}</span> {{ entry.data.attributes.filesize }}<span class="hidden text-xs text-gray-500 lg:inline-block">, {{ timeStamp }}</span>
</small> </small>
<!--Folder sub line--> <!--Folder sub line-->
<small v-if="isFolder" class="block text-xs text-gray-500"> <small v-if="isFolder" class="block text-xs text-gray-500">
{{ folderItems === 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}<span class="lg:inline-block hidden text-xs text-gray-500">, {{ timeStamp }}</span> {{ folderItems === 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems)
}}<span class="hidden text-xs text-gray-500 lg:inline-block">, {{ timeStamp }}</span>
</small> </small>
</div> </div>
</div> </div>
<!-- Mobile item action button--> <!-- Mobile item action button-->
<div v-if="mobileHandler && ! isMultiSelectMode && $isMobile()" class="flex items-center justify-center py-0.5 px-2 relative"> <div v-if="mobileHandler && !isMultiSelectMode && $isMobile()" class="relative flex items-center justify-center py-0.5 px-2">
<div @mouseup.stop="$openInDetailPanel(entry)" class="p-2.5 sm:block hidden"> <div @mouseup.stop="$openInDetailPanel(entry)" class="hidden p-2.5 sm:block">
<eye-icon size="18" class="vue-feather opacity-30 inline-block" /> <eye-icon size="18" class="vue-feather inline-block opacity-30" />
</div> </div>
<div @mouseup.stop="showItemActions" class="p-2.5"> <div @mouseup.stop="showItemActions" class="p-2.5">
@@ -97,15 +95,15 @@
</template> </template>
<script> <script>
import FolderIcon from "./FolderIcon"; import FolderIcon from './FolderIcon'
import { LinkIcon, MoreHorizontalIcon, EyeIcon } from 'vue-feather-icons' import { LinkIcon, MoreHorizontalIcon, EyeIcon } from 'vue-feather-icons'
import FileIconThumbnail from "./FileIconThumbnail" import FileIconThumbnail from './FileIconThumbnail'
import MemberAvatar from "./MemberAvatar" import MemberAvatar from './MemberAvatar'
import Emoji from "../Others/Emoji" import Emoji from '../Others/Emoji'
import CheckBox from "./CheckBox" import CheckBox from './CheckBox'
import {debounce} from "lodash" import { debounce } from 'lodash'
import {mapGetters} from "vuex" import { mapGetters } from 'vuex'
import {events} from "../../bus" import { events } from '../../bus'
export default { export default {
name: 'ItemList', name: 'ItemList',
@@ -119,10 +117,7 @@
EyeIcon, EyeIcon,
Emoji, Emoji,
}, },
props: [ props: ['mobileHandler', 'entry'],
'mobileHandler',
'entry',
],
data() { data() {
return { return {
mobileMultiSelect: false, mobileMultiSelect: false,
@@ -130,13 +125,9 @@
} }
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['isMultiSelectMode', 'clipboard', 'user']),
'isMultiSelectMode',
'clipboard',
'user',
]),
isClicked() { isClicked() {
return this.clipboard.some(element => element.data.id === this.entry.data.id) return this.clipboard.some((element) => element.data.id === this.entry.data.id)
}, },
isAudio() { isAudio() {
return this.entry.data.type === 'audio' return this.entry.data.type === 'audio'
@@ -155,24 +146,24 @@
}, },
timeStamp() { timeStamp() {
return this.entry.data.attributes.deleted_at return this.entry.data.attributes.deleted_at
? this.$t('entry_thumbnail.deleted_at', {time: this.entry.data.attributes.deleted_at}) ? this.$t('entry_thumbnail.deleted_at', {
time: this.entry.data.attributes.deleted_at,
})
: this.entry.data.attributes.created_at : this.entry.data.attributes.created_at
}, },
canEditName() { canEditName() {
return !this.$isMobile() return (
&& !this.$isThisRoute(this.$route, ['Trash']) !this.$isMobile() &&
&& !this.$checkPermission('visitor') !this.$isThisRoute(this.$route, ['Trash']) &&
&& !(this.sharedDetail && this.sharedDetail.attributes.type === 'file') !this.$checkPermission('visitor') &&
!(this.sharedDetail && this.sharedDetail.attributes.type === 'file')
)
}, },
folderItems() { folderItems() {
return this.entry.data.attributes.deleted_at return this.entry.data.attributes.deleted_at ? this.entry.data.attributes.trashed_items : this.entry.data.attributes.items
? this.entry.data.attributes.trashed_items
: this.entry.data.attributes.items
}, },
canShowAuthor() { canShowAuthor() {
return this.$isThisRoute(this.$route, ['SharedWithMe', 'TeamFolders']) return this.$isThisRoute(this.$route, ['SharedWithMe', 'TeamFolders']) && !this.isFolder && this.user.data.id !== this.entry.data.relationships.owner.data.id
&& !this.isFolder
&& this.user.data.id !== this.entry.data.relationships.owner.data.id
}, },
canDrag() { canDrag() {
return !this.isDeleted && this.$checkPermission(['master', 'editor']) return !this.isDeleted && this.$checkPermission(['master', 'editor'])
@@ -187,35 +178,32 @@
events.$emit('mobile-context-menu:show', this.entry) events.$emit('mobile-context-menu:show', this.entry)
}, },
renameItem: debounce(function (e) { renameItem: debounce(function (e) {
// Prevent submit empty string // Prevent submit empty string
if (e.target.innerText.trim() === '') return if (e.target.innerText.trim() === '') return
this.$store.dispatch('renameItem', { this.$store.dispatch('renameItem', {
id: this.entry.data.id, id: this.entry.data.id,
type: this.entry.data.type, type: this.entry.data.type,
name: e.target.innerText name: e.target.innerText,
}) })
}, 300) }, 300),
}, },
created() { created() {
// Set item name to own component variable // Set item name to own component variable
this.itemName = this.entry.data.attributes.name this.itemName = this.entry.data.attributes.name
// Change item name // Change item name
events.$on('change:name', item => { events.$on('change:name', (item) => {
if (this.entry.data.id === item.id) this.itemName = item.name if (this.entry.data.id === item.id) this.itemName = item.name
}) })
// Autofocus after newly created folder // Autofocus after newly created folder
events.$on('newFolder:focus', id => { events.$on('newFolder:focus', (id) => {
if (!this.$isMobile() && this.entry.data.id === id) { if (!this.$isMobile() && this.entry.data.id === id) {
this.$refs.name.focus() this.$refs.name.focus()
document.execCommand('selectAll') document.execCommand('selectAll')
} }
}) })
} },
} }
</script> </script>
resources/js/components/FilesView/ItemHandler.vue
+14 -39
View File
@@ -29,29 +29,20 @@
</template> </template>
<script> <script>
import {events} from "../../bus"; import { events } from '../../bus'
import ItemList from './ItemList' import ItemList from './ItemList'
import ItemGrid from './ItemGrid' import ItemGrid from './ItemGrid'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
name: 'ItemHandler', name: 'ItemHandler',
props: [ props: ['disableHighlight', 'item'],
'disableHighlight',
'item',
],
components: { components: {
ItemList, ItemList,
ItemGrid, ItemGrid,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['isMultiSelectMode', 'itemViewType', 'clipboard', 'entries', 'user']),
'isMultiSelectMode',
'itemViewType',
'clipboard',
'entries',
'user',
]),
isFolder() { isFolder() {
return this.item.data.type === 'folder' return this.item.data.type === 'folder'
}, },
@@ -78,12 +69,11 @@ export default {
delay: 220, delay: 220,
clicks: 0, clicks: 0,
timer: null timer: null,
} }
}, },
methods: { methods: {
clickFilter(e) { clickFilter(e) {
// Handle click for mobile device // Handle click for mobile device
if (this.$isMobile()) { if (this.$isMobile()) {
this.clickedItem(e) this.clickedItem(e)
@@ -99,13 +89,12 @@ export default {
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
this.clickedItem(e) this.clickedItem(e)
self.clicks = 0 self.clicks = 0
}, this.delay); }, this.delay)
} else { } else {
clearTimeout(this.timer); clearTimeout(this.timer)
this.goToItem(e) this.goToItem(e)
this.clicks = 0; this.clicks = 0
} }
} }
}, },
@@ -126,22 +115,19 @@ export default {
if (e.button === 2) return if (e.button === 2) return
if (!this.$isMobile()) { if (!this.$isMobile()) {
// After click deselect new folder rename input // After click deselect new folder rename input
if (document.getSelection().toString().length) { if (document.getSelection().toString().length) {
document.getSelection().removeAllRanges(); document.getSelection().removeAllRanges()
} }
if ((e.ctrlKey || e.metaKey) && !e.shiftKey) { if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
// Click + Ctrl // Click + Ctrl
if (this.clipboard.some(item => item.data.id === this.item.data.id)) { if (this.clipboard.some((item) => item.data.id === this.item.data.id)) {
this.$store.commit('REMOVE_ITEM_FROM_CLIPBOARD', this.item) this.$store.commit('REMOVE_ITEM_FROM_CLIPBOARD', this.item)
} else { } else {
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item) this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
} }
} else if (e.shiftKey) { } else if (e.shiftKey) {
// Click + Shift // Click + Shift
let lastItem = this.entries.indexOf(this.clipboard[this.clipboard.length - 1]) let lastItem = this.entries.indexOf(this.clipboard[this.clipboard.length - 1])
let clickedItem = this.entries.indexOf(this.item) let clickedItem = this.entries.indexOf(this.item)
@@ -163,7 +149,6 @@ export default {
} }
} }
} else { } else {
// Click // Click
this.$store.commit('CLIPBOARD_CLEAR') this.$store.commit('CLIPBOARD_CLEAR')
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item) this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
@@ -171,13 +156,10 @@ export default {
} }
if (!this.isMultiSelectMode && this.$isMobile()) { if (!this.isMultiSelectMode && this.$isMobile()) {
if (this.isFolder) { if (this.isFolder) {
this.$goToFileView(this.item.data.id) this.$goToFileView(this.item.data.id)
} else { } else {
if (this.isImage || this.isVideo || this.isAudio || this.isPdf) { if (this.isImage || this.isVideo || this.isAudio || this.isPdf) {
this.$store.commit('CLIPBOARD_CLEAR') this.$store.commit('CLIPBOARD_CLEAR')
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item) this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
@@ -187,7 +169,7 @@ export default {
} }
if (this.isMultiSelectMode && this.$isMobile()) { if (this.isMultiSelectMode && this.$isMobile()) {
if (this.clipboard.some(item => item.data.id === this.item.data.id)) { if (this.clipboard.some((item) => item.data.id === this.item.data.id)) {
this.$store.commit('REMOVE_ITEM_FROM_CLIPBOARD', this.item) this.$store.commit('REMOVE_ITEM_FROM_CLIPBOARD', this.item)
} else { } else {
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item) this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
@@ -200,16 +182,13 @@ export default {
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item) this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
events.$emit('file-preview:show') events.$emit('file-preview:show')
} else if (this.isFile || (!this.isFolder && !this.isVideo && !this.isAudio && !this.isImage)) {
} else if (this.isFile || !this.isFolder && !this.isVideo && !this.isAudio && !this.isImage) {
this.$downloadFile(this.item.data.attributes.file_url, this.item.data.attributes.name + '.' + this.item.data.attributes.mimetype) this.$downloadFile(this.item.data.attributes.file_url, this.item.data.attributes.name + '.' + this.item.data.attributes.mimetype)
} else if (this.isFolder) { } else if (this.isFolder) {
this.$goToFileView(this.item.data.id) this.$goToFileView(this.item.data.id)
} }
}, },
} },
} }
</script> </script>
@@ -217,7 +196,6 @@ export default {
@import '../../../sass/vuefilemanager/variables'; @import '../../../sass/vuefilemanager/variables';
@import '../../../sass/vuefilemanager/mixins'; @import '../../../sass/vuefilemanager/mixins';
.slide-from-left-move { .slide-from-left-move {
transition: transform 300s ease; transition: transform 300s ease;
} }
@@ -357,7 +335,7 @@ export default {
height: 52px; height: 52px;
/deep/ .folder-icon { /deep/ .folder-icon {
@include font-size(52) @include font-size(52);
} }
} }
@@ -430,7 +408,6 @@ export default {
} }
.dark { .dark {
.file-wrapper { .file-wrapper {
.icon-item { .icon-item {
.file-icon { .file-icon {
@@ -446,15 +423,13 @@ export default {
background: $dark_mode_background !important; background: $dark_mode_background !important;
.file-icon { .file-icon {
path { path {
fill: $dark_mode_foreground !important; fill: $dark_mode_foreground !important;
stroke: #2F3C54; stroke: #2f3c54;
} }
} }
.item-name { .item-name {
.name { .name {
color: $dark_mode_text_primary !important; color: $dark_mode_text_primary !important;
} }
resources/js/components/FilesView/ItemList.vue
+61 -65
View File
@@ -1,27 +1,23 @@
<template> <template>
<div :class="{'dark:bg-dark-foreground bg-light-background': isClicked && highlight, 'dark:hover:bg-dark-foreground hover:bg-light-background': highlight}" class="flex items-center px-2.5 py-2 rounded-xl select-none border-2 border-transparent border-dashed" :draggable="canDrag" spellcheck="false"> <div
:class="{
'bg-light-background dark:bg-dark-foreground': isClicked && highlight,
'hover:bg-light-background dark:hover:bg-dark-foreground': highlight,
}"
class="flex select-none items-center rounded-xl border-2 border-dashed border-transparent px-2.5 py-2"
:draggable="canDrag"
spellcheck="false"
>
<!--MultiSelecting for the mobile version--> <!--MultiSelecting for the mobile version-->
<CheckBox v-if="isMultiSelectMode" v-model="isClicked" :is-clicked="isClicked" class="mr-5" /> <CheckBox v-if="isMultiSelectMode" v-model="isClicked" :is-clicked="isClicked" class="mr-5" />
<!--Item thumbnail--> <!--Item thumbnail-->
<div class="w-16 relative"> <div class="relative w-16">
<!--Member thumbnail for team folders--> <!--Member thumbnail for team folders-->
<MemberAvatar <MemberAvatar v-if="user && canShowAuthor" :size="28" :is-border="true" :member="entry.data.relationships.owner" class="absolute right-1.5 -bottom-2 z-10" />
v-if="user && canShowAuthor"
:size="28"
:is-border="true"
:member="entry.data.relationships.owner"
class="absolute right-1.5 -bottom-2 z-10"
/>
<!--Emoji Icon--> <!--Emoji Icon-->
<Emoji <Emoji v-if="entry.data.attributes.emoji" :emoji="entry.data.attributes.emoji" class="ml-1 scale-110 transform text-5xl" />
v-if="entry.data.attributes.emoji"
:emoji="entry.data.attributes.emoji"
class="text-5xl ml-1 transform scale-110"
/>
<!--Folder Icon--> <!--Folder Icon-->
<FolderIcon v-if="isFolder && !entry.data.attributes.emoji" :item="entry" /> <FolderIcon v-if="isFolder && !entry.data.attributes.emoji" :item="entry" />
@@ -30,29 +26,39 @@
<FileIconThumbnail v-if="isFile || isVideo || isAudio || (isImage && !entry.data.attributes.thumbnail)" :entry="entry" class="pr-2" /> <FileIconThumbnail v-if="isFile || isVideo || isAudio || (isImage && !entry.data.attributes.thumbnail)" :entry="entry" class="pr-2" />
<!--Image thumbnail--> <!--Image thumbnail-->
<img v-if="isImage && entry.data.attributes.thumbnail" class="w-12 h-12 rounded ml-0.5 object-cover" :src="entry.data.attributes.thumbnail.xs" :alt="entry.data.attributes.name" loading="lazy" /> <img
v-if="isImage && entry.data.attributes.thumbnail"
class="ml-0.5 h-12 w-12 rounded object-cover"
:src="entry.data.attributes.thumbnail.xs"
:alt="entry.data.attributes.name"
loading="lazy"
/>
</div> </div>
<!--Item Info--> <!--Item Info-->
<div class="pl-2"> <div class="pl-2">
<!--Item Title--> <!--Item Title-->
<b class="block text-sm mb-0.5 text-ellipsis overflow-hidden hover:underline whitespace-nowrap" style="max-width: 240px" ref="name" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName"> <b
class="mb-0.5 block overflow-hidden text-ellipsis whitespace-nowrap text-sm hover:underline"
style="max-width: 240px"
ref="name"
@input="renameItem"
@keydown.delete.stop
@click.stop
:contenteditable="canEditName"
>
{{ itemName }} {{ itemName }}
</b> </b>
<!--Item sub line--> <!--Item sub line-->
<div class="flex items-center"> <div class="flex items-center">
<!--Shared Icon--> <!--Shared Icon-->
<div v-if="$checkPermission('master') && entry.data.relationships.shared"> <div v-if="$checkPermission('master') && entry.data.relationships.shared">
<link-icon size="12" class="mr-1.5 text-theme dark-text-theme vue-feather"/> <link-icon size="12" class="text-theme dark-text-theme vue-feather mr-1.5" />
</div> </div>
<!--File & Image sub line--> <!--File & Image sub line-->
<small v-if="! isFolder" class="block text-xs text-gray-500"> <small v-if="!isFolder" class="block text-xs text-gray-500"> {{ entry.data.attributes.filesize }}, {{ timeStamp }} </small>
{{ entry.data.attributes.filesize }}, {{ timeStamp }}
</small>
<!--Folder sub line--> <!--Folder sub line-->
<small v-if="isFolder" class="block text-xs text-gray-500"> <small v-if="isFolder" class="block text-xs text-gray-500">
@@ -62,11 +68,11 @@
</div> </div>
<!-- Mobile item action button--> <!-- Mobile item action button-->
<div v-if="mobileHandler && ! isMultiSelectMode && $isMobile()" class="pr-1 flex-grow text-right relative"> <div v-if="mobileHandler && !isMultiSelectMode && $isMobile()" class="relative flex-grow pr-1 text-right">
<div @mouseup.stop="$openInDetailPanel(entry)" class="absolute right-10 p-2.5 -mr-4 transform -translate-y-2/4 lg:block hidden"> <div @mouseup.stop="$openInDetailPanel(entry)" class="absolute right-10 -mr-4 hidden -translate-y-2/4 transform p-2.5 lg:block">
<eye-icon size="18" class="vue-feather opacity-30 inline-block" /> <eye-icon size="18" class="vue-feather inline-block opacity-30" />
</div> </div>
<div @mouseup.stop="showItemActions" class="absolute right-0 p-2.5 -mr-4 transform -translate-y-2/4"> <div @mouseup.stop="showItemActions" class="absolute right-0 -mr-4 -translate-y-2/4 transform p-2.5">
<MoreVerticalIcon size="18" class="vue-feather text-theme dark-text-theme inline-block" /> <MoreVerticalIcon size="18" class="vue-feather text-theme dark-text-theme inline-block" />
</div> </div>
</div> </div>
@@ -74,15 +80,15 @@
</template> </template>
<script> <script>
import Emoji from "../Others/Emoji"; import Emoji from '../Others/Emoji'
import FolderIcon from "./FolderIcon"; import FolderIcon from './FolderIcon'
import { LinkIcon, MoreVerticalIcon, EyeIcon } from 'vue-feather-icons' import { LinkIcon, MoreVerticalIcon, EyeIcon } from 'vue-feather-icons'
import FileIconThumbnail from "./FileIconThumbnail"; import FileIconThumbnail from './FileIconThumbnail'
import MemberAvatar from "./MemberAvatar"; import MemberAvatar from './MemberAvatar'
import CheckBox from "./CheckBox"; import CheckBox from './CheckBox'
import {debounce} from "lodash"; import { debounce } from 'lodash'
import {mapGetters} from "vuex"; import { mapGetters } from 'vuex'
import {events} from "../../bus"; import { events } from '../../bus'
export default { export default {
name: 'ItemList', name: 'ItemList',
@@ -96,11 +102,7 @@
EyeIcon, EyeIcon,
Emoji, Emoji,
}, },
props: [ props: ['mobileHandler', 'highlight', 'entry'],
'mobileHandler',
'highlight',
'entry',
],
data() { data() {
return { return {
mobileMultiSelect: false, mobileMultiSelect: false,
@@ -109,13 +111,9 @@
} }
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['isMultiSelectMode', 'clipboard', 'user']),
'isMultiSelectMode',
'clipboard',
'user',
]),
isClicked() { isClicked() {
return this.clipboard.some(element => element.data.id === this.entry.data.id) return this.clipboard.some((element) => element.data.id === this.entry.data.id)
}, },
isVideo() { isVideo() {
return this.entry.data.type === 'video' return this.entry.data.type === 'video'
@@ -134,23 +132,24 @@
}, },
timeStamp() { timeStamp() {
return this.entry.data.attributes.deleted_at return this.entry.data.attributes.deleted_at
? this.$t('item_thumbnail.deleted_at', {time: this.entry.data.attributes.deleted_at}) ? this.$t('item_thumbnail.deleted_at', {
time: this.entry.data.attributes.deleted_at,
})
: this.entry.data.attributes.created_at : this.entry.data.attributes.created_at
}, },
canEditName() { canEditName() {
return !this.$isMobile() return (
&& !this.$isThisRoute(this.$route, ['Trash']) !this.$isMobile() &&
&& !this.$checkPermission('visitor') !this.$isThisRoute(this.$route, ['Trash']) &&
&& !(this.sharedDetail && this.sharedDetail.attributes.type === 'file') !this.$checkPermission('visitor') &&
!(this.sharedDetail && this.sharedDetail.attributes.type === 'file')
)
}, },
folderItems() { folderItems() {
return this.entry.data.attributes.deleted_at return this.entry.data.attributes.deleted_at ? this.entry.data.attributes.trashed_items : this.entry.data.attributes.items
? this.entry.data.attributes.trashed_items
: this.entry.data.attributes.items
}, },
canShowAuthor() { canShowAuthor() {
return !this.isFolder return !this.isFolder && this.user.data.id !== this.entry.data.relationships.owner.data.id
&& this.user.data.id !== this.entry.data.relationships.owner.data.id
}, },
canDrag() { canDrag() {
return !this.isDeleted && this.$checkPermission(['master', 'editor']) return !this.isDeleted && this.$checkPermission(['master', 'editor'])
@@ -165,35 +164,32 @@
events.$emit('mobile-context-menu:show', this.entry) events.$emit('mobile-context-menu:show', this.entry)
}, },
renameItem: debounce(function (e) { renameItem: debounce(function (e) {
// Prevent submit empty string // Prevent submit empty string
if (e.target.innerText.trim() === '') return if (e.target.innerText.trim() === '') return
this.$store.dispatch('renameItem', { this.$store.dispatch('renameItem', {
id: this.entry.data.id, id: this.entry.data.id,
type: this.entry.data.type, type: this.entry.data.type,
name: e.target.innerText name: e.target.innerText,
}) })
}, 300) }, 300),
}, },
created() { created() {
// Set item name to own component variable // Set item name to own component variable
this.itemName = this.entry.data.attributes.name this.itemName = this.entry.data.attributes.name
// Change item name // Change item name
events.$on('change:name', item => { events.$on('change:name', (item) => {
if (this.entry.data.id === item.id) this.itemName = item.name if (this.entry.data.id === item.id) this.itemName = item.name
}) })
// Autofocus after newly created folder // Autofocus after newly created folder
events.$on('newFolder:focus', id => { events.$on('newFolder:focus', (id) => {
if (!this.$isMobile() && this.entry.data.id === id) { if (!this.$isMobile() && this.entry.data.id === id) {
this.$refs.name.focus() this.$refs.name.focus()
document.execCommand('selectAll') document.execCommand('selectAll')
} }
}) })
} },
} }
</script> </script>
resources/js/components/FilesView/MemberAvatar.vue
+21 -14
View File
@@ -4,35 +4,42 @@
:style="{ width: size + 'px', height: size + 'px' }" :style="{ width: size + 'px', height: size + 'px' }"
v-if="member.data.attributes.avatar" v-if="member.data.attributes.avatar"
:src="avatar" :src="avatar"
:class="[borderRadius, {'border-3 border-white dark:border-dark-background': isBorder}]" :class="[
borderRadius,
{
'border-3 border-white dark:border-dark-background': isBorder,
},
]"
class="" class=""
/> />
<div <div
v-else v-else
class="flex items-center justify-center" class="flex items-center justify-center"
:class="[borderRadius, {'border-3 border-white dark:border-dark-background': isBorder}]" :class="[
:style="{width: size + 'px', height: size + 'px', background: member.data.attributes.color ? member.data.attributes.color : '#f4f5f6'}" borderRadius,
{
'border-3 border-white dark:border-dark-background': isBorder,
},
]"
:style="{
width: size + 'px',
height: size + 'px',
background: member.data.attributes.color ? member.data.attributes.color : '#f4f5f6',
}"
> >
<span :class="fontSize" class="uppercase font-extrabold text-gray-900"> <span :class="fontSize" class="font-extrabold uppercase text-gray-900">
{{ letter }} {{ letter }}
</span> </span>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'MemberAvatar', name: 'MemberAvatar',
props: [ props: ['isBorder', 'member', 'size'],
'isBorder',
'member',
'size',
],
computed: { computed: {
letter() { letter() {
let string = this.member.data.attributes.name let string = this.member.data.attributes.name ? this.member.data.attributes.name : this.member.data.attributes.email
? this.member.data.attributes.name
: this.member.data.attributes.email
return string.substr(0, 1) return string.substr(0, 1)
}, },
@@ -57,6 +64,6 @@
return this.member.data.attributes.avatar.xs return this.member.data.attributes.avatar.xs
} }
}, },
} },
} }
</script> </script>
resources/js/components/FilesView/MobileActionButton.vue
+30 -9
View File
@@ -1,5 +1,5 @@
<template> <template>
<button class="inline-block dark:bg-2x-dark-foreground bg-light-background rounded-xl py-2 px-3.5 mr-2"> <button class="mr-2 inline-block rounded-xl bg-light-background py-2 px-3.5 dark:bg-2x-dark-foreground">
<div class="flex items-center"> <div class="flex items-center">
<hard-drive-icon v-if="icon === 'hard-drive'" size="15" class="vue-feather dark-text-theme" /> <hard-drive-icon v-if="icon === 'hard-drive'" size="15" class="vue-feather dark-text-theme" />
<upload-cloud-icon v-if="icon === 'upload-cloud'" size="15" class="vue-feather dark-text-theme" /> <upload-cloud-icon v-if="icon === 'upload-cloud'" size="15" class="vue-feather dark-text-theme" />
@@ -26,7 +26,7 @@
<sorting-icon v-if="icon === 'preview-sorting'" class="vue-feather dark-text-theme preview-sorting" /> <sorting-icon v-if="icon === 'preview-sorting'" class="vue-feather dark-text-theme preview-sorting" />
<cloud-plus-icon v-if="icon === 'cloud-plus'" class="vue-feather dark-text-theme preview-sorting" /> <cloud-plus-icon v-if="icon === 'cloud-plus'" class="vue-feather dark-text-theme preview-sorting" />
<span v-if="$slots.default" class="font-bold text-sm ml-2"> <span v-if="$slots.default" class="ml-2 text-sm font-bold">
<slot></slot> <slot></slot>
</span> </span>
</div> </div>
@@ -34,15 +34,36 @@
</template> </template>
<script> <script>
import { UserCheckIcon, HardDriveIcon, UploadCloudIcon, LinkIcon, Trash2Icon, UsersIcon, SearchIcon, RefreshCwIcon, DownloadIcon, CopyIcon, FilterIcon, DollarSignIcon, CheckIcon, XSquareIcon, CheckSquareIcon, FolderPlusIcon, ListIcon, GridIcon, TrashIcon, UserPlusIcon, PlusIcon, CreditCardIcon } from 'vue-feather-icons' import {
import CloudPlusIcon from "./Icons/CloudPlusIcon"; UserCheckIcon,
import SortingIcon from "./Icons/SortingIcon"; HardDriveIcon,
UploadCloudIcon,
LinkIcon,
Trash2Icon,
UsersIcon,
SearchIcon,
RefreshCwIcon,
DownloadIcon,
CopyIcon,
FilterIcon,
DollarSignIcon,
CheckIcon,
XSquareIcon,
CheckSquareIcon,
FolderPlusIcon,
ListIcon,
GridIcon,
TrashIcon,
UserPlusIcon,
PlusIcon,
CreditCardIcon,
} from 'vue-feather-icons'
import CloudPlusIcon from './Icons/CloudPlusIcon'
import SortingIcon from './Icons/SortingIcon'
export default { export default {
name: 'MobileActionButton', name: 'MobileActionButton',
props: [ props: ['icon'],
'icon'
],
components: { components: {
UserCheckIcon, UserCheckIcon,
HardDriveIcon, HardDriveIcon,
@@ -68,6 +89,6 @@
CopyIcon, CopyIcon,
ListIcon, ListIcon,
GridIcon, GridIcon,
} },
} }
</script> </script>
resources/js/components/FilesView/MobileActionButtonUpload.vue
+9 -12
View File
@@ -4,14 +4,7 @@
<cloud-plus-icon class="icon dark-text-theme" size="15" /> <cloud-plus-icon class="icon dark-text-theme" size="15" />
<label label="file" class="label button file-input button-base"> <label label="file" class="label button file-input button-base">
<slot></slot> <slot></slot>
<input <input @change="emmitFiles" v-show="false" id="file" type="file" name="files[]" multiple />
@change="emmitFiles"
v-show="false"
id="file"
type="file"
name="files[]"
multiple
/>
</label> </label>
</div> </div>
</button> </button>
@@ -19,7 +12,7 @@
<script> <script>
import { UploadCloudIcon } from 'vue-feather-icons' import { UploadCloudIcon } from 'vue-feather-icons'
import CloudPlusIcon from "./Icons/CloudPlusIcon"; import CloudPlusIcon from './Icons/CloudPlusIcon'
export default { export default {
name: 'MobileActionButtonUpload', name: 'MobileActionButtonUpload',
@@ -30,8 +23,8 @@
methods: { methods: {
emmitFiles(e) { emmitFiles(e) {
this.$uploadFiles(e.target.files) this.$uploadFiles(e.target.files)
} },
} },
} }
</script> </script>
@@ -70,7 +63,11 @@
.mobile-action-button { .mobile-action-button {
background: $dark_mode_foreground; background: $dark_mode_foreground;
path, line, polyline, rect, circle { path,
line,
polyline,
rect,
circle {
color: inherit; color: inherit;
} }
resources/js/components/FilesView/MobileContextMenu.vue
+4 -6
View File
@@ -17,9 +17,9 @@
</template> </template>
<script> <script>
import MenuMobileGroup from "../Mobile/MenuMobileGroup"; import MenuMobileGroup from '../Mobile/MenuMobileGroup'
import ThumbnailItem from "../Others/ThumbnailItem"; import ThumbnailItem from '../Others/ThumbnailItem'
import MenuMobile from "../Mobile/MenuMobile"; import MenuMobile from '../Mobile/MenuMobile'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
@@ -30,9 +30,7 @@ export default {
MenuMobile, MenuMobile,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['clipboard']),
'clipboard',
]),
}, },
} }
</script> </script>
resources/js/components/FilesView/MobileCreateMenu.vue
+4 -4
View File
@@ -7,9 +7,9 @@
</template> </template>
<script> <script>
import MenuMobileGroup from "../Mobile/MenuMobileGroup"; import MenuMobileGroup from '../Mobile/MenuMobileGroup'
import MenuMobile from "../Mobile/MenuMobile"; import MenuMobile from '../Mobile/MenuMobile'
import {events} from "../../bus"; import { events } from '../../bus'
export default { export default {
name: 'MobileContextMenu', name: 'MobileContextMenu',
@@ -21,6 +21,6 @@ export default {
closeMenu() { closeMenu() {
events.$emit('mobile-menu:hide') events.$emit('mobile-menu:hide')
}, },
} },
} }
</script> </script>
resources/js/components/FilesView/MobileMultiSelectToolbar.vue
+5 -11
View File
@@ -11,7 +11,7 @@
</template> </template>
<script> <script>
import ToolbarButton from "./ToolbarButton"; import ToolbarButton from './ToolbarButton'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
@@ -20,22 +20,19 @@ export default {
ToolbarButton, ToolbarButton,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['isMultiSelectMode', 'clipboard']),
'isMultiSelectMode',
'clipboard',
]),
}, },
methods: { methods: {
closeSelecting() { closeSelecting() {
this.$store.commit('TOGGLE_MULTISELECT_MODE') this.$store.commit('TOGGLE_MULTISELECT_MODE')
}, },
} },
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "resources/sass/vuefilemanager/_variables"; @import 'resources/sass/vuefilemanager/_variables';
@import "resources/sass/vuefilemanager/_mixins"; @import 'resources/sass/vuefilemanager/_mixins';
.multiselect-actions { .multiselect-actions {
display: flex; display: flex;
@@ -71,7 +68,6 @@ export default {
} }
.options { .options {
&.is-active { &.is-active {
opacity: 1 !important; opacity: 1 !important;
pointer-events: initial !important; pointer-events: initial !important;
@@ -80,7 +76,6 @@ export default {
} }
.dark { .dark {
.multiselect-actions { .multiselect-actions {
background: $dark_mode_foreground; background: $dark_mode_foreground;
} }
@@ -111,5 +106,4 @@ export default {
.context-menu-leave-active { .context-menu-leave-active {
position: absolute; position: absolute;
} }
</style> </style>
resources/js/components/FilesView/MobileTeamContextMenu.vue
+2 -2
View File
@@ -9,9 +9,9 @@
</template> </template>
<script> <script>
import MenuMobileGroup from "../Mobile/MenuMobileGroup"; import MenuMobileGroup from '../Mobile/MenuMobileGroup'
import TeamFolderPreview from '../Teams/Components/TeamFolderPreview' import TeamFolderPreview from '../Teams/Components/TeamFolderPreview'
import MenuMobile from "../Mobile/MenuMobile"; import MenuMobile from '../Mobile/MenuMobile'
export default { export default {
name: 'MobileTeamContextMenu', name: 'MobileTeamContextMenu',
resources/js/components/FilesView/MobileToolbar.vue
+33 -27
View File
@@ -1,31 +1,43 @@
<template> <template>
<div class="sticky top-0 dark:bg-dark-background bg-white flex text-center py-5 px-4 w-full justify-between items-center z-20 lg:hidden block"> <div class="sticky top-0 z-20 block flex w-full items-center justify-between bg-white py-5 px-4 text-center dark:bg-dark-background lg:hidden">
<!-- Go back--> <!-- Go back-->
<div @click="goBack" class="go-back-button flex text-left items-center"> <div @click="goBack" class="go-back-button flex items-center text-left">
<chevron-left-icon size="17" :class="{'opacity-0 -translate-x-3': ! isLoadedFolder, 'opacity-100 translate-x-0': isLoadedFolder }" class="transform align-middle cursor-pointer mr-2 -ml-1 transition-all duration-200" /> <chevron-left-icon
size="17"
:class="{
'-translate-x-3 opacity-0': !isLoadedFolder,
'translate-x-0 opacity-100': isLoadedFolder,
}"
class="mr-2 -ml-1 transform cursor-pointer align-middle transition-all duration-200"
/>
<!--Folder Title--> <!--Folder Title-->
<div :class="{'-translate-x-4': ! isLoadedFolder}" class="transform lg:text-base text-sm align-middle font-bold overflow-hidden text-ellipsis inline-block whitespace-nowrap transition-all duration-200" style="max-width: 200px;"> <div
:class="{ '-translate-x-4': !isLoadedFolder }"
class="inline-block transform overflow-hidden text-ellipsis whitespace-nowrap align-middle text-sm font-bold transition-all duration-200 lg:text-base"
style="max-width: 200px"
>
{{ $getCurrentLocationName() }} {{ $getCurrentLocationName() }}
</div> </div>
<span @click.stop="showItemActions" :class="{'-translate-x-4 opacity-0': ! currentFolder, 'translate-x-0 opacity-100': currentFolder}" class="transform py-0.5 px-1.5 ml-3 rounded-md dark:bg-dark-foreground bg-light-background transition-all duration-200"> <span
@click.stop="showItemActions"
:class="{
'-translate-x-4 opacity-0': !currentFolder,
'translate-x-0 opacity-100': currentFolder,
}"
class="ml-3 transform rounded-md bg-light-background py-0.5 px-1.5 transition-all duration-200 dark:bg-dark-foreground"
>
<more-horizontal-icon size="14" /> <more-horizontal-icon size="14" />
</span> </span>
</div> </div>
<div class="flex items-center relative"> <div class="relative flex items-center">
<TeamMembersButton <TeamMembersButton v-if="$isThisRoute($route, ['TeamFolders', 'SharedWithMe'])" size="28" @click.stop.native="$showMobileMenu('team-menu')" class="absolute right-9" />
v-if="$isThisRoute($route, ['TeamFolders', 'SharedWithMe'])"
size="28"
@click.stop.native="$showMobileMenu('team-menu')"
class="absolute right-9"
/>
<!--More Actions--> <!--More Actions-->
<div class="relative"> <div class="relative">
<div v-if="$checkPermission('master')" @click="showMobileNavigation" class="absolute right-0 p-4 -mr-2 transform -translate-y-2/4"> <div v-if="$checkPermission('master')" @click="showMobileNavigation" class="absolute right-0 -mr-2 -translate-y-2/4 transform p-4">
<menu-icon size="17" /> <menu-icon size="17" />
</div> </div>
</div> </div>
@@ -34,13 +46,13 @@
</template> </template>
<script> <script>
import TeamMembersPreview from "../Teams/Components/TeamMembersPreview"; import TeamMembersPreview from '../Teams/Components/TeamMembersPreview'
import TeamMembersButton from "../Teams/Components/TeamMembersButton"; import TeamMembersButton from '../Teams/Components/TeamMembersButton'
import ToolbarButton from "./ToolbarButton"; import ToolbarButton from './ToolbarButton'
import SearchBar from "./SearchBar"; import SearchBar from './SearchBar'
import { MenuIcon, ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons' import { MenuIcon, ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import {events} from "../../bus"; import { events } from '../../bus'
export default { export default {
name: 'MobileToolBar', name: 'MobileToolBar',
@@ -54,13 +66,7 @@
MenuIcon, MenuIcon,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['currentTeamFolder', 'isVisibleSidebar', 'currentFolder', 'itemViewType', 'clipboard']),
'currentTeamFolder',
'isVisibleSidebar',
'currentFolder',
'itemViewType',
'clipboard',
]),
isLoadedFolder() { isLoadedFolder() {
return this.$route.params.id return this.$route.params.id
}, },
@@ -85,6 +91,6 @@
events.$on('show:content', () => { events.$on('show:content', () => {
if (this.isSidebarMenu) this.isSidebarMenu = false if (this.isSidebarMenu) this.isSidebarMenu = false
}) })
} },
} }
</script> </script>
resources/js/components/FilesView/Option.vue
+10 -11
View File
@@ -1,5 +1,10 @@
<template> <template>
<li class="2xl:py-4 xl:py-3 lg:py-2.5 py-4 px-5 flex items-center justify-between" :class="{'dark:hover:bg-4x-dark-foreground hover:bg-light-background cursor-pointer group': ! isHoverDisabled}"> <li
class="flex items-center justify-between py-4 px-5 lg:py-2.5 xl:py-3 2xl:py-4"
:class="{
'group cursor-pointer hover:bg-light-background dark:hover:bg-4x-dark-foreground': !isHoverDisabled,
}"
>
<div class="flex items-center"> <div class="flex items-center">
<div class="mr-4"> <div class="mr-4">
<calendar-icon v-if="icon === 'calendar'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" /> <calendar-icon v-if="icon === 'calendar'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
@@ -38,7 +43,7 @@
<box-icon v-if="icon === 'box'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" /> <box-icon v-if="icon === 'box'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
<folder-plus-icon v-if="icon === 'folder-plus'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" /> <folder-plus-icon v-if="icon === 'folder-plus'" size="17" class="vue-feather group-hover-text-theme" :class="{ 'text-theme': isActive }" />
</div> </div>
<b class="font-bold text-sm group-hover-text-theme" :class="{'text-theme': isActive}"> <b class="group-hover-text-theme text-sm font-bold" :class="{ 'text-theme': isActive }">
{{ title }} {{ title }}
</b> </b>
</div> </div>
@@ -51,7 +56,7 @@
</template> </template>
<script> <script>
import AlphabetIcon from "./Icons/AlphabetIcon"; import AlphabetIcon from './Icons/AlphabetIcon'
import { import {
UserMinusIcon, UserMinusIcon,
UserCheckIcon, UserCheckIcon,
@@ -92,13 +97,7 @@ import {
export default { export default {
name: 'Option', name: 'Option',
props:[ props: ['isHoverDisabled', 'isActive', 'title', 'arrow', 'icon'],
'isHoverDisabled',
'isActive',
'title',
'arrow',
'icon'
],
components: { components: {
UserMinusIcon, UserMinusIcon,
UserCheckIcon, UserCheckIcon,
@@ -136,6 +135,6 @@ import {
ListIcon, ListIcon,
UserIcon, UserIcon,
EyeIcon, EyeIcon,
} },
} }
</script> </script>
resources/js/components/FilesView/OptionGroup.vue
+1 -2
View File
@@ -6,13 +6,12 @@
<script> <script>
export default { export default {
name: 'OptionGroup' name: 'OptionGroup',
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.option-group { .option-group {
&:first-child { &:first-child {
padding-top: 0 !important; padding-top: 0 !important;
} }
resources/js/components/FilesView/OptionUpload.vue
+9 -33
View File
@@ -7,42 +7,20 @@
<div class="text-label group-hover-text-theme"> <div class="text-label group-hover-text-theme">
{{ title }} {{ title }}
<input <input v-if="type === 'file'" @change="emmitFiles" v-show="false" id="file" type="file" name="files[]" multiple />
v-if="type === 'file'"
@change="emmitFiles"
v-show="false"
id="file"
type="file"
name="files[]"
multiple
/>
<input <input v-if="type === 'folder'" @change="emmitFiles" v-show="false" id="folder" type="file" name="folders[]" webkitdirectory mozdirectory />
v-if="type === 'folder'"
@change="emmitFiles"
v-show="false"
id="folder"
type="file"
name="folders[]"
webkitdirectory
mozdirectory
/>
</div> </div>
</label> </label>
</template> </template>
<script> <script>
import FolderUploadIcon from "./Icons/FolderUploadIcon"; import FolderUploadIcon from './Icons/FolderUploadIcon'
import { import { UploadCloudIcon } from 'vue-feather-icons'
UploadCloudIcon,
} from 'vue-feather-icons'
export default { export default {
name: 'Option', name: 'Option',
props:[ props: ['title', 'type'],
'title',
'type',
],
components: { components: {
FolderUploadIcon, FolderUploadIcon,
UploadCloudIcon, UploadCloudIcon,
@@ -50,14 +28,14 @@ import {
methods: { methods: {
emmitFiles(e) { emmitFiles(e) {
this.$uploadFiles(e.target.files) this.$uploadFiles(e.target.files)
} },
} },
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "resources/sass/vuefilemanager/_variables"; @import 'resources/sass/vuefilemanager/_variables';
@import "resources/sass/vuefilemanager/_mixins"; @import 'resources/sass/vuefilemanager/_mixins';
.menu-option { .menu-option {
white-space: nowrap; white-space: nowrap;
@@ -94,7 +72,6 @@ import {
} }
.dark { .dark {
.menu-option { .menu-option {
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
@@ -103,5 +80,4 @@ import {
} }
} }
} }
</style> </style>
resources/js/components/FilesView/ProcessingPopup.vue
+4 -8
View File
@@ -15,19 +15,17 @@
</template> </template>
<script> <script>
import Spinner from "./Spinner"; import Spinner from './Spinner'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
name: 'ProcessingPopup', name: 'ProcessingPopup',
components: { components: {
Spinner Spinner,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['processingPopup']),
'processingPopup' },
])
}
} }
</script> </script>
@@ -68,7 +66,6 @@ export default {
} }
.popup-content { .popup-content {
.title { .title {
@include font-size(22); @include font-size(22);
font-weight: 700; font-weight: 700;
@@ -90,7 +87,6 @@ export default {
} }
.popup-content { .popup-content {
.title { .title {
@include font-size(19); @include font-size(19);
} }
resources/js/components/FilesView/ProgressBar.vue
+1 -3
View File
@@ -7,7 +7,7 @@
<script> <script>
export default { export default {
name: 'ProgressBar', name: 'ProgressBar',
props: ['progress'] props: ['progress'],
} }
</script> </script>
@@ -31,14 +31,12 @@ export default {
} }
.dark { .dark {
.progress-bar { .progress-bar {
background: $dark_mode_foreground; background: $dark_mode_foreground;
} }
} }
@media only screen and (min-width: 680px) { @media only screen and (min-width: 680px) {
.dark .progress-bar { .dark .progress-bar {
background: $dark_mode_foreground; background: $dark_mode_foreground;
} }
resources/js/components/FilesView/SearchBar.vue
+5 -5
View File
@@ -1,13 +1,13 @@
<template> <template>
<div @click="$openSpotlight()" class="relative dark:bg-dark-foreground bg-light-background rounded-lg cursor-pointer"> <div @click="$openSpotlight()" class="relative cursor-pointer rounded-lg bg-light-background dark:bg-dark-foreground">
<div class="flex justify-between items-center px-5 py-2.5 xl:w-72 w-56 text-left"> <div class="flex w-56 items-center justify-between px-5 py-2.5 text-left xl:w-72">
<div class="flex items-center"> <div class="flex items-center">
<search-icon size="18" class="vue-feather dark:text-gray-600 text-gray-400" /> <search-icon size="18" class="vue-feather text-gray-400 dark:text-gray-600" />
<span class="font-bold xl:text-sm text-xs dark:text-gray-600 text-gray-400 pl-2.5"> <span class="pl-2.5 text-xs font-bold text-gray-400 dark:text-gray-600 xl:text-sm">
{{ $t('inputs.placeholder_search_files') }} {{ $t('inputs.placeholder_search_files') }}
</span> </span>
</div> </div>
<span class="font-bold xl:text-sm text-xs dark:text-gray-600 text-gray-400 dark:border-opacity-5 border rounded px-1 py-0.5 tracking-normal"> <span class="rounded border px-1 py-0.5 text-xs font-bold tracking-normal text-gray-400 dark:border-opacity-5 dark:text-gray-600 xl:text-sm">
{{ metaKeyIcon }}+K {{ metaKeyIcon }}+K
</span> </span>
</div> </div>
resources/js/components/FilesView/Spinner.vue
+1 -1
View File
@@ -6,7 +6,7 @@
<script> <script>
export default { export default {
name: 'Spinner' name: 'Spinner',
} }
</script> </script>
resources/js/components/FilesView/TitlePreview.vue
+4 -14
View File
@@ -8,10 +8,10 @@
<file-icon v-if="icon === 'file'" class="text-theme vue-feather" size="19" /> <file-icon v-if="icon === 'file'" class="text-theme vue-feather" size="19" />
</div> </div>
<div> <div>
<b class="font-bold text-base inline-block whitespace-nowrap 2xl:w-72 w-52 text-ellipsis overflow-hidden leading-3"> <b class="inline-block w-52 overflow-hidden text-ellipsis whitespace-nowrap text-base font-bold leading-3 2xl:w-72">
{{ title }} {{ title }}
</b> </b>
<small class="font-bold text-xs text-gray-400 block"> <small class="block text-xs font-bold text-gray-400">
{{ subtitle }} {{ subtitle }}
</small> </small>
</div> </div>
@@ -19,21 +19,11 @@
</template> </template>
<script> <script>
import { import { CheckSquareIcon, FolderIcon, ImageIcon, VideoIcon, FileIcon } from 'vue-feather-icons'
CheckSquareIcon,
FolderIcon,
ImageIcon,
VideoIcon,
FileIcon,
} from "vue-feather-icons"
export default { export default {
name: 'TitlePreview', name: 'TitlePreview',
props: [ props: ['subtitle', 'title', 'icon'],
'subtitle',
'title',
'icon',
],
components: { components: {
CheckSquareIcon, CheckSquareIcon,
FolderIcon, FolderIcon,
resources/js/components/FilesView/ToolbarButton.vue
+13 -12
View File
@@ -22,8 +22,8 @@
</template> </template>
<script> <script>
import SortingIcon from "./Icons/SortingIcon"; import SortingIcon from './Icons/SortingIcon'
import CloudPlusIcon from "./Icons/CloudPlusIcon"; import CloudPlusIcon from './Icons/CloudPlusIcon'
import { import {
SearchIcon, SearchIcon,
UserPlusIcon, UserPlusIcon,
@@ -41,14 +41,11 @@
InfoIcon, InfoIcon,
LinkIcon, LinkIcon,
XIcon, XIcon,
} from "vue-feather-icons"; } from 'vue-feather-icons'
export default { export default {
name: "ToolbarButton", name: 'ToolbarButton',
props: [ props: ['source', 'action'],
'source',
'action'
],
components: { components: {
SearchIcon, SearchIcon,
CloudPlusIcon, CloudPlusIcon,
@@ -69,12 +66,12 @@
LinkIcon, LinkIcon,
XIcon, XIcon,
}, },
}; }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "resources/sass/vuefilemanager/_variables"; @import 'resources/sass/vuefilemanager/_variables';
@import "resources/sass/vuefilemanager/_mixins"; @import 'resources/sass/vuefilemanager/_mixins';
.preview-sorting { .preview-sorting {
transform: scale(1.3); transform: scale(1.3);
@@ -99,7 +96,11 @@
svg { svg {
color: inherit; color: inherit;
path, line, polyline, rect, circle { path,
line,
polyline,
rect,
circle {
color: inherit; color: inherit;
} }
} }
resources/js/components/FilesView/UploadProgress.vue
+14 -15
View File
@@ -2,7 +2,6 @@
<transition name="info-panel"> <transition name="info-panel">
<div v-if="fileQueue.length > 0" class="upload-progress"> <div v-if="fileQueue.length > 0" class="upload-progress">
<div class="progress-title"> <div class="progress-title">
<!--Is processing--> <!--Is processing-->
<span v-if="isProcessingFile" class="flex items-center justify-center"> <span v-if="isProcessingFile" class="flex items-center justify-center">
<refresh-cw-icon size="12" class="sync-alt text-theme" /> <refresh-cw-icon size="12" class="sync-alt text-theme" />
@@ -11,7 +10,13 @@
<!--Multi file upload--> <!--Multi file upload-->
<span v-if="!isProcessingFile && fileQueue.length > 0"> <span v-if="!isProcessingFile && fileQueue.length > 0">
{{ $t('uploading.progress', {current:filesInQueueUploaded, total: filesInQueueTotal, progress: uploadingProgress}) }} {{
$t('uploading.progress', {
current: filesInQueueUploaded,
total: filesInQueueTotal,
progress: uploadingProgress,
})
}}
</span> </span>
</div> </div>
<div class="progress-wrapper"> <div class="progress-wrapper">
@@ -25,10 +30,10 @@
</template> </template>
<script> <script>
import ProgressBar from "./ProgressBar"; import ProgressBar from './ProgressBar'
import { RefreshCwIcon, XIcon } from 'vue-feather-icons' import { RefreshCwIcon, XIcon } from 'vue-feather-icons'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import {events} from "../../bus"; import { events } from '../../bus'
export default { export default {
name: 'UploadProgress', name: 'UploadProgress',
@@ -38,19 +43,13 @@
XIcon, XIcon,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['filesInQueueUploaded', 'filesInQueueTotal', 'uploadingProgress', 'isProcessingFile', 'fileQueue']),
'filesInQueueUploaded',
'filesInQueueTotal',
'uploadingProgress',
'isProcessingFile',
'fileQueue',
])
}, },
methods: { methods: {
cancelUpload() { cancelUpload() {
events.$emit('cancel-upload') events.$emit('cancel-upload')
} },
} },
} }
</script> </script>
@@ -62,7 +61,8 @@
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
margin-right: 5px; margin-right: 5px;
polyline, path { polyline,
path {
color: inherit; color: inherit;
} }
} }
@@ -100,7 +100,6 @@
padding: 0 7px 0 13px; padding: 0 7px 0 13px;
&:hover { &:hover {
line { line {
color: inherit; color: inherit;
} }
resources/js/components/Index/Components/PageTitle.vue
+1 -2
View File
@@ -10,7 +10,7 @@
<script> <script>
export default { export default {
name: 'IndexPageTile', name: 'IndexPageTile',
props: ['title', 'description', 'type'] props: ['title', 'description', 'type'],
} }
</script> </script>
@@ -61,7 +61,6 @@
@media only screen and (max-width: 960px) { @media only screen and (max-width: 960px) {
.page-title { .page-title {
.title { .title {
max-width: 100%; max-width: 100%;
font-size: 32px; font-size: 32px;
resources/js/components/Index/Components/PricingTables.vue
+12 -16
View File
@@ -7,7 +7,9 @@
<hard-drive-icon class="text-theme" size="26" /> <hard-drive-icon class="text-theme" size="26" />
</div> </div>
<h1 class="title">{{ plan.data.attributes.name }}</h1> <h1 class="title">{{ plan.data.attributes.name }}</h1>
<h2 class="description">{{ plan.data.attributes.description }}</h2> <h2 class="description">
{{ plan.data.attributes.description }}
</h2>
</header> </header>
<section class="plan-features"> <section class="plan-features">
<b class="storage-size">{{ plan.data.attributes.capacity_formatted }}</b> <b class="storage-size">{{ plan.data.attributes.capacity_formatted }}</b>
@@ -25,7 +27,7 @@
</template> </template>
<script> <script>
import {HardDriveIcon} from "vue-feather-icons" import { HardDriveIcon } from 'vue-feather-icons'
import axios from 'axios' import axios from 'axios'
export default { export default {
@@ -39,12 +41,11 @@
} }
}, },
created() { created() {
axios.get('/api/pricing') axios.get('/api/pricing').then((response) => {
.then(response => {
this.plans = response.data this.plans = response.data
this.$emit('load', response.data) this.$emit('load', response.data)
}) })
} },
} }
</script> </script>
@@ -69,10 +70,12 @@
} }
.plan-header { .plan-header {
.icon { .icon {
path,
path, line, polyline, rect, circle { line,
polyline,
rect,
circle {
color: inherit; color: inherit;
} }
} }
@@ -106,7 +109,6 @@
} }
.plan-footer { .plan-footer {
.sign-in-button { .sign-in-button {
width: 100%; width: 100%;
text-align: center; text-align: center;
@@ -136,21 +138,19 @@
} }
@media only screen and (max-width: 960px) { @media only screen and (max-width: 960px) {
.plans-wrapper { .plans-wrapper {
display: block; display: block;
margin: 0; margin: 0;
.plan { .plan {
padding: 30px 25px; padding: 30px 25px;
border-bottom: 1px solid #F7F7F7; border-bottom: 1px solid #f7f7f7;
border-right: none; border-right: none;
} }
} }
} }
.dark { .dark {
.plans-wrapper { .plans-wrapper {
background: $dark_mode_foreground; background: $dark_mode_foreground;
} }
@@ -163,7 +163,6 @@
} }
.plan-header { .plan-header {
.title { .title {
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
} }
@@ -174,7 +173,6 @@
} }
.plan-features { .plan-features {
.storage-size { .storage-size {
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
} }
@@ -185,7 +183,6 @@
} }
.plan-footer { .plan-footer {
.sign-in-button { .sign-in-button {
background: rgba($theme, 0.1); background: rgba($theme, 0.1);
@@ -195,7 +192,6 @@
} }
.price { .price {
.vat-disclaimer { .vat-disclaimer {
color: $dark_mode_text_primary; color: $dark_mode_text_primary;
} }
resources/js/components/Index/IndexGetStarted.vue
+21 -18
View File
@@ -1,12 +1,6 @@
<template> <template>
<div class="page-wrapper large get-started" v-if="index.section_get_started === '1'"> <div class="page-wrapper large get-started" v-if="index.section_get_started === '1'">
<PageTitle class="page-title" type="center" :title="index.get_started_title" :description="index.get_started_description"></PageTitle>
<PageTitle
class="page-title"
type="center"
:title="index.get_started_title"
:description="index.get_started_description"
></PageTitle>
<router-link tag="button" class="get-started-button bg-theme-800 hover-bg-theme shadow-theme" :to="{ name: 'SignUp' }"> <router-link tag="button" class="get-started-button bg-theme-800 hover-bg-theme shadow-theme" :to="{ name: 'SignUp' }">
<span class="content">{{ $t('page_index.get_started_button') }}</span> <span class="content">{{ $t('page_index.get_started_button') }}</span>
@@ -41,7 +35,7 @@
</template> </template>
<script> <script>
import PageTitle from "./Components/PageTitle"; import PageTitle from './Components/PageTitle'
import { import {
ChevronRightIcon, ChevronRightIcon,
UploadCloudIcon, UploadCloudIcon,
@@ -93,7 +87,6 @@
@import '../../../sass/vuefilemanager/mixins'; @import '../../../sass/vuefilemanager/mixins';
.icons { .icons {
.icon { .icon {
position: absolute; position: absolute;
@@ -102,7 +95,8 @@
left: 37%; left: 37%;
transform: rotate(0deg); transform: rotate(0deg);
circle, line { circle,
line {
stroke: $yellow; stroke: $yellow;
} }
} }
@@ -112,7 +106,8 @@
left: 23.5%; left: 23.5%;
transform: rotate(-20deg); transform: rotate(-20deg);
path, line { path,
line {
stroke: $purple; stroke: $purple;
} }
} }
@@ -144,7 +139,9 @@
left: 17%; left: 17%;
transform: rotate(0deg); transform: rotate(0deg);
polyline, line, path { polyline,
line,
path {
stroke: $red; stroke: $red;
} }
} }
@@ -170,7 +167,8 @@
left: 32%; left: 32%;
transform: rotate(13deg); transform: rotate(13deg);
line, path { line,
path {
stroke: $yellow; stroke: $yellow;
} }
} }
@@ -180,7 +178,8 @@
right: 49%; right: 49%;
transform: rotate(-11deg); transform: rotate(-11deg);
line, path { line,
path {
stroke: $theme; stroke: $theme;
} }
} }
@@ -190,7 +189,8 @@
right: 45%; right: 45%;
transform: rotate(0); transform: rotate(0);
circle, path { circle,
path {
stroke: $red; stroke: $red;
} }
} }
@@ -212,7 +212,9 @@
right: 15.5%; right: 15.5%;
transform: rotate(21deg); transform: rotate(21deg);
polyline, path, line { polyline,
path,
line {
stroke: $red; stroke: $red;
} }
} }
@@ -260,11 +262,12 @@
right: 44%; right: 44%;
transform: rotate(-12deg); transform: rotate(-12deg);
polyline, line, path { polyline,
line,
path {
stroke: $red; stroke: $red;
} }
} }
} }
} }
resources/js/components/Index/IndexHeroScreenshot.vue
+15 -25
View File
@@ -1,7 +1,7 @@
<template> <template>
<div class="page-wrapper large hero-screenshot"> <div class="page-wrapper large hero-screenshot">
<img class="hero-light" src="/assets/images/vuefilemanager-screenshot-light.png" :alt="config.app_name"> <img class="hero-light" src="/assets/images/vuefilemanager-screenshot-light.png" :alt="config.app_name" />
<img class="hero-dark" src="/assets/images/vuefilemanager-screenshot-dark.png" :alt="config.app_name"> <img class="hero-dark" src="/assets/images/vuefilemanager-screenshot-dark.png" :alt="config.app_name" />
<div class="icons"> <div class="icons">
<link-icon size="20" class="icon"></link-icon> <link-icon size="20" class="icon"></link-icon>
@@ -23,18 +23,7 @@
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import { import { FolderPlusIcon, HardDriveIcon, SettingsIcon, Trash2Icon, SearchIcon, ImageIcon, GridIcon, LinkIcon, StarIcon, EyeIcon } from 'vue-feather-icons'
FolderPlusIcon,
HardDriveIcon,
SettingsIcon,
Trash2Icon,
SearchIcon,
ImageIcon,
GridIcon,
LinkIcon,
StarIcon,
EyeIcon,
} from 'vue-feather-icons'
export default { export default {
name: 'IndexHeroScreenshot', name: 'IndexHeroScreenshot',
@@ -62,7 +51,6 @@
@import '../../../sass/vuefilemanager/mixins'; @import '../../../sass/vuefilemanager/mixins';
.icons { .icons {
.icon { .icon {
z-index: 0; z-index: 0;
position: absolute; position: absolute;
@@ -83,7 +71,8 @@
right: 28.5%; right: 28.5%;
transform: rotate(-12deg); transform: rotate(-12deg);
line, path { line,
path {
stroke: $theme; stroke: $theme;
} }
} }
@@ -93,7 +82,8 @@
right: 41.5%; right: 41.5%;
transform: rotate(13deg); transform: rotate(13deg);
path, line { path,
line {
stroke: $yellow; stroke: $yellow;
} }
} }
@@ -102,7 +92,8 @@
top: -16%; top: -16%;
right: 26%; right: 26%;
circle, path { circle,
path {
stroke: $red; stroke: $red;
} }
} }
@@ -126,7 +117,9 @@
right: 2.5%; right: 2.5%;
transform: rotate(22deg); transform: rotate(22deg);
polyline, path, line { polyline,
path,
line {
stroke: $red; stroke: $red;
} }
} }
@@ -135,7 +128,8 @@
top: 14%; top: 14%;
right: 11%; right: 11%;
circle, line { circle,
line {
stroke: $purple; stroke: $purple;
} }
} }
@@ -182,7 +176,7 @@
img { img {
border-radius: 8px; border-radius: 8px;
width: 80%; width: 80%;
box-shadow: 0 7px 255px rgba(#19363C, 0.1); box-shadow: 0 7px 255px rgba(#19363c, 0.1);
&.hero-dark { &.hero-dark {
display: none; display: none;
@@ -191,7 +185,6 @@
} }
@media only screen and (max-width: 890px) { @media only screen and (max-width: 890px) {
.icons { .icons {
display: none; display: none;
} }
@@ -207,11 +200,8 @@
} }
.dark { .dark {
.hero-screenshot { .hero-screenshot {
img { img {
&.hero-light { &.hero-light {
display: none; display: none;
} }
resources/js/components/Index/IndexMainFeatures.vue
+18 -17
View File
@@ -1,14 +1,9 @@
<template> <template>
<section class="main-features page-wrapper medium"> <section class="main-features page-wrapper medium">
<PageTitle <PageTitle v-if="index.section_features === '1'" type="center" :title="index.features_title" :description="index.features_description"></PageTitle>
v-if="index.section_features === '1'"
type="center"
:title="index.features_title"
:description="index.features_description"
></PageTitle>
<div v-if="index.section_feature_boxes === '1'" class="content"> <div v-if="index.section_feature_boxes === '1'" class="content">
<div class="hero"> <div class="hero">
<img src="/assets/images/hero-Illustration.svg" alt="Hero"> <img src="/assets/images/hero-Illustration.svg" alt="Hero" />
</div> </div>
<div class="features"> <div class="features">
<div class="feature"> <div class="feature">
@@ -51,7 +46,7 @@
<script> <script>
import { UserIcon, CloudIcon, HardDriveIcon } from 'vue-feather-icons' import { UserIcon, CloudIcon, HardDriveIcon } from 'vue-feather-icons'
import PageTitle from "./Components/PageTitle"; import PageTitle from './Components/PageTitle'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
@@ -107,7 +102,11 @@
&:nth-child(1) .icon { &:nth-child(1) .icon {
background: rgba($yellow, 0.1); background: rgba($yellow, 0.1);
path, line, polyline, rect, circle { path,
line,
polyline,
rect,
circle {
stroke: $yellow; stroke: $yellow;
} }
} }
@@ -115,7 +114,11 @@
&:nth-child(2) .icon { &:nth-child(2) .icon {
background: rgba($theme, 0.1); background: rgba($theme, 0.1);
path, line, polyline, rect, circle { path,
line,
polyline,
rect,
circle {
stroke: $theme; stroke: $theme;
} }
} }
@@ -123,7 +126,11 @@
&:nth-child(3) .icon { &:nth-child(3) .icon {
background: rgba($purple, 0.1); background: rgba($purple, 0.1);
path, line, polyline, rect, circle { path,
line,
polyline,
rect,
circle {
stroke: $purple; stroke: $purple;
} }
} }
@@ -136,7 +143,6 @@
} }
@media only screen and (max-width: 1190px) { @media only screen and (max-width: 1190px) {
.hero { .hero {
flex: 0 0 60%; flex: 0 0 60%;
@@ -152,7 +158,6 @@
} }
@media only screen and (max-width: 960px) { @media only screen and (max-width: 960px) {
.content { .content {
display: block; display: block;
margin-top: 40px; margin-top: 40px;
@@ -177,16 +182,12 @@
} }
.dark { .dark {
.features { .features {
.feature { .feature {
.description { .description {
color: $dark_mode_text_secondary; color: $dark_mode_text_secondary;
} }
} }
} }
} }
</style> </style>
resources/js/components/Index/IndexNavigation.vue
+1 -3
View File
@@ -1,7 +1,7 @@
<template> <template>
<nav class="main-navigation"> <nav class="main-navigation">
<router-link :to="{ name: 'Homepage' }" tag="div" class="logo"> <router-link :to="{ name: 'Homepage' }" tag="div" class="logo">
<img v-if="config.app_logo_horizontal" :src="$getImage(config.app_logo_horizontal)" :alt="config.app_name"> <img v-if="config.app_logo_horizontal" :src="$getImage(config.app_logo_horizontal)" :alt="config.app_name" />
<b v-if="!config.app_logo_horizontal" class="logo-text">{{ config.app_name }}</b> <b v-if="!config.app_logo_horizontal" class="logo-text">{{ config.app_name }}</b>
</router-link> </router-link>
<div class="navigation"> <div class="navigation">
@@ -114,13 +114,11 @@
} }
@media only screen and (max-width: 690px) { @media only screen and (max-width: 690px) {
.navigation { .navigation {
display: none; display: none;
} }
.logo { .logo {
img { img {
height: auto; height: auto;
width: 190px; width: 190px;
resources/js/components/Index/IndexPageFooter.vue
+1 -2
View File
@@ -1,7 +1,7 @@
<template> <template>
<footer class="page-wrapper medium"> <footer class="page-wrapper medium">
<router-link :to="{ name: 'Homepage' }" tag="div" class="logo"> <router-link :to="{ name: 'Homepage' }" tag="div" class="logo">
<img v-if="config.app_logo_horizontal" :src="$getImage(config.app_logo_horizontal)" :alt="config.app_name"> <img v-if="config.app_logo_horizontal" :src="$getImage(config.app_logo_horizontal)" :alt="config.app_name" />
<b v-if="!config.app_logo_horizontal" class="logo-text">{{ config.app_name }}</b> <b v-if="!config.app_logo_horizontal" class="logo-text">{{ config.app_name }}</b>
</router-link> </router-link>
<ul class="navigation-links"> <ul class="navigation-links">
@@ -105,7 +105,6 @@
} }
.dark { .dark {
.copyright { .copyright {
color: $dark_mode_text_secondary; color: $dark_mode_text_secondary;
} }
resources/js/components/Index/IndexPageHeader.vue
+19 -12
View File
@@ -1,12 +1,8 @@
<template> <template>
<header class="main-header page-wrapper medium"> <header class="main-header page-wrapper medium">
<PageTitle <PageTitle :title="index.header_title" :description="index.header_description" />
:title="index.header_title"
:description="index.header_description"
/>
<div v-if="!config.isAuthenticated"> <div v-if="!config.isAuthenticated">
<!--User registration button--> <!--User registration button-->
<router-link v-if="config.userRegistration" class="sign-up-button" :to="{ name: 'SignUp' }"> <router-link v-if="config.userRegistration" class="sign-up-button" :to="{ name: 'SignUp' }">
<AuthButton class="button" icon="chevron-right" :text="$t('page_index.sign_up_button')" /> <AuthButton class="button" icon="chevron-right" :text="$t('page_index.sign_up_button')" />
@@ -24,7 +20,11 @@
</div> </div>
<div class="feature"> <div class="feature">
<hard-drive-icon size="19" class="feature-icon"></hard-drive-icon> <hard-drive-icon size="19" class="feature-icon"></hard-drive-icon>
<b class="feature-title">{{ $t('page_index.sign_feature_2', {defaultSpace: config.storageDefaultSpaceFormatted}) }}</b> <b class="feature-title">{{
$t('page_index.sign_feature_2', {
defaultSpace: config.storageDefaultSpaceFormatted,
})
}}</b>
</div> </div>
</div> </div>
</div> </div>
@@ -32,9 +32,9 @@
</template> </template>
<script> <script>
import HardDriveIcon from "vue-feather-icons/icons/HardDriveIcon"; import HardDriveIcon from 'vue-feather-icons/icons/HardDriveIcon'
import PageTitle from "./Components/PageTitle"; import PageTitle from './Components/PageTitle'
import AuthButton from "../Auth/AuthButton"; import AuthButton from '../Auth/AuthButton'
import { CreditCardIcon } from 'vue-feather-icons' import { CreditCardIcon } from 'vue-feather-icons'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
@@ -66,13 +66,21 @@
margin-right: 35px; margin-right: 35px;
&:nth-child(1) { &:nth-child(1) {
path, line, polyline, rect, circle { path,
line,
polyline,
rect,
circle {
stroke: $yellow; stroke: $yellow;
} }
} }
&:nth-child(2) { &:nth-child(2) {
path, line, polyline, rect, circle { path,
line,
polyline,
rect,
circle {
stroke: $purple; stroke: $purple;
} }
} }
@@ -107,7 +115,6 @@
} }
@media only screen and (max-width: 690px) { @media only screen and (max-width: 690px) {
.main-header { .main-header {
padding-top: 50px; padding-top: 50px;
} }
resources/js/components/Index/IndexPricingTables.vue
+5 -9
View File
@@ -21,8 +21,8 @@
</template> </template>
<script> <script>
import PricingTables from "./Components/PricingTables"; import PricingTables from './Components/PricingTables'
import AuthButton from "../Auth/AuthButton"; import AuthButton from '../Auth/AuthButton'
import { CloudIcon } from 'vue-feather-icons' import { CloudIcon } from 'vue-feather-icons'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
@@ -43,10 +43,9 @@
}, },
methods: { methods: {
pricingLoaded(pricing) { pricingLoaded(pricing) {
if (pricing.length === 0) if (pricing.length === 0) this.isEmpty = true
this.isEmpty = true },
} },
}
} }
</script> </script>
@@ -137,7 +136,6 @@
} }
@media only screen and (max-width: 1190px) { @media only screen and (max-width: 1190px) {
.cloud-bg { .cloud-bg {
display: none; display: none;
} }
@@ -149,9 +147,7 @@
} }
@media only screen and (max-width: 960px) { @media only screen and (max-width: 960px) {
.page-title { .page-title {
.title { .title {
font-size: 28px; font-size: 28px;
line-height: 1.25; line-height: 1.25;
resources/js/components/Mobile/MenuMobile.vue
+8 -16
View File
@@ -1,23 +1,17 @@
<template> <template>
<transition name="context-menu"> <transition name="context-menu">
<div <div v-if="isVisible" @click="closeMenu" class="fixed bottom-0 left-0 right-0 z-50 overflow-hidden rounded-tl-xl rounded-tr-xl bg-white pb-4 dark:bg-2x-dark-foreground">
v-if="isVisible"
@click="closeMenu"
class="fixed pb-4 bottom-0 left-0 right-0 z-50 overflow-hidden dark:bg-2x-dark-foreground bg-white rounded-tl-xl rounded-tr-xl"
>
<slot /> <slot />
</div> </div>
</transition> </transition>
</template> </template>
<script> <script>
import {events} from "../../bus"; import { events } from '../../bus'
export default { export default {
name: 'MenuMobile', name: 'MenuMobile',
props: [ props: ['name'],
'name'
],
data() { data() {
return { return {
isVisible: false, isVisible: false,
@@ -28,21 +22,19 @@
this.isVisible = false this.isVisible = false
events.$emit('mobile-menu:hide') events.$emit('mobile-menu:hide')
} },
}, },
created() { created() {
events.$on('mobile-menu:show', name => { events.$on('mobile-menu:show', (name) => {
if (name === this.name) if (name === this.name) this.isVisible = !this.isVisible
this.isVisible = !this.isVisible
}) })
events.$on('mobile-menu:hide', () => this.isVisible = false) events.$on('mobile-menu:hide', () => (this.isVisible = false))
} },
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
// Transition // Transition
.context-menu-enter-active, .context-menu-enter-active,
.fade-enter-active { .fade-enter-active {
resources/js/components/Mobile/MenuMobileGroup.vue
+2 -2
View File
@@ -11,8 +11,8 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "resources/sass/vuefilemanager/_variables"; @import 'resources/sass/vuefilemanager/_variables';
@import "resources/sass/vuefilemanager/_mixins"; @import 'resources/sass/vuefilemanager/_mixins';
.menu-options { .menu-options {
margin-top: 10px; margin-top: 10px;
resources/js/components/Mobile/MobileHeader.vue
+5 -12
View File
@@ -1,6 +1,5 @@
<template> <template>
<header class="mobile-header"> <header class="mobile-header">
<!-- Go back--> <!-- Go back-->
<div @click="goBack" class="go-back"> <div @click="goBack" class="go-back">
<chevron-left-icon size="17" class="icon" /> <chevron-left-icon size="17" class="icon" />
@@ -19,25 +18,20 @@
<script> <script>
import { events } from '../../bus' import { events } from '../../bus'
import { import { ChevronLeftIcon, MenuIcon } from 'vue-feather-icons'
ChevronLeftIcon,
MenuIcon,
} from 'vue-feather-icons'
export default { export default {
name: 'MobileHeader', name: 'MobileHeader',
props: [ props: ['title'],
'title'
],
components: { components: {
ChevronLeftIcon, ChevronLeftIcon,
MenuIcon, MenuIcon,
}, },
methods: { methods: {
goBack() { goBack() {
this.$router.back(); this.$router.back()
} },
} },
} }
</script> </script>
@@ -104,5 +98,4 @@
} }
} }
} }
</style> </style>
resources/js/components/Others/ActionButton.vue
+4 -3
View File
@@ -17,7 +17,7 @@
components: { components: {
Edit2Icon, Edit2Icon,
XIcon, XIcon,
} },
} }
</script> </script>
@@ -39,13 +39,14 @@
display: inline-block; display: inline-block;
margin-right: 2px; margin-right: 2px;
path, circle, line { path,
circle,
line {
color: inherit; color: inherit;
} }
} }
} }
.dark { .dark {
} }
</style> </style>
resources/js/components/Others/ColorLabel.vue
+2 -5
View File
@@ -1,5 +1,5 @@
<template> <template>
<b class="color-label capitalize inline-block text-xs font-bold rounded-lg py-1 px-2" :class="color"> <b class="color-label inline-block rounded-lg py-1 px-2 text-xs font-bold capitalize" :class="color">
<slot></slot> <slot></slot>
</b> </b>
</template> </template>
@@ -7,9 +7,7 @@
<script> <script>
export default { export default {
name: 'ColorLabel', name: 'ColorLabel',
props: [ props: ['color'],
'color'
],
} }
</script> </script>
@@ -17,7 +15,6 @@
@import '../../../sass/vuefilemanager/variables'; @import '../../../sass/vuefilemanager/variables';
.color-label { .color-label {
&.purple { &.purple {
color: $purple; color: $purple;
background: rgba($purple, 0.1); background: rgba($purple, 0.1);
resources/js/components/Others/ColorPicker.vue
+4 -8
View File
@@ -19,9 +19,7 @@ export default {
props: ['pickedColor'], props: ['pickedColor'],
components: { CheckIcon }, components: { CheckIcon },
computed: { computed: {
...mapGetters([ ...mapGetters(['config']),
'config'
])
}, },
data() { data() {
return { return {
@@ -48,20 +46,19 @@ export default {
'#FE7D6F', '#FE7D6F',
'#4c4c4c', '#4c4c4c',
'#06070B', '#06070B',
] ],
} }
}, },
methods: { methods: {
setColor(value) { setColor(value) {
this.selectedColor = value this.selectedColor = value
this.$emit('input', value) this.$emit('input', value)
} },
}, },
created() { created() {
this.colors.push(this.config.app_color) this.colors.push(this.config.app_color)
} },
} }
</script> </script>
@@ -132,5 +129,4 @@ export default {
} }
} }
} }
</style> </style>
resources/js/components/Others/ConfirmPassword.vue
+21 -28
View File
@@ -1,33 +1,29 @@
<template> <template>
<PopupWrapper name="confirm-password"> <PopupWrapper name="confirm-password">
<PopupHeader :title="$t('Confirm Password')" icon="edit" /> <PopupHeader :title="$t('Confirm Password')" icon="edit" />
<PopupContent> <PopupContent>
<ValidationObserver @submit.prevent="confirmPassword" ref="passwordForm" v-slot="{ invalid }" tag="form"> <ValidationObserver @submit.prevent="confirmPassword" ref="passwordForm" v-slot="{ invalid }" tag="form">
<ValidationProvider tag="div" mode="passive" name="Password" rules="required" v-slot="{ errors }"> <ValidationProvider tag="div" mode="passive" name="Password" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('popup_2fa.input_label')" :error="errors[0]" :is-last="true"> <AppInputText :title="$t('popup_2fa.input_label')" :error="errors[0]" :is-last="true">
<input v-model="password" :class="{'border-red': errors[0]}" type="password" ref="input" class="focus-border-theme input-dark" :placeholder="$t('page_sign_in.placeholder_password')"> <input
v-model="password"
:class="{ 'border-red': errors[0] }"
type="password"
ref="input"
class="focus-border-theme input-dark"
:placeholder="$t('page_sign_in.placeholder_password')"
/>
</AppInputText> </AppInputText>
</ValidationProvider> </ValidationProvider>
</ValidationObserver> </ValidationObserver>
</PopupContent> </PopupContent>
<PopupActions> <PopupActions>
<ButtonBase <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">
class="w-full"
@click.native="$closePopup()"
button-style="secondary"
>
{{ $t('global.cancel') }} {{ $t('global.cancel') }}
</ButtonBase> </ButtonBase>
<ButtonBase <ButtonBase class="w-full" @click.native="confirmPassword" button-style="theme" :loading="isLoading" :disabled="isLoading">
class="w-full"
@click.native="confirmPassword"
button-style="theme"
:loading="isLoading"
:disabled="isLoading"
>
{{ $t('popup_2fa.confirm_button') }} {{ $t('popup_2fa.confirm_button') }}
</ButtonBase> </ButtonBase>
</PopupActions> </PopupActions>
@@ -36,19 +32,19 @@
<script> <script>
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full' import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
import PopupWrapper from "./Popup/PopupWrapper"; import PopupWrapper from './Popup/PopupWrapper'
import PopupActions from './Popup/PopupActions' import PopupActions from './Popup/PopupActions'
import PopupContent from './Popup/PopupContent' import PopupContent from './Popup/PopupContent'
import PopupHeader from './Popup/PopupHeader' import PopupHeader from './Popup/PopupHeader'
import ButtonBase from "../FilesView/ButtonBase"; import ButtonBase from '../FilesView/ButtonBase'
import AppInputText from "../Admin/AppInputText" import AppInputText from '../Admin/AppInputText'
import { required } from 'vee-validate/dist/rules' import { required } from 'vee-validate/dist/rules'
import { events } from '../../bus' import { events } from '../../bus'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import axios from 'axios' import axios from 'axios'
export default { export default {
name: "ConfirmPassword", name: 'ConfirmPassword',
components: { components: {
ValidationProvider, ValidationProvider,
ValidationObserver, ValidationObserver,
@@ -61,9 +57,7 @@ export default {
required, required,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['user']),
'user'
]),
}, },
data() { data() {
return { return {
@@ -78,16 +72,16 @@ export default {
axios axios
.post('/user/confirm-password', { .post('/user/confirm-password', {
password: this.password password: this.password,
}) })
.then(() => { .then(() => {
events.$emit('password:confirmed', this.args) events.$emit('password:confirmed', this.args)
}) })
.catch(error => { .catch((error) => {
if (error.response.status === 422) { if (error.response.status === 422) {
this.$refs.passwordForm.setErrors({ this.$refs.passwordForm.setErrors({
'Password': this.$t('validation_errors.incorrect_password') Password: this.$t('validation_errors.incorrect_password'),
}); })
} }
}) })
.finally(() => { .finally(() => {
@@ -98,12 +92,11 @@ export default {
}, },
created() { created() {
// Show popup // Show popup
events.$on('popup:open', args => { events.$on('popup:open', (args) => {
if (args.name !== 'confirm-password') return if (args.name !== 'confirm-password') return
this.args = args this.args = args
}) })
} },
} }
</script> </script>
resources/js/components/Others/CookieDisclaimer.vue
+10 -9
View File
@@ -1,6 +1,9 @@
<template> <template>
<div v-if="isVisibleDisclaimer" class="fixed bottom-0 sm:left-16 left-0 sm:right-auto right-0 sm:p-3 sm:w-56 w-full p-4 shadow-xl rounded-tl-xl rounded-tr-lg dark:bg-dark-foreground bg-white z-20"> <div
<span @click="closeDisclaimer" class="absolute -right-1 -top-1 p-3 cursor-pointer"> v-if="isVisibleDisclaimer"
class="fixed bottom-0 left-0 right-0 z-20 w-full rounded-tl-xl rounded-tr-lg bg-white p-4 shadow-xl dark:bg-dark-foreground sm:left-16 sm:right-auto sm:w-56 sm:p-3"
>
<span @click="closeDisclaimer" class="absolute -right-1 -top-1 cursor-pointer p-3">
<x-icon size="10" /> <x-icon size="10" />
</span> </span>
<i18n path="cookie_disclaimer.description" tag="p" class="text-xs"> <i18n path="cookie_disclaimer.description" tag="p" class="text-xs">
@@ -21,13 +24,11 @@
XIcon, XIcon,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['config']),
'config'
]),
}, },
data() { data() {
return { return {
isVisibleDisclaimer: false isVisibleDisclaimer: false,
} }
}, },
methods: { methods: {
@@ -35,10 +36,10 @@
localStorage.setItem('isHiddenDisclaimer', 'true') localStorage.setItem('isHiddenDisclaimer', 'true')
this.isVisibleDisclaimer = false this.isVisibleDisclaimer = false
} },
}, },
created() { created() {
this.isVisibleDisclaimer = !localStorage.getItem('isHiddenDisclaimer'); this.isVisibleDisclaimer = !localStorage.getItem('isHiddenDisclaimer')
} },
} }
</script> </script>
resources/js/components/Others/CreateFolderPopup.vue
+25 -34
View File
@@ -1,19 +1,23 @@
<template> <template>
<PopupWrapper name="create-folder"> <PopupWrapper name="create-folder">
<!--Title--> <!--Title-->
<PopupHeader :title="$t('popup_create_folder.title')" icon="edit" /> <PopupHeader :title="$t('popup_create_folder.title')" icon="edit" />
<!--Content--> <!--Content-->
<PopupContent> <PopupContent>
<!--Form to set sharing--> <!--Form to set sharing-->
<ValidationObserver @submit.prevent="createFolder" ref="createForm" v-slot="{ invalid }" tag="form"> <ValidationObserver @submit.prevent="createFolder" ref="createForm" v-slot="{ invalid }" tag="form">
<!--Set folder name--> <!--Set folder name-->
<ValidationProvider tag="div" mode="passive" name="Title" rules="required" v-slot="{ errors }"> <ValidationProvider tag="div" mode="passive" name="Title" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('popup_create_folder.label')" :error="errors[0]"> <AppInputText :title="$t('popup_create_folder.label')" :error="errors[0]">
<input v-model="name" :class="{'border-red': errors[0]}" type="text" ref="input" class="focus-border-theme input-dark" :placeholder="$t('popup_create_folder.placeholder')"> <input
v-model="name"
:class="{ 'border-red': errors[0] }"
type="text"
ref="input"
class="focus-border-theme input-dark"
:placeholder="$t('popup_create_folder.placeholder')"
/>
</AppInputText> </AppInputText>
</ValidationProvider> </ValidationProvider>
@@ -28,36 +32,26 @@
<!--Actions--> <!--Actions-->
<PopupActions> <PopupActions>
<ButtonBase <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">{{ $t('popup_move_item.cancel') }} </ButtonBase>
class="w-full" <ButtonBase class="w-full" @click.native="createFolder" button-style="theme">{{ $t('popup_create_folder.title') }} </ButtonBase>
@click.native="$closePopup()"
button-style="secondary"
>{{ $t('popup_move_item.cancel') }}
</ButtonBase>
<ButtonBase
class="w-full"
@click.native="createFolder"
button-style="theme"
>{{ $t('popup_create_folder.title') }}
</ButtonBase>
</PopupActions> </PopupActions>
</PopupWrapper> </PopupWrapper>
</template> </template>
<script> <script>
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full' import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
import PopupWrapper from "./Popup/PopupWrapper"; import PopupWrapper from './Popup/PopupWrapper'
import PopupActions from "./Popup/PopupActions"; import PopupActions from './Popup/PopupActions'
import PopupContent from "./Popup/PopupContent"; import PopupContent from './Popup/PopupContent'
import PopupHeader from "./Popup/PopupHeader"; import PopupHeader from './Popup/PopupHeader'
import ThumbnailItem from "./ThumbnailItem"; import ThumbnailItem from './ThumbnailItem'
import ButtonBase from "../FilesView/ButtonBase"; import ButtonBase from '../FilesView/ButtonBase'
import { required } from 'vee-validate/dist/rules' import { required } from 'vee-validate/dist/rules'
import AppInputSwitch from "../Admin/AppInputSwitch" import AppInputSwitch from '../Admin/AppInputSwitch'
import AppInputText from "../Admin/AppInputText" import AppInputText from '../Admin/AppInputText'
import SwitchInput from "./Forms/SwitchInput" import SwitchInput from './Forms/SwitchInput'
import { events } from '../../bus' import { events } from '../../bus'
import EmojiPicker from "./EmojiPicker" import EmojiPicker from './EmojiPicker'
export default { export default {
name: 'CreateFolderPopup', name: 'CreateFolderPopup',
@@ -85,15 +79,14 @@
}, },
methods: { methods: {
async createFolder() { async createFolder() {
// Validate fields // Validate fields
const isValid = await this.$refs.createForm.validate(); const isValid = await this.$refs.createForm.validate()
if (!isValid) return; if (!isValid) return
await this.$store.dispatch('createFolder', { await this.$store.dispatch('createFolder', {
name: this.name, name: this.name,
emoji: this.emoji emoji: this.emoji,
}) })
this.$closePopup() this.$closePopup()
@@ -105,10 +98,8 @@
}, },
mounted() { mounted() {
events.$on('popup:open', ({ name }) => { events.$on('popup:open', ({ name }) => {
if (name === 'create-folder' && !this.$isMobile()) this.$nextTick(() => this.$refs.input.focus())
if (name === 'create-folder' && ! this.$isMobile())
this.$nextTick(() => this.$refs.input.focus())
}) })
} },
} }
</script> </script>
resources/js/components/Others/CreateLanguage.vue
+390 -396
View File
File diff suppressed because it is too large Load Diff
resources/js/components/Others/CreatePersonalTokenPopup.vue
+25 -39
View File
@@ -1,17 +1,21 @@
<template> <template>
<PopupWrapper name="create-personal-token"> <PopupWrapper name="create-personal-token">
<PopupHeader :title="$t('popup_personal_token.title')" icon="key" /> <PopupHeader :title="$t('popup_personal_token.title')" icon="key" />
<PopupContent> <PopupContent>
<ValidationObserver v-if="!token" @submit.prevent="createTokenForm" ref="createToken" v-slot="{ invalid }" tag="form"> <ValidationObserver v-if="!token" @submit.prevent="createTokenForm" ref="createToken" v-slot="{ invalid }" tag="form">
<ValidationProvider tag="div" mode="passive" name="Token Name" rules="required" v-slot="{ errors }"> <ValidationProvider tag="div" mode="passive" name="Token Name" rules="required" v-slot="{ errors }">
<AppInputText :title="$t('popup_personal_token.label')" :error="errors[0]" :is-last="true"> <AppInputText :title="$t('popup_personal_token.label')" :error="errors[0]" :is-last="true">
<input v-model="name" :class="{'border-red': errors[0]}" type="text" ref="input" class="focus-border-theme input-dark" :placeholder="$t('popup_personal_token.plc')"> <input
v-model="name"
:class="{ 'border-red': errors[0] }"
type="text"
ref="input"
class="focus-border-theme input-dark"
:placeholder="$t('popup_personal_token.plc')"
/>
</AppInputText> </AppInputText>
</ValidationProvider> </ValidationProvider>
</ValidationObserver> </ValidationObserver>
<AppInputText v-if="token" :title="$t('popup_personal_token.your_token')" :is-last="true"> <AppInputText v-if="token" :title="$t('popup_personal_token.your_token')" :is-last="true">
@@ -21,34 +25,19 @@
<p v-html="$t('popup_personal_token.copy_token')"></p> <p v-html="$t('popup_personal_token.copy_token')"></p>
</InfoBox> </InfoBox>
</AppInputText> </AppInputText>
</PopupContent> </PopupContent>
<PopupActions v-if="!token"> <PopupActions v-if="!token">
<ButtonBase <ButtonBase class="w-full" @click.native="$closePopup()" button-style="secondary">
class="w-full"
@click.native="$closePopup()"
button-style="secondary"
>
{{ $t('global.cancel') }} {{ $t('global.cancel') }}
</ButtonBase> </ButtonBase>
<ButtonBase <ButtonBase class="w-full" @click.native="createTokenForm" button-style="theme" :loading="isLoading" :disabled="isLoading">
class="w-full"
@click.native="createTokenForm"
button-style="theme"
:loading="isLoading"
:disabled="isLoading"
>
{{ $t('personal_token.create_token') }} {{ $t('personal_token.create_token') }}
</ButtonBase> </ButtonBase>
</PopupActions> </PopupActions>
<PopupActions v-if="token"> <PopupActions v-if="token">
<ButtonBase <ButtonBase class="w-full" @click.native="closePopup" button-style="theme">
class="w-full"
@click.native="closePopup"
button-style="theme"
>
{{ $t('shared_form.button_done') }} {{ $t('shared_form.button_done') }}
</ButtonBase> </ButtonBase>
</PopupActions> </PopupActions>
@@ -56,21 +45,21 @@
</template> </template>
<script> <script>
import AppInputText from "../Admin/AppInputText"; import AppInputText from '../Admin/AppInputText'
import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full' import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
import PopupWrapper from "./Popup/PopupWrapper"; import PopupWrapper from './Popup/PopupWrapper'
import PopupActions from "./Popup/PopupActions"; import PopupActions from './Popup/PopupActions'
import PopupContent from "./Popup/PopupContent"; import PopupContent from './Popup/PopupContent'
import PopupHeader from "./Popup/PopupHeader"; import PopupHeader from './Popup/PopupHeader'
import CopyInput from "./Forms/CopyInput"; import CopyInput from './Forms/CopyInput'
import ButtonBase from "../FilesView/ButtonBase"; import ButtonBase from '../FilesView/ButtonBase'
import InfoBox from "./Forms/InfoBox"; import InfoBox from './Forms/InfoBox'
import { required } from 'vee-validate/dist/rules' import { required } from 'vee-validate/dist/rules'
import { events } from '../../bus' import { events } from '../../bus'
import axios from 'axios' import axios from 'axios'
export default { export default {
name: "CreatePersonalTokenPopup", name: 'CreatePersonalTokenPopup',
components: { components: {
ValidationProvider, ValidationProvider,
ValidationObserver, ValidationObserver,
@@ -88,12 +77,11 @@ export default {
return { return {
isLoading: false, isLoading: false,
name: undefined, name: undefined,
token: undefined token: undefined,
} }
}, },
methods: { methods: {
async createTokenForm() { async createTokenForm() {
const isValid = await this.$refs.createToken.validate() const isValid = await this.$refs.createToken.validate()
if (!isValid) return if (!isValid) return
@@ -102,9 +90,9 @@ export default {
axios axios
.post('/api/user/tokens', { .post('/api/user/tokens', {
name: this.name name: this.name,
}) })
.then(response => { .then((response) => {
this.token = response.data this.token = response.data
events.$emit('reload-personal-access-tokens') events.$emit('reload-personal-access-tokens')
@@ -118,8 +106,8 @@ export default {
closePopup() { closePopup() {
this.$closePopup() this.$closePopup()
this.token = undefined this.token = undefined
} },
} },
} }
</script> </script>
@@ -128,10 +116,8 @@ export default {
@import '../../../sass/vuefilemanager/forms'; @import '../../../sass/vuefilemanager/forms';
.dark { .dark {
.info-box { .info-box {
background: lighten($dark_mode_foreground, 3%); background: lighten($dark_mode_foreground, 3%);
} }
} }
</style> </style>
resources/js/components/Others/Emoji.vue
+8 -19
View File
@@ -1,14 +1,7 @@
<template> <template>
<div v-if="emoji"> <div v-if="emoji">
<div <div v-if="config.defaultEmoji === 'twemoji'" v-html="transferEmoji" style="font-size: inherit; transform: scale(0.95)"></div>
v-if="config.defaultEmoji === 'twemoji'" <div v-if="config.defaultEmoji === 'applemoji'" style="font-size: inherit">
v-html="transferEmoji"
style="font-size: inherit; transform: scale(0.95)"
></div>
<div
v-if="config.defaultEmoji === 'applemoji'"
style="font-size: inherit"
>
{{ emoji.char }} {{ emoji.char }}
</div> </div>
</div> </div>
@@ -16,13 +9,11 @@
<script> <script>
import twemoji from 'twemoji' import twemoji from 'twemoji'
import {mapGetters} from "vuex"; import { mapGetters } from 'vuex'
export default { export default {
name: 'Emoji', name: 'Emoji',
props: [ props: ['emoji'],
'emoji',
],
data() { data() {
return { return {
isApple: false, isApple: false,
@@ -30,18 +21,16 @@
} }
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['config']),
'config',
]),
transferEmoji() { transferEmoji() {
return twemoji.parse(this.emoji.char, { return twemoji.parse(this.emoji.char, {
folder: 'svg', folder: 'svg',
ext: '.svg', ext: '.svg',
attributes: () => ({ attributes: () => ({
loading: 'lazy' loading: 'lazy',
}),
}) })
}) },
}
}, },
} }
</script> </script>
resources/js/components/Others/EmojiPicker.vue
+35 -32
View File
@@ -1,15 +1,14 @@
<template> <template>
<div> <div>
<!-- Search field --> <!-- Search field -->
<div class="mb-3 relative flex items-center"> <div class="relative mb-3 flex items-center">
<!-- Selected emoji preview --> <!-- Selected emoji preview -->
<div v-if="defaultEmoji" class="select-none mr-3"> <div v-if="defaultEmoji" class="mr-3 select-none">
<Emoji :emoji="defaultEmoji" class="text-5xl" /> <Emoji :emoji="defaultEmoji" class="text-5xl" />
</div> </div>
<!-- Search input --> <!-- Search input -->
<input @click="openList" v-model="query" class="focus-border-theme input-dark" type="text" :placeholder="$t('Select or search emoji icon...')"> <input @click="openList" v-model="query" class="focus-border-theme input-dark" type="text" :placeholder="$t('Select or search emoji icon...')" />
</div> </div>
<!-- Spinner --> <!-- Spinner -->
@@ -18,36 +17,43 @@
</div> </div>
<!-- Emojis List --> <!-- Emojis List -->
<div v-if="isOpen && isLoaded && emojis" @scroll="checkGroupInView" id="group-box" class="2xl:h-96 lg:h-60 h-96 overflow-y-auto select-none relative"> <div v-if="isOpen && isLoaded && emojis" @scroll="checkGroupInView" id="group-box" class="relative h-96 select-none overflow-y-auto lg:h-60 2xl:h-96">
<!-- Navigation of Emojis Groups --> <!-- Navigation of Emojis Groups -->
<ul v-if="! query" class="flex items-center justify-between space-x-1 sticky top-0 sm:dark:bg-4x-dark-foreground dark:bg-dark-background bg-white z-10" id="group-bar"> <ul v-if="!query" class="sticky top-0 z-10 flex items-center justify-between space-x-1 bg-white dark:bg-dark-background sm:dark:bg-4x-dark-foreground" id="group-bar">
<li @click.stop="scrollToGroup(group.name)" v-for="(group,i) in emojis.groups" :key="i" class="w-14 h-14 flex items-center justify-center rounded-xl cursor-pointer dark:hover:bg-2x-dark-foreground hover:bg-light-background" :class="{'dark:bg-2x-dark-foreground bg-light-background': group.name === groupInView}"> <li
@click.stop="scrollToGroup(group.name)"
v-for="(group, i) in emojis.groups"
:key="i"
class="flex h-14 w-14 cursor-pointer items-center justify-center rounded-xl hover:bg-light-background dark:hover:bg-2x-dark-foreground"
:class="{
'bg-light-background dark:bg-2x-dark-foreground': group.name === groupInView,
}"
>
<Emoji :emoji="group.emoji" class="text-3xl" /> <Emoji :emoji="group.emoji" class="text-3xl" />
</li> </li>
</ul> </ul>
<!-- All Emojis --> <!-- All Emojis -->
<div v-if="!query" v-for="(group, name) in allEmoji" :key="name" :id="`group-${name}`"> <div v-if="!query" v-for="(group, name) in allEmoji" :key="name" :id="`group-${name}`">
<label class="font-bold text-sm mt-4 mb-2 block"> <label class="mt-4 mb-2 block text-sm font-bold">
{{ name }} {{ name }}
</label> </label>
<ul class="grid md:grid-cols-9 grid-cols-7 gap-4 space-between"> <ul class="space-between grid grid-cols-7 gap-4 md:grid-cols-9">
<li @click="setEmoji( emoji )" v-for="(emoji,i) in group" :key="i" class="flex items-center justify-center cursor-pointer"> <li @click="setEmoji(emoji)" v-for="(emoji, i) in group" :key="i" class="flex cursor-pointer items-center justify-center">
<Emoji :emoji="emoji" class="text-4xl" /> <Emoji :emoji="emoji" class="text-4xl" />
</li> </li>
</ul> </ul>
</div> </div>
<!-- Searched emojis --> <!-- Searched emojis -->
<ul v-if="query" class="grid md:grid-cols-9 grid-cols-7 gap-4 space-between"> <ul v-if="query" class="space-between grid grid-cols-7 gap-4 md:grid-cols-9">
<li @click="setEmoji( emoji )" v-for="(emoji,i) in filteredEmojis" :key="i" class="flex items-center justify-center cursor-pointer"> <li @click="setEmoji(emoji)" v-for="(emoji, i) in filteredEmojis" :key="i" class="flex cursor-pointer items-center justify-center">
<Emoji :emoji="emoji" class="text-4xl" /> <Emoji :emoji="emoji" class="text-4xl" />
</li> </li>
</ul> </ul>
<!-- Not found --> <!-- Not found -->
<span class="font-bold text-sm ml-2" v-if="filteredEmojis.length === 0 && query !== undefined"> <span class="ml-2 text-sm font-bold" v-if="filteredEmojis.length === 0 && query !== undefined">
{{ $t('There is nothing :(') }} {{ $t('There is nothing :(') }}
</span> </span>
</div> </div>
@@ -55,26 +61,22 @@
</template> </template>
<script> <script>
import Spinner from "../FilesView/Spinner"; import Spinner from '../FilesView/Spinner'
import Emoji from "./Emoji"; import Emoji from './Emoji'
import { debounce, groupBy } from 'lodash' import { debounce, groupBy } from 'lodash'
import { XIcon } from 'vue-feather-icons' import { XIcon } from 'vue-feather-icons'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
export default { export default {
name: 'EmojiPicker', name: 'EmojiPicker',
props: [ props: ['defaultEmoji'],
'defaultEmoji',
],
components: { components: {
Spinner, Spinner,
Emoji, Emoji,
XIcon, XIcon,
}, },
computed: { computed: {
...mapGetters([ ...mapGetters(['emojis']),
'emojis',
]),
allEmoji() { allEmoji() {
return groupBy(this.emojis.list, 'group') return groupBy(this.emojis.list, 'group')
}, },
@@ -97,16 +99,16 @@ export default {
if (val === '' || val === undefined) return if (val === '' || val === undefined) return
// Filter emojis by query // Filter emojis by query
this.filteredEmojis = this.emojis.list.filter(emoji => emoji.name.includes(val.toLowerCase())) this.filteredEmojis = this.emojis.list.filter((emoji) => emoji.name.includes(val.toLowerCase()))
if (this.filteredEmojis.length === 0) { if (this.filteredEmojis.length === 0) {
console.log('empty'); console.log('empty')
} }
}, 200), }, 200),
}, },
methods: { methods: {
checkGroupInView: _.debounce(function () { checkGroupInView: _.debounce(function () {
this.emojis.groups.forEach(group => { this.emojis.groups.forEach((group) => {
let element = document.getElementById(`group-${group.name}`).getBoundingClientRect() let element = document.getElementById(`group-${group.name}`).getBoundingClientRect()
let groupBox = document.getElementById('group-box').getBoundingClientRect() let groupBox = document.getElementById('group-box').getBoundingClientRect()
@@ -124,8 +126,8 @@ export default {
groupBox.scrollTo({ groupBox.scrollTo({
top: group.offsetTop - groupBar.clientHeight - 5, top: group.offsetTop - groupBar.clientHeight - 5,
left: 0, left: 0,
behavior: 'smooth' behavior: 'smooth',
}); })
this.groupInView = name this.groupInView = name
}, },
@@ -135,18 +137,19 @@ export default {
// Load emojis from server just if not loaded already // Load emojis from server just if not loaded already
if (this.isOpen && !this.emojis) { if (this.isOpen && !this.emojis) {
axios.get('/assets/emojis.json') axios
.then(response => { .get('/assets/emojis.json')
.then((response) => {
this.$store.commit('LOAD_EMOJIS_LIST', response.data) this.$store.commit('LOAD_EMOJIS_LIST', response.data)
}) })
.finally(() => this.isLoaded = true) .finally(() => (this.isLoaded = true))
} }
// Simulate loading for the list processing // Simulate loading for the list processing
if (this.emojis) { if (this.emojis) {
setTimeout(() => { setTimeout(() => {
this.isLoaded = true this.isLoaded = true
}, 20); }, 20)
} }
this.groupInView = 'Smileys & Emotion' this.groupInView = 'Smileys & Emotion'
@@ -161,6 +164,6 @@ export default {
mounted() { mounted() {
// Open list of there isn't set any emoji // Open list of there isn't set any emoji
if (!this.defaultEmoji) this.openList() if (!this.defaultEmoji) this.openList()
} },
} }
</script> </script>
resources/js/components/Others/EmptyPageContent.vue
+5 -2
View File
@@ -25,7 +25,7 @@
SettingsIcon, SettingsIcon,
FileTextIcon, FileTextIcon,
FileIcon, FileIcon,
} },
} }
</script> </script>
@@ -50,7 +50,10 @@
} }
.icon { .icon {
path, polyline, line, circle { path,
polyline,
line,
circle {
stroke: $theme; stroke: $theme;
} }
} }
resources/js/components/Others/FilePreviewDetail.vue
+8 -27
View File
@@ -1,34 +1,19 @@
<template> <template>
<div v-if="canBePreview" class="w-full block mb-4"> <div v-if="canBePreview" class="mb-4 block w-full">
<!--Image--> <!--Image-->
<img <img
v-if="singleFile.data.type === 'image' && singleFile.data.attributes.thumbnail" v-if="singleFile.data.type === 'image' && singleFile.data.attributes.thumbnail"
:src="singleFile.data.attributes.thumbnail.md" :src="singleFile.data.attributes.thumbnail.md"
:alt="singleFile.data.attributes.name" :alt="singleFile.data.attributes.name"
class="rounded-lg overflow-hidden w-full object-cover shadow-lg" class="w-full overflow-hidden rounded-lg object-cover shadow-lg"
/> />
<!--Audio--> <!--Audio-->
<audio <audio v-else-if="singleFile.data.type === 'audio'" :src="singleFile.data.attributes.file_url" controlsList="nodownload" controls class="w-full"></audio>
v-else-if="singleFile.data.type === 'audio'"
:src="singleFile.data.attributes.file_url"
controlsList="nodownload"
controls
class="w-full"
>
</audio>
<!--Video--> <!--Video-->
<video <video class="h-auto w-full overflow-hidden rounded-sm" v-else-if="singleFile.data.type === 'video'" controlsList="nodownload" disablePictureInPicture playsinline controls>
class="w-full h-auto rounded-sm overflow-hidden" <source :src="singleFile.data.attributes.file_url" type="video/mp4" />
v-else-if="singleFile.data.type === 'video'"
controlsList="nodownload"
disablePictureInPicture
playsinline
controls
>
<source :src="singleFile.data.attributes.file_url" type="video/mp4">
</video> </video>
</div> </div>
</template> </template>
@@ -40,17 +25,13 @@
export default { export default {
name: 'FilePreview', name: 'FilePreview',
computed: { computed: {
...mapGetters([ ...mapGetters(['clipboard']),
'clipboard',
]),
singleFile() { singleFile() {
return this.clipboard[0] return this.clipboard[0]
}, },
canBePreview() { canBePreview() {
return this.singleFile && !includes([ return this.singleFile && !includes(['folder', 'file'], this.singleFile.data.type)
'folder', 'file' },
], this.singleFile.data.type)
}, },
} }
}
</script> </script>
resources/js/components/Others/Forms/AvatarInput.vue
+8 -23
View File
@@ -1,43 +1,28 @@
<template> <template>
<div class="relative cursor-pointer"> <div class="relative cursor-pointer">
<input <input ref="file" type="file" @change="showImagePreview($event)" class="absolute top-0 bottom-0 left-0 right-0 z-10 w-full cursor-pointer opacity-0" />
ref="file" <img v-if="imagePreview" ref="image" :src="imagePreview" class="relative z-0 h-14 w-14 cursor-pointer rounded-xl object-cover shadow-lg md:h-16 md:w-16" alt="avatar" />
type="file"
@change="showImagePreview($event)"
class="absolute opacity-0 top-0 bottom-0 left-0 right-0 w-full z-10 cursor-pointer"
/>
<img
v-if="imagePreview"
ref="image"
:src="imagePreview"
class="md:w-16 w-14 md:h-16 h-14 object-cover rounded-xl relative z-0 shadow-lg cursor-pointer"
alt="avatar"
/>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'AvatarInput', name: 'AvatarInput',
props: [ props: ['avatar'],
'avatar',
],
data() { data() {
return { return {
imagePreview: undefined imagePreview: undefined,
} }
}, },
watch: { watch: {
imagePreview(val) { imagePreview(val) {
this.$store.commit('UPDATE_AVATAR', val) this.$store.commit('UPDATE_AVATAR', val)
} },
}, },
methods: { methods: {
showImagePreview(event) { showImagePreview(event) {
let imgPath = event.target.files[0].name, let imgPath = event.target.files[0].name,
extension = imgPath extension = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase()
.substring(imgPath.lastIndexOf('.') + 1)
.toLowerCase()
if (['png', 'jpg', 'jpeg'].includes(extension)) { if (['png', 'jpg', 'jpeg'].includes(extension)) {
let file = event.target.files[0], let file = event.target.files[0],
@@ -52,11 +37,11 @@
} else { } else {
alert(this.$t('validation_errors.wrong_image')) alert(this.$t('validation_errors.wrong_image'))
} }
} },
}, },
created() { created() {
// If there is default image then load // If there is default image then load
if (this.avatar) this.imagePreview = this.avatar if (this.avatar) this.imagePreview = this.avatar
} },
} }
</script> </script>
resources/js/components/Others/Forms/CopyInput.vue
+8 -16
View File
@@ -1,28 +1,21 @@
<template> <template>
<div @click="copyUrl" class="flex items-center relative"> <div @click="copyUrl" class="relative flex items-center">
<input ref="sel" :value="str" :id="id" type="text" class="pr-10 focus-border-theme input-dark" readonly> <input ref="sel" :value="str" :id="id" type="text" class="focus-border-theme input-dark pr-10" readonly />
<!--Copy icon--> <!--Copy icon-->
<div class="absolute right-0 px-4"> <div class="absolute right-0 px-4">
<copy-icon v-if="! isCopiedLink" size="16" class="cursor-pointer hover-text-theme vue-feather"/> <copy-icon v-if="!isCopiedLink" size="16" class="hover-text-theme vue-feather cursor-pointer" />
<check-icon v-if="isCopiedLink" size="16" class="cursor-pointer text-theme vue-feather"/> <check-icon v-if="isCopiedLink" size="16" class="text-theme vue-feather cursor-pointer" />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { import { CopyIcon, CheckIcon, SendIcon } from 'vue-feather-icons'
CopyIcon,
CheckIcon,
SendIcon
} from 'vue-feather-icons'
export default { export default {
name: 'CopyInput', name: 'CopyInput',
props: [ props: ['size', 'str'],
'size',
'str',
],
components: { components: {
CheckIcon, CheckIcon,
CopyIcon, CopyIcon,
@@ -36,7 +29,6 @@ export default {
}, },
methods: { methods: {
copyUrl() { copyUrl() {
// Get input value // Get input value
let copyText = document.getElementById(this.id) let copyText = document.getElementById(this.id)
@@ -54,7 +46,7 @@ export default {
setTimeout(() => { setTimeout(() => {
this.isCopiedLink = false this.isCopiedLink = false
}, 1000) }, 1000)
} },
} },
} }
</script> </script>

Some files were not shown because too many files have changed in this diff Show More