Merge pull request #6610 from surveyjs/bug/6425-display-mode-issues

Fixed #6425 - Survey in Display Mode - A file upload button remains, and the selected Rate option is rendered with a Primary color

packages/survey-angular-ui/src/questions/file.component.html

@@ -36,6 +36,7 @@
       <span [class]="model.cssClasses.dragAreaPlaceholder">{{ model.dragAreaPlaceholder }}</span>
       <div [class]="model.cssClasses.wrapper">
         <label
+          *ngIf="!model.isReadOnly"
           role="button"
           tabindex="0"
           [class]="model.getChooseFileCss()"

packages/survey-vue3-ui/src/File.vue

@@ -39,6 +39,7 @@
         }}</span>
         <div :class="question.cssClasses.wrapper">
           <label
+            v-if="!question.isReadOnly"
             role="button"
             tabindex="0"
             :class="question.getChooseFileCss()"

src/defaultV2-theme/blocks/sd-rating.scss

@@ -87,6 +87,8 @@ legend+sv-ng-rating-item+.sd-rating__item {
 .sd-rating__item.sd-rating__item--selected.sd-rating__item--disabled {
   color: $primary-foreground;
   fill: $foreground;
+  background-color: $background-semitransparent;
+  border-color: transparent;
 }
 
 .sd-question--disabled .sd-rating__item-text {
@@ -359,4 +361,4 @@ legend+sv-ng-rating-item+.sd-rating__item-smiley {
 
 .sd-rating__item--selected .sd-rating__item-text.sd-rating__item-text {
   color: $primary-foreground;
-}
+}

src/knockout/templates/question-file.html

@@ -10,12 +10,14 @@
         <div data-bind="css: question.getFileDecoratorCss()">
           <span data-bind="css: question.cssClasses.dragAreaPlaceholder, text: question.dragAreaPlaceholder"></span>
           <div data-bind="css: question.cssClasses.wrapper">
+            <!-- ko ifnot: isReadOnly -->
             <label tabindex="0" role="button" data-bind="css: question.koChooseFileCss, key2click, attr: { for: question.inputId, 'aria-label': question.chooseButtonCaption }">
               <span data-bind="text: question.chooseButtonCaption"></span>
               <!-- ko if: question.cssClasses.chooseFileIconId -->
                   <!-- ko component: { name: 'sv-svg-icon', params: { title: question.chooseButtonCaption, iconName: question.cssClasses.chooseFileIconId, size: 'auto' } } --><!-- /ko -->
               <!-- /ko -->
             </label>
+            <!-- /ko -->
             <!-- ko if: !question.koHasValue() -->
             <span data-bind="css: question.cssClasses.noFileChosen, text: question.noFileChosenCaption"></span>
             <!-- /ko -->

src/react/reactquestion_file.tsx

@@ -82,7 +82,7 @@ export class SurveyQuestionFile extends SurveyQuestionElementBase {
     const questionCss = this.question.cssClasses;
     let noFileChosen: JSX.Element | null = null;
     let chooseFile: JSX.Element | null = null;
-    chooseFile = attachKey2click(
+    chooseFile = this.question.isReadOnly ? null : attachKey2click(
       <label
         role="button"
         tabIndex={0}

src/vue/file.vue

@@ -39,6 +39,7 @@
         <span :class="question.cssClasses.dragAreaPlaceholder">{{ question.dragAreaPlaceholder }}</span>
         <div :class="question.cssClasses.wrapper">
           <label
+            v-if="!question.isReadOnly"
             role="button"
             tabindex="0"
             :class="question.getChooseFileCss()"

tests/markup/etalon_file.ts

@@ -114,7 +114,28 @@ registerMarkupTests(
     },
     snapshot: "file-zip-png-ro",
   },
-
+  {
+    name: "Test single file question readOnly (default)",
+    json: {
+      mode: "display",
+      questions: [
+        {
+          name: "name",
+          type: "file",
+          title: "Question title",
+          titleLocation: "hidden",
+          defaultValue: [
+            {
+              "name": "item1.zip",
+              "type": "application/x-zip-compressed",
+              "content": "#item1.zip"
+            },
+          ],
+        }
+      ]
+    },
+    snapshot: "file-single-zip-ro",
+  },
   // defaultV2
   {
     name: "Test file question empty (defaultV2)",

tests/markup/snapshots/file-2-zip-png-ro.snap.html

@@ -4,14 +4,6 @@
 		<div class="sd-file__decorator">
 			<span class="sd-file__drag-area-placeholder">Drag and drop a file here or click the button below and choose a file to upload.</span>
 			<div class="sd-file__wrapper">
-				<label aria-label="Choose file" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" role="button" tabindex="0">
-					<span>Choose file</span>
-					<svg aria-label="Choose file" class="sv-svg-icon" role="img">
-						<use xlink:href="#icon-choosefile" class="">
-						</use>
-						<title class="">Choose file</title>
-					</svg>
-				</label>
 			</div>
 		</div>
 		<div class="sd-file__list">

tests/markup/snapshots/file-mob2-zip-png-ro.snap.html

@@ -4,14 +4,6 @@
 		<div class="sd-file__decorator">
 			<span class="sd-file__drag-area-placeholder">Drag and drop a file here or click the button below and choose a file to upload.</span>
 			<div class="sd-file__wrapper">
-				<label aria-label="Choose file" class="sd-context-btn sd-file__choose-btn sd-file__choose-btn--icon" role="button" tabindex="0">
-					<span>Choose file</span>
-					<svg aria-label="Choose file" class="sv-svg-icon" role="img">
-						<use xlink:href="#icon-choosefile" class="">
-						</use>
-						<title class="">Choose file</title>
-					</svg>
-				</label>
 			</div>
 		</div>
 		<div class="sd-file__list">

tests/markup/snapshots/file-modern-zip-png-ro.snap.html

@@ -4,9 +4,6 @@
 		<div class="sv-file__decorator">
 			<span class="sv-hidden">Drag and drop a file here or click the button below and choose a file to upload.</span>
 			<div class="sv-file__wrapper">
-				<label aria-label="Choose file" class="sv-btn sv-file__choose-btn sv-file__choose-btn--disabled" role="button" tabindex="0">
-					<span>Choose file</span>
-				</label>
 			</div>
 		</div>
 		<div>

tests/markup/snapshots/file-single-zip-ro.snap.html

@@ -0,0 +1,19 @@
+<div class="sv_q_file">
+	<input class="form-control sv-visuallyhidden" disabled="" id="testid0i" placeholder="Question title" style="color:transparent;" type="file">
+	<div>
+		<div class="sv-file__decorator">
+			<span class="sv-hidden">Drag and drop a file here or click the button below and choose a file to upload.</span>
+			<div>
+			</div>
+		</div>
+		<div>
+			<span class="sv_q_file_preview">
+				<div class="sv_q_file_sign">
+					<a download="item1.zip" href="#item1.zip" title="item1.zip">item1.zip</a>
+				</div>
+				<div>
+				</div>
+			</span>
+			</div>
+		</div>
+	</div>

tests/markup/snapshots/file-zip-png-ro.snap.html

@@ -4,9 +4,6 @@
 		<div class="sv-file__decorator">
 			<span class="sv-hidden">Drag and drop a file here or click the button below and choose a file to upload.</span>
 			<div>
-				<label aria-label="Choose file" class="sv_q_file_choose_button" role="button" tabindex="0">
-					<span>Choose file</span>
-				</label>
 			</div>
 		</div>
 		<div>