haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-26 07:22:34 +00:00
Code Issues Releases Wiki Activity

Change common file type comment input style (#7931)

Browse Source 
* 01 fix wrong text

* 02 input comment container style

* 03 change reply container style
This commit is contained in:
Michael An
2025-06-17 15:22:25 +08:00
committed by GitHub
parent 7001ee9fe4
commit 6036d0471f
4 changed files with 39 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/components/file-view/comment-widget/comment-list.js
View File

@@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import classname from 'classnames';
import deepCopy from 'deep-copy'; import deepCopy from 'deep-copy';
import { gettext } from '../../../utils/constants'; import { gettext } from '../../../utils/constants';
import { seafileAPI } from '../../../utils/seafile-api'; import { seafileAPI } from '../../../utils/seafile-api';
@@ -25,16 +24,10 @@ class CommentList extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
const initStyle = defaultStyle;
initStyle['&multiLine']['input'].minHeight = 40;
initStyle['&multiLine']['input'].height = 40;
initStyle['&multiLine']['input'].borderRadius = '5px';
initStyle['&multiLine']['input'].borderBottom = '1px solid rgb(230, 230, 221)';
initStyle['&multiLine']['input'].lineHeight = '24px';
this.state = { this.state = {
comment: '', comment: '',
isInputFocus: false, isInputFocus: false,
defaultStyle: initStyle, defaultStyle: defaultStyle,
commentType: 'All comments', commentType: 'All comments',
}; };
this.toBeAddedParticipant = []; this.toBeAddedParticipant = [];
@@ -110,19 +103,13 @@ class CommentList extends React.Component {
}; };
onInputFocus = () => { onInputFocus = () => {
if (this.inpurBlurTimer) { if (this.inputBlurTimer) {
clearTimeout(this.inpurBlurTimer); clearTimeout(this.inputBlurTimer);
this.inpurBlurTimer = null; this.inputBlurTimer = null;
} }
if (this.state.isInputFocus === false) { if (this.state.isInputFocus === false) {
let defaultStyle = this.state.defaultStyle; let defaultStyle = this.state.defaultStyle;
defaultStyle['&multiLine']['input'].maxHeight = 90; defaultStyle['&multiLine']['input'].border = '1px solid #ff8e03';
defaultStyle['&multiLine']['input'].minHeight = 90;
defaultStyle['&multiLine']['input'].height = 90;
defaultStyle['&multiLine']['input'].borderBottom = 'none';
defaultStyle['&multiLine']['input'].borderRadius = '5px 5px 0 0';
defaultStyle['&multiLine']['input'].overflowY = 'auto';
defaultStyle['&multiLine']['input'].lineHeight = 'default';
this.setState({ this.setState({
isInputFocus: true, isInputFocus: true,
defaultStyle: deepCopy(defaultStyle), defaultStyle: deepCopy(defaultStyle),
@@ -132,13 +119,9 @@ class CommentList extends React.Component {
onInputBlur = () => { onInputBlur = () => {
if (this.state.isInputFocus === true) { if (this.state.isInputFocus === true) {
this.inpurBlurTimer = setTimeout(() => { this.inputBlurTimer = setTimeout(() => {
let defaultStyle = this.state.defaultStyle; let defaultStyle = this.state.defaultStyle;
defaultStyle['&multiLine']['input'].minHeight = 40; defaultStyle['&multiLine']['input'].border = '1px solid #e6e6dd';
defaultStyle['&multiLine']['input'].height = 40;
defaultStyle['&multiLine']['input'].borderBottom = '1px solid rgb(230, 230, 221)';
defaultStyle['&multiLine']['input'].borderRadius = '5px';
defaultStyle['&multiLine']['input'].lineHeight = '24px';
this.setState({ this.setState({
isInputFocus: false, isInputFocus: false,
defaultStyle: deepCopy(defaultStyle), defaultStyle: deepCopy(defaultStyle),
@@ -182,7 +165,7 @@ class CommentList extends React.Component {
<div <div
className="flex-fill o-auto" className="flex-fill o-auto"
style={{ height: this.state.isInputFocus ? 'calc(100% - 170px)' : 'calc(100% - 124px)' }} style={{ height: 'calc(100% - 170px)' }}
ref={this.commentListScrollRef} ref={this.commentListScrollRef}
> >
<CommentBodyHeader <CommentBodyHeader
@@ -211,10 +194,7 @@ class CommentList extends React.Component {
<p className="text-center my-4">{gettext('No comment yet.')}</p> <p className="text-center my-4">{gettext('No comment yet.')}</p>
} }
</div> </div>
<div <div className='seafile-comment-footer flex-shrink-0'>
className={classname('seafile-comment-footer flex-shrink-0')}
style={{ height: this.state.isInputFocus ? '120px' : '72px' }}
>
<MentionsInput <MentionsInput
value={this.state.comment} value={this.state.comment}
onChange={this.handleCommentChange} onChange={this.handleCommentChange}
@@ -233,13 +213,11 @@ class CommentList extends React.Component {
appendSpaceOnAdd={true} appendSpaceOnAdd={true}
/> />
</MentionsInput> </MentionsInput>
{this.state.isInputFocus && <div className="comment-submit-container" style={{ borderColor: this.state.isInputFocus ? '#ff8e03' : '#e6e6dd' }}>
<div className="comment-submit-container"> <div onClick={this.onSubmit}>
<div onClick={this.onSubmit}> <i className="sdocfont sdoc-save sdoc-comment-btn"></i>
<i className="sdocfont sdoc-save sdoc-comment-btn"></i>
</div>
</div> </div>
} </div>
</div> </div>
</div> </div>
); );

48
frontend/src/components/file-view/comment-widget/reply-list.js
View File

@@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import classname from 'classnames';
import deepCopy from 'deep-copy'; import deepCopy from 'deep-copy';
import { gettext } from '../../../utils/constants'; import { gettext } from '../../../utils/constants';
import { seafileAPI } from '../../../utils/seafile-api'; import { seafileAPI } from '../../../utils/seafile-api';
@@ -27,16 +26,10 @@ class ReplyList extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
const initStyle = defaultStyle;
initStyle['&multiLine']['input'].minHeight = 40;
initStyle['&multiLine']['input'].height = 40;
initStyle['&multiLine']['input'].borderRadius = '5px';
initStyle['&multiLine']['input'].borderBottom = '1px solid rgb(230, 230, 221)';
initStyle['&multiLine']['input'].lineHeight = '24px';
this.state = { this.state = {
comment: '', comment: '',
isInputFocus: false, isInputFocus: false,
defaultStyle: initStyle, defaultStyle: defaultStyle,
}; };
this.toBeAddedParticipant = []; this.toBeAddedParticipant = [];
this.commentListScrollRef = React.createRef(); this.commentListScrollRef = React.createRef();
@@ -109,19 +102,13 @@ class ReplyList extends React.Component {
}; };
onInputFocus = () => { onInputFocus = () => {
if (this.inpurBlurTimer) { if (this.inputBlurTimer) {
clearTimeout(this.inpurBlurTimer); clearTimeout(this.inputBlurTimer);
this.inpurBlurTimer = null; this.inputBlurTimer = null;
} }
if (this.state.isInputFocus === false) { if (this.state.isInputFocus === false) {
let defaultStyle = this.state.defaultStyle; let defaultStyle = this.state.defaultStyle;
defaultStyle['&multiLine']['input'].maxHeight = 90; defaultStyle['&multiLine']['input'].border = '1px solid #ff8e03';
defaultStyle['&multiLine']['input'].minHeight = 90;
defaultStyle['&multiLine']['input'].height = 90;
defaultStyle['&multiLine']['input'].borderBottom = 'none';
defaultStyle['&multiLine']['input'].borderRadius = '5px 5px 0 0';
defaultStyle['&multiLine']['input'].overflowY = 'auto';
defaultStyle['&multiLine']['input'].lineHeight = 'default';
this.setState({ this.setState({
isInputFocus: true, isInputFocus: true,
defaultStyle: deepCopy(defaultStyle), defaultStyle: deepCopy(defaultStyle),
@@ -131,13 +118,9 @@ class ReplyList extends React.Component {
onInputBlur = () => { onInputBlur = () => {
if (this.state.isInputFocus === true) { if (this.state.isInputFocus === true) {
this.inpurBlurTimer = setTimeout(() => { this.inputBlurTimer = setTimeout(() => {
let defaultStyle = this.state.defaultStyle; let defaultStyle = this.state.defaultStyle;
defaultStyle['&multiLine']['input'].minHeight = 40; defaultStyle['&multiLine']['input'].border = '1px solid #e6e6dd';
defaultStyle['&multiLine']['input'].height = 40;
defaultStyle['&multiLine']['input'].borderBottom = '1px solid rgb(230, 230, 221)';
defaultStyle['&multiLine']['input'].borderRadius = '5px';
defaultStyle['&multiLine']['input'].lineHeight = '24px';
this.setState({ this.setState({
isInputFocus: false, isInputFocus: false,
defaultStyle: deepCopy(defaultStyle), defaultStyle: deepCopy(defaultStyle),
@@ -168,7 +151,7 @@ class ReplyList extends React.Component {
<div <div
className="flex-fill o-auto" className="flex-fill o-auto"
style={{ height: this.state.isInputFocus ? 'calc(100% - 170px)' : 'calc(100% - 124px)' }} style={{ height: 'calc(100% - 170px)' }}
ref={this.commentListScrollRef} ref={this.commentListScrollRef}
> >
<ul className="seafile-comment-list"> <ul className="seafile-comment-list">
@@ -194,10 +177,7 @@ class ReplyList extends React.Component {
})} })}
</ul> </ul>
</div> </div>
<div <div className='seafile-comment-footer flex-shrink-0'>
className={classname('seafile-comment-footer flex-shrink-0')}
style={{ height: this.state.isInputFocus ? '120px' : '72px' }}
>
<MentionsInput <MentionsInput
value={this.state.comment} value={this.state.comment}
onChange={this.handleCommentChange} onChange={this.handleCommentChange}
@@ -216,13 +196,11 @@ class ReplyList extends React.Component {
appendSpaceOnAdd={true} appendSpaceOnAdd={true}
/> />
</MentionsInput> </MentionsInput>
{this.state.isInputFocus && <div className="comment-submit-container">
<div className="comment-submit-container"> <div onClick={this.onSubmit}>
<div onClick={this.onSubmit}> <i className="sdocfont sdoc-save sdoc-comment-btn"></i>
<i className="sdocfont sdoc-save sdoc-comment-btn"></i>
</div>
</div> </div>
} </div>
</div> </div>
</div> </div>
); );

22
frontend/src/css/comments-list.css
View File

@@ -132,9 +132,9 @@
.seafile-comment-footer { .seafile-comment-footer {
padding: 16px 16px 0px; padding: 16px 16px 0px;
margin-bottom: 16px; margin-bottom: 16px;
border-top: 1px solid #e5e5e5;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative;
} }
.seafile-comment-footer .add-comment-input, .seafile-comment-footer .add-comment-input,
@@ -157,24 +157,14 @@
} }
.seafile-comment-footer .comment-submit-container { .seafile-comment-footer .comment-submit-container {
border: 1px solid #e6e6dd;
border-top: none;
border-radius: 0 0 5px 5px;
padding: 0px 5px; padding: 0px 5px;
background: #fff;
text-align: right; text-align: right;
position: absolute; position: absolute;
bottom: 10px; width: 26px;
width: 327px; right: 22px;
} top: 80px;
background: transparent;
.seafile-comment-footer .comment-submit-container::before { border: none;
border-top: 1px solid #e6e6dd;
content: '';
position: absolute;
left: 5px;
right: 5px;
top: 0;
} }
.seafile-comment-footer .sdoc-comment-btn { .seafile-comment-footer .sdoc-comment-btn {

10
frontend/src/css/react-mentions-default-style.js vendored
View File

@@ -31,12 +31,16 @@ const defaultStyle = {
padding: 9, padding: 9,
}, },
input: { input: {
padding: '8px 6px 20px 6px', padding: '8px',
maxHeight: 90,
minHeight: 90, minHeight: 90,
height: 90, height: 90,
border: '1px solid #e6e6dd', lineHeight: 'default',
overfflowY: 'auto', overflowY: 'auto',
outline: 'none', outline: 'none',
borderBottom: 'none',
borderRadius: '5px',
border: '1px solid #e6e6dd',
}, },
}, },
suggestions: { suggestions: {