From 63df9b8ea49085b0e139a9a8f7d6bb3a2e6f42d1 Mon Sep 17 00:00:00 2001 From: OlgaLarina Date: Fri, 22 Nov 2024 16:01:19 +0300 Subject: [PATCH] work for #6063 Scaling the adorner button of the question --- .../src/components/item-value.scss | 21 +++-- .../src/components/page.scss | 51 ++++++++++-- .../src/components/question.scss | 78 +++++++++++++++---- 3 files changed, 123 insertions(+), 27 deletions(-) diff --git a/packages/survey-creator-core/src/components/item-value.scss b/packages/survey-creator-core/src/components/item-value.scss index 3cce8edd25..4af906d7a0 100644 --- a/packages/survey-creator-core/src/components/item-value.scss +++ b/packages/survey-creator-core/src/components/item-value.scss @@ -65,7 +65,9 @@ height: calcSize(2); width: calcSize(2); box-sizing: content-box; - transition: background $creator-transition-duration, background-color $creator-transition-duration; + transition: + background $creator-transition-duration, + background-color $creator-transition-duration; .sv-svg-icon { display: block; @@ -81,12 +83,12 @@ .svc-item-value-controls__drag-icon { display: block; transition: opacity $creator-transition-duration; - width: calcSize(3); - height: calcSize(3); + width: var(--ctr-survey-item-actionbar-drag-indicator-width, calcSize(3)); + height: var(--ctr-survey-item-actionbar-drag-indicator-height, calcSize(3)); .sv-svg-icon { - width: calcSize(3); - height: calcSize(3); + width: var(--ctr-survey-item-actionbar-drag-indicator-width, calcSize(3)); + height: var(--ctr-survey-item-actionbar-drag-indicator-height, calcSize(3)); } } @@ -98,7 +100,10 @@ } .svc-item-value-controls__drag { - padding: calcSize(0.5) calcSize(1); + padding: var(--ctr-survey-item-actionbar-drag-indicator-padding-top, calcSize(0.5)) + var(--ctr-survey-item-actionbar-drag-indicator-padding-right, calcSize(1)) + var(--ctr-survey-item-actionbar-drag-indicator-padding-bottom, calcSize(0.5)) + var(--ctr-survey-item-actionbar-drag-indicator-padding-left, calcSize(1)); height: auto; width: auto; cursor: move; @@ -106,8 +111,8 @@ .svc-item-value-controls__drag-icon { opacity: 0; - width: calcSize(3); - height: calcSize(3); + width: var(--ctr-survey-item-actionbar-drag-indicator-width, calcSize(3)); + height: var(--ctr-survey-item-actionbar-drag-indicator-height, calcSize(3)); } use { diff --git a/packages/survey-creator-core/src/components/page.scss b/packages/survey-creator-core/src/components/page.scss index 9340b20784..ddc9028401 100644 --- a/packages/survey-creator-core/src/components/page.scss +++ b/packages/survey-creator-core/src/components/page.scss @@ -75,9 +75,30 @@ svc-page { .svc-page-toolbar__item { @include defaultActionButtonSettings; - margin: 0 calcSize(0.5); + --thm-survey-question-panel-toolbar-item-padding-top: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-top) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) + ); + --thm-survey-question-panel-toolbar-item-padding-right: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-right) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) + ); + --thm-survey-question-panel-toolbar-item-padding-bottom: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-bottom) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom) + ); + --thm-survey-question-panel-toolbar-item-padding-left: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-left) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-left) + ); + + --thm-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2); + margin: 0 var(--thm-survey-question-panel-toolbar-button-gap, calcSize(0.5)); border-radius: var(--ctr-survey-page-toolbar-item-corner-radius, calcSize(0.5)); - padding: calcSize(1); + padding: var(--thm-survey-question-panel-toolbar-item-padding-top, calcSize(1)) + var(--thm-survey-question-panel-toolbar-item-padding-right, calcSize(1)) + var(--thm-survey-question-panel-toolbar-item-padding-bottom, calcSize(1)) + var(--thm-survey-question-panel-toolbar-item-padding-left, calcSize(1)); justify-content: center; align-items: center; @@ -86,8 +107,16 @@ svc-page { } .svc-page-toolbar__item--with-text { - padding-inline-end: calcSize(1); - gap: calcSize(0.5); + --thm-survey-question-panel-toolbar-item-padding-right: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) + ); + --thm-survey-question-panel-toolbar-item-gap: calc( + var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) + ); + + padding-inline-end: var(--thm-survey-question-panel-toolbar-item-padding-right-with-text, calcSize(1)); + gap: var(--thm-survey-question-panel-toolbar-item-gap, calcSize(0.5)); } .svc-page-toolbar .sv-action:last-of-type .svc-page-toolbar__item { @@ -128,8 +157,18 @@ svc-page { } .svc-page-toolbar-item__icon { - width: calcSize(2); - height: calcSize(2); + --thm-survey-page-toolbar-item-icon-width: calc( + var(--ctr-survey-question-panel-toolbar-item-icon-container-width) - + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) - + var(--ctr-survey-question-panel-toolbar-item-icon-padding-left) + ); + --thm-survey-page-toolbar-item-icon-height: calc( + var(--ctr-survey-question-panel-toolbar-item-icon-container-height) - + var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) - + var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom) + ); + width: var(--thm-survey-page-toolbar-item-icon-width, calcSize(2)); + height: var(--thm-survey-page-toolbar-item-icon-height, calcSize(2)); } .svc-page-toolbar-item__icon use { diff --git a/packages/survey-creator-core/src/components/question.scss b/packages/survey-creator-core/src/components/question.scss index cfb94facd1..66b8daa4ac 100644 --- a/packages/survey-creator-core/src/components/question.scss +++ b/packages/survey-creator-core/src/components/question.scss @@ -54,10 +54,30 @@ svc-question { .svc-survey-element-toolbar__item { @include defaultActionButtonSettings; - - margin: 0 calcSize(0.5); + --thm-survey-question-panel-toolbar-item-padding-top: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-top) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) + ); + --thm-survey-question-panel-toolbar-item-padding-right: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-right) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) + ); + --thm-survey-question-panel-toolbar-item-padding-bottom: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-bottom) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom) + ); + --thm-survey-question-panel-toolbar-item-padding-left: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-left) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-left) + ); + --thm-survey-question-panel-toolbar-button-gap: calc(var(--ctr-survey-question-panel-toolbar-gap) / 2); + + margin: 0 var(--thm-survey-question-panel-toolbar-button-gap, calcSize(0.5)); border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, calcSize(0.25)); - padding: calcSize(1); + padding: var(--thm-survey-question-panel-toolbar-item-padding-top, calcSize(1)) + var(--thm-survey-question-panel-toolbar-item-padding-right, calcSize(1)) + var(--thm-survey-question-panel-toolbar-item-padding-bottom, calcSize(1)) + var(--thm-survey-question-panel-toolbar-item-padding-left, calcSize(1)); justify-content: center; align-items: center; @@ -69,8 +89,15 @@ svc-question { } .svc-survey-element-toolbar__item--with-text { - padding-inline-end: calcSize(1); - gap: calcSize(0.5); + --thm-survey-question-panel-toolbar-item-padding-right: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-right-with-text) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) + ); + --thm-survey-question-panel-toolbar-item-gap: calc( + var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) + ); + padding-inline-end: var(--thm-survey-question-panel-toolbar-item-padding-right, calcSize(1)); + gap: var(--thm-survey-question-panel-toolbar-item-gap, calcSize(0.5)); } .svc-survey-element-toolbar .sv-action:last-of-type .svc-survey-element-toolbar__item { @@ -82,18 +109,29 @@ svc-question { } .svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--with-text { + --thm-survey-question-panel-toolbar-item-padding-left: calc( + var(--ctr-survey-question-panel-toolbar-item-padding-left) + + var(--ctr-survey-question-panel-toolbar-item-icon-padding-left-with-text) + ); + --thm-survey-question-panel-toolbar-item-gap: calc( + var(--ctr-survey-question-panel-toolbar-item-gap) + var(--ctr-survey-question-panel-toolbar-item-icon-padding-left) + ); + flex-direction: row-reverse; - padding-inline-start: calcSize(1); - gap: calcSize(0.5); + padding-inline-start: var(--thm-survey-question-panel-toolbar-item-padding-left, calcSize(1)); + gap: var(--thm-survey-question-panel-toolbar-item-gap, calcSize(0.5)); } .svc-dropdown-action--convertTo .svc-survey-element-toolbar__item--icon { - padding: calcSize(0.5); + padding: var(--ctr-survey-question-panel-toolbar-item-padding-top, calcSize(0.5)) + var(--ctr-survey-question-panel-toolbar-item-padding-right, calcSize(0.5)) + var(--ctr-survey-question-panel-toolbar-item-padding-bottom, calcSize(0.5)) + var(--ctr-survey-question-panel-toolbar-item-padding-left, calcSize(0.5)); .svc-survey-element-toolbar-item__icon { padding: 0; - width: calcSize(3); - height: calcSize(3); + width: var(--ctr-survey-question-panel-toolbar-item-icon-container-width, calcSize(3)); + height: var(--ctr-survey-question-panel-toolbar-item-icon-container-height, calcSize(3)); } } @@ -149,8 +187,19 @@ svc-question { .svc-survey-element-toolbar-item__icon, .svc-survey-element-toolbar__dots-item .sv-svg-icon.sv-action-bar-item__icon { - width: calcSize(2); - height: calcSize(2); + --ctr-survey-question-toolbar-item-icon-width: calc( + var(--ctr-survey-question-panel-toolbar-item-icon-container-width) - + var(--ctr-survey-question-panel-toolbar-item-icon-padding-right) - + var(--ctr-survey-question-panel-toolbar-item-icon-padding-left) + ); + --ctr-survey-question-toolbar-item-icon-height: calc( + var(--ctr-survey-question-panel-toolbar-item-icon-container-height) - + var(--ctr-survey-question-panel-toolbar-item-icon-padding-top) - + var(--ctr-survey-question-panel-toolbar-item-icon-padding-bottom) + ); + + width: var(--ctr-survey-question-toolbar-item-icon-width, calcSize(2)); + height: var(--ctr-survey-question-toolbar-item-icon-height, calcSize(2)); } .svc-survey-element-toolbar-item__title { @@ -1396,7 +1445,10 @@ svc-question, .svc-survey-element-top-toolbar__item { @include defaultActionButtonSettings; - padding: calcSize(0.5); + padding: var(--ctr-survey-question-panel-toolbar-item-padding-top-small, calcSize(0.5)) + var(--ctr-survey-question-panel-toolbar-item-padding-right-small, calcSize(0.5)) + var(--ctr-survey-question-panel-toolbar-item-padding-bottom-small, calcSize(0.5)) + var(--ctr-survey-question-panel-toolbar-item-padding-left-small, calcSize(0.5)); border-radius: var(--ctr-survey-question-panel-toolbar-item-corner-radius, 2px); opacity: var(--ctr-survey-question-panel-toolbar-item-opacity-muted, 0.5); background-color: transparent;