[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…
	
	Add table
		Add a link
		
	
		Reference in a new issue