From 3f36c7061f4823c627fd8209296ed812516d6671 Mon Sep 17 00:00:00 2001 From: OlgaLarina Date: Fri, 1 Nov 2024 18:22:45 +0300 Subject: [PATCH 1/3] work for #6027 Support svg icons in "svc-action-button" component --- .../components/action-button.component.html | 20 ++++++-- .../src/components/action-button.component.ts | 1 + .../question-link-value.component.html | 2 +- .../survey-creator-react/src/ActionButton.tsx | 47 ++++++++++++++++++- .../src/QuestionLinkValue.tsx | 1 + 5 files changed, 64 insertions(+), 7 deletions(-) diff --git a/packages/survey-creator-angular/src/components/action-button.component.html b/packages/survey-creator-angular/src/components/action-button.component.html index a180101f19..eec0b5fb7d 100644 --- a/packages/survey-creator-angular/src/components/action-button.component.html +++ b/packages/survey-creator-angular/src/components/action-button.component.html @@ -1,6 +1,18 @@ - {{text}} - {{text}} + + {{text}} + {{text}} + + + + + + + + + \ No newline at end of file diff --git a/packages/survey-creator-angular/src/components/action-button.component.ts b/packages/survey-creator-angular/src/components/action-button.component.ts index 5b944eb818..bf30162a87 100644 --- a/packages/survey-creator-angular/src/components/action-button.component.ts +++ b/packages/survey-creator-angular/src/components/action-button.component.ts @@ -14,6 +14,7 @@ export class ActionButtonComponent extends EmbeddedViewContentComponent { @Input() disabled: boolean = false; @Input() text: string = ""; @Input() title: string = ""; + @Input() iconName: string = ""; @Input() allowBubble: boolean = false; onClick(event: any) { this.click(); diff --git a/packages/survey-creator-angular/src/questions/question-link-value.component.html b/packages/survey-creator-angular/src/questions/question-link-value.component.html index 375b9b5d92..4c305091b3 100644 --- a/packages/survey-creator-angular/src/questions/question-link-value.component.html +++ b/packages/survey-creator-angular/src/questions/question-link-value.component.html @@ -1,6 +1,6 @@ + [disabled]="!model.isClickable" [classes]="model.linkSetButtonCssClasses" [title]="model.tooltip" [iconName]="model.iconName"> { +interface IActionButtonProps { + classes?; + click: () => void; + selected?: boolean; + disabled?: boolean; + text?: string; + title?: string; + iconName?: string; + allowBubble?: boolean; +} +export class ActionButton extends SurveyElementBase { renderElement(): JSX.Element { let classes = this.props.classes + " svc-action-button"; if (this.props.selected) { @@ -9,6 +19,15 @@ export class ActionButton extends SurveyElementBase { } if (this.props.disabled) { classes += " svc-action-button--disabled"; + } + if (this.props.iconName) { + return this.renderIcon(classes); + } + return this.renderButtonText(classes); + } + + renderButtonText(classes): JSX.Element { + if (this.props.disabled) { return {this.props.text}; } return ( @@ -31,4 +50,28 @@ export class ActionButton extends SurveyElementBase { ); } + renderIcon(classes): JSX.Element { + classes += " svc-action-button--icon"; + if (this.props.disabled) { + return ; + } + return ( + <> + {attachKey2click( + { + if (!this.props.allowBubble) { + e.stopPropagation(); + } + this.props.click(); + }} + title={this.props.title} + > + + + )} + + ); + } } +ReactElementFactory.Instance.registerElement("svc-action-button", (props: any) => { return React.createElement(ActionButton, props); }); \ No newline at end of file diff --git a/packages/survey-creator-react/src/QuestionLinkValue.tsx b/packages/survey-creator-react/src/QuestionLinkValue.tsx index 279eae3e97..64aef4b363 100644 --- a/packages/survey-creator-react/src/QuestionLinkValue.tsx +++ b/packages/survey-creator-react/src/QuestionLinkValue.tsx @@ -36,6 +36,7 @@ export class SurveyQuestionLinkValue extends SurveyQuestionElementBase { disabled={!this.question.isClickable} text={this.question.linkValueText} title={this.question.tooltip} + iconName={this.question.iconName} > {this.renderClear()} From 8094e3d722f79bc85bc99103d2a6a922ed12c0f1 Mon Sep 17 00:00:00 2001 From: OlgaLarina Date: Mon, 4 Nov 2024 09:55:56 +0300 Subject: [PATCH 2/3] resolve #6027 Support svg icons in "svc-action-button" component --- .../src/components/tabs/logic-ui.scss | 13 ++--- .../survey-creator-react/src/ActionButton.tsx | 14 ++--- .../src/components/ActionButton.vue | 53 +++++++++++++------ .../src/questions/LinkValue.vue | 1 + 4 files changed, 49 insertions(+), 32 deletions(-) diff --git a/packages/survey-creator-core/src/components/tabs/logic-ui.scss b/packages/survey-creator-core/src/components/tabs/logic-ui.scss index 0178ffe906..a5514c8805 100644 --- a/packages/survey-creator-core/src/components/tabs/logic-ui.scss +++ b/packages/survey-creator-core/src/components/tabs/logic-ui.scss @@ -144,15 +144,6 @@ outline: none; } -.svc-logic-condition-remove.svc-icon-remove { - display: none; - width: calcSize(5); - height: calcSize(5); - background-repeat: no-repeat; - background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 4H20H16V2C16 0.9 15.1 0 14 0H10C8.9 0 8 0.9 8 2V4H4H2V6H4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V6H22V4ZM10 2H14V4H10V2ZM18 20H6V6H8H16H18V20ZM14 8H16V18H14V8ZM11 8H13V18H11V8ZM8 8H10V18H8V8Z' fill='%23E60A3E'/%3E%3C/svg%3E%0A"); - background-size: calcSize(3) calcSize(3); - background-position: center; -} .svc-action-button--icon.svc-logic-condition-remove.svc-icon-remove { display: none; @@ -163,6 +154,10 @@ align-items: center; padding: 0; + .sv-svg-icon { + width: calcSize(3); + height: calcSize(3); + } use { fill: var(--ctr-survey-action-button-icon-color-negative, $red); } diff --git a/packages/survey-creator-react/src/ActionButton.tsx b/packages/survey-creator-react/src/ActionButton.tsx index 49a4bf021c..72a3bb4ba2 100644 --- a/packages/survey-creator-react/src/ActionButton.tsx +++ b/packages/survey-creator-react/src/ActionButton.tsx @@ -1,4 +1,5 @@ import * as React from "react"; +import { CssClassBuilder } from "survey-core"; import { attachKey2click, ReactElementFactory, SurveyElementBase, SvgIcon, } from "survey-react-ui"; interface IActionButtonProps { @@ -13,13 +14,12 @@ interface IActionButtonProps { } export class ActionButton extends SurveyElementBase { renderElement(): JSX.Element { - let classes = this.props.classes + " svc-action-button"; - if (this.props.selected) { - classes += " svc-action-button--selected"; - } - if (this.props.disabled) { - classes += " svc-action-button--disabled"; - } + const classes = new CssClassBuilder() + .append(this.props.classes) + .append("svc-action-button") + .append("svc-action-button--selected", this.props.selected) + .append("svc-action-button--disabled", this.props.disabled) + .toString(); if (this.props.iconName) { return this.renderIcon(classes); } diff --git a/packages/survey-creator-vue/src/components/ActionButton.vue b/packages/survey-creator-vue/src/components/ActionButton.vue index b35faddf1c..f177238d36 100644 --- a/packages/survey-creator-vue/src/components/ActionButton.vue +++ b/packages/survey-creator-vue/src/components/ActionButton.vue @@ -1,20 +1,40 @@