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
3 changed files with 20 additions and 11 deletions
|
@ -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 {
|
||||
|
|
Reference in a new issue