Skip to content

Commit 6cc4771

Browse files
dk981234dk981234
authored
Fix page's more button (#6741)
* Fix pages more button * Remove z-index from page's actions * Fix functional tests * Update legacy etalons
1 parent 3e0ad24 commit 6cc4771

File tree

20 files changed

+91
-74
lines changed

20 files changed

+91
-74
lines changed

‎functionalTests/designer/drag-drop.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -572,8 +572,8 @@ test("Drag Drop to collapsed page", async (t) => {
572572
};
573573
await setJSON(json);
574574

575-
const qCollapseButton = Selector(".svc-page__content #collapse");
576-
await t.click(qCollapseButton.filterVisible());
575+
const pCollapseButton = Selector(".svc-page__content > .svc-question__drag-area #collapse button");
576+
await t.click(pCollapseButton.filterVisible());
577577

578578
const Page = Selector(".svc-page");
579579
const toolboxToolAction = Selector(".svc-toolbox__tool > .sv-action__content");

‎functionalTests/designer/question-wrapper.ts

+14-14
Original file line numberDiff line numberDiff line change
@@ -438,7 +438,7 @@ test("Question and page collapse button title", async (t) => {
438438
await t.click(qCollapseButton);
439439
await t.expect(qCollapseButton.getAttribute("title")).eql("Expand");
440440

441-
const pCollapseButton = Selector(".svc-page__content #collapse button");
441+
const pCollapseButton = Selector(".svc-page__content > .svc-question__drag-area #collapse button");
442442
await t.expect(pCollapseButton.getAttribute("title")).eql("Collapse");
443443
await t.click(pCollapseButton);
444444
await t.expect(pCollapseButton.getAttribute("title")).eql("Expand");
@@ -586,31 +586,31 @@ test("Page adorner - collapse button in differen modes", async (t) => {
586586
};
587587
await setJSON(json);
588588
await t.hover(getToolboxItemByText("Single-Line Input"));
589-
const qContent = Selector(".svc-page__content");
590-
const qCollapseButton = Selector(".svc-page__content #collapse");
589+
const pContent = Selector(".svc-page__content");
590+
const pCollapseButton = Selector(".svc-page__content > .svc-question__drag-area #collapse button");
591591
const actions = Selector(".svc-page__content-actions");
592-
await t.hover(qContent, { offsetX: 10, offsetY: 10 });
592+
await t.hover(pContent, { offsetX: 10, offsetY: 10 });
593593
await t.expect(Selector(".svc-page__content").hasClass("svc-hovered")).ok({ timeout: 3000 });
594-
await t.expect(qCollapseButton.visible).notOk();
595-
await t.click(qContent, { offsetX: 10, offsetY: 10 });
596-
await t.expect(qContent.hasClass("svc-page__content--selected")).ok();
597-
await t.expect(qCollapseButton.visible).notOk();
594+
await t.expect(pCollapseButton.visible).notOk();
595+
await t.click(pContent, { offsetX: 10, offsetY: 10 });
596+
await t.expect(pContent.hasClass("svc-page__content--selected")).ok();
597+
await t.expect(pCollapseButton.visible).notOk();
598598

599599
await ClientFunction(() => { window["creator"].expandCollapseButtonVisibility = "onhover"; })();
600600
json.elements[0].name = "question2";
601601
await setJSON(json);
602602
await t.hover(getToolboxItemByText("Single-Line Input"));
603603
await t.expect(actions.getStyleProperty("opacity")).eql("0");
604-
await t.hover(qContent, { offsetX: 10, offsetY: 10 });
605-
await t.expect(qCollapseButton.visible).ok();
606-
await t.click(qContent, { offsetX: 10, offsetY: 10 });
607-
await t.expect(qContent.hasClass("svc-page__content--selected")).ok();
608-
await t.expect(qCollapseButton.visible).ok();
604+
await t.hover(pContent, { offsetX: 10, offsetY: 10 });
605+
await t.expect(pCollapseButton.visible).ok();
606+
await t.click(pContent, { offsetX: 10, offsetY: 10 });
607+
await t.expect(pContent.hasClass("svc-page__content--selected")).ok();
608+
await t.expect(pCollapseButton.visible).ok();
609609

610610
await ClientFunction(() => { window["creator"].expandCollapseButtonVisibility = "always"; })();
611611
json.elements[0].name = "question3";
612612
await t.hover(getToolboxItemByText("Single-Line Input"));
613613
await setJSON(json);
614-
await t.expect(qCollapseButton.visible).ok();
614+
await t.expect(pCollapseButton.visible).ok();
615615
await ClientFunction(() => { window["creator"].expandCollapseButtonVisibility = "never"; })();
616616
});

‎functionalTests/designer/surface.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -524,9 +524,9 @@ test("Question adorner double click", async (t) => {
524524
await t.doubleClick(Selector(".sd-question__title"));
525525
await t.expect(isCollapsed()).notOk();
526526

527-
await t.doubleClick(Selector(".svc-question__drag-area").nth(1));
527+
await t.doubleClick(Selector(".svc-question__drag-area").nth(0));
528528
await t.expect(isCollapsed()).ok();
529-
await t.doubleClick(Selector(".svc-question__drag-area").nth(1));
529+
await t.doubleClick(Selector(".svc-question__drag-area").nth(0));
530530
await t.expect(isCollapsed()).notOk();
531531

532532
});

‎packages/survey-creator-angular/src/page.component.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@
55
[id]="adorner.page.id" [attr.data-sv-drop-target-survey-page]="adorner.dropTargetName" #container>
66
<div class="svc-question__drop-indicator svc-question__drop-indicator--top"></div>
77
<div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
8+
<page [model]="model" [survey]="survey"></page>
9+
<div *ngIf="adorner.showPlaceholder" class="svc-page__placeholder_frame">
10+
<div class="svc-panel__placeholder_frame">
11+
<div class="svc-panel__placeholder">{{adorner.placeholderText}}</div>
12+
</div>
13+
</div>
814
<div *ngIf="adorner.allowDragging && !adorner.isGhost" class="svc-question__drag-area"
915
(pointerdown)="adorner.onPointerDown($event)">
1016
<svg class="svc-question__drag-element" [iconName]="'icon-drag-area-indicator_24x16'" [size]="'auto'"
@@ -18,12 +24,6 @@
1824
<sv-action-bar [model]="adorner.actionContainer"></sv-action-bar>
1925
<sv-action-bar *ngIf="adorner.topActionContainer.hasActions" [model]="adorner.topActionContainer"></sv-action-bar>
2026
</div>
21-
<page [model]="model" [survey]="survey"></page>
22-
<div *ngIf="adorner.showPlaceholder" class="svc-page__placeholder_frame">
23-
<div class="svc-panel__placeholder_frame">
24-
<div class="svc-panel__placeholder">{{adorner.placeholderText}}</div>
25-
</div>
26-
</div>
2727
<sv-action-bar [model]="adorner.footerActionsBar"></sv-action-bar>
2828
</div>
2929
</ng-template>

‎packages/survey-creator-core/src/components/action-container-view-model.ts

+16-12
Original file line numberDiff line numberDiff line change
@@ -64,19 +64,23 @@ export class SurveyElementActionContainer extends AdaptiveActionContainer {
6464
this.setModeForActions(true);
6565
return;
6666
}
67+
if(this.visibleActions.length > 1) {
68+
this.visibleActions.forEach((item) => {
69+
if (item.id == "convertTo") {
70+
item.mode = "small";
71+
return;
72+
}
73+
if (item.id == "convertInputType") {
74+
item.mode = "removed";
75+
return;
76+
}
77+
item.mode = "popup";
78+
});
79+
this.dotsItem.visible = true;
80+
} else {
81+
this.visibleActions.forEach(i => i.mode = "small");
82+
}
6783

68-
this.visibleActions.forEach((item) => {
69-
if (item.id == "convertTo") {
70-
item.mode = "small";
71-
return;
72-
}
73-
if (item.id == "convertInputType") {
74-
item.mode = "removed";
75-
return;
76-
}
77-
item.mode = "popup";
78-
});
79-
this.dotsItem.visible = true;
8084
this.hiddenItemsListModel.setItems(items.filter(i => i.mode == "popup").map(i => i.innerItem));
8185
}
8286
}

‎packages/survey-creator-core/src/components/page.scss

+14-5
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,6 @@ svc-page {
8181
justify-content: flex-end;
8282
box-sizing: border-box;
8383
padding: 0 calcSize(1) 0 var(--ctr-survey-page-drag-indicator-width, var(--lbr-size-x3));
84-
z-index: 12;
8584
transition: opacity $creator-transition-duration;
8685
white-space: nowrap;
8786

@@ -109,6 +108,19 @@ svc-page {
109108
.sv-action {
110109
pointer-events: all;
111110
}
111+
& > .sv-dots {
112+
width: auto;
113+
.sv-dots__item {
114+
width: auto;
115+
}
116+
&.sv-action--hidden {
117+
width: 0;
118+
}
119+
.svc-list__item-icon {
120+
width: var(--ctr-list-item-icon-width-small, var(--sjs-font-size-x2));
121+
height: var(--ctr-list-item-icon-height-small, var(--sjs-font-size-x2));
122+
}
123+
}
112124
}
113125

114126
.svc-page-toolbar--collapse {
@@ -138,7 +150,7 @@ svc-page {
138150
var(--ctr-survey-question-panel-toolbar-gap, var(--lbr-spacing-x1)) / 2
139151
);
140152
margin: 0 var(--thm-survey-question-panel-toolbar-button-gap);
141-
border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, var(--lbr-corner-radius-x05));
153+
border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, var(--lbr-corner-radius-x075));
142154
padding: var(--thm-survey-question-panel-toolbar-item-padding-top)
143155
var(--thm-survey-question-panel-toolbar-item-padding-right)
144156
var(--thm-survey-question-panel-toolbar-item-padding-bottom)
@@ -171,7 +183,6 @@ svc-page {
171183
opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
172184
use {
173185
fill: var(--ctr-menu-toolbar-button-icon-color, var(--sjs-layer-1-foreground-75, #000000bf));
174-
opacity: 0.5;
175186
}
176187
}
177188

@@ -264,8 +275,6 @@ svc-page {
264275
}
265276

266277
& > .svc-question__drag-area {
267-
z-index: 1;
268-
269278
.svc-question__drag-element {
270279
width: var(--ctr-survey-page-drag-indicator-width, var(--lbr-size-x3));
271280
height: var(--ctr-survey-page-drag-indicator-height, var(--lbr-size-x2));

‎packages/survey-creator-core/src/components/question.scss

+13-14
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ svc-question {
5656

5757
.svc-survey-element-toolbar__item {
5858
@include defaultActionButtonSettings;
59+
--thm-icon-color: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-background-500, #19b394ff));
5960
--thm-survey-question-panel-toolbar-button-gap: calc(
6061
var(--ctr-survey-question-panel-toolbar-gap, var(--lbr-spacing-x1)) / 2
6162
);
@@ -72,7 +73,7 @@ svc-question {
7273
background-color: transparent;
7374
transition: background $creator-transition-duration, opacity $creator-transition-duration;
7475
use {
75-
fill: var(--ctr-survey-question-panel-toolbar-item-icon-color, var(--sjs-secondary-background-500, #19b394ff));
76+
fill: var(--thm-icon-color);
7677
}
7778
//hovered and focused state
7879
&:hover,
@@ -84,10 +85,11 @@ svc-question {
8485
&:active,
8586
&.svc-survey-element-toolbar__item--pressed {
8687
opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-pressed, 0.5);
87-
background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-pressed, var(--sjs-layer-1-background-400, #f5f5f5ff));
88+
background-color: var(--ctr-survey-question-panel-toolbar-item-background-color-pressed,
89+
var(--sjs-layer-1-background-400, #f5f5f5ff));
90+
8891
use {
8992
fill: var(--ctr-menu-toolbar-button-icon-color, var(--sjs-layer-1-foreground-75, #000000bf));
90-
opacity: 0.45;
9193
}
9294
}
9395

@@ -144,9 +146,7 @@ svc-question {
144146
}
145147
}
146148

147-
148-
.svc-survey-element-toolbar-item__icon,
149-
.svc-survey-element-toolbar__dots-item .sv-svg-icon.sv-action-bar-item__icon {
149+
.svc-survey-element-toolbar-item__icon {
150150
box-sizing: border-box;
151151
display: block;
152152
padding: var(--ctr-survey-question-panel-toolbar-item-icon-padding-top, var(--lbr-spacing-x05))
@@ -388,11 +388,8 @@ svc-question {
388388
}
389389

390390
.svc-survey-element-toolbar-item__icon:last-child {
391+
--thm-icon-color: var(--sjs-primary-background-500, #19b394);
391392
margin-inline-start: 0;
392-
393-
use {
394-
fill: var(--sjs-primary-background-500, #19b394);
395-
}
396393
}
397394
}
398395

@@ -434,10 +431,12 @@ svc-question {
434431
var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom, var(--lbr-spacing-x05))
435432
);
436433
}
437-
438-
.svc-list__item:hover > .svc-list__item-body .sv-svg-icon use,
439-
.sv-svg-icon use {
440-
fill: var(--sjs-secondary-background-500, #19b394ff);
434+
.svc-list__item {
435+
&, &:hover {
436+
& > .svc-list__item-body .sv-svg-icon use {
437+
fill: var(--sjs-secondary-background-500, #19b394ff);
438+
}
439+
}
441440
}
442441
}
443442

‎packages/survey-creator-core/src/themes/predefined-themes/v2-24.css

+10-5
Original file line numberDiff line numberDiff line change
@@ -431,7 +431,7 @@
431431
--ctr-list-item-icon-color-disabled: var(--sjs-layer-1-foreground-75);
432432
--ctr-editor-button-background-color-hovered: var(--sjs-layer-3-background-400);
433433
--ctr-survey-page-toolbar-item-background-color-hovered: var(--sjs-primary-background-10);
434-
--ctr-survey-page-toolbar-item-corner-radius: var(--lbr-corner-radius-x05);
434+
--ctr-survey-page-toolbar-item-corner-radius: var(--lbr-corner-radius-x075);
435435
--ctr-list-search-icon-color: var(--sjs-layer-1-foreground-75);
436436
--ctr-caption-with-actions-text-color: var(--sjs-layer-1-foreground-50);
437437
--ctr-label-text-color: var(--sjs-layer-1-foreground-50);
@@ -755,7 +755,7 @@
755755
--ctr-expression-item-background-color-button-hovered: var(--sjs-primary-background-500);
756756
--ctr-expression-item-border-color-editing: var(--sjs-semantic-blue-background-500);
757757
--ctr-expression-item-text-color-function: var(--sjs-layer-3-foreground-100);
758-
--ctr-data-table-background-color: var(--sjs-layer-1-background-400);
758+
--ctr-data-table-background-color: var(--sjs-layer-1-background-500);
759759
--ctr-data-table-border-color: var(--sjs-border-25);
760760
--ctr-data-table-border-width: var(--sjs-stroke-x1);
761761
--ctr-separator-width: var(--sjs-stroke-x1);
@@ -2778,8 +2778,8 @@
27782778
--lbr-step-progress-bar-padding-right-fit-to-survey-with-number: var(--lbr-spacing-x1n);
27792779
--lbr-step-progress-bar-width: var(--lbr-size-x80);
27802780
--ctr-toolbox-min-width: var(--sjs-size-x20);
2781-
--ctr-popup-menu-margin-top-tablet: var(--sjs-spacing-x8);
2782-
--ctr-popup-menu-margin-bottom-tablet: var(--sjs-spacing-x8);
2781+
--ctr-popup-menu-margin-top-tablet: var(--sjs-spacing-x3);
2782+
--ctr-popup-menu-margin-bottom-tablet: var(--sjs-spacing-x3);
27832783
--ctr-popup-menu-margin-left-tablet: var(--sjs-spacing-x3);
27842784
--ctr-popup-menu-margin-right-tablet: var(--sjs-spacing-x3);
27852785
--ctr-popup-menu-max-width-tablet: var(--sjs-size-x40);
@@ -2864,7 +2864,7 @@
28642864
--lbr-page-loading-padding-bottom: var(--lbr-spacing-x8);
28652865
--lbr-page-loading-loading-icon-width: var(--lbr-size-x12);
28662866
--lbr-page-loading-loading-icon-height: var(--lbr-size-x12);
2867-
--lbr-page-loading-loading-icon-circle-color: var(--sjs-layer-1-foreground-100);
2867+
--lbr-page-loading-loading-icon-circle-color: var(--sjs-layer-3-foreground-100);
28682868
--lbr-page-loading-loading-icon-circle-color-spin: var(--sjs-primary-background-500);
28692869
--lbr-page-loading-title-color: var(--sjs-layer-3-foreground-100);
28702870
--lbr-page-loading-padding-top: var(--lbr-spacing-x3);
@@ -3447,5 +3447,10 @@
34473447
--ctr-info-panel-padding-bottom: var(--sjs-spacing-x3);
34483448
--ctr-info-panel-corner-radius: var(--sjs-corner-radius-x1);
34493449
--ctr-info-panel-text-color-primary: var(--sjs-layer-3-foreground-100);
3450+
--ctr-surface-placeholder-image-max-width: var(--sjs-size-x43);
3451+
--lbr-popup-menu-background-color-global: var(--sjs-layer-3-background-500);
3452+
--lbr-list-item-text-color-action: var(--sjs-primary-background-500);
3453+
--ctr-list-item-icon-width-small: var(--sjs-font-size-x2);
3454+
--ctr-list-item-icon-height-small: var(--sjs-font-size-x2);
34503455
}
34513456

‎packages/survey-creator-react/src/adorners/Page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -90,9 +90,9 @@ export class CreatorSurveyPageComponent extends CreatorModelElement<
9090
>
9191
<div className="svc-question__drop-indicator svc-question__drop-indicator--top"></div>
9292
<div className="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>
93-
{this.renderHeader()}
9493
{this.renderContent()}
9594
{this.renderPlaceholder()}
95+
{this.renderHeader()}
9696
{this.renderFooter()}
9797
</div>)
9898
);

‎packages/survey-creator-vue/src/tabs/designer/Page.vue

+13-13
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,16 @@
2424
<div
2525
class="svc-question__drop-indicator svc-question__drop-indicator--bottom"
2626
></div>
27+
<SvComponent
28+
:is="'survey-page'"
29+
:survey="model.creator.survey"
30+
:page="model.page"
31+
/>
32+
<div v-if="model.showPlaceholder" class="svc-page__placeholder_frame">
33+
<div class="svc-panel__placeholder_frame">
34+
<div class="svc-panel__placeholder">{{ model.placeholderText }}</div>
35+
</div>
36+
</div>
2737
<div
2838
v-if="model.allowDragging && !model.isGhost"
2939
class="svc-question__drag-area"
@@ -59,21 +69,11 @@
5969
:model="model.actionContainer"
6070
></SvComponent>
6171
<SvComponent
62-
v-if="model.topActionContainer.hasActions"
63-
:is="'sv-action-bar'"
64-
:model="model.topActionContainer"
72+
v-if="model.topActionContainer.hasActions"
73+
:is="'sv-action-bar'"
74+
:model="model.topActionContainer"
6575
></SvComponent>
6676
</div>
67-
<SvComponent
68-
:is="'survey-page'"
69-
:survey="model.creator.survey"
70-
:page="model.page"
71-
/>
72-
<div v-if="model.showPlaceholder" class="svc-page__placeholder_frame">
73-
<div class="svc-panel__placeholder_frame">
74-
<div class="svc-panel__placeholder">{{ model.placeholderText }}</div>
75-
</div>
76-
</div>
7777
<SvComponent
7878
:is="'sv-action-bar'"
7979
:model="model.footerActionsBar"

‎visualRegressionTests-V2/tests/designer/etalons/page-button-pressed.png

30 Bytes
Loading

‎visualRegressionTests-V2/tests/designer/etalons/question-button-pressed.png

51 Bytes
Loading

‎visualRegressionTests-V2/tests/designer/etalons/question-tiny-dots-popup-required.png

21 Bytes
Loading

‎visualRegressionTests-V2/tests/designer/etalons/question-tiny-dots-popup.png

24 Bytes
Loading

‎visualRegressionTests/tests/designer/etalons/page-button-focused.png

69 Bytes
Loading

‎visualRegressionTests/tests/designer/etalons/page-button-hover.png

69 Bytes
Loading

‎visualRegressionTests/tests/designer/etalons/page-button-pressed.png

81 Bytes
Loading

‎visualRegressionTests/tests/designer/etalons/question-button-pressed.png

14 Bytes
Loading

‎visualRegressionTests/tests/designer/etalons/question-tiny-dots-popup-required.png

28 Bytes
Loading

‎visualRegressionTests/tests/designer/etalons/question-tiny-dots-popup.png

29 Bytes
Loading

0 commit comments

Comments
 (0)