From 1c14b63ef231cabd4100c3e36f00347306041df9 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Tue, 18 Jan 2022 16:49:22 +0800 Subject: [PATCH 1/6] Make the height of the editor in Review Box smaller (4 lines as GitHub) --- web_src/js/features/comp/EasyMDE.js | 7 ++++--- web_src/js/features/repo-issue.js | 4 +++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/web_src/js/features/comp/EasyMDE.js b/web_src/js/features/comp/EasyMDE.js index 922d03d396197..45915ca7fabd1 100644 --- a/web_src/js/features/comp/EasyMDE.js +++ b/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,7 +62,7 @@ export async function createCommentEasyMDE(textarea) { } const EasyMDE = await importEasyMDE(); - const easyMDE = new EasyMDE({ + const easyMDE = new EasyMDE(Object.assign({ autoDownloadFontAwesome: false, element: textarea, forceSync: true, @@ -105,7 +106,7 @@ export async function createCommentEasyMDE(textarea) { title: 'Revert to simple textarea', }, ], - }); + }, easyMDEOptions)); const inputField = easyMDE.codemirror.getInputField(); inputField.classList.add('js-quick-submit'); easyMDE.codemirror.setOption('extraKeys', { diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js index 6e57facfd26a0..2ec306615b745 100644 --- a/web_src/js/features/repo-issue.js +++ b/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); })(); } From e09d10a047b8a30aa5f8febb1ca8e77857ef9603 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Tue, 18 Jan 2022 17:48:46 +0800 Subject: [PATCH 2/6] tune UI --- web_src/less/features/dropzone.less | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/web_src/less/features/dropzone.less b/web_src/less/features/dropzone.less index 1a54457129dac..427c8b4d3af1c 100644 --- a/web_src/less/features/dropzone.less +++ b/web_src/less/features/dropzone.less @@ -1,10 +1,14 @@ -.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 .dropzone { + border: 2px dashed var(--color-secondary); + background: none; + box-shadow: none; + padding: 0; + border-radius: 4px; + min-height: 0; +} + +.ui .dropzone .dz-message { + margin: 5px; } .dropzone .dz-button { From c4410d961417775d9bf5e7e5f05a9f2306a992e0 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Tue, 18 Jan 2022 17:52:04 +0800 Subject: [PATCH 3/6] use {...obj} --- web_src/js/features/comp/EasyMDE.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web_src/js/features/comp/EasyMDE.js b/web_src/js/features/comp/EasyMDE.js index 45915ca7fabd1..3a2f935dc286c 100644 --- a/web_src/js/features/comp/EasyMDE.js +++ b/web_src/js/features/comp/EasyMDE.js @@ -62,7 +62,8 @@ export async function createCommentEasyMDE(textarea, easyMDEOptions = {}) { } const EasyMDE = await importEasyMDE(); - const easyMDE = new EasyMDE(Object.assign({ + + const easyMDE = new EasyMDE({ autoDownloadFontAwesome: false, element: textarea, forceSync: true, @@ -105,8 +106,7 @@ export async function createCommentEasyMDE(textarea, easyMDEOptions = {}) { className: 'fa fa-file', title: 'Revert to simple textarea', }, - ], - }, easyMDEOptions)); + ], ...easyMDEOptions}); const inputField = easyMDE.codemirror.getInputField(); inputField.classList.add('js-quick-submit'); easyMDE.codemirror.setOption('extraKeys', { From 1ab708abe28a505eafadbedc2f02d90ea525b4e9 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Tue, 18 Jan 2022 18:00:23 +0800 Subject: [PATCH 4/6] tune UI --- web_src/less/features/dropzone.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/less/features/dropzone.less b/web_src/less/features/dropzone.less index 427c8b4d3af1c..5e034598df4a6 100644 --- a/web_src/less/features/dropzone.less +++ b/web_src/less/features/dropzone.less @@ -8,7 +8,7 @@ } .ui .dropzone .dz-message { - margin: 5px; + margin: 10px; } .dropzone .dz-button { From aeffd561813bd1d7ef86c1c3fb5c75ca5c89a8aa Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Tue, 18 Jan 2022 18:11:56 +0800 Subject: [PATCH 5/6] tune UI --- web_src/less/features/dropzone.less | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/web_src/less/features/dropzone.less b/web_src/less/features/dropzone.less index 5e034598df4a6..0e0a939be721d 100644 --- a/web_src/less/features/dropzone.less +++ b/web_src/less/features/dropzone.less @@ -1,14 +1,16 @@ -.ui .dropzone { - border: 2px dashed var(--color-secondary); - background: none; - box-shadow: none; - padding: 0; - border-radius: 4px; - min-height: 0; -} - -.ui .dropzone .dz-message { - margin: 10px; +.ui .field { + .dropzone { + border: 2px dashed var(--color-secondary); + background: none; + box-shadow: none; + padding: 0; + border-radius: 4px; + min-height: 0; + margin-top: -20px; // 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; + } + } } .dropzone .dz-button { From 819e9da7de2a6026a1e7a4d70a561ac8d89cb68b Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Tue, 18 Jan 2022 18:14:41 +0800 Subject: [PATCH 6/6] tune UI --- web_src/less/features/dropzone.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/less/features/dropzone.less b/web_src/less/features/dropzone.less index 0e0a939be721d..d31aedff3e1e4 100644 --- a/web_src/less/features/dropzone.less +++ b/web_src/less/features/dropzone.less @@ -6,9 +6,9 @@ padding: 0; border-radius: 4px; min-height: 0; - margin-top: -20px; // we have another `field` above, it's usually an EasyMDE editor with "status bar", so we do not need the space above. + 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; + margin: 10px 0; } } }