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
* @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', {

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

@ -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);
})();
}

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

@ -1,10 +1,16 @@
.ui .field {
.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;
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 {