Design differences between patient-ssapp and clickeable prototype

joaoluis-pdm commented 3 years ago

@lehialessandro sabes alguma maniera fácila de mudar as cores do ionic para ficarem iguais às do protótipo ? Eu andei a brincar um bocado com o https://github.com/PharmaLedger-IMI/ctr-workspace/blob/master/ctr-patient/patient-ssapp/code/assets/skin.css mas não saíu como esperava. Era algo que saberias resolver ?

joaoluis-pdm commented 3 years ago

Fix ctr-workspace/ctr-patient/patient-ssapp/code/templates/clinicaltrialinfo10.html and ctr-workspace/ctr-patient/patient-ssapp/code/templates/matchrequestnew60info.html

Use the same icons as under https://github.com/PharmaLedger-IMI/ctr-workspace/tree/master/ctr-backoffice-frontend/src/assets

Is is probably better to make a copy of the needed .png icons https://github.com/PharmaLedger-IMI/ctr-workspace/tree/master/ctr-backoffice-frontend/src/assets to https://github.com/PharmaLedger-IMI/ctr-workspace/tree/master/ctr-patient/apihub-root/assets/images

Style changes to make the patient-ssapp more like the physician backoffice are welcome.

joaoluis-pdm commented 3 years ago

@lehialessandro I will ask you for help regarding the "Eligibility criteria" box (from the clickeable prototype)

Regarding the box, can you help elaborate an HTML + CSS snippet for the "list items" ?

Note: For now, each list item just has 1 line of text (Example: just "Psoriatic arthritis diganosis", not "Psoriatic arthritis diganosis ; We found a diagnosis in your health record").

Instead of just a green icon that means "match", I also need

some sort of yellow icon (that means "match without confidence")
some sort of red icon (that means "reject")
and a version with no icon whatsoever... (informative - neither match neither reject - not to be used together with the match/reject markers)

It would be great if this HTML snippet only differs in li (list item classes) so that the same HTML snipped can be used on the patrient-ssapp and on the ctr-backoffice-frontend. (I just need to port the CSS to both applications).

joaoluis-pdm commented 3 years ago

@lehialessandro do you know of an equivalent to https://material.angular.io/components/progress-spinner/examples in ionic ? (The "Progress Indicators" in https://ionicframework.com/docs/api/loading do not seem adequate to display the "percentage" (Match confidence score).

joaoluis-pdm commented 3 years ago

In v0.7.2-gc365093 in the backoffice , the neutral mark does not appear

although the asset https://ctr-dev.pharmaledger.pdmfc.com/backoffice/assets/neutral.svg exists, and the class="neutral-img" is placed on the span.

How to reproduce: 1 - login to https://ctr-dev.pharmaledger.pdmfc.com/backoffice/dashboard?type=SponsorUser&v=0.7.1 with username pfizeruser1@somesponsor.com and password 123456 2 - view the trial Psoriatic Arthritis5 at URL https://ctr-dev.pharmaledger.pdmfc.com/backoffice/trialdetails/f6792fa1-c2a4-4f93-be06-2558ad4a00b7

joaoluis-pdm commented 2 years ago

Componente application.component:

(Figma is different, but style should be similar... Figma:

pccosta-pdm commented 2 years ago

@lehialessandro added and changed the progress bar to component "step-progress-bar" on "ClinicalTrialAnsXX" and "MatchRequestNewXX" (template/controllers)

After removing the css from the last page, some issues appeared on web-component, probably due to shadow-dom, can you check please?