Nulo/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
And shrink the height of Dropzone.
This commit is contained in:
wxiaoguang 2022-01-19 00:57:57 +08:00 committed by GitHub
parent 9dcf0bf6ec
commit 11b4827791
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
web_src/js/features/comp/EasyMDE.js
View file

@ -50,9 +50,10 @@ export async function importEasyMDE() {
/** /**
* create an EasyMDE editor for comment * create an EasyMDE editor for comment
* @param textarea jQuery or HTMLElement * @param textarea jQuery or HTMLElement
* @param easyMDEOptions the options for EasyMDE
* @returns {null|EasyMDE} * @returns {null|EasyMDE}
*/ */
export async function createCommentEasyMDE(textarea) { export async function createCommentEasyMDE(textarea, easyMDEOptions = {}) {
if (textarea instanceof jQuery) { if (textarea instanceof jQuery) {
textarea = textarea[0]; textarea = textarea[0];
} }
@ -61,6 +62,7 @@ export async function createCommentEasyMDE(textarea) {
} }
const EasyMDE = await importEasyMDE(); const EasyMDE = await importEasyMDE();
const easyMDE = new EasyMDE({ const easyMDE = new EasyMDE({
autoDownloadFontAwesome: false, autoDownloadFontAwesome: false,
element: textarea, element: textarea,
@ -104,8 +106,7 @@ export async function createCommentEasyMDE(textarea) {
className: 'fa fa-file', className: 'fa fa-file',
title: 'Revert to simple textarea', title: 'Revert to simple textarea',
}, },
], ], ...easyMDEOptions});
});
const inputField = easyMDE.codemirror.getInputField(); const inputField = easyMDE.codemirror.getInputField();
inputField.classList.add('js-quick-submit'); inputField.classList.add('js-quick-submit');
easyMDE.codemirror.setOption('extraKeys', { easyMDE.codemirror.setOption('extraKeys', {

4
web_src/js/features/repo-issue.js
View file

@ -459,7 +459,9 @@ export function initRepoPullRequestReview() {
const $reviewBox = $('.review-box'); const $reviewBox = $('.review-box');
if ($reviewBox.length === 1) { if ($reviewBox.length === 1) {
(async () => { (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); initCompImagePaste($reviewBox);
})(); })();
} }

20
web_src/less/features/dropzone.less
View file

@ -1,10 +1,16 @@
.dropzone { .ui .field {
border: 2px dashed var(--color-secondary) !important; .dropzone {
background: none !important; border: 2px dashed var(--color-secondary);
box-shadow: none !important; background: none;
padding: 0 !important; box-shadow: none;
min-height: 5rem !important; padding: 0;
border-radius: 4px !important; 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 { .dropzone .dz-button {