Skip to content

Commit

Permalink
#6593 Rating question should get colors from theme (#6634)
Browse files Browse the repository at this point in the history 
* Rating question should get colors from theme
Fixes #6593

* #6593 Rating question should get colors from theme
Fixes #6593

* #6593 - fixed initColors call

---------

Co-authored-by: Aleksey Novikov <novikov@abrisplatform.com>
  • Loading branch information
@novikov82
novikov82 and Aleksey Novikov committed Aug 3, 2023
1 parent b4cbbc7 commit 22d049b
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 18 deletions.
49 changes: 34 additions & 15 deletions src/question_rating.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { Base } from "./base";
import { HtmlConditionItem } from "./expressionItems";
import { mergeValues } from "./utils/utils";
import { DropdownListModel } from "./dropdownListModel";
import { SurveyModel } from "./survey";
import { ISurveyImpl } from "./base-interfaces";

export class RenderedRatingItem extends Base {
private onStringChangedCallback() {
Expand Down Expand Up @@ -41,8 +43,6 @@ export class QuestionRatingModel extends Question {
constructor(name: string) {
super(name);

this.initColors();

this.createItemValues("rateValues");
this.createRenderedRateItems();
this.createLocalizableString("ratingOptionsCaption", this, false, true);
Expand All @@ -63,7 +63,7 @@ export class QuestionRatingModel extends Question {
});
this.registerFunctionOnPropertiesValueChanged(["rateColorMode", "scaleColorMode"],
() => {
this.initColors();
this.updateColors((this.survey as SurveyModel).themeVariables);
});
this.registerFunctionOnPropertiesValueChanged(["autoGenerate"],
() => {
Expand All @@ -87,6 +87,7 @@ export class QuestionRatingModel extends Question {
true
);
this.initPropertyDependencies();

}
private setIconsToRateValues() {
if (this.rateType == "smileys") {
Expand All @@ -96,7 +97,6 @@ export class QuestionRatingModel extends Question {

endLoadingFromJson() {
super.endLoadingFromJson();
this.initColors();
this.hasMinRateDescription = !!this.minRateDescription;
this.hasMaxRateDescription = !!this.maxRateDescription;
if (this.jsonObj.rateMin !== undefined && this.jsonObj.rateCount !== undefined && this.jsonObj.rateMax === undefined) {
Expand Down Expand Up @@ -265,6 +265,8 @@ export class QuestionRatingModel extends Question {
*/
@property({ defaultValue: 5 }) rateCount: number;

private static colorsCalculated: boolean = false;

private static badColor: Array<number>;
private static normalColor: Array<number>;
private static goodColor: Array<number>;
Expand All @@ -273,13 +275,16 @@ export class QuestionRatingModel extends Question {
private static normalColorLight: Array<number>;
private static goodColorLight: Array<number>;

private initColors() {
private updateColors(themeVariables: any) {
if (this.colorMode === "monochrome") return;
if (typeof document === "undefined" || !document) return;
if (QuestionRatingModel.badColor && QuestionRatingModel.normalColor && QuestionRatingModel.goodColor) return;
function getRGBColor(varName: string) {
const style = getComputedStyle(document.documentElement);
const str = style.getPropertyValue && style.getPropertyValue(varName);
if (QuestionRatingModel.colorsCalculated) return;
function getRGBColor(colorName: string, varName: string) {
let str: string = !!themeVariables && themeVariables[colorName] as any;
if(!str) {
const style = getComputedStyle(document.documentElement);
str = style.getPropertyValue && style.getPropertyValue(varName);
}
if (!str) return null;
var ctx = document.createElement("canvas").getContext("2d");
ctx.fillStyle = str;
Expand All @@ -296,12 +301,15 @@ export class QuestionRatingModel extends Question {
1
] : null;
}
QuestionRatingModel.badColor = getRGBColor("--sd-rating-bad-color");
QuestionRatingModel.normalColor = getRGBColor("--sd-rating-normal-color");
QuestionRatingModel.goodColor = getRGBColor("--sd-rating-good-color");
QuestionRatingModel.badColorLight = getRGBColor("--sd-rating-bad-color-light");
QuestionRatingModel.normalColorLight = getRGBColor("--sd-rating-normal-color-light");
QuestionRatingModel.goodColorLight = getRGBColor("--sd-rating-good-color-light");

QuestionRatingModel.badColor = getRGBColor("--sjs-special-red", "--sd-rating-bad-color");
QuestionRatingModel.normalColor = getRGBColor("--sjs-special-yellow", "--sd-rating-normal-color");
QuestionRatingModel.goodColor = getRGBColor("--sjs-special-green", "--sd-rating-good-color");
QuestionRatingModel.badColorLight = getRGBColor("--sjs-special-red-light", "--sd-rating-bad-color-light");
QuestionRatingModel.normalColorLight = getRGBColor("--sjs-special-yellow-light", "--sd-rating-normal-color-light");
QuestionRatingModel.goodColorLight = getRGBColor("--sjs-special-green-light", "--sd-rating-good-color-light");

this.colorsCalculated = true;
}

protected getDisplayValueCore(keysAsText: boolean, value: any): any {
Expand Down Expand Up @@ -794,6 +802,17 @@ export class QuestionRatingModel extends Question {
}
return classes;
}
public setSurveyImpl(value: ISurveyImpl, isLight?: boolean) {
super.setSurveyImpl(value, isLight);
if (!this.survey) return;
this.updateColors((this.survey as SurveyModel).themeVariables);

(<SurveyModel>this.survey).onThemeApplied.add((survey, options) => {
this.colorsCalculated = false;
this.updateColors(options.theme.cssVariables);
this.createRenderedRateItems();
});
}
public dispose(): void {
super.dispose();
if(!!this.dropdownListModelValue) {
Expand Down
6 changes: 3 additions & 3 deletions src/survey.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ export class SurveyModel extends SurveyElementCore

private navigationBarValue: ActionContainer;

onThemeApplying: EventBase<SurveyModel> = new EventBase<SurveyModel>();
onThemeApplied: EventBase<SurveyModel> = new EventBase<SurveyModel>();

//#region Event declarations
Expand Down Expand Up @@ -7161,8 +7162,7 @@ export class SurveyModel extends SurveyElementCore
}

public applyTheme(theme: ITheme): void {
if(!theme) return;

if (!theme) return;
Object.keys(theme).forEach((key: keyof ITheme) => {
if(key === "isPanelless") {
this.isCompact = theme[key];
Expand All @@ -7171,7 +7171,7 @@ export class SurveyModel extends SurveyElementCore
}
});

this.onThemeApplied.fire(this, {});
this.onThemeApplied.fire(this, { theme: theme });
}

/**
Expand Down
Binary file added ...onTests/tests/defaultV2/etalons/question-rating-smileys-scale-colored-theme.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 41 additions & 0 deletions visualRegressionTests/tests/defaultV2/rating.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -438,6 +438,47 @@ frameworks.forEach(framework => {
});
});

test("Check rating smileys scale colored question themes", async (t) => {
await wrapVisualTest(t, async (t, comparer) => {
await t.resizeWindow(1920, 1080);
const focusBody = ClientFunction(() => { document.body.focus(); });

await initSurvey(framework, {
showQuestionNumbers: "off",
questions: [
{
type: "rating",
name: "satisfaction",
title: "Rating",
rateType: "smileys",
scaleColorMode: "colored",
defaultValue: "1",
rateMax: 5,
minRateDescription: "Not Satisfied",
maxRateDescription: "Completely satisfied",
width: "708px"
}
]
});

await ClientFunction(() => {
const themeJson = {
"cssVariables": {
"--sjs-special-red": "orange",
"--sjs-special-yellow": "magenta",
"--sjs-special-green": "blue"
},
"isPanelless": false
};
window["survey"].applyTheme(themeJson);
})();

const questionRoot = Selector(".sd-question");
await focusBody();
await takeElementScreenshot("question-rating-smileys-scale-colored-theme", questionRoot, t, comparer);
});
});

test("Check rating smileys disabled question", async (t) => {
await wrapVisualTest(t, async (t, comparer) => {
await t.resizeWindow(1920, 1080);
Expand Down

0 comments on commit 22d049b

Please sign in to comment.