mirror of
				https://github.com/go-gitea/gitea.git
				synced 2025-10-31 22:28:05 +01:00 
			
		
		
		
	Make the height of the editor in Review Box smaller (4 lines as GitHub) (#18319)
And shrink the height of Dropzone.
This commit is contained in:
		
							parent
							
								
									9dcf0bf6ec
								
							
						
					
					
						commit
						11b4827791
					
				| @ -50,9 +50,10 @@ export async function importEasyMDE() { | ||||
| /** | ||||
|  * create an EasyMDE editor for comment | ||||
|  * @param textarea jQuery or HTMLElement | ||||
|  * @param easyMDEOptions the options for EasyMDE | ||||
|  * @returns {null|EasyMDE} | ||||
|  */ | ||||
| export async function createCommentEasyMDE(textarea) { | ||||
| export async function createCommentEasyMDE(textarea, easyMDEOptions = {}) { | ||||
|   if (textarea instanceof jQuery) { | ||||
|     textarea = textarea[0]; | ||||
|   } | ||||
| @ -61,6 +62,7 @@ export async function createCommentEasyMDE(textarea) { | ||||
|   } | ||||
| 
 | ||||
|   const EasyMDE = await importEasyMDE(); | ||||
| 
 | ||||
|   const easyMDE = new EasyMDE({ | ||||
|     autoDownloadFontAwesome: false, | ||||
|     element: textarea, | ||||
| @ -104,8 +106,7 @@ export async function createCommentEasyMDE(textarea) { | ||||
|         className: 'fa fa-file', | ||||
|         title: 'Revert to simple textarea', | ||||
|       }, | ||||
|     ], | ||||
|   }); | ||||
|     ], ...easyMDEOptions}); | ||||
|   const inputField = easyMDE.codemirror.getInputField(); | ||||
|   inputField.classList.add('js-quick-submit'); | ||||
|   easyMDE.codemirror.setOption('extraKeys', { | ||||
|  | ||||
| @ -459,7 +459,9 @@ export function initRepoPullRequestReview() { | ||||
|   const $reviewBox = $('.review-box'); | ||||
|   if ($reviewBox.length === 1) { | ||||
|     (async () => { | ||||
|       await createCommentEasyMDE($reviewBox.find('textarea')); | ||||
|       // the editor's height is too large in some cases, and the panel cannot be scrolled with page now because there is `.repository .diff-detail-box.sticky { position: sticky; }`
 | ||||
|       // the temporary solution is to make the editor's height smaller (about 4 lines). GitHub also only show 4 lines for default. We can improve the UI (including Dropzone area) in future
 | ||||
|       await createCommentEasyMDE($reviewBox.find('textarea'), {minHeight: '80px'}); | ||||
|       initCompImagePaste($reviewBox); | ||||
|     })(); | ||||
|   } | ||||
|  | ||||
| @ -1,10 +1,16 @@ | ||||
| .dropzone { | ||||
|   border: 2px dashed var(--color-secondary) !important; | ||||
|   background: none !important; | ||||
|   box-shadow: none !important; | ||||
|   padding: 0 !important; | ||||
|   min-height: 5rem !important; | ||||
|   border-radius: 4px !important; | ||||
| .ui .field { | ||||
|   .dropzone { | ||||
|     border: 2px dashed var(--color-secondary); | ||||
|     background: none; | ||||
|     box-shadow: none; | ||||
|     padding: 0; | ||||
|     border-radius: 4px; | ||||
|     min-height: 0; | ||||
|     margin-top: -1em; // we have another `field` above, it's usually an EasyMDE editor with "status bar", so we do not need the space above. | ||||
|     .dz-message { | ||||
|       margin: 10px 0; | ||||
|     } | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| .dropzone .dz-button { | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user