nas/qb-web
1
0
Fork 0
mirror of https://github.com/CzBiX/qb-web.git synced 2026-05-11 19:16:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Tweak add form UI for mobile

Browse Source
This commit is contained in:
CzBiX
2019-09-04 14:13:32 +08:00
parent c756e35a45
commit 43e8c07944
1 changed files with 39 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/AddForm.vue
View File

@@ -12,7 +12,12 @@
>
<v-icon>mdi-link-plus</v-icon>
</v-btn>
<v-dialog v-model="dialog" eager persistent width="40em">
<v-dialog
v-model="dialog"
eager
persistent
width="40em"
>
<v-card>
<v-card-title
class="headline grey lighten-4"
@@ -25,10 +30,9 @@
v-model="valid"
ref="form"
>
<v-container v-bind="{ [`grid-list-${$vuetify.breakpoint.name}`]: true }">
<v-row>
<v-container>
<v-row no-gutters>
<v-col
cols="12"
ref="fileZone"
>
<v-file-input
@@ -50,41 +54,43 @@
:rules="[v => (!!files.length || !!v || 'URLs is required')]"
:rows="$vuetify.breakpoint.xsOnly ? 1 : 3"
required
autofocus
:autofocus="!phoneLayout"
:value="params.urls"
@input="setParams('urls', $event)"
@click:append-outer="selectFiles"
/>
</v-col>
<v-col>
<v-combobox
label="Category"
prepend-icon="mdi-folder"
clearable
hide-no-data
:items="categories"
:value="params.category"
@input="setParams('category', $event)"
/>
</v-col>
<v-col>
<v-checkbox
prepend-icon="mdi-file-tree"
label="Create subfolder"
:value="params.root_path"
@change="setParams('root_path', $event)"
/>
</v-col>
</v-row>
<v-row>
<v-col>
<v-row no-gutters>
<template v-if="showMore">
<v-col cols="12" sm="6">
<v-combobox
label="Category"
prepend-icon="mdi-folder"
clearable
hide-no-data
:items="categories"
:value="params.category"
@input="setParams('category', $event)"
/>
</v-col>
<v-col cols="12" sm="6">
<v-checkbox
prepend-icon="mdi-file-tree"
label="Create subfolder"
:value="params.root_path"
@change="setParams('root_path', $event)"
/>
</v-col>
</template>
<v-col cols="12" sm="6">
<v-checkbox
v-model="autoStart"
label="Start torrent"
prepend-icon="mdi-play-pause"
/>
</v-col>
<v-col>
<v-col cols="12" sm="6">
<v-checkbox
prepend-icon="mdi-progress-check"
label="Skip hash check"
@@ -102,7 +108,7 @@
/>
</v-card-text>
<v-card-actions>
<!-- <v-btn flat>More</v-btn> -->
<v-btn text @click="showMore = !showMore" v-text="showMore ? 'Less' : 'More'" />
<v-spacer />
<v-btn text @click="dialog = false">Cancel</v-btn>
<v-btn
@@ -148,6 +154,7 @@ export default Vue.extend({
userParams: {},
error: null,
submitting: false,
showMore: false,
};
},
computed: {
@@ -160,6 +167,9 @@ export default Vue.extend({
params() {
return Object.assign({}, defaultParams, this.userParams);
},
phoneLayout() {
return this.$vuetify.breakpoint.xsOnly;
},
autoStart: {
get(): boolean {
return !this.params.paused;
@@ -174,6 +184,7 @@ export default Vue.extend({
created() {
defaultParams.paused = this.prefs.start_paused_enabled;
defaultParams.root_path = this.prefs.create_subfolder_enabled;
this.showMore = !this.phoneLayout;
},
mounted() {
this.$refs.fileZone.addEventListener('drop', this.onDrop, true);