Skip to content

Commit

Permalink
IBX-7184: [Sub-items] For lower resolution list header actions ale no…
Browse files Browse the repository at this point in the history 
…t fully visible
  • Loading branch information
@GrabowskiM
GrabowskiM committed Dec 1, 2023
1 parent c04f138 commit 5962def
Show file tree
Hide file tree
Showing 2 changed files with 165 additions and 13 deletions.
16 changes: 16 additions & 0 deletions src/bundle/Resources/public/scss/ui/modules/sub-items-list/_main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,22 @@
border-bottom: calculateRem(1px) solid $ibexa-color-dark-200;
margin-top: 0;

&__headline {
overflow: initial;
}

&__actions {
&--adaptive {
overflow: hidden;
flex-grow: 1;
justify-content: flex-end;

.ibexa-adaptive-items__item--hidden {
display: none;
}
}
}

.c-simple-dropdown {
&:hover {
.c-simple-dropdown__selected {
Expand Down
162 changes: 149 additions & 13 deletions src/bundle/ui-dev/src/modules/sub-items/sub.items.module.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,11 @@ import Icon from '../common/icon/icon.js';
import PaginationInfo from '../common/pagination/pagination.info.js';

import deepClone from '../common/helpers/deep.clone.helper.js';
import { createCssClassNames } from '../common/helpers/css.class.names';
import { updateLocationPriority, loadLocation as loadLocationService } from './services/sub.items.service';
import { bulkAddLocations, bulkDeleteItems, bulkHideLocations, bulkUnhideLocations, bulkMoveLocations } from './services/bulk.service.js';

const { Translator, ibexa } = window;
const { Translator, ibexa, Popper, document } = window;

export const ASCENDING_SORT_ORDER = 'ascending';
const DESCENDING_SORT_ORDER = 'descending';
Expand Down Expand Up @@ -92,9 +93,17 @@ export default class SubItemsModule extends Component {
this.resizeSubItems = this.resizeSubItems.bind(this);
this.setColumnsVisibilityInLocalStorage = this.setColumnsVisibilityInLocalStorage.bind(this);
this.toggleColumnVisibility = this.toggleColumnVisibility.bind(this);
this.adaptHeaderActions = this.adaptHeaderActions.bind(this);
this.showMorePanel = this.showMorePanel.bind(this);
this.hideMorePanel = this.hideMorePanel.bind(this);
this.renderExtraActions = this.renderExtraActions.bind(this);
this.renderActionBtnWrapper = this.renderActionBtnWrapper.bind(this);

this._refListViewWrapper = React.createRef();
this._refMainContainerWrapper = React.createRef();
this._refAdaptiveItemsWrapper = React.createRef();
this._refAdaptiveItemMoreBtn = React.createRef();
this._refAdaptiveItemMorePanel = React.createRef();
this.bulkActionModalContainer = null;
this.udwContainer = null;

Expand All @@ -119,6 +128,8 @@ export default class SubItemsModule extends Component {
sortOrder: sortClauseData.order,
subItemsWidth: this.calculateSubItemsWidth(),
columnsVisibility: this.getColumnsVisibilityFromLocalStorage(),
morePanelVisible: false,
morePanelVisibleItemsIndexes: [],
};
}

Expand All @@ -144,6 +155,8 @@ export default class SubItemsModule extends Component {
if (!this.state.activePageItems) {
this.loadPage(0);
}

this.adaptHeaderActions();
}

componentDidUpdate() {
Expand Down Expand Up @@ -1118,7 +1131,11 @@ export default class SubItemsModule extends Component {
renderExtraActions(action, index) {
const Action = action.component;

return <Action key={index} className="m-sub-items__action" {...action.attrs} />;
return this.renderActionBtnWrapper(
<Action {...action.attrs} />,
'm-sub-items__action',
{ key: index },
);
}

/**
Expand Down Expand Up @@ -1167,34 +1184,52 @@ export default class SubItemsModule extends Component {
);
}

renderActionBtnWrapper(btn, extraClasses = '', extraProps = {}) {
return (
<div className={`ibexa-adaptive-items__item ${extraClasses}`} {...extraProps}>
{btn}
</div>
)
}

renderBulkMoveBtn(disabled) {
const label = Translator.trans(/*@Desc("Move")*/ 'move_btn.label', {}, 'ibexa_sub_items');

return <ActionButton disabled={disabled} onClick={this.onMoveBtnClick} label={label} type="move" />;
return this.renderActionBtnWrapper(
<ActionButton disabled={disabled} onClick={this.onMoveBtnClick} label={label} type="move" />
);
}

renderBulkAddLocationBtn(disabled) {
const label = Translator.trans(/*@Desc("Add Locations")*/ 'add_locations_btn.label', {}, 'ibexa_sub_items');

return <ActionButton disabled={disabled} onClick={this.onAddLocationsBtnClick} label={label} type="create-location" />;
return this.renderActionBtnWrapper(
<ActionButton disabled={disabled} onClick={this.onAddLocationsBtnClick} label={label} type="create-location" />
);
}

renderBulkHideBtn(disabled) {
const label = Translator.trans(/*@Desc("Hide")*/ 'hide_locations_btn.label', {}, 'ibexa_sub_items');

return <ActionButton disabled={disabled} onClick={this.onHideBtnClick} label={label} type="hide" />;
return this.renderActionBtnWrapper(
<ActionButton disabled={disabled} onClick={this.onHideBtnClick} label={label} type="hide" />
);
}

renderBulkUnhideBtn(disabled) {
const label = Translator.trans(/*@Desc("Reveal")*/ 'unhide_locations_btn.label', {}, 'ibexa_sub_items');

return <ActionButton disabled={disabled} onClick={this.onUnhideBtnClick} label={label} type="reveal" />;
return this.renderActionBtnWrapper(
<ActionButton disabled={disabled} onClick={this.onUnhideBtnClick} label={label} type="reveal" />
);
}

renderBulkDeleteBtn(disabled) {
const label = Translator.trans(/*@Desc("Delete")*/ 'trash_btn.label', {}, 'ibexa_sub_items');

return <ActionButton disabled={disabled} onClick={this.onDeleteBtnClick} label={label} type="trash" />;
return this.renderActionBtnWrapper(
<ActionButton disabled={disabled} onClick={this.onDeleteBtnClick} label={label} type="trash" />
);
}

renderSpinner() {
Expand Down Expand Up @@ -1319,6 +1354,98 @@ export default class SubItemsModule extends Component {
);
}

hideMorePanel() {
this.setState(
() => ({ morePanelVisible: false }),
() => {
setTimeout(() => {
document.body.removeEventListener('click', this.hideMorePanel, false);
}, 1);
}
);
}

showMorePanel() {
this.setState(
() => ({ morePanelVisible: true }),
() => {
setTimeout(() => {
document.body.addEventListener('click', this.hideMorePanel, false);
}, 1);
}
);
}

renderMoreBtn(actionBtns) {
const panelClasses = createCssClassNames({
'm-sub-items__adaptive-items-popup': true,
'ibexa-popup-menu': true,
'ibexa-popup-menu--hidden': !this.state.morePanelVisible,
});
const filteredActionBtns = actionBtns.filter((el, index) => {
return this.state.morePanelVisibleItemsIndexes.includes(index);
});

return [
this.renderActionBtnWrapper(
(
<ActionButton
disabled={false}
onClick={this.showMorePanel}
type="options"
/>
),
'ibexa-adaptive-items__item--selector',
{ ref: this._refAdaptiveItemMoreBtn }
),
ReactDOM.createPortal(
(
<div
className={panelClasses}
ref={this._refAdaptiveItemMorePanel}
>
{filteredActionBtns}
</div>
),
document.body,
),
];
}

adaptHeaderActions() {
this.popperInstance = new Popper.createPopper(this._refAdaptiveItemMoreBtn.current, this._refAdaptiveItemMorePanel.current, {
placement: 'bottom-end',
modifiers: [
{
name: 'flip',
enabled: true,
options: {
fallbackPlacements: ['top-end'],
boundary: document.body,
},
},
],
});

this.adaptiveItems = new ibexa.core.AdaptiveItems({
itemHiddenClass: 'ibexa-adaptive-items__item--hidden',
container: this._refAdaptiveItemsWrapper.current,
getActiveItem: () => null,
onAdapted: (visibleItems, hiddenItems) => {
const adaptiveItemsIterableArr = [...this.adaptiveItems.items];

const visibleItemsInPanelIndexes = [...hiddenItems].map((hiddenItem) => {
return adaptiveItemsIterableArr.indexOf(hiddenItem);
});

this.setState(() => ({ morePanelVisibleItemsIndexes: visibleItemsInPanelIndexes }))
},
});

this.adaptiveItems.init();

}

render() {
const listTitle = Translator.trans(/*@Desc("Sub-items")*/ 'items_list.title', {}, 'ibexa_sub_items');
const { selectedItems, activeView, totalCount, isDuringBulkOperation, activePageItems, subItemsWidth, columnsVisibility } =
Expand All @@ -1327,6 +1454,14 @@ export default class SubItemsModule extends Component {
const isTableViewActive = activeView === VIEW_MODE_TABLE;
const pageLoaded = !!activePageItems;
const bulkBtnDisabled = nothingSelected || !isTableViewActive || !pageLoaded;
const actionBtns = [
...this.props.extraActions.map(this.renderExtraActions),
this.renderBulkMoveBtn(bulkBtnDisabled),
this.renderBulkAddLocationBtn(bulkBtnDisabled),
this.renderBulkHideBtn(bulkHideBtnDisabled),
this.renderBulkUnhideBtn(bulkUnhideBtnDisabled),
this.renderBulkDeleteBtn(bulkBtnDisabled),
];
let bulkHideBtnDisabled = true;
let bulkUnhideBtnDisabled = true;
let listClassName = 'm-sub-items__list';
Expand All @@ -1349,13 +1484,14 @@ export default class SubItemsModule extends Component {
<div className="ibexa-table-header__headline">
{listTitle} ({this.state.totalCount})
</div>
<div
className="ibexa-table-header__actions ibexa-table-header__actions--adaptive ibexa-adaptive-items"
ref={this._refAdaptiveItemsWrapper}
>
{actionBtns}
{this.renderMoreBtn(actionBtns)}
</div>
<div className="ibexa-table-header__actions">
{this.props.extraActions.map(this.renderExtraActions)}
{this.renderBulkMoveBtn(bulkBtnDisabled)}
{this.renderBulkAddLocationBtn(bulkBtnDisabled)}
{this.renderBulkHideBtn(bulkHideBtnDisabled)}
{this.renderBulkUnhideBtn(bulkUnhideBtnDisabled)}
{this.renderBulkDeleteBtn(bulkBtnDisabled)}
<ViewColumnsTogglerComponent
columnsVisibility={this.filterSmartModeColumns(columnsVisibility)}
toggleColumnVisibility={this.toggleColumnVisibility}
Expand Down

0 comments on commit 5962def

Please sign in to comment.