Skip to content

Commit

Permalink
fix: add maximized-tile part on tile manager
Browse files Browse the repository at this point in the history
  • Loading branch information
mtsvyatkova committed Dec 11, 2024
1 parent 80665be commit a253859
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 4 deletions.
2 changes: 1 addition & 1 deletion src/components/tile-manager/themes/tile-manager.base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
--ig-min-row-height: 200px;
}

[part='base'] {
[part~='base'] {
display: grid;
position: relative;
padding: rem(20px);
Expand Down
28 changes: 25 additions & 3 deletions src/components/tile-manager/tile-manager.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ContextProvider } from '@lit/context';
import { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
import { property, state } from 'lit/decorators.js';
import { type StyleInfo, styleMap } from 'lit/directives/style-map.js';
import { themes } from '../../theming/theming-decorator.js';
import { tileManagerContext } from '../common/context.js';
Expand All @@ -11,7 +11,11 @@ import {
import { registerComponent } from '../common/definitions/register.js';
import type { Constructor } from '../common/mixins/constructor.js';
import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
import { asNumber, findElementFromEventPath } from '../common/util.js';
import {
asNumber,
findElementFromEventPath,
partNameMap,
} from '../common/util.js';
import { createTilesState, isSameTile, swapTiles } from './position.js';
import { createSerializer } from './serializer.js';
import { all } from './themes/container.js';
Expand Down Expand Up @@ -95,6 +99,9 @@ export default class IgcTileManagerComponent extends EventEmitterMixin<
this._tilesState.assignTiles();
}

@state()
private _isAnyTileMaximized = false;

/**
* Determines whether the tiles slide or swap on drop.
* @attr drag-mode
Expand Down Expand Up @@ -173,6 +180,11 @@ export default class IgcTileManagerComponent extends EventEmitterMixin<
});
}

public override connectedCallback() {
super.connectedCallback();
this.updateIsAnyTileMaximized();
}

protected override firstUpdated() {
this._tilesState.assignPositions();
this._tilesState.assignTiles();
Expand Down Expand Up @@ -209,6 +221,11 @@ export default class IgcTileManagerComponent extends EventEmitterMixin<
}
}

/** @private @hidden @internal */
public updateIsAnyTileMaximized() {
this._isAnyTileMaximized = this.tiles.some((tile) => tile.maximized);
}

public saveLayout(): string {
return this._serializer.saveAsJSON();
}
Expand All @@ -218,10 +235,15 @@ export default class IgcTileManagerComponent extends EventEmitterMixin<
}

protected override render() {
const parts = partNameMap({
base: true,
'maximized-tile': this._isAnyTileMaximized,
});

return html`
<div
style=${styleMap(this._internalStyles)}
part="base"
part=${parts}
@tileDragStart=${this.handleTileDragStart}
@tileDragEnd=${this.handleTileDragEnd}
@dragover=${this.handleDragOver}
Expand Down
4 changes: 4 additions & 0 deletions src/components/tile-manager/tile.ts
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,10 @@ export default class IgcTileComponent extends EventEmitterMixin<
@property({ type: Boolean, reflect: true })
public set maximized(value: boolean) {
this._maximized = value;

if (this._managerContext) {
this._managerContext.instance.updateIsAnyTileMaximized();
}
}

public get maximized() {
Expand Down

0 comments on commit a253859

Please sign in to comment.