Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[13.0] fix dropdown menu style #7472

Merged
merged 1 commit into from
Feb 17, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions frontend/src/components/cur-dir-path/dir-path.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { UncontrolledTooltip } from 'reactstrap';
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 TagViewName from '../../tag/components/tag-view-name';
import { siteRoot, gettext } from '../../utils/constants';
Expand Down Expand Up @@ -182,7 +182,7 @@ class DirPath extends React.Component {
return (
<Fragment key={index}>
<span className="path-split">/</span>
<DirOperationToolBar
<DirOperationToolbar
path={this.props.currentPath}
repoID={this.props.repoID}
repoName={this.props.repoName}
Expand All @@ -199,7 +199,7 @@ class DirPath extends React.Component {
loadDirentList={this.props.loadDirentList}
>
<span className="path-file-name">{item}</span>
</DirOperationToolBar>
</DirOperationToolbar>
</Fragment>
);
} else {
Expand Down Expand Up @@ -241,19 +241,19 @@ class DirPath extends React.Component {
);
})}
{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>
<span className="path-split">/</span>
</Fragment>
</>
)}
{!this.props.pathPrefix && (
<Fragment>
<>
<Link to={siteRoot + 'libraries/'} className="path-item normal" onClick={(e) => this.onTabNavClick(e, 'libraries')}>{gettext('Files')}</Link>
<span className="path-split">/</span>
</Fragment>
</>
)}
{(currentPath === '/' || currentPath === '') ?
<DirOperationToolBar
<DirOperationToolbar
path={this.props.currentPath}
repoID={this.props.repoID}
repoName={this.props.repoName}
Expand All @@ -270,7 +270,7 @@ class DirPath extends React.Component {
loadDirentList={this.props.loadDirentList}
>
<span className="path-repo-name">{repoName}</span>
</DirOperationToolBar> :
</DirOperationToolbar> :
<span className="path-item" data-path="/" onClick={this.onPathClick} role="button">{repoName}</span>
}
{pathElem}
Expand Down
5 changes: 2 additions & 3 deletions frontend/src/components/dropdown-menu/item-dropdown-menu.js
Original file line number Diff line number Diff line change
Expand Up @@ -197,8 +197,7 @@ class ItemDropdownMenu extends React.Component {
<ModalPortal>
<DropdownMenu
style={menuStyle}
className={this.props.menuClassname}
positionFixed={true}
className={`${this.props.menuClassname} position-fixed`}
flip={false}
modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
>
Expand All @@ -224,7 +223,7 @@ class ItemDropdownMenu extends React.Component {
<i className="sf3-font-down sf3-font rotate-270"></i>
</DropdownToggle>
<DropdownMenu
positionFixed={true}
className="position-fixed"
flip={false}
modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,9 @@ const HeaderDropdownMenu = ({ column, ColumnDropdownMenu, customProps }) => {
const renderDropdownMenu = useCallback(() => {
return (
<DropdownMenu
positionFixed={true}
flip={false}
modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
className="sf-table-dropdown-menu"
className="sf-table-dropdown-menu position-fixed"
>
{cloneElement(ColumnDropdownMenu, { column, ...customProps })}
</DropdownMenu>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/toolbar/dir-operation-toolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@ class DirOperationToolbar extends React.Component {
{this.props.children}
<i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i>
</DropdownToggle>
<DropdownMenu onMouseMove={this.onDropDownMouseMove} positionFixed={true}>
<DropdownMenu onMouseMove={this.onDropDownMouseMove} className='position-fixed'>
{opList.map((item, index) => {
if (item == 'Divider') {
return <DropdownItem key={index} divider />;
Expand Down Expand Up @@ -353,7 +353,7 @@ class DirOperationToolbar extends React.Component {
{this.props.children}
<i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i>
</DropdownToggle>
<DropdownMenu positionFixed={true}>
<DropdownMenu className='position-fixed'>
{canUpload && (
<DropdownItem onClick={this.onUploadFile}>{gettext('Upload')}</DropdownItem>
)}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/toolbar/single-dropdown-toolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ class SingleDropdownToolbar extends React.Component {
{withPlusIcon && <i className="sf3-font-new sf3-font main-icon"></i>}
<i className="sf3-font-down sf3-font"></i>
</DropdownToggle>
<DropdownMenu positionFixed={true}>
<DropdownMenu className='position-fixed'>
{opList.map((item, index) => {
if (item == 'Divider') {
return <DropdownItem key={index} divider />;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/toolbar/view-file-toolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ class ViewFileToolbar extends React.Component {
{this.props.children}
<i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i>
</DropdownToggle>
<DropdownMenu positionFixed={true} onMouseMove={this.onDropDownMouseMove}>
<DropdownMenu className='position-fixed' onMouseMove={this.onDropDownMouseMove}>
{opList.map((item, index) => {
if (item == 'Divider') {
return <DropdownItem key={index} divider />;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ function DepartmentNodeMenu({ node, toggleDelete, toggleRename, toggleAddMembers
return (
<DropdownMenu
modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
positionFixed={true}
className="position-fixed"
>
<DropdownItem key={`${node.id}-add-department`} onClick={() => toggleAddDepartment(node)}>
{gettext('Add sub-department')}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ function DepartmentNodeMenu({ node, toggleDelete, toggleRename, toggleAddMembers
return (
<DropdownMenu
modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
positionFixed={true}
className="position-fixed"
>
<DropdownItem key={`${node.id}-add-department`} onClick={() => toggleAddDepartment(node)}>
{gettext('Add sub-department')}
Expand Down
3 changes: 1 addition & 2 deletions frontend/src/pages/wiki2/wiki-nav/pages/page-dropdownmenu.js
Original file line number Diff line number Diff line change
Expand Up @@ -95,10 +95,9 @@ export default class PageDropdownMenu extends Component {
>
<DropdownToggle className="page-operation-dropdown-toggle" tag="span" data-toggle="dropdown"></DropdownToggle>
<DropdownMenu
className="page-operation-dropdown-menu dtable-dropdown-menu large"
className="page-operation-dropdown-menu dtable-dropdown-menu large position-fixed"
flip={false}
modifiers={[{ name: 'preventOverflow', options: { boundary: document.body } }]}
positionFixed={true}
>
<DropdownItem onClick={this.handleCopyLink}>
<i className="sf3-font sf3-font-link" aria-hidden="true" />
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/shared-dir-view.js
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,7 @@ class SharedDirView extends React.Component {
: <i className="sf3-font-down sf3-font ml-1"></i>
}
</DropdownToggle>
<DropdownMenu positionFixed={true}>
<DropdownMenu className='position-fixed'>
{opList.map((item, index) => {
if (item == 'Divider') {
return <DropdownItem key={index} divider />;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ const AllTagsOperationToolbar = ({ children }) => {
{children}
<i className="sf3-font-down sf3-font ml-1 path-item-dropdown-toggle"></i>
</DropdownToggle>
<DropdownMenu positionFixed={true}>
<DropdownMenu className='position-fixed'>
<DropdownItem onClick={openAddTag}>
<i className="sf3-font sf3-font-new mr-2 dropdown-item-icon"></i>
{gettext('New tag')}
Expand Down