Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Frontend: Improve icon contrast #3594

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from

Conversation

CezaryDanielNowak
Copy link

@CezaryDanielNowak CezaryDanielNowak commented Jul 31, 2023

Currently icons on the thumbnail overlay (favourite, checkbox, etc) are white-ish.
Quite often it's invisible when photo is also light color. This makes it impossible see if photo is liked or selected.

Example:
Screenshot 2023-07-31 at 13 19 43

After this change icons have dark shadow so it's more contrasting
Screenshot 2023-07-31 at 15 49 48

Other affected icons:
Screenshot 2023-07-31 at 13 35 53 Screenshot 2023-07-31 at 13 35 42 Screenshot 2023-07-31 at 13 49 02 Screenshot 2023-07-31 at 13 51 35 Screenshot 2023-07-31 at 14 15 35 Screenshot 2023-07-31 at 13 58 23 Screenshot 2023-07-31 at 14 37 32

Acceptance Criteria:

  • Features and enhancements must be fully implemented so that they can be released at any time without additional work
  • Automated unit and/or acceptance tests are mandatory to ensure the changes work as expected and to reduce repetitive manual work
  • Frontend components must be responsive to work and look properly on phones, tablets, and desktop computers; you must have tested them on all major browsers and different devices
  • Documentation and translation updates should be provided if needed
  • In case you submit database-related changes, they must be tested and compatible with SQLite 3 and MariaDB 10.5.12+

@CLAassistant
Copy link

CLAassistant commented Jul 31, 2023

CLA assistant check
All committers have signed the CLA.

@CezaryDanielNowak CezaryDanielNowak changed the title Improve icon contrast Frontend: Improve icon contrast Jul 31, 2023
@@ -353,6 +355,11 @@ body.chrome #photoprism .search-results .result {
bottom: 4px;
}

#photoprism .cards-view .input-favorite i,
#photoprism .mosaic-view .input-favorite i {
text-shadow: 0 0 2px #000, 0 0 2px #000 !important;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

double shadow for icons with opacity: 0.5

@lastzero
Copy link
Member

lastzero commented Aug 1, 2023

Thank you! Before we merge it as it is, how do other applications handle it? Are there any other CSS tricks we could try? I haven't had time to compare it with e.g. Google Photos, but I don't remember seeing any shadows there.

@lastzero lastzero added work-in-progress Please don't merge just yet ux Impacts User Experience labels Aug 1, 2023
@CezaryDanielNowak
Copy link
Author

CezaryDanielNowak commented Aug 1, 2023

@lastzero Google Photos adds a shadow to whole image. If controls are on top: to the top. If controls are on the bottom - to the bottom.

Image zooms out when it's selected. I kind of like it, it's easier to distinguish if image is selected or not.

Screenshot 2023-08-01 at 21 35 10 Screenshot 2023-08-01 at 21 35 20
Screenshot 2023-08-01 at 21 35 43 Screenshot 2023-08-01 at 21 37 04

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ux Impacts User Experience work-in-progress Please don't merge just yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants