[Client:Mobile] ファイルのフォルダ移動を実装
This commit is contained in:
parent
c68ca7f032
commit
6cc6e0e6f2
5 changed files with 86 additions and 3 deletions
65
src/web/app/mobile/tags/drive-folder-selector.tag
Normal file
65
src/web/app/mobile/tags/drive-folder-selector.tag
Normal file
|
@ -0,0 +1,65 @@
|
||||||
|
<mk-drive-folder-selector>
|
||||||
|
<div class="body">
|
||||||
|
<header>
|
||||||
|
<h1>フォルダを選択</h1>
|
||||||
|
<button class="close" onclick={ cancel }><i class="fa fa-times"></i></button>
|
||||||
|
<button class="ok" onclick={ ok }><i class="fa fa-check"></i></button>
|
||||||
|
</header>
|
||||||
|
<mk-drive ref="browser" select-folder={ true }></mk-drive>
|
||||||
|
</div>
|
||||||
|
<style>
|
||||||
|
:scope
|
||||||
|
display block
|
||||||
|
|
||||||
|
> .body
|
||||||
|
position fixed
|
||||||
|
z-index 2048
|
||||||
|
top 0
|
||||||
|
left 0
|
||||||
|
width 100%
|
||||||
|
height 100%
|
||||||
|
overflow hidden
|
||||||
|
background #fff
|
||||||
|
|
||||||
|
> header
|
||||||
|
border-bottom solid 1px #eee
|
||||||
|
|
||||||
|
> h1
|
||||||
|
margin 0
|
||||||
|
padding 0
|
||||||
|
text-align center
|
||||||
|
line-height 42px
|
||||||
|
font-size 1em
|
||||||
|
font-weight normal
|
||||||
|
|
||||||
|
> .close
|
||||||
|
position absolute
|
||||||
|
top 0
|
||||||
|
left 0
|
||||||
|
line-height 42px
|
||||||
|
width 42px
|
||||||
|
|
||||||
|
> .ok
|
||||||
|
position absolute
|
||||||
|
top 0
|
||||||
|
right 0
|
||||||
|
line-height 42px
|
||||||
|
width 42px
|
||||||
|
|
||||||
|
> mk-drive
|
||||||
|
height calc(100% - 42px)
|
||||||
|
overflow scroll
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
this.cancel = () => {
|
||||||
|
this.trigger('canceled');
|
||||||
|
this.unmount();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.ok = () => {
|
||||||
|
this.trigger('selected', this.refs.browser.folder);
|
||||||
|
this.unmount();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
</mk-drive-folder-selector>
|
|
@ -5,7 +5,7 @@
|
||||||
<button class="close" onclick={ cancel }><i class="fa fa-times"></i></button>
|
<button class="close" onclick={ cancel }><i class="fa fa-times"></i></button>
|
||||||
<button class="ok" onclick={ ok }><i class="fa fa-check"></i></button>
|
<button class="ok" onclick={ ok }><i class="fa fa-check"></i></button>
|
||||||
</header>
|
</header>
|
||||||
<mk-drive ref="browser" select={ true } multiple={ opts.multiple }></mk-drive>
|
<mk-drive ref="browser" select-file={ true } multiple={ opts.multiple }></mk-drive>
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
:scope
|
:scope
|
||||||
|
|
|
@ -142,7 +142,7 @@
|
||||||
|
|
||||||
this.file = null;
|
this.file = null;
|
||||||
|
|
||||||
this.isSelectMode = this.opts.select;
|
this.isFileSelectMode = this.opts.selectFile;
|
||||||
this.multiple =this.opts.multiple;
|
this.multiple =this.opts.multiple;
|
||||||
|
|
||||||
this.on('mount', () => {
|
this.on('mount', () => {
|
||||||
|
@ -381,7 +381,7 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
this.chooseFile = file => {
|
this.chooseFile = file => {
|
||||||
if (this.isSelectMode) {
|
if (this.isFileSelectMode) {
|
||||||
if (this.selectedFiles.some(f => f.id == file.id)) {
|
if (this.selectedFiles.some(f => f.id == file.id)) {
|
||||||
this.selectedFiles = this.selectedFiles.filter(f => f.id != file.id);
|
this.selectedFiles = this.selectedFiles.filter(f => f.id != file.id);
|
||||||
} else {
|
} else {
|
||||||
|
|
|
@ -34,6 +34,9 @@
|
||||||
<button onclick={ rename }>
|
<button onclick={ rename }>
|
||||||
<i class="fa fa-pencil"></i>名前を変更
|
<i class="fa fa-pencil"></i>名前を変更
|
||||||
</button>
|
</button>
|
||||||
|
<button onclick={ move }>
|
||||||
|
<i class="fa fa-folder-open"></i>移動
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="hash">
|
<div class="hash">
|
||||||
|
@ -198,5 +201,19 @@
|
||||||
this.parent.cf(this.file, true);
|
this.parent.cf(this.file, true);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
this.move = () => {
|
||||||
|
const dialog = riot.mount(document.body.appendChild(document.createElement('mk-drive-folder-selector')), {
|
||||||
|
multiple: true
|
||||||
|
})[0];
|
||||||
|
dialog.one('selected', folder => {
|
||||||
|
this.api('drive/files/update', {
|
||||||
|
file_id: this.file.id,
|
||||||
|
folder_id: folder == null ? null : folder.id
|
||||||
|
}).then(() => {
|
||||||
|
this.parent.cf(this.file, true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
</mk-drive-file-viewer>
|
</mk-drive-file-viewer>
|
||||||
|
|
|
@ -30,6 +30,7 @@ require('./sub-post-content.tag');
|
||||||
require('./images-viewer.tag');
|
require('./images-viewer.tag');
|
||||||
require('./drive.tag');
|
require('./drive.tag');
|
||||||
require('./drive-selector.tag');
|
require('./drive-selector.tag');
|
||||||
|
require('./drive-folder-selector.tag');
|
||||||
require('./drive/file.tag');
|
require('./drive/file.tag');
|
||||||
require('./drive/folder.tag');
|
require('./drive/folder.tag');
|
||||||
require('./drive/file-viewer.tag');
|
require('./drive/file-viewer.tag');
|
||||||
|
|
Loading…
Reference in a new issue