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

fix reactstrap 9.x DropdownMenu style (#7472)

Browse Source
This commit is contained in:
Michael An
2025-02-17 17:02:02 +08:00
committed by GitHub
parent 79413cb4fd
commit ef8cd06f72
11 changed files with 21 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/cur-dir-path/dir-path.js
View File

@@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { UncontrolledTooltip } from 'reactstrap'; import { UncontrolledTooltip } from 'reactstrap';
import { Link } from '@gatsbyjs/reach-router'; import { Link } from '@gatsbyjs/reach-router';
import DirOperationToolBar from '../../components/toolbar/dir-operation-toolbar'; import DirOperationToolbar from '../../components/toolbar/dir-operation-toolbar';
import MetadataViewName from '../../metadata/components/metadata-view-name'; import MetadataViewName from '../../metadata/components/metadata-view-name';
import TagViewName from '../../tag/components/tag-view-name'; import TagViewName from '../../tag/components/tag-view-name';
import { siteRoot, gettext } from '../../utils/constants'; import { siteRoot, gettext } from '../../utils/constants';
@@ -182,7 +182,7 @@ class DirPath extends React.Component {
return ( return (
<Fragment key={index}> <Fragment key={index}>
<span className="path-split">/</span> <span className="path-split">/</span>
<DirOperationToolBar <DirOperationToolbar
path={this.props.currentPath} path={this.props.currentPath}
repoID={this.props.repoID} repoID={this.props.repoID}
repoName={this.props.repoName} repoName={this.props.repoName}
@@ -199,7 +199,7 @@ class DirPath extends React.Component {
loadDirentList={this.props.loadDirentList} loadDirentList={this.props.loadDirentList}
> >
<span className="path-file-name">{item}</span> <span className="path-file-name">{item}</span>
</DirOperationToolBar> </DirOperationToolbar>
</Fragment> </Fragment>
); );
} else { } else {
@@ -241,19 +241,19 @@ class DirPath extends React.Component {
); );
})} })}
{this.props.pathPrefix && this.props.pathPrefix.length === 0 && ( {this.props.pathPrefix && this.props.pathPrefix.length === 0 && (
<Fragment> <>
<Link to={siteRoot + 'libraries/'} className="path-item normal" onClick={(e) => this.onTabNavClick(e, 'libraries')}>{gettext('Files')}</Link> <Link to={siteRoot + 'libraries/'} className="path-item normal" onClick={(e) => this.onTabNavClick(e, 'libraries')}>{gettext('Files')}</Link>
<span className="path-split">/</span> <span className="path-split">/</span>
</Fragment> </>
)} )}
{!this.props.pathPrefix && ( {!this.props.pathPrefix && (
<Fragment> <>
<Link to={siteRoot + 'libraries/'} className="path-item normal" onClick={(e) => this.onTabNavClick(e, 'libraries')}>{gettext('Files')}</Link> <Link to={siteRoot + 'libraries/'} className="path-item normal" onClick={(e) => this.onTabNavClick(e, 'libraries')}>{gettext('Files')}</Link>
<span className="path-split">/</span> <span className="path-split">/</span>
</Fragment> </>
)} )}
{(currentPath === '/' || currentPath === '') ? {(currentPath === '/' || currentPath === '') ?
<DirOperationToolBar <DirOperationToolbar
path={this.props.currentPath} path={this.props.currentPath}
repoID={this.props.repoID} repoID={this.props.repoID}
repoName={this.props.repoName} repoName={this.props.repoName}
@@ -270,7 +270,7 @@ class DirPath extends React.Component {
loadDirentList={this.props.loadDirentList} loadDirentList={this.props.loadDirentList}
> >
<span className="path-repo-name">{repoName}</span> <span className="path-repo-name">{repoName}</span>
</DirOperationToolBar> : </DirOperationToolbar> :
<span className="path-item" data-path="/" onClick={this.onPathClick} role="button">{repoName}</span> <span className="path-item" data-path="/" onClick={this.onPathClick} role="button">{repoName}</span>
} }
{pathElem} {pathElem}

5
frontend/src/components/dropdown-menu/item-dropdown-menu.js
View File

@@ -197,8 +197,7 @@ class ItemDropdownMenu extends React.Component {
<ModalPortal> <ModalPortal>
<DropdownMenu <DropdownMenu
style={menuStyle} style={menuStyle}
className={this.props.menuClassname} className={`${this.props.menuClassname} position-fixed`}
positionFixed={true}
flip={false} flip={false}
modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]} modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
> >
@@ -224,7 +223,7 @@ class ItemDropdownMenu extends React.Component {
<i className="sf3-font-down sf3-font rotate-270"></i> <i className="sf3-font-down sf3-font rotate-270"></i>
</DropdownToggle> </DropdownToggle>
<DropdownMenu <DropdownMenu
positionFixed={true} className="position-fixed"
flip={false} flip={false}
modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]} modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
> >

3
frontend/src/components/sf-table/table-main/records-header/dropdown-menu/index.js
View File

@@ -21,10 +21,9 @@ const HeaderDropdownMenu = ({ column, ColumnDropdownMenu, customProps }) => {
const renderDropdownMenu = useCallback(() => { const renderDropdownMenu = useCallback(() => {
return ( return (
<DropdownMenu <DropdownMenu
positionFixed={true}
flip={false} flip={false}
modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]} modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
className="sf-table-dropdown-menu" className="sf-table-dropdown-menu position-fixed"
> >
{cloneElement(ColumnDropdownMenu, { column, ...customProps })} {cloneElement(ColumnDropdownMenu, { column, ...customProps })}
</DropdownMenu> </DropdownMenu>

4
frontend/src/components/toolbar/dir-operation-toolbar.js
View File

@@ -295,7 +295,7 @@ class DirOperationToolbar extends React.Component {
{this.props.children} {this.props.children}
<i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i> <i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i>
</DropdownToggle> </DropdownToggle>
<DropdownMenu onMouseMove={this.onDropDownMouseMove} positionFixed={true}> <DropdownMenu onMouseMove={this.onDropDownMouseMove} className='position-fixed'>
{opList.map((item, index) => { {opList.map((item, index) => {
if (item == 'Divider') { if (item == 'Divider') {
return <DropdownItem key={index} divider />; return <DropdownItem key={index} divider />;
@@ -353,7 +353,7 @@ class DirOperationToolbar extends React.Component {
{this.props.children} {this.props.children}
<i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i> <i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i>
</DropdownToggle> </DropdownToggle>
<DropdownMenu positionFixed={true}> <DropdownMenu className='position-fixed'>
{canUpload && ( {canUpload && (
<DropdownItem onClick={this.onUploadFile}>{gettext('Upload')}</DropdownItem> <DropdownItem onClick={this.onUploadFile}>{gettext('Upload')}</DropdownItem>
)} )}

2
frontend/src/components/toolbar/single-dropdown-toolbar.js
View File

@@ -50,7 +50,7 @@ class SingleDropdownToolbar extends React.Component {
{withPlusIcon && <i className="sf3-font-new sf3-font main-icon"></i>} {withPlusIcon && <i className="sf3-font-new sf3-font main-icon"></i>}
<i className="sf3-font-down sf3-font"></i> <i className="sf3-font-down sf3-font"></i>
</DropdownToggle> </DropdownToggle>
<DropdownMenu positionFixed={true}> <DropdownMenu className='position-fixed'>
{opList.map((item, index) => { {opList.map((item, index) => {
if (item == 'Divider') { if (item == 'Divider') {
return <DropdownItem key={index} divider />; return <DropdownItem key={index} divider />;

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

@@ -159,7 +159,7 @@ class ViewFileToolbar extends React.Component {
{this.props.children} {this.props.children}
<i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i> <i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i>
</DropdownToggle> </DropdownToggle>
<DropdownMenu positionFixed={true} onMouseMove={this.onDropDownMouseMove}> <DropdownMenu className='position-fixed' onMouseMove={this.onDropDownMouseMove}>
{opList.map((item, index) => { {opList.map((item, index) => {
if (item == 'Divider') { if (item == 'Divider') {
return <DropdownItem key={index} divider />; return <DropdownItem key={index} divider />;

2
frontend/src/pages/org-admin/departments/departments-node-dropdown-menu.js
View File

@@ -7,7 +7,7 @@ function DepartmentNodeMenu({ node, toggleDelete, toggleRename, toggleAddMembers
return ( return (
<DropdownMenu <DropdownMenu
modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]} modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
positionFixed={true} className="position-fixed"
> >
<DropdownItem key={`${node.id}-add-department`} onClick={() => toggleAddDepartment(node)}> <DropdownItem key={`${node.id}-add-department`} onClick={() => toggleAddDepartment(node)}>
{gettext('Add sub-department')} {gettext('Add sub-department')}

2
frontend/src/pages/sys-admin/departments/departments-node-dropdown-menu.js
View File

@@ -7,7 +7,7 @@ function DepartmentNodeMenu({ node, toggleDelete, toggleRename, toggleAddMembers
return ( return (
<DropdownMenu <DropdownMenu
modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]} modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
positionFixed={true} className="position-fixed"
> >
<DropdownItem key={`${node.id}-add-department`} onClick={() => toggleAddDepartment(node)}> <DropdownItem key={`${node.id}-add-department`} onClick={() => toggleAddDepartment(node)}>
{gettext('Add sub-department')} {gettext('Add sub-department')}

3
frontend/src/pages/wiki2/wiki-nav/pages/page-dropdownmenu.js
View File

@@ -95,10 +95,9 @@ export default class PageDropdownMenu extends Component {
> >
<DropdownToggle className="page-operation-dropdown-toggle" tag="span" data-toggle="dropdown"></DropdownToggle> <DropdownToggle className="page-operation-dropdown-toggle" tag="span" data-toggle="dropdown"></DropdownToggle>
<DropdownMenu <DropdownMenu
className="page-operation-dropdown-menu dtable-dropdown-menu large" className="page-operation-dropdown-menu dtable-dropdown-menu large position-fixed"
flip={false} flip={false}
modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]} modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
positionFixed={true}
> >
<DropdownItem onClick={this.handleCopyLink}> <DropdownItem onClick={this.handleCopyLink}>
<i className="sf3-font sf3-font-link" aria-hidden="true" /> <i className="sf3-font sf3-font-link" aria-hidden="true" />

2
frontend/src/shared-dir-view.js
View File

@@ -335,7 +335,7 @@ class SharedDirView extends React.Component {
: <i className="sf3-font-down sf3-font ml-1"></i> : <i className="sf3-font-down sf3-font ml-1"></i>
} }
</DropdownToggle> </DropdownToggle>
<DropdownMenu positionFixed={true}> <DropdownMenu className='position-fixed'>
{opList.map((item, index) => { {opList.map((item, index) => {
if (item == 'Divider') { if (item == 'Divider') {
return <DropdownItem key={index} divider />; return <DropdownItem key={index} divider />;

2
frontend/src/tag/components/tag-view-name/all-tags-operation-toolbar.js
View File

@@ -54,7 +54,7 @@ const AllTagsOperationToolbar = ({ children }) => {
{children} {children}
<i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i> <i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i>
</DropdownToggle> </DropdownToggle>
<DropdownMenu positionFixed={true}> <DropdownMenu className='position-fixed'>
<DropdownItem onClick={openAddTag}> <DropdownItem onClick={openAddTag}>
<i className="sf3-font sf3-font-new mr-2 dropdown-item-icon"></i> <i className="sf3-font sf3-font-new mr-2 dropdown-item-icon"></i>
{gettext('New tag')} {gettext('New tag')}