Skip to content

Commit 7b80b24

Browse files
OlgaLarinaOlgaLarina
OlgaLarina
and
OlgaLarina
authored
Advanced header by default (#9305)
* work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 update markup tests * work for surveyjs/private-tasks#411 update visual tests & etalons * work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 * work for surveyjs/private-tasks#411 --------- Co-authored-by: OlgaLarina <[email protected]>
1 parent a0f792b commit 7b80b24

File tree

75 files changed

+267
-199
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+267
-199
lines changed

‎functionalTests/survey/options.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ const set_completed_html = ClientFunction(() => {
4949

5050
const json = {
5151
title: "Software developer survey.",
52+
headerView: "basic",
5253
showQuestionNumbers: "on",
5354
pages: [
5455
{

‎functionalTests/survey/survey.js

Lines changed: 0 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -163,52 +163,4 @@ frameworks.forEach((framework) => {
163163
await t.click("#sv-nav-preview input");
164164
await t.click("#sv-nav-complete input");
165165
});
166-
test("Do not show advanced header if not set headerView === 'advanced'", async (t) => {
167-
await initSurvey(framework, {
168-
"title": "NPS Survey Question",
169-
"logo": "https://api.surveyjs.io/private/Surveys/files?name=bdf16c7e-fa1e-4e31-9d82-a6df1982c224",
170-
"logoWidth": "200px",
171-
"logoHeight": "80px",
172-
"logoFit": "cover",
173-
"logoPosition": "right",
174-
"elements": [
175-
{
176-
"type": "rating",
177-
"name": "nps-score",
178-
"title": "On a scale from 0 to 10, how likely are you to recommend us to a friend or colleague?",
179-
"rateMin": 0,
180-
"rateMax": 10,
181-
"minRateDescription": "Very unlikely",
182-
"maxRateDescription": "Very likely"
183-
},
184-
],
185-
});
186-
// await applyTheme({
187-
// backgroundImage:
188-
// "https://api.surveyjs.io/private/Surveys/files?name=4ffde38f-2bb3-4f57-aa0d-d5c7003e8ab1",
189-
// backgroundImageFit: "cover",
190-
// backgroundImageAttachment: "scroll",
191-
// header: {
192-
// height: 256,
193-
// inheritWidthFrom: "container",
194-
// textAreaWidth: 512,
195-
// overlapEnabled: false,
196-
// backgroundImageOpacity: 1,
197-
// backgroundImageFit: "cover",
198-
// logoPositionX: "right",
199-
// logoPositionY: "top",
200-
// titlePositionX: "left",
201-
// titlePositionY: "bottom",
202-
// descriptionPositionX: "left",
203-
// descriptionPositionY: "bottom",
204-
// },
205-
// themeName: "molisana",
206-
// isPanelless: false,
207-
// colorPalette: "light",
208-
// cssVariables: {
209-
// },
210-
// });
211-
await t.expect(Selector(".sd-title").visible).ok();
212-
await t.expect(Selector(".sv-header").visible).notOk();
213-
});
214166
});

‎packages/survey-angular-ui/src/components/header/header-mobile.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@
66
<ng-template [component]="{ name: model.survey.getElementWrapperComponentName(model.survey, 'logo-image'), data: { data: model.survey.getElementWrapperComponentData(model.survey, 'logo-image') } }"></ng-template>
77
</div>
88
</div>
9-
<div *ngIf="model.survey.hasTitle" class="sv-header__title" [style]="{ maxWidth: model.renderedtextAreaWidth }">
9+
<div *ngIf="model.survey.hasTitle" class="sv-header__title" [style]="{ maxWidth: model.renderedTextAreaWidth }">
1010
<sv-ng-element-title [element]="model.survey"></sv-ng-element-title>
1111
</div>
12-
<div *ngIf="model.survey.renderedHasDescription" class="sv-header__description" [style]="{ maxWidth: model.renderedtextAreaWidth }">
12+
<div *ngIf="model.survey.renderedHasDescription" class="sv-header__description" [style]="{ maxWidth: model.renderedTextAreaWidth }">
1313
<div *ngIf="model.survey.renderedHasDescription" [class]="model.survey.css.description" [model]="model.survey.locDescription" sv-ng-string></div>
1414
</div>
1515
</div>

‎packages/survey-angular-ui/src/components/header/header.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<ng-template #template>
2-
<div *ngIf="(survey.headerView === 'advanced')" [class]="model.headerClasses" [style]="{ height: model.renderedHeight }">
2+
<div *ngIf="(survey.headerView === 'advanced') && !model.isEmpty" [class]="model.headerClasses" [style]="{ height: model.renderedHeight }">
33
<div *ngIf="!!model.backgroundImage" [style]="model.backgroundImageStyle" [class]="model.backgroundImageClasses"></div>
4-
<div *ngIf="!survey.isMobile" [class]="model.contentClasses" [style.width]="model.maxWidth">
4+
<div *ngIf="!survey.isMobile" [class]="model.contentClasses" [style.maxWidth]="model.maxWidth">
55
<ng-container *ngFor="let cell of model.cells">
66
<sv-ng-header-cell [model]="cell"></sv-ng-header-cell>
77
</ng-container>

‎packages/survey-angular-ui/test/events.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ describe("event tests", () => {
4545
it("Check that that survey after render header is called correctly", (done: any) => {
4646
const fixture = TestBed.createComponent(SurveyComponent);
4747
const component = fixture.componentInstance;
48-
const survey = new SurveyModel({ title: "Some title", elements: [{ type: "text", name: "q1" }] });
48+
const survey = new SurveyModel({ headerView: "basic", title: "Some title", elements: [{ type: "text", name: "q1" }] });
4949
survey.css = { header: "sv_header" };
5050
component.model = survey;
5151
component.model.onAfterRenderHeader.add((sender: SurveyModel, opt: any) => {

‎packages/survey-core/src/default-theme/blocks/header.scss

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@
33

44
.sv-header {
55
position: relative;
6-
background-color: $header-backcolor;
6+
background-color: var(--sjs-header-backcolor, transparent);
7+
}
8+
9+
.sv-header__background-color--accent {
10+
background-color: var(--sjs-header-backcolor, #{$primary});
711
}
812

913
.sv-header__overlap {
@@ -58,8 +62,8 @@
5862
display: grid;
5963
gap: 0;
6064
// grid-auto-rows: min-content;
61-
grid-auto-columns: 1fr 1fr 1fr;
62-
grid-auto-rows: 1fr 1fr 1fr;
65+
grid-template-columns: auto auto auto;
66+
grid-template-rows: auto auto auto;
6367
}
6468

6569
.sv-header__content--static {
@@ -92,10 +96,17 @@
9296
flex-direction: column;
9397
position: absolute;
9498
width: max-content;
99+
// height: max-content;
95100
top: 0;
96101
bottom: 0;
97102
}
98103

104+
.sv-header--height-auto .sv-header__cell:not(.sv-header__cell--empty) .sv-header__cell-content {
105+
position: static;
106+
transform: unset;
107+
width: 100%;
108+
}
109+
99110
.sv-header__cell--left {
100111
.sv-header__cell-content {
101112
left: 0;
@@ -130,7 +141,7 @@
130141

131142
.sv-header__title .sd-title {
132143
@include mixins.header_title;
133-
color: $font-headertitle-color;
144+
color: var(--sjs-font-headertitle-color, #{$font-pagetitle-color});
134145
font-family: $font-headertitle-family;
135146
font-weight: $font-headertitle-weight;
136147
margin: 0;
@@ -154,12 +165,21 @@
154165

155166
.sv-header__description .sd-description {
156167
@include mixins.header_description;
157-
color: $font-headerdescription-color;
168+
color: var(--sjs-font-headerdescription-color, #{$font-pagedescription-color});
158169
font-family: $font-headerdescription-family;
159170
font-weight: $font-headerdescription-weight;
160171
margin: 0;
161172
}
162173

174+
.sv-header__background-color--accent {
175+
.sv-header__title .sd-title {
176+
color: var(--sjs-font-headertitle-color, #{$primary-foreground});
177+
}
178+
.sv-header__description .sd-description {
179+
color: $font-headerdescription-color;
180+
}
181+
}
182+
163183
.sv-header__content .sd-header__text h3 {
164184
margin: 0;
165185
}
@@ -173,15 +193,3 @@
173193
max-width: 100%;
174194
}
175195
}
176-
177-
.sv-header__background-color--none,
178-
.sv-header__background-color--custom {
179-
.sv-header__title .sd-title {
180-
color: $font-pagetitle-color;
181-
}
182-
183-
.sv-header__description .sd-description {
184-
@include mixins.header_description;
185-
color: $font-pagedescription-color;
186-
}
187-
}

‎packages/survey-core/src/default-theme/mixins.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@
200200
}
201201

202202
@mixin header_description {
203-
--header-description-font-size: var(--sjs-font-headerdescription-size, var(--sjs-font-size, 16px));
203+
--header-description-font-size: var(--sjs-font-headerdescription-size, 20px);
204204
font-size: var(--header-description-font-size);
205205
line-height: multiply(1.5, var(--header-description-font-size));
206206
}

‎packages/survey-core/src/default-theme/variables.scss

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,6 @@ $foreground-light: var(--sjs-general-forecolor-light, var(--foreground-light, #9
3535
$foreground-dim: var(--sjs-general-dim-forecolor, rgba(0, 0, 0, 0.91));
3636
$foreground-dim-light: var(--sjs-general-dim-forecolor-light, rgba(0, 0, 0, 0.45));
3737

38-
$header-backcolor: var(--sjs-header-backcolor, #{$primary});
39-
4038
$border: var(--sjs-border-default, var(--border, #d6d6d6));
4139
$border-light: var(--sjs-border-light, var(--border-light, #eaeaea));
4240
$border-inside: var(--sjs-border-inside, var(--border-inside, rgba(0, 0, 0, 0.16)));
@@ -77,7 +75,7 @@ $font-headertitle-weight: var(--sjs-font-headertitle-weight, 700);
7775
$font-headertitle-color: var(--sjs-font-headertitle-color, #{$primary-foreground});
7876

7977
$font-headerdescription-family: var(--sjs-font-headerdescription-family, #{$font-family});
80-
$font-headerdescription-weight: var(--sjs-font-headerdescription-weight, 600);
78+
$font-headerdescription-weight: var(--sjs-font-headerdescription-weight, 400);
8179
$font-headerdescription-color: var(--sjs-font-headerdescription-color, #{$primary-foreground});
8280

8381
$font-pagetitle-family: var(--sjs-font-pagetitle-family, #{$font-family});

‎packages/survey-core/src/header.ts

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,13 @@ export class CoverCell {
3030
return this.cover.survey;
3131
}
3232
get css(): string {
33-
const result = `${CoverCell.CLASSNAME} ${CoverCell.CLASSNAME}--${this.positionX} ${CoverCell.CLASSNAME}--${this.positionY}`;
33+
const result = new CssClassBuilder()
34+
.append(CoverCell.CLASSNAME)
35+
.append(`${CoverCell.CLASSNAME}--${this.positionX}`)
36+
.append(`${CoverCell.CLASSNAME}--${this.positionY}`)
37+
.append(CoverCell.CLASSNAME + "--empty", this.isEmpty)
38+
.toString();
39+
3440
return result;
3541
}
3642
get style(): any {
@@ -55,11 +61,11 @@ export class CoverCell {
5561
get showDescription(): boolean {
5662
return this.survey.renderedHasDescription && this.positionX === this.cover.descriptionPositionX && this.positionY === this.cover.descriptionPositionY;
5763
}
64+
get isEmpty(): boolean {
65+
return !this.showLogo && !this.showTitle && !this.showDescription;
66+
}
5867
get textAreaWidth(): string {
59-
if (!this.cover.textAreaWidth) {
60-
return "";
61-
}
62-
return "" + this.cover.textAreaWidth + "px";
68+
return this.cover.renderedTextAreaWidth;
6369
}
6470
}
6571

@@ -76,12 +82,16 @@ export class Cover extends Base {
7682
return backgroundImageFit;
7783
}
7884
private updateHeaderClasses(): void {
85+
const backgroundColorNone = !this.backgroundColor || this.backgroundColor === "transparent";
86+
const backgroundColorAccent = this.backgroundColor === "var(--sjs-primary-backcolor)";
87+
const backgroundColorCustom = !backgroundColorNone && !backgroundColorAccent;
7988
this.headerClasses = new CssClassBuilder()
8089
.append("sv-header")
81-
.append("sv-header__without-background", (this.backgroundColor === "transparent") && !this.backgroundImage)
82-
.append("sv-header__background-color--none", this.backgroundColor === "transparent" && !this.titleColor && !this.descriptionColor)
83-
.append("sv-header__background-color--accent", !this.backgroundColor && !this.titleColor && !this.descriptionColor)
84-
.append("sv-header__background-color--custom", !!this.backgroundColor && this.backgroundColor !== "transparent" && !this.titleColor && !this.descriptionColor)
90+
.append("sv-header--height-auto", !this.renderedHeight)
91+
.append("sv-header__without-background", backgroundColorNone && !this.backgroundImage)
92+
.append("sv-header__background-color--none", backgroundColorNone && !this.titleColor && !this.descriptionColor)
93+
.append("sv-header__background-color--accent", backgroundColorAccent && !this.titleColor && !this.descriptionColor)
94+
.append("sv-header__background-color--custom", backgroundColorCustom && !this.titleColor && !this.descriptionColor)
8595
.append("sv-header__overlap", this.overlapEnabled)
8696
.toString();
8797
}
@@ -137,7 +147,7 @@ export class Cover extends Base {
137147
@property() public textAreaWidth: number;
138148
@property() public textGlowEnabled: boolean;
139149
@property() public overlapEnabled: boolean;
140-
@property() public backgroundColor: string;
150+
@property({ defaultValue: "transparent" }) public backgroundColor: string;
141151
@property() public titleColor: string;
142152
@property() public descriptionColor: string;
143153
@property({
@@ -171,9 +181,12 @@ export class Cover extends Base {
171181
}
172182
return undefined;
173183
}
174-
public get renderedtextAreaWidth(): string {
184+
public get renderedTextAreaWidth(): string {
175185
return this.textAreaWidth ? this.textAreaWidth + "px" : undefined;
176186
}
187+
public get isEmpty(): boolean {
188+
return !this.survey.hasLogo && !this.survey.hasTitle && !this.survey.renderedHasDescription;
189+
}
177190
public get survey(): SurveyModel {
178191
return this._survey;
179192
}
@@ -201,7 +214,7 @@ export class Cover extends Base {
201214
}
202215
protected propertyValueChanged(name: string, oldValue: any, newValue: any, arrayChanges?: ArrayChanges, target?: Base): void {
203216
super.propertyValueChanged(name, oldValue, newValue);
204-
if (name === "backgroundColor" || name === "backgroundImage" || name === "overlapEnabled") {
217+
if (name === "height" || name === "backgroundColor" || name === "backgroundImage" || name === "overlapEnabled") {
205218
this.updateHeaderClasses();
206219
}
207220
if (name === "inheritWidthFrom") {
@@ -256,17 +269,17 @@ export class Cover extends Base {
256269
Serializer.addClass(
257270
"cover",
258271
[
259-
{ name: "height:number", minValue: 0, default: 256 },
272+
{ name: "height:number", minValue: 0, default: 0 },
260273
{ name: "mobileHeight:number", minValue: 0, default: 0 },
261-
{ name: "inheritWidthFrom", default: "container" },
262-
{ name: "textAreaWidth:number", minValue: 0, default: 512 },
274+
{ name: "inheritWidthFrom", default: "survey" },
275+
{ name: "textAreaWidth:number", minValue: 0, default: 0 },
263276
{ name: "textGlowEnabled:boolean" },
264277
{ name: "overlapEnabled:boolean" },
265278
{ name: "backgroundImage:file" },
266279
{ name: "backgroundImageOpacity:number", minValue: 0, maxValue: 1, default: 1 },
267280
{ name: "backgroundImageFit", default: "cover", choices: ["cover", "fill", "contain"] },
268-
{ name: "logoPositionX", default: "right" },
269-
{ name: "logoPositionY", default: "top" },
281+
{ name: "logoPositionX", default: "left" },
282+
{ name: "logoPositionY", default: "bottom" },
270283
{ name: "titlePositionX", default: "left" },
271284
{ name: "titlePositionY", default: "bottom" },
272285
{ name: "descriptionPositionX", default: "left" },

‎packages/survey-core/src/survey.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1065,6 +1065,9 @@ export class SurveyModel extends SurveyElementCore
10651065

10661066
this.progressBarValue = new ProgressButtons(this);
10671067

1068+
if (this.headerView === "advanced") {
1069+
this.insertAdvancedHeader(new Cover());
1070+
}
10681071
this.layoutElements.push({
10691072
id: "timerpanel",
10701073
template: "survey-timerpanel",
@@ -8653,7 +8656,7 @@ Serializer.addClass("survey", [
86538656
{ name: "gridLayoutEnabled:boolean", default: false },
86548657
{ name: "width", visibleIf: (obj: any) => { return obj.widthMode === "static"; } },
86558658
{ name: "fitToContainer:boolean", default: true, visible: false },
8656-
{ name: "headerView", default: "basic", choices: ["basic", "advanced"], visible: false },
8659+
{ name: "headerView", default: "advanced", choices: ["basic", "advanced"], visible: false },
86578660
{ name: "backgroundImage:file", visible: false },
86588661
{ name: "backgroundImageFit", default: "cover", choices: ["auto", "contain", "cover"], visible: false },
86598662
{ name: "backgroundImageAttachment", default: "scroll", choices: ["scroll", "fixed"], visible: false },

0 commit comments

Comments
 (0)