Read-only and Preview Mode: Redesign: Root Issue

[tsv2013]

We need to distinguish the disabled and read-only (display) mode of survey questions. @mikeamelin created design for this states:

• [ ] Preview. Read-only states need to be improved. #6123
• [ ] Correct inactive (disabled or read-only) states for all questions. #6262

Details — https://docs.google.com/document/d/1xE_qzePrSRulQa7VS9ambu8JdXJsFBwDt1eg2Ue8ZFM/edit?usp=sharing Design — https://www.figma.com/file/jcuAUsN02n2yJerx39mqf9/Previews?type=design&node-id=101-7&mode=dev

Dev TODO

• [x] radio-group
• [x] single-input
• [x] rating
• [x] rating-stars ( @novikov82 )
• [x] rating-smileys ( @novikov82 )
• [x] checkbox-group ( @dmitry-kurmanov )
• [x] dropdown ( @novikov82 )
• [x] tag-box ( @novikov82 )
• [x] yes/no (boolean) ( @dmitry-kurmanov )
• [x] boolean:radio ( @dmitry-kurmanov )
• [x] boolean:checkbox ( @dmitry-kurmanov )
• [x] file-upload ( @dmitry-kurmanov )
• [x] image-picker ( @dmitry-kurmanov )
• [x] ranking ( @dmitry-kurmanov )
• [x] comment ( @novikov82 )
• [x] multiple-text ( @novikov82 )
• [x] ~signature~ can not implement ( @novikov82 )
• [x] matrix single choice ( @novikov82 )
• [x] ~matrix multiple choice~ need to do nothing
• [x] #8026
• [x] support old themes (modern, ... etc)

[JaneSjs]

User Requests:

• T14754 - Override checked icon when in survey read only mode https://surveyjs.answerdesk.io/internal/ticket/details/T14754
• T15483 - Make boolean question appear with color in read-only mode https://surveyjs.answerdesk.io/internal/ticket/details/T15483
• T14754 - Override checked icon when in survey read only mode https://surveyjs.answerdesk.io/internal/ticket/details/T14754
• T16461 - The Preview Mode Question is not that visible https://surveyjs.answerdesk.io/internal/ticket/details/T16461
• T16282 - in display mode the yes/no not clear https://surveyjs.answerdesk.io/internal/ticket/details/T16282
• T15955 - Better read only display https://surveyjs.answerdesk.io/internal/ticket/details/T15955
• T16616 - Request to enhance the contrast disabled answered boolean questions https://surveyjs.answerdesk.io/internal/ticket/details/T16616
• T17576 - CSS customize for survey preview mode https://surveyjs.answerdesk.io/internal/ticket/details/T17576

[JaneSjs]

T17346 - Make font color of readonly values darker? https://surveyjs.answerdesk.io/internal/ticket/details/T17346

[mikeamelin]

READ-ONLY

• [x] the border should be inside

• [x] title is missed

PREVIEW

• [x] there shouldn't be any pixels

• [x] unselected image should be semi-transparent

[mikeamelin]

READ-ONLY

• [x] colorful smiley rating — wrong color/opacity for inactive items

• [x] matrix with alt rows

• [x] dynamic matrix (@dmitry-kurmanov)

• [x] no button is necessary at all (@dmitry-kurmanov )

• [x] i think we should use same way as for File Upload (@novikov82 )

• [x] dynamic panel. Let's hide footer for one record (@novikov82 )

[mikeamelin]

PREVIEW

• [x] colorful smiley rating

• [x] text color (@dmitry-kurmanov )
• [x] no button

• [x] no border (@novikov82 )
• [x] text color
• [x] text — some thing like No signature

• [x] radiobutton appearance

• [x] dynamic matrix (@dmitry-kurmanov )

• [x] nested panel (@novikov82 )

• [x] dynamic matrix. No records — text color (@novikov82 )

[JaneSjs]

+1 https://github.com/surveyjs/survey-library/issues/8055

[mikeamelin]

• [x] there we should use another background color for read-only

https://www.figma.com/file/i6Lpc7zkjHtso2oXZV97fo/*-Components?type=design&node-id=19925-1262932&mode=design&t=kUI5IeJ7yhJgoE6N-4

https://www.figma.com/file/i6Lpc7zkjHtso2oXZV97fo/*-Components?type=design&node-id=19925-1258280&mode=design&t=kUI5IeJ7yhJgoE6N-4

https://www.figma.com/file/i6Lpc7zkjHtso2oXZV97fo/*-Components?type=design&node-id=18229-396599&mode=design&t=kUI5IeJ7yhJgoE6N-4

• [x] let's change background color for alt row everywhere

https://www.figma.com/file/i6Lpc7zkjHtso2oXZV97fo/*-Components?type=design&node-id=19925-1340814&mode=design&t=kUI5IeJ7yhJgoE6N-4