work for surveyjs/private-tasks#266 (#6783)

* work for surveyjs/private-tasks#266 * work for surveyjs/private-tasks#266 * work for surveyjs/private-tasks#266 --------- Co-authored-by: OlgaLarina <olga.larina.dev@gmail.com>
surveyjs · Aug 25, 2023 · 9ea27c7 · 9ea27c7
1 parent 4214d46
commit 9ea27c7
Show file tree

Hide file tree

Showing 12 changed files with 29 additions and 25 deletions.
diff --git a/src/actions/action.ts b/src/actions/action.ts
@@ -117,7 +117,7 @@ export interface IAction {
    * The action item's icon size in pixels.
    * @see iconName
    */
-  iconSize?: number;
+  iconSize?: number | string;
   /**
    * The action item's location in a matrix question's row.
    *

diff --git a/src/common-styles/sv-ranking.scss b/src/common-styles/sv-ranking.scss
@@ -86,6 +86,7 @@
     background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAArSURBVHgB7cuhEQAwDMNAtUN4//m8RMtygcE5PxMQxAKnh6Q3mWzXd4mAD4cJBAQCqfbUAAAAAElFTkSuQmCC");
     background-position: center;
     background-repeat: no-repeat;
+    background-size: multiply(1, $font-editorfont-size);
   }
 }
 

diff --git a/src/defaultV2-theme/blocks/sd-context-btn.scss b/src/defaultV2-theme/blocks/sd-context-btn.scss
@@ -6,8 +6,8 @@
   outline: none;
   svg {
     display: block;
-    width: calcSize(3);
-    height: calcSize(3);
+    width: multiply(1.5, $font-editorfont-size);
+    height: multiply(1.5, $font-editorfont-size);
   }
   use {
     fill: $foreground-light;

diff --git a/src/defaultV2-theme/blocks/sd-file.scss b/src/defaultV2-theme/blocks/sd-file.scss
@@ -102,15 +102,15 @@
 
 .sd-file__clean-btn {
   z-index: 2;
-  right: calcSize(1);
+  inset-inline-end: calcSize(1);
 
   span:first-child {
     display: none;
   }
 }
 
 .sd-file__choose-btn--icon {
-  right: calcSize(8);
+  inset-inline-end: calc(multiply(1.5, $font-editorfont-size) + calcSize(5));
 }
 
 .sd-file__list {

diff --git a/src/defaultV2-theme/blocks/sd-imagepicker.scss b/src/defaultV2-theme/blocks/sd-imagepicker.scss
@@ -44,8 +44,6 @@
   position: absolute;
   top: calcSize(1);
   right: calcSize(1);
-  width: calcSize(6);
-  height: calcSize(6);
   padding: calcSize(1.5);
   box-sizing: border-box;
   border-radius: 100%;
@@ -54,8 +52,9 @@
 }
 
 .sd-imagepicker__check-icon {
-  width: calcSize(3);
-  height: calcSize(3);
+  display: block;
+  width: multiply(1.5, $font-editorfont-size);
+  height: multiply(1.5, $font-editorfont-size);
   fill: $primary;
 }
 

diff --git a/src/defaultV2-theme/blocks/sd-matrixdynamic.scss b/src/defaultV2-theme/blocks/sd-matrixdynamic.scss
@@ -17,6 +17,11 @@
   opacity: 0.5;
 }
 
+.sd-action.sd-matrixdynamic__remove-btn .sd-action__icon {
+  width: multiply(1.5, $font-editorfont-size);
+  height: multiply(1.5, $font-editorfont-size);
+}
+
 .sd-matrixdynamic__btn {
   appearance: none;
   background: transparent;

diff --git a/src/defaultV2-theme/blocks/sd-rating.scss b/src/defaultV2-theme/blocks/sd-rating.scss
@@ -357,4 +357,5 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
 
 .sd-rating__item--selected .sd-rating__item-text.sd-rating__item-text {
   color: $primary-foreground;
+  font-weight: inherit;
 }
diff --git a/src/defaultV2-theme/blocks/sd-table.scss b/src/defaultV2-theme/blocks/sd-table.scss
@@ -32,7 +32,7 @@
 }
 
 .sd-table--no-header {
-  padding-top: calcSize(3)
+  padding-top: calcSize(3);
 }
 
 .sd-table--alternate-rows {
@@ -203,13 +203,12 @@
   border: none;
   background: transparent;
   border-radius: calcSize(2);
-  width: calcSize(4);
-  height: calcSize(4);
   padding: calcSize(1);
 
   svg {
-    width: calcSize(2);
-    height: calcSize(2);
+    display: block;
+    width: multiply(1, $font-editorfont-size);
+    height: multiply(1, $font-editorfont-size);
     fill: $foreground-light;
   }
 

diff --git a/src/defaultV2-theme/blocks/sd-tagbox.scss b/src/defaultV2-theme/blocks/sd-tagbox.scss
@@ -13,8 +13,8 @@
 }
 
 .sd-tagbox_clean-button {
-  height: calcSize(3);
-  padding: calcSize(1);
+  height: multiply(1.5, $font-editorfont-size);
+  padding: multiply(0.5, $font-editorfont-size);
   margin: auto 0;
 }
 
@@ -58,9 +58,9 @@
 
 .sd-tagbox-item_clean-button-svg {
   display: flex;
-  padding: calcSize(0.5);
-  width: calcSize(2);
-  height: calcSize(2);
+  padding: multiply(0.25, $font-editorfont-size);
+  width: multiply(1, $font-editorfont-size);
+  height: multiply(1, $font-editorfont-size);
 }
 
 .sd-tagbox-item_clean-button-svg:hover {

diff --git a/src/knockout/components/matrix-actions/detail-button/detail-button.html b/src/knockout/components/matrix-actions/detail-button/detail-button.html
@@ -2,10 +2,8 @@
 type="button"
 data-bind="css:question.getDetailPanelButtonCss(row), click:row.showHideDetailPanelClick, attr:{ 'aria-expanded': question.getIsDetailPanelShowing($data.row) ? 'true': 'false', 'aria-controls': question.getIsDetailPanelShowing($data.row) ? row.detailPanelId: false}"
 >
-<span
-  data-bind="css: question.getDetailPanelIconCss(row), component: { name: 'sv-svg-icon', params: {iconName: question.getDetailPanelIconId(row)} }"
->
-</span>
+<!-- ko component: { name: 'sv-svg-icon', params: { css: question.getDetailPanelIconCss(row), iconName: question.getDetailPanelIconId(row), size: 'auto' } } -->
+<!-- /ko -->
 </button>
 <!-- ko if: question.detailPanelMode === "popup" && question.getKoPopupIsVisible(row) -->
 <sv-popup

diff --git a/src/question_matrixdropdownrendered.ts b/src/question_matrixdropdownrendered.ts
@@ -603,6 +603,7 @@ export class QuestionMatrixDropdownRenderedTable extends Base {
           new Action({
             id: "remove-row",
             iconName: "icon-delete",
+            iconSize: "auto",
             component: "sv-action-bar-item",
             innerCss: new CssClassBuilder().append(this.matrix.cssClasses.button).append(this.matrix.cssClasses.buttonRemove).toString(),
             location: "end",

diff --git a/tests/markup/snapshots/matrixdynamic-defaultV2.snap.html b/tests/markup/snapshots/matrixdynamic-defaultV2.snap.html
@@ -158,7 +158,7 @@
 							<div class="sv-action" id="remove-row">
 								<div class="sv-action__content">
 									<button class="sd-action sd-action--icon sd-action--negative sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg aria-label="Remove" class="sd-action__icon sv-svg-icon" role="img" style="height:24px; width:24px;">
+										<svg aria-label="Remove" class="sd-action__icon sv-svg-icon" role="img">
 											<use xlink:href="#icon-delete" class="">
 											</use>
 											<title class="">Remove</title>
@@ -310,7 +310,7 @@
 							<div class="sv-action" id="remove-row">
 								<div class="sv-action__content">
 									<button class="sd-action sd-action--icon sd-action--negative sd-matrixdynamic__btn sd-matrixdynamic__remove-btn" role="button" tabindex="0" title="Remove" type="button">
-										<svg aria-label="Remove" class="sd-action__icon sv-svg-icon" role="img" style="height:24px; width:24px;">
+										<svg aria-label="Remove" class="sd-action__icon sv-svg-icon" role="img">
 											<use xlink:href="#icon-delete" class="">
 											</use>
 											<title class="">Remove</title>