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

fix(Tile): update conditions to show/hide gradient #457

Merged
merged 5 commits into from
Jan 10, 2024
Merged

fix(Tile): update conditions to show/hide gradient #457

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
eaf21c9
fix(Tile): update conditions to show/hide gradient
ImCoolNowRight Jan 9, 2024
2a319df
fix(Tile): update conditions to show/hide gradient
ImCoolNowRight Jan 9, 2024
b0ebd46
fix(Tile): change null logo option in story from string
ImCoolNowRight Jan 10, 2024
98e2f74
fix(Tile): update _shouldShowGradient getter
ImCoolNowRight Jan 10, 2024
f0a380a
fix(Tile): update getter used in tests
ImCoolNowRight Jan 10, 2024
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
46 changes: 27 additions & 19 deletions packages/@lightningjs/ui-components/src/components/Tile/Tile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,10 +143,14 @@ export default class Tile extends Surface {
return this._h; // Ensure that surface respects the correct height when metadata is displayed below
}

get _gradient() {
if (this._isCircleLayout) return false;
get _shouldShowGradient() {
return Boolean(
this._isInsetMetadata && this._hasMetadata && this._shouldShowMetadata
((this._isInsetMetadata &&
this._hasMetadata &&
this._shouldShowMetadata) ||
this.progressBar?.progress > 0 ||
this._shouldShowLogo) &&
!this._isCircleLayout
);
}

Expand Down Expand Up @@ -192,29 +196,28 @@ export default class Tile extends Surface {
/* ------------------------------ Logo ------------------------------ */

_updateLogo() {
if (!this.logo) {
this.patch({ Logo: undefined });
return;
}
const logoObject = {
w: this.style.logoWidth,
h: this.style.logoHeight,
icon: this.logo,
alpha: this.style.alpha,
alpha: this._shouldShowLogo ? this.style.alpha : 0.001,
x: this.style.paddingX,
y: this._calculateLogoYPosition()
};

if (this.logo && (this.persistentMetadata || this._isFocusedMode)) {
if (!this._Logo) {
this.patch({
Logo: {
type: Icon,
mountY: 1,
...logoObject
}
});
} else {
this.applySmooth(this._Logo, logoObject);
}
if (!this._Logo) {
this.patch({
Logo: {
type: Icon,
mountY: 1,
...logoObject
}
});
} else {
this.patch({ Logo: undefined });
this.applySmooth(this._Logo, logoObject);
}
}

Expand All @@ -226,6 +229,11 @@ export default class Tile extends Surface {
? this._progressBarY - this.style.paddingYBetweenContent
: this._h - this.style.paddingY;
}

get _shouldShowLogo() {
return this.logo && (this.persistentMetadata || this._isFocusedMode);
}

/* ------------------------------ Artwork ------------------------------ */

_updateArtwork() {
Expand All @@ -244,7 +252,7 @@ export default class Tile extends Surface {
radius: this.style?.radius,
...this.artwork?.style
},
gradient: this._gradient,
gradient: this._shouldShowGradient,
shouldScale: this._isFocusedMode
});
}
Expand Down
2 changes: 1 addition & 1 deletion packages/@lightningjs/ui-components/src/components/Tile/Tile.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ Tile.argTypes = {
},
logo: {
control: 'select',
options: [xfinityLogo, 'null'],
options: [xfinityLogo, null],
description: 'Icon source',
table: {
defaultValue: { summary: 'undefined' }
Expand Down
12 changes: 6 additions & 6 deletions packages/@lightningjs/ui-components/src/components/Tile/Tile.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -430,7 +430,7 @@ describe('Tile', () => {
});

it('returns the proper value for gradient when has metadata is in focus and layout is inset', async () => {
expect(tile._gradient).toBe(false);
expect(tile._shouldShowGradient).toBe(false);
// Overwrite _hasMetadata to always be true for test
Object.defineProperty(tile, '_hasMetadata', {
get() {
Expand All @@ -439,12 +439,12 @@ describe('Tile', () => {
});
testRenderer.focus();
await tile.__updateSpyPromise;
expect(tile._gradient).toBe(false);
expect(tile._shouldShowGradient).toBe(false);
tile.progressBar = {
progress: 0.5
};
await tile.__updateSpyPromise;
expect(tile._gradient).toBe(false);
expect(tile._shouldShowGradient).toBe(true);
tile.progressBar = {
progress: 0
};
Expand All @@ -453,17 +453,17 @@ describe('Tile', () => {
testRenderer.unfocus();
await tile.__updateSpyPromise;

expect(tile._gradient).toBe(false);
expect(tile._shouldShowGradient).toBe(false);
testRenderer.focus();
await tile.__updateSpyPromise;
expect(tile._gradient).toBe(false);
expect(tile._shouldShowGradient).toBe(false);
tile.metadataLocation = 'inset';
tile.progressBar = {
progress: 0.7
};
testRenderer.focus();
await tile.__updateSpyPromise;
expect(tile._gradient).toBe(true);
expect(tile._shouldShowGradient).toBe(true);
});
});

Expand Down
Loading