[Client:Mobile] ファイルのフォルダ移動を実装
This commit is contained in:
		
							
								
								
									
										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="ok" onclick={ ok }><i class="fa fa-check"></i></button> | ||||
| 		</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> | ||||
| 	<style> | ||||
| 		:scope | ||||
|   | ||||
| @@ -142,7 +142,7 @@ | ||||
|  | ||||
| 		this.file = null; | ||||
|  | ||||
| 		this.isSelectMode = this.opts.select; | ||||
| 		this.isFileSelectMode = this.opts.selectFile; | ||||
| 		this.multiple =this.opts.multiple; | ||||
|  | ||||
| 		this.on('mount', () => { | ||||
| @@ -381,7 +381,7 @@ | ||||
| 		}; | ||||
|  | ||||
| 		this.chooseFile = file => { | ||||
| 			if (this.isSelectMode) { | ||||
| 			if (this.isFileSelectMode) { | ||||
| 				if (this.selectedFiles.some(f => f.id == file.id)) { | ||||
| 					this.selectedFiles = this.selectedFiles.filter(f => f.id != file.id); | ||||
| 				} else { | ||||
|   | ||||
| @@ -34,6 +34,9 @@ | ||||
| 			<button onclick={ rename }> | ||||
| 				<i class="fa fa-pencil"></i>名前を変更 | ||||
| 			</button> | ||||
| 			<button onclick={ move }> | ||||
| 				<i class="fa fa-folder-open"></i>移動 | ||||
| 			</button> | ||||
| 		</div> | ||||
| 	</div> | ||||
| 	<div class="hash"> | ||||
| @@ -198,5 +201,19 @@ | ||||
| 				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> | ||||
| </mk-drive-file-viewer> | ||||
|   | ||||
| @@ -30,6 +30,7 @@ require('./sub-post-content.tag'); | ||||
| require('./images-viewer.tag'); | ||||
| require('./drive.tag'); | ||||
| require('./drive-selector.tag'); | ||||
| require('./drive-folder-selector.tag'); | ||||
| require('./drive/file.tag'); | ||||
| require('./drive/folder.tag'); | ||||
| require('./drive/file-viewer.tag'); | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 syuilo
					syuilo