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

Mobile text viewer support wrap line (#7944)

Browse Source 
* mobile txt support line wrap

* optimize function name
This commit is contained in:
Michael An
2025-06-18 10:12:58 +08:00
committed by GitHub
parent 4bd606b423
commit 4065f1db14
5 changed files with 27 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/components/file-view/file-toolbar.js
View File

@@ -84,7 +84,13 @@ class FileToolbar extends React.Component {
}); });
}; };
toggle = () => { toggle = (event) => {
if (this.state.dropdownOpen) {
const el = document.getElementById('mobile-txt-line-wrap-menu');
if (el && el.contains(event.target)) {
return;
}
}
this.setState({ this.setState({
dropdownOpen: !this.state.dropdownOpen dropdownOpen: !this.state.dropdownOpen
}); });
@@ -126,6 +132,7 @@ class FileToolbar extends React.Component {
} }
const shortcutMain = Utils.isMac() ? '⌘ + ' : 'Ctrl + '; const shortcutMain = Utils.isMac() ? '⌘ + ' : 'Ctrl + ';
const isTxt = fileExt && fileExt.toLowerCase() === 'txt';
return ( return (
<Fragment> <Fragment>
@@ -222,11 +229,6 @@ class FileToolbar extends React.Component {
<Icon symbol="more-level" /> <Icon symbol="more-level" />
</DropdownToggle> </DropdownToggle>
<DropdownMenu> <DropdownMenu>
{/* {(
<DropdownItem onClick={this.props.toggleCommentPanel}>
{gettext('Comment')}
</DropdownItem>
)} */}
{filePerm == 'rw' && ( {filePerm == 'rw' && (
<a href={`${siteRoot}repo/file_revisions/${repoID}/?p=${encodeURIComponent(filePath)}&referer=${encodeURIComponent(location.href)}`} className="dropdown-item"> <a href={`${siteRoot}repo/file_revisions/${repoID}/?p=${encodeURIComponent(filePath)}&referer=${encodeURIComponent(location.href)}`} className="dropdown-item">
{gettext('History')} {gettext('History')}
@@ -240,16 +242,16 @@ class FileToolbar extends React.Component {
{gettext('Open via client')} {gettext('Open via client')}
</a> </a>
)} )}
{fileExt && fileExt.toLowerCase() === 'txt' && ( {isTxt &&
<DropdownItem id='txt-line-wrap-menu' className='dropdown-item'> <DropdownItem id='txt-line-wrap-menu' className='dropdown-item'>
<Switch <Switch
checked={this.props.lineWrapping} checked={this.props.lineWrapping}
placeholder={gettext('Line wrapping')} placeholder={gettext('Line wrapping')}
className="txt-line-wrap-menu w-100" className="txt-line-wrap-menu w-100"
onChange={() => this.props.updatelineWrapping(!this.props.lineWrapping)} onChange={() => this.props.updateLineWrapping(!this.props.lineWrapping)}
/> />
</DropdownItem> </DropdownItem>
)} }
</DropdownMenu> </DropdownMenu>
</Dropdown> </Dropdown>
</div> </div>
@@ -307,6 +309,16 @@ class FileToolbar extends React.Component {
</DropdownItem> </DropdownItem>
)} )}
<DropdownItem onClick={this.props.toggleDetailsPanel}>{gettext('Details')}</DropdownItem> <DropdownItem onClick={this.props.toggleDetailsPanel}>{gettext('Details')}</DropdownItem>
{isTxt &&
<DropdownItem id='mobile-txt-line-wrap-menu' className='dropdown-item'>
<Switch
checked={this.props.lineWrapping}
placeholder={gettext('Line wrapping')}
className="txt-line-wrap-menu w-100"
onChange={() => this.props.updateLineWrapping(!this.props.lineWrapping)}
/>
</DropdownItem>
}
</DropdownMenu> </DropdownMenu>
</Dropdown> </Dropdown>

2
frontend/src/components/file-view/file-view.js
View File

@@ -157,7 +157,7 @@ class FileView extends React.Component {
setImageScale={this.props.setImageScale} setImageScale={this.props.setImageScale}
rotateImage={this.props.rotateImage} rotateImage={this.props.rotateImage}
lineWrapping={this.props.lineWrapping} lineWrapping={this.props.lineWrapping}
updatelineWrapping={this.props.updatelineWrapping} updateLineWrapping={this.props.updateLineWrapping}
/> />
} }
</div> </div>

2
frontend/src/components/shared-file-view/shared-file-view.js
View File

@@ -171,7 +171,7 @@ class SharedFileView extends React.Component {
checked={this.props.lineWrapping} checked={this.props.lineWrapping}
placeholder={gettext('Line wrapping')} placeholder={gettext('Line wrapping')}
className="txt-line-wrap-menu w-100" className="txt-line-wrap-menu w-100"
onChange={() => this.props.updatelineWrapping(!this.props.lineWrapping)} onChange={() => this.props.updateLineWrapping(!this.props.lineWrapping)}
/> />
</DropdownItem> </DropdownItem>
)} )}

4
frontend/src/shared-file-view-text.js
View File

@@ -22,14 +22,14 @@ const FileContent = ({ lineWrapping }) => {
const SharedFileViewText = () => { const SharedFileViewText = () => {
let [lineWrapping, setLineWrapping] = useState(localStorage.getItem('sf_txt_file_line_wrapping') === 'true' || false); let [lineWrapping, setLineWrapping] = useState(localStorage.getItem('sf_txt_file_line_wrapping') === 'true' || false);
const updatelineWrapping = (newLineWrapping) => { const updateLineWrapping = (newLineWrapping) => {
setLineWrapping(newLineWrapping); setLineWrapping(newLineWrapping);
}; };
return ( return (
<SharedFileView <SharedFileView
content={<FileContent lineWrapping={lineWrapping}/>} content={<FileContent lineWrapping={lineWrapping}/>}
updatelineWrapping={updatelineWrapping} updateLineWrapping={updateLineWrapping}
lineWrapping={lineWrapping} lineWrapping={lineWrapping}
canWrapLine={true} canWrapLine={true}
/> />

4
frontend/src/view-file-text.js
View File

@@ -63,7 +63,7 @@ class ViewFileText extends React.Component {
}); });
}; };
updatelineWrapping = (value) => { updateLineWrapping = (value) => {
this.setState({ this.setState({
lineWrapping: value, lineWrapping: value,
}); });
@@ -157,7 +157,7 @@ class ViewFileText extends React.Component {
participants={this.state.participants} participants={this.state.participants}
onParticipantsChange={this.onParticipantsChange} onParticipantsChange={this.onParticipantsChange}
lineWrapping={this.state.lineWrapping} lineWrapping={this.state.lineWrapping}
updatelineWrapping={this.updatelineWrapping} updateLineWrapping={this.updateLineWrapping}
/> />
); );
} }