Make the height of the editor in Review Box smaller (4 lines as GitHub) (#18319) And shrink the height of Dropzone.

Changes

3 changed files (+20/-11)

• web_src/js/features/comp/EasyMDE.js
  • @@ -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', {
• web_src/js/features/repo-issue.js
  • @@ -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); })(); }
• web_src/less/features/dropzone.less
  • @@ -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 {