Commit 0c93a153: Fix column selection features and button theme - Repos

Fix column selection features and button theme

0c93a153

dobromirts

committed Feb 28

Files

Details



	projects/igniteui-angular-extras/src/lib/context-menu
	context-menu.component.html
	context-menu.component.scss
	igx-context-menu.directive.ts
	src/app/grid-data-analysis
	grid-data-analysis.component.html

context-menu.component.html

-1+1

/projects/igniteui-angular-extras/src/lib/context-menu/context-menu.component.html

<span #analyticsBtn class="analytics-btn">

<button #btn igxIconButton="flat" (click)="toggleTabMenu()">

<button #btn class="analytics-button" igxIconButton="flat" (click)="toggleTabMenu()">

<igx-icon #icon class="icon" family="material">insert_chart_outlined</igx-icon>

</button>

</span>

context-menu.component.scss

-6+15

/projects/igniteui-angular-extras/src/lib/context-menu/context-menu.component.scss

$sb-size: 8px

);

.analytics-btn {

@include button(button-theme(

$foreground: #fff,

$background: #335e3b,

$hover-background: #459a55,

$border-radius: 0));

:host ::ng-deep {

$analytics-btn: button-theme(

$foreground: contrast-color($color: 'gray', $variant: 900),

$background: color($color: 'success', $variant: 500, $opacity: .8),

$hover-background: color($color: 'success'),

$hover-foreground: contrast-color($color: 'gray', $variant: 900),

$focus-background: color($color: 'success'),

$focus-foreground: contrast-color($color: 'gray', $variant: 900),

$border-radius: 0

);

.analytics-button {

@include css-vars($analytics-btn);

--ig-size: var(--ig-size-small);

}

}

.disableButton {

igx-context-menu.directive.ts

-1+60

/projects/igniteui-angular-extras/src/lib/context-menu/igx-context-menu.directive.ts

IgxOverlayService,

OverlayCancelableEventArgs,

VerticalAlignment,

OverlaySettings

OverlaySettings,

IColumnSelectionEventArgs

} from '@infragistics/igniteui-angular';

import { Subject } from 'rxjs';

import { debounceTime, filter, merge, takeUntil } from 'rxjs/operators';

this.contentObserver = new ResizeObserver(() => this.gridResizeNotify.next());

this.contentObserver.observe(this.grid.nativeElement);

this.grid.columnSelectionChanging.pipe(debounceTime(100))

.subscribe((args: IColumnSelectionEventArgs) => {

if (args.newSelection && args.oldSelection && !this._collapsed) {

this.close();

}

this.grid.clearCellSelection();

this.chartsDirective.chartData = this.grid.getSelectedColumnsData();

if (!this._collapsed) {

this.onButtonClose.emit();

}

this.renderHeaderButton();

});

this.grid.rangeSelected.pipe(takeUntil(this.destroy$))

.subscribe((args) => {

this._range = args;

this._collapsed ? this.show() : this.overlayService.reposition(this._id);

}

private renderHeaderButton() {

const selectedColumns = this.grid.selectedColumns();

if (selectedColumns.length === 0) {

return;

}

this._analyticsBtnSettings.positionStrategy = new AutoPositionStrategy({

horizontalDirection: HorizontalAlignment.Right,

horizontalStartPoint: HorizontalAlignment.Right,

verticalStartPoint: VerticalAlignment.Bottom,

verticalDirection: VerticalAlignment.Bottom, closeAnimation: null

});

const selectedColumnsIndexes = selectedColumns.map(c => c.visibleIndex).sort((a, b) => a - b);

let colIndex = selectedColumnsIndexes[selectedColumnsIndexes.length - 1];

let rowIndex = undefined;

while (selectedColumnsIndexes.length) {

if (this.grid.navigation.isColumnFullyVisible(colIndex)) {

break;

}

selectedColumnsIndexes.pop();

colIndex = selectedColumnsIndexes[selectedColumnsIndexes.length - 1];

}

if (!selectedColumnsIndexes.length) {

return;

}

const col = selectedColumns.find(c => c.visibleIndex === colIndex);

if (!col) {

return;

}

const headerCell = col.headerCell.nativeElement;

this._analyticsBtnSettings.target = headerCell;

this._analyticsBtnSettings.scrollStrategy = new AbsoluteScrollStrategy();

const info = this.overlayService.getOverlayById(this._id);

if (info) {

info.settings.positionStrategy = this._analyticsBtnSettings.positionStrategy;

}

this._collapsed ? this.show() : this.overlayService.reposition(this._id);

}

private show() {

if (!this._collapsed) { return; }

this._collapsed = false;

grid-data-analysis.component.html

/src/app/grid-data-analysis/grid-data-analysis.component.html