View Issue Details

This bug affects 1 person(s).
 12
IDProjectCategoryView StatusLast Update
16409Bug reportsOtherpublic2023-06-09 14:37
Reporterritapas Assigned Totibor.pacalat  
PrioritylowSeverityminor 
Status closedResolutionfixed 
Product Version4.2.1 
Summary16409: Emoticon style is different if emoticon is chosen
Description

In the single choice question with emoticons, when no option is chosen we see "shadow" emoticons in "google hangout" style.
When an option is selected, tough, the emoticons change to a "whatsappish" style.
In my opinion, the shadows should match the outline of the active emoticons.

Steps To Reproduce

create a "type 5" question, then use the "slider with emoticon" layout. Then preview the question.

TagsNo tags attached.
Attached Files
immagine.png (13,328 bytes)   
immagine.png (13,328 bytes)   
Bug heat12
Complete LimeSurvey version number (& build)limesurvey4.1.18+200428
I will donate to the project if issue is resolvedNo
Browser
Database type & versionmariadb-5.5.64-1
Server OS (if known)Red Hat Enterprise Linux Server release 7.5 (Maipo)
Webserver software & version (if known)
PHP Versionrh-php73

Users monitoring this issue

ritapas

Activities

gabrieljenik

gabrieljenik

2023-05-18 15:05

manager   ~75076

This is kind of old.
Was looking forward to pick it up but prefer to push this as is now and then check if it is worth to continue.

In general terms: The change from black to color is because it changes the font from "Noto Emoji" to "Noto Color Emoji".

In Chrome I was able to solve a flickering issue by making a workaround.
The flickering happened as the color font was loaded only as needed.
I added an html element with that source, but without content, so that it loads it onload.

In Firefox I couldn't fix it. It is a different problem: The font used for the selected icons is not supported
It's weird because that icon is simply the unicode corresponding to the emoji put as content of the "::after".

PR: https://github.com/LimeSurvey/LimeSurvey/pull/3152

image.png (29,056 bytes)   
image.png (29,056 bytes)   
DenisChenu

DenisChenu

2023-05-18 16:01

developer   ~75077

In Firefox I couldn't fix it. It is a different problem: The font used for the selected icons is not supported

Why using a not compatible font ?
You test on Edge and IE too ?

I understand your POV, but since currently emoji without extra font work on all major browser find another way to have selected item ?

Here : we are totally unsure on the way to shown as slected/not selected by user

  1. filter: grayscale(80%); for not selected
  2. add border for selected.

I know it can be updated by SurveyTheme , maybe do just

  1. Using included by system emoji
  2. Add border for selected

in core

  1. Add grey in vanilla
gabrieljenik

gabrieljenik

2023-05-18 17:50

manager   ~75089

since currently emoji without extra font work on all major browser find another way to have selected item ?

I agree, there should be something more generic.
Maybe event something FontAwsome based?
I guess this is very outdated.

Why using a not compatible font ?

I don't know. I didn't set the font

You test on Edge and IE too ?

Will review that.

Sidenote: The fix done is not final. Just something which feels better to have it than not having it.

DenisChenu

DenisChenu

2023-05-18 18:17

developer   ~75091

Sidenote: The fix done is not final. Just something which feels better to have it than not having it.

Yes : «This fix flickering»

Maybe open a Dev issue ?

@tparner have a theme : https://github.com/tpartner/LimeSurvey-5-Point-Emojis

Using only color fonts : https://github.com/tpartner/LimeSurvey-5-Point-Emojis/tree/master/5-Point-Emojis/survey/questions/answer/5pointchoice/assets/fonts

DenisChenu

DenisChenu

2023-05-18 18:17

developer   ~75092

ping @tpartner about a dev issue ;)

tpartner

tpartner

2023-05-18 18:39

partner   ~75096

I agree, we should let the browser define the emoji and indicate checked/unchecked with CSS (background colour, opacity, greyscale, border...).

gabrieljenik

gabrieljenik

2023-06-08 15:23

manager   ~75478

Good for Chrome, Edge, Opera

DenisChenu

DenisChenu

2023-06-08 16:02

developer   ~75479

Where is the PR link ?

gabrieljenik

gabrieljenik

2023-06-08 18:45

manager   ~75496

https://github.com/LimeSurvey/LimeSurvey/pull/3152

It was on some comments above already

tibor.pacalat

tibor.pacalat

2023-06-09 14:08

administrator   ~75519

tested and merged

guest

guest

2023-06-09 14:37

viewer   ~75521

Fix committed to master branch: http://bugs.limesurvey.org/plugin.php?page=Source/view&id=34795

guest

guest

2023-06-09 14:37

viewer   ~75522

Fix committed to master branch: http://bugs.limesurvey.org/plugin.php?page=Source/view&id=34796

Related Changesets

LimeSurvey: master d55fdbb1

2023-06-09 16:07

Gabriel Jenik

Committer: GitHub


Details Diff
Fixed issue 16409: Emoticon style is different if emoticon is chosen (#3152)

- Fix flickering on Chrome

Co-authored-by: encuestabizdevgit <devgit@encuesta.biz>
Affected Issues
16409
mod - assets/packages/questions/5pointchoice/scripts/slider-rating.js Diff File

LimeSurvey: master d55fdbb1

2023-06-09 16:07

Gabriel Jenik

Committer: GitHub


Details Diff
Fixed issue 16409: Emoticon style is different if emoticon is chosen (#3152)

- Fix flickering on Chrome

Co-authored-by: encuestabizdevgit <devgit@encuesta.biz>
Affected Issues
16409
mod - assets/packages/questions/5pointchoice/scripts/slider-rating.js Diff File

Issue History

Date Modified Username Field Change
2020-06-22 13:37 ritapas New Issue
2020-06-22 13:37 ritapas File Added: immagine.png
2020-08-06 16:49 cdorin Priority none => low
2020-08-06 16:49 cdorin Status new => acknowledged
2022-07-21 15:09 gabrieljenik Status acknowledged => confirmed
2022-07-21 15:10 gabrieljenik Assigned To => gabrieljenik
2022-07-21 15:10 gabrieljenik Status confirmed => assigned
2022-10-11 08:58 ritapas Issue Monitored: ritapas
2022-10-11 08:58 ritapas Bug heat 0 => 2
2023-05-18 15:05 gabrieljenik Note Added: 75076
2023-05-18 15:05 gabrieljenik File Added: image.png
2023-05-18 15:05 gabrieljenik Bug heat 2 => 4
2023-05-18 15:05 gabrieljenik Assigned To gabrieljenik => DenisChenu
2023-05-18 15:05 gabrieljenik Status assigned => ready for code review
2023-05-18 16:01 DenisChenu Note Added: 75077
2023-05-18 16:01 DenisChenu Bug heat 4 => 6
2023-05-18 17:50 gabrieljenik Note Added: 75089
2023-05-18 18:17 DenisChenu Note Added: 75091
2023-05-18 18:17 DenisChenu Assigned To DenisChenu => gabrieljenik
2023-05-18 18:17 DenisChenu Status ready for code review => ready for testing
2023-05-18 18:17 DenisChenu Note Added: 75092
2023-05-18 18:39 tpartner Note Added: 75096
2023-05-18 18:39 tpartner Bug heat 6 => 8
2023-06-08 15:23 gabrieljenik Assigned To gabrieljenik => tibor.pacalat
2023-06-08 15:23 gabrieljenik Status ready for testing => ready for merge
2023-06-08 15:23 gabrieljenik Note Added: 75478
2023-06-08 16:02 DenisChenu Note Added: 75479
2023-06-08 18:45 gabrieljenik Note Added: 75496
2023-06-09 14:08 tibor.pacalat Status ready for merge => closed
2023-06-09 14:08 tibor.pacalat Resolution open => fixed
2023-06-09 14:08 tibor.pacalat Note Added: 75519
2023-06-09 14:08 tibor.pacalat Bug heat 8 => 10
2023-06-09 14:37 Changeset attached => LimeSurvey master d55fdbb1
2023-06-09 14:37 guest Note Added: 75521
2023-06-09 14:37 guest Bug heat 10 => 12
2023-06-09 14:37 Changeset attached => LimeSurvey master d55fdbb1
2023-06-09 14:37 guest Note Added: 75522