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.

Sign up for GitHub

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

Jump to bottom

EPMRPP-96401 || Added space for pagination in scrollWrapper #4059

Open
wants to merge 1 commit into
base: feature/orgs
Choose a base branch
from
Open

EPMRPP-96401 || Added space for pagination in scrollWrapper #4059

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
19 changes: 16 additions & 3 deletions app/src/components/main/scrollWrapper/scrollWrapper.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export class ScrollWrapper extends Component {
thumbMinSize: PropTypes.number,
withBackToTop: PropTypes.bool,
withFooter: PropTypes.bool,
withPaginationOffset: PropTypes.bool,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

May be ads this as a number to specify the 'contentMarginBottom'?
Or even better add the 'contentClassName' prop to provide any styles.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't it be better to keep contentMarginBottom, since it's used in many places with pagination to avoid repeating the same style? I can also add contentClassName for any additional specific styles

resetRequired: PropTypes.bool,
onReset: PropTypes.func,
className: PropTypes.string,
Expand All @@ -71,8 +72,15 @@ export class ScrollWrapper extends Component {
renderTrackVertical: (props) => <div {...props} className={cx('track-vertical')} />,
renderThumbHorizontal: (props) => <div {...props} className={cx('thumb-horizontal')} />,
renderThumbVertical: (props) => <div {...props} className={cx('thumb-vertical')} />,
renderView: ({ withFooter, ...props }) => (
<div {...props} className={cx('scrolling-content', { 'with-footer': withFooter })} />
renderView: ({ withFooter, withPaginationOffset, ...props }) => (
<div
{...props}
className={cx(
'scrolling-content',
{ 'with-footer': withFooter },
{ 'with-pagination-offset': withPaginationOffset },
)}
/>
),
onLazyLoad: false,
hideTracksWhenNotNeeded: false,
Expand Down Expand Up @@ -165,7 +173,12 @@ export class ScrollWrapper extends Component {
this.scrollbars.thumbHorizontal.style.opacity = '';
};

renderView = (props) => this.props.renderView({ withFooter: this.props.withFooter, ...props });
renderView = (props) =>
this.props.renderView({
withFooter: this.props.withFooter,
withPaginationOffset: this.props.withPaginationOffset,
...props,
});

render() {
return (
Expand Down
3 changes: 3 additions & 0 deletions app/src/components/main/scrollWrapper/scrollWrapper.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,9 @@
flex-direction: column;
justify-content: stretch;
}
&.with-pagination-offset {
margin-bottom: 45px !important;
}
@media print {
position: relative !important;
max-height: none !important;
Expand Down
61 changes: 32 additions & 29 deletions app/src/pages/instance/allUsersPage/allUsersPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ import {
import { userInfoSelector } from 'controllers/user';
import { COMMON_LOCALE_KEYS } from 'common/constants/localization';
import { SORTING_ASC, withSortingURL } from 'controllers/sorting';
import { ScrollWrapper } from 'components/main/scrollWrapper';
import { UsersToolbar } from './usersToolbar';
import { AllUsersGrid } from './allUsersGrid';

Expand Down Expand Up @@ -265,36 +266,38 @@ export class AllUsersPage extends Component {
onChangeSorting,
} = this.props;
return (
<PageLayout>
<PageHeader breadcrumbs={this.getBreadcrumbs()} />
<PageSection>
<UsersToolbar onDelete={this.handlerDelete} selectedUsers={selectedUsers} />
<AllUsersGrid
data={users}
loading={loading}
selectedItems={selectedUsers}
onToggleSelection={this.handleOneUserSelection}
excludeFromSelection={this.excludeFromSelection}
onToggleSelectAll={this.handleToggleAllUserSelection}
sortingColumn={sortingColumn}
sortingDirection={sortingDirection}
onChangeSorting={onChangeSorting}
/>
{!!pageCount && !loading && (
<PaginationToolbar
activePage={activePage}
itemCount={itemCount}
pageCount={pageCount}
pageSize={pageSize}
onChangePage={onChangePage}
onChangePageSize={onChangePageSize}
<ScrollWrapper autoHeightMax={100}>
<PageLayout>
<PageHeader breadcrumbs={this.getBreadcrumbs()} />
<PageSection>
<UsersToolbar onDelete={this.handlerDelete} selectedUsers={selectedUsers} />
<AllUsersGrid
data={users}
loading={loading}
selectedItems={selectedUsers}
onToggleSelection={this.handleOneUserSelection}
excludeFromSelection={this.excludeFromSelection}
onToggleSelectAll={this.handleToggleAllUserSelection}
sortingColumn={sortingColumn}
sortingDirection={sortingDirection}
onChangeSorting={onChangeSorting}
/>
)}
{!users.length && !loading && (
<NoItemMessage message={intl.formatMessage(COMMON_LOCALE_KEYS.NO_RESULTS)} />
)}
</PageSection>
</PageLayout>
{!!pageCount && !loading && (
<PaginationToolbar
activePage={activePage}
itemCount={itemCount}
pageCount={pageCount}
pageSize={pageSize}
onChangePage={onChangePage}
onChangePageSize={onChangePageSize}
/>
)}
{!users.length && !loading && (
<NoItemMessage message={intl.formatMessage(COMMON_LOCALE_KEYS.NO_RESULTS)} />
)}
</PageSection>
</PageLayout>
</ScrollWrapper>
);
}
}
2 changes: 1 addition & 1 deletion app/src/pages/instance/organizationsPage/organizationsPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export const OrganizationsPage = () => {
};

return (
<ScrollWrapper autoHeightMax={100}>
<ScrollWrapper autoHeightMax={100} withPaginationOffset>
<div className={cx('organizations-page')}>
<OrganizationsPageHeader
hasPermission={hasPermission}
Expand Down
2 changes: 1 addition & 1 deletion app/src/pages/instance/organizationsPage/organizationsPanelView/organizationsPanelView.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,6 @@
}

.organizations-list-wrapper {
padding: 0px 96px;
padding: 0px 96px 32px 96px;
width: calc(100% - 192px);
}
2 changes: 1 addition & 1 deletion app/src/pages/organization/organizationProjectsPage/organizationProjectsPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ export const OrganizationProjectsPage = () => {
};

return (
<ScrollWrapper autoHeightMax={100}>
<ScrollWrapper autoHeightMax={100} withPaginationOffset>
<div className={cx('organization-projects-container')}>
<ProjectsPageHeader
hasPermission={hasPermission}
Expand Down
2 changes: 1 addition & 1 deletion app/src/pages/organization/organizationUsersPage/organizationUsersPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const OrganizationUsersPage = () => {
const isEmptyUsers = users.length === 0;

return (
<ScrollWrapper autoHeightMax={100}>
<ScrollWrapper autoHeightMax={100} withPaginationOffset>
<div className={cx('organization-users-page')}>
<OrganizationUsersPageHeader isNotEmpty={!isEmptyUsers} />
{isEmptyUsers ? (
Expand Down
2 changes: 1 addition & 1 deletion app/src/pages/organization/projectTeamPage/projectTeamPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export const ProjectTeamPage = () => {
};

return (
<ScrollWrapper autoHeightMax={100}>
<ScrollWrapper autoHeightMax={100} withPaginationOffset>
<div className={cx('project-team-page')}>
<ProjectTeamPageHeader
hasPermission={hasPermission}
Expand Down
Loading