diff --git a/src/defaultCss/defaultV2Css.ts b/src/defaultCss/defaultV2Css.ts index d76a2636bd..ca964a1a85 100644 --- a/src/defaultCss/defaultV2Css.ts +++ b/src/defaultCss/defaultV2Css.ts @@ -608,6 +608,7 @@ export var defaultV2Css = { chooseFileAsIcon: "sd-file__choose-btn--icon", chooseFileIconId: "icon-choosefile", disabled: "sd-file__choose-btn--disabled", + controlDisabled: "sd-file__choose-file-btn--disabled", //todo: remove it in v2 removeButton: "sd-context-btn--negative", removeButtonBottom: "", diff --git a/src/defaultV2-theme/blocks/sd-file.scss b/src/defaultV2-theme/blocks/sd-file.scss index 238237a0eb..f682c72f24 100644 --- a/src/defaultV2-theme/blocks/sd-file.scss +++ b/src/defaultV2-theme/blocks/sd-file.scss @@ -1,4 +1,5 @@ @import "../variables.scss"; + .sd-file { position: relative; font-size: calcFontSize(1); @@ -6,7 +7,7 @@ min-height: calcSize(36); box-sizing: border-box; padding: 0 calcSize(6); - + .sv-action-bar { padding: calcSize(1) 0; justify-content: center; @@ -58,6 +59,7 @@ container-type: unset; } } + .sd-file__decorator--drag { z-index: 1; border: 1px solid $primary; @@ -89,6 +91,7 @@ .sd-file__drag-area-placeholder { display: none; } + .sd-file__decorator .sd-action { padding: calcSize(1); @@ -404,4 +407,9 @@ top: 50%; transform: translate(-50%, -50%); } +} + +.sd-file__choose-file-btn--disabled { + opacity: 0.25; + cursor: default; } \ No newline at end of file diff --git a/src/question_file.ts b/src/question_file.ts index 35e7edec00..a056e0da14 100644 --- a/src/question_file.ts +++ b/src/question_file.ts @@ -265,6 +265,7 @@ export class QuestionFileModel extends QuestionFileModelBase { id: "sv-file-choose-file", iconSize: "auto", data: { question: this }, + enabledIf: () => !this.isInputReadOnly, component: "sv-file-choose-btn" }); this.startCameraAction = new Action({ diff --git a/tests/questionFileTests.ts b/tests/questionFileTests.ts index e999a5e8cc..87efa8deca 100644 --- a/tests/questionFileTests.ts +++ b/tests/questionFileTests.ts @@ -1901,3 +1901,19 @@ QUnit.test("Acton takePhoto should be serialiazed", function (assert) { assert.equal(action.title, "Foto machen", "de"); }); +QUnit.test("Choose file action should have disabled class", function (assert) { + const survey = new SurveyModel({ + mode: "display", + elements: [ + { type: "file", name: "q1", maxSize: 3 }, + ] + }); + survey.css = defaultV2Css; + const question = survey.getAllQuestions()[0]; + assert.equal(question.getChooseFileCss(), "sd-file__choose-btn sd-file__choose-file-btn--disabled sd-action sd-file__choose-btn--text sd-action--disabled", "Disabled"); + survey.mode = "edit"; + assert.equal(question.getChooseFileCss(), "sd-file__choose-btn sd-action sd-file__choose-btn--text", "Enabled"); + survey.mode = "display"; + assert.equal(question.getChooseFileCss(), "sd-file__choose-btn sd-file__choose-file-btn--disabled sd-action sd-file__choose-btn--text sd-action--disabled", "Disabled"); +}); +