Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix: layout issues + remove vue-perfect-scrollbar + refactor context …
…menu

fix: issue where 'torrent details' modal does not work properly on iOS
perf: 'Vue2-perfect-scrollbar' is no longer dependent
feat: checkbox + button with color feedback for TorrentDeleteModal
perf: Context (right click) menu refactor! Works way better on mobile
  • Loading branch information
m4ximuel authored and WDaan committed Apr 15, 2021
1 parent b48dff6 commit a83ea14
Show file tree
Hide file tree
Showing 39 changed files with 22,931 additions and 3,751 deletions.
22,933 changes: 20,878 additions & 2,055 deletions package-lock.json

Large diffs are not rendered by default.

19 changes: 9 additions & 10 deletions package.json
Expand Up @@ -15,18 +15,19 @@
"axios": "^0.21.1",
"core-js": "^3.10.0",
"dayjs": "^1.10.4",
"eslint": "^6.8.0",
"fuse.js": "^6.4.6",
"lodash": "^4.17.20",
"lodash": "^4.17.21",
"register-service-worker": "^1.7.2",
"sass-loader": "^10.1.1",
"typeface-roboto": "^1.1.13",
"typeface-roboto-mono": "^1.1.13",
"uuid": "^8.3.2",
"vue": "^2.6.12",
"vue-apexcharts": "^1.6.0",
"vue-context": "^5.2.0",
"vue-context": "^6.0.0",
"vue-router": "^3.5.1",
"vue-toastification": "^1.7.11",
"vue2-perfect-scrollbar": "^1.5.0",
"vuedraggable": "^2.24.3",
"vuetify": "^2.4.9",
"vuex": "^3.6.2",
Expand All @@ -35,22 +36,20 @@
"devDependencies": {
"@mdi/js": "^5.9.55",
"@vue/babel-preset-app": "^4.5.12",
"@vue/cli-plugin-babel": "~4.3.0",
"@vue/cli-plugin-eslint": "~4.3.0",
"@vue/cli-plugin-babel": "~4.5.12",
"@vue/cli-plugin-eslint": "~4.5.12",
"@vue/cli-plugin-pwa": "^4.5.12",
"@vue/cli-plugin-unit-jest": "^4.5.12",
"@vue/cli-service": "~4.3.0",
"@vue/cli-service": "~4.5.12",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/test-utils": "^1.1.3",
"babel-eslint": "^10.1.0",
"eslint": "^7.23.0",
"eslint-config-google": "^0.14.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.8.0",
"fibers": "^5.0.0",
"node-sass": "^4.14.1",
"sass": "^1.32.7",
"sass-loader": "^8.0.2",
"node-sass": "^5.0.0",
"sass": "^1.32.8",
"vue-cli-plugin-vuetify": "^2.3.1",
"vue-template-compiler": "^2.6.12",
"vuetify-loader": "^1.7.2"
Expand Down
2 changes: 1 addition & 1 deletion public/index.html
Expand Up @@ -9,7 +9,7 @@
<link rel="icon" href="./favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<body oncontextmenu='return false'>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
Expand Down
2 changes: 1 addition & 1 deletion src/actions/Tags.js
@@ -1,5 +1,5 @@
import store from '../store'
import { ArrayHelper } from '@/Helpers'
import { ArrayHelper } from '@/Helpers/index.js'

export class Tags {
static update(response) {
Expand Down
2 changes: 1 addition & 1 deletion src/actions/Torrents.js
@@ -1,5 +1,5 @@
import store from '../store'
import { Hostname } from '@/Helpers'
import { Hostname } from '@/Helpers/index.js'
import Torrent from '@/models/Torrent'

export class Torrents {
Expand Down
2 changes: 1 addition & 1 deletion src/actions/Trackers.js
@@ -1,5 +1,5 @@
import store from '../store'
import { Hostname } from '@/Helpers'
import { Hostname } from '@/Helpers/index.js'

export class Trackers {
static update(data) {
Expand Down
170 changes: 127 additions & 43 deletions src/components/Modals/AddModal.vue
Expand Up @@ -2,10 +2,31 @@
<v-dialog
v-model="dialog"
scrollable
:content-class="phoneLayout ? 'rounded-0' : 'rounded-form'"
max-width="500px"
:fullscreen="phoneLayout"
>
<v-card>
<div
class="noselect"
style="
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
"
@click="closeWrap"
@drop.prevent="addDropFile"
@dragover.prevent="showWrapDrag = true"
@dragend.prevent="showWrapDrag = false"
@dragleave.prevent="DragLeave"
/>
<v-card
:class="showWrapDrag ? 'wrap-drag' : ''"
@drop.prevent="addDropFile"
@dragover.prevent="showWrapDrag = true"
@dragend.prevent="showWrapDrag = false"
>
<v-container :class="`pa-0 project done`">
<v-card-title class="justify-center">
<h2>Add a new Torrent</h2>
Expand All @@ -15,46 +36,41 @@
<v-container>
<v-row no-gutters>
<v-col ref="fileZone">
<div
@drop.prevent="addDropFile"
@dragover.prevent
<v-file-input
v-if="!urls"
v-model="files"
color="deep-purple accent-4"
counter
label="Select your files"
multiple
:prepend-icon="mdiPaperclip"
:rules="fileInputRules"
outlined
:show-size="1000"
>
<v-file-input
v-if="!urls"
v-model="files"
color="deep-purple accent-4"
counter
label="Select your files"
multiple
:prepend-icon="mdiPaperclip"
:rules="fileInputRules"
outlined
:show-size="1000"
<template
#selection="{ index, text }"
>
<template
#selection="{ index, text }"
<v-chip
v-if="index < 2"
color="deep-purple accent-4"
dark
label
small
>
<v-chip
v-if="index < 2"
color="deep-purple accent-4"
dark
label
small
>
{{ text }}
</v-chip>
<span
v-else-if="index === 2"
class="overline grey--text text--darken-3 mx-2"
>
+{{
files.length - 2
}}
File(s)
</span>
</template>
</v-file-input>
</div>
{{ text }}
</v-chip>
<span
v-else-if="index === 2"
class="overline grey--text text--darken-3 mx-2"
>
+{{
files.length - 2
}}
File(s)
</span>
</template>
</v-file-input>
<v-textarea
v-if="files.length == 0"
v-model="urls"
Expand Down Expand Up @@ -149,21 +165,47 @@
</v-form>
</v-container>
</v-card>
<div
v-show="showWrapDrag"
class="wrap-drag noselect"
style="
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
text-align:center;
background-color: rgb(0,0,0,.5)
"
>
<div class="align white--text">
<div>
<v-icon size="40" class="white--text">
{{ mdiCloudUpload }}
</v-icon>
</div>
<div>
<h3>Drop here for add</h3>
</div>
</div>
</div>
</v-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import Modal from '@/mixins/Modal'
import qbit from '@/services/qbit'
import { mdiFolder, mdiTag, mdiPaperclip, mdiLink, mdiClose } from '@mdi/js'
import { mdiCloudUpload, mdiFolder, mdiTag, mdiPaperclip, mdiLink, mdiClose } from '@mdi/js'
import { FullScreenModal } from '@/mixins'
export default {
name: 'AddModal',
mixins: [Modal, FullScreenModal],
props: ['initialMagnet'],
data() {
return {
hndlDialog: true,
showWrapDrag: false,
files: [],
category: null,
directory: '',
Expand All @@ -184,7 +226,7 @@ export default {
loading: false,
urls: null,
valid: false,
mdiFolder, mdiTag, mdiPaperclip, mdiLink, mdiClose
mdiCloudUpload, mdiFolder, mdiTag, mdiPaperclip, mdiLink, mdiClose
}
},
computed: {
Expand All @@ -205,6 +247,16 @@ export default {
},
availableCategories() {
return this.getCategories()
},
dialog: {
get: function () {
return this.hndlDialog
},
set: function (e) {
this.hndlDialog = e
if (e === false)
this.deleteModal()
}
}
},
created() {
Expand All @@ -221,7 +273,21 @@ export default {
this.root_folder = settings.create_subfolder_enabled
},
addDropFile(e) {
this.files.push(...Array.from(e.dataTransfer.files))
this.showWrapDrag = false
if (!this.urls)
this.files.push(...Array.from(e.dataTransfer.files))
},
startDropFile() {
this.showWrapDrag = true
},
DragLeave(e) {
this.showWrapDrag = false
},
closeWrap() {
if (this.showWrapDrag)
this.showWrapDrag = false
else
this.close()
},
submit() {
if (this.files.length || this.urls) {
Expand Down Expand Up @@ -256,8 +322,26 @@ export default {
this.skip_checking = null
},
close() {
this.deleteModal()
this.dialog = false
}
}
}
</script>
</script>

<style lang="scss" scoped>
.wrap-drag {
pointer-events: none;
}
.wrap-drag .align {
margin: -.5em 0 0;
position: absolute;
top: 50%;
left: 0;
right: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
color: #fff;
padding: 0;
}
</style>

0 comments on commit a83ea14

Please sign in to comment.