[Client:Mobile] ファイルのフォルダ移動を実装

This commit is contained in:
syuilo 2017-03-12 19:27:54 +09:00
parent c68ca7f032
commit 6cc6e0e6f2
5 changed files with 86 additions and 3 deletions

View 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>

View file

@ -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

View file

@ -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 {

View file

@ -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>

View file

@ -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');