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

Move the highlight label from the active projects to the inactive #1680

Merged
merged 22 commits into from
Oct 5, 2023

Conversation

amieiro
Copy link
Member

@amieiro amieiro commented Aug 25, 2023

Problem

As is explained in #1335, GlotPress shows a small label:

  • In the breadcrumb of each active project.
  • In the subproject list, at the right of each active subproject.

image

GlotPress doesn't show this label when the user access to the translation set, selecting a translation language.

image

Fixes #1335.

Solution

This PR inverts the bubble appareance, showing them only:

  • In the subproject list, in each inactive project. The active projects don't have the bubble.

image

  • In the breadcrumb of each inactive project, without or with the translation set (language) selected.

image

image

The active projects don't have the bubble in the breadcrumb.

image

image

I have decided to use the "Inactive" word instead of "Archived", because the project status is active or inactive, not archived.

image

Testing Instructions

To test this change, you only need to navigate between a project with active and inactive subprojects, to see the new approach for the bubbles.

@fxbenard
Copy link

@amieiro Lovely

@ocean90
Copy link
Member

ocean90 commented Aug 25, 2023

Thoughts on styling it like a bubble like GitHub has? I think that will make it less look like a button, especially in the projects list with the Edit/Delete links.

Bildschirmfoto 2023-08-25 um 12 34 48

@amieiro
Copy link
Member Author

amieiro commented Aug 25, 2023

I have updated the CSS label with the same format that GitHub.
I have used a dark orange, because the yellow has low contrast and doesn't look good.

image

image

@pedro-mendonca
Copy link
Member

Talking about style, those Edit/Delete buttons look too much like tags. Should be made at least like the other buttons on the translation editor template.

@amieiro
Copy link
Member Author

amieiro commented Aug 25, 2023

@pedro-mendonca are you talking about making them similar to the "Add translation" button, with small size?

image

@pedro-mendonca
Copy link
Member

The editor has two types, primary (Add translation) and the secondary type for the above buttons.
I think here on the Edit/Delete projects could be one of these types, a smaller version.
All the UI should have the same buttons design.

@amieiro
Copy link
Member Author

amieiro commented Aug 28, 2023

I have tested both buttons and I think the best approach is the secondary type, because I think it is less aggressive for the end user. In the next pictures, you can see both approaches:

The primary button. I discard this approach:

GlotPress 2023-08-28 10-15-35

The secondary button. I discard this option:

GlotPress 2023-08-28 10-19-11

@pedro-mendonca
Copy link
Member

pedro-mendonca commented Aug 28, 2023

I agree, the secondary button looks better.

On the translation sets titles we have actions links for similar functions (edit/delete).
Would it make sense to use the same secondary buttons?

Action links

imagem

Secondary buttons

imagem

@amieiro
Copy link
Member Author

amieiro commented Aug 28, 2023

@pedro-mendonca Yes, it makes sense, of course. I will do this improvement. We have then in:

  1. The project header:

image

  1. the translation set:

image

@pedro-mendonca
Copy link
Member

Maybe is better do open another issue/PR for that :)

@amieiro amieiro requested a review from pedro-mendonca August 28, 2023 08:56
@pedro-mendonca
Copy link
Member

It's looking good.
If a root project (with no parent) is inactive, the bubble doesn't show.
Also, I think would be good to add a class to the row specifying its active/inactive status.

@pedro-mendonca
Copy link
Member

pedro-mendonca commented Sep 3, 2023

@amieiro I suggest using the class button is-small instead of bubble for the actual action buttons and leave the bubble to the actual bubbles. This allows to reuse the existing buttons CSS instead of duplicating.
As you're including also the buttons on this PR, I suggest using it also for Translation Sets and Glossary. I'll add a PR to your branch.

@pedro-mendonca
Copy link
Member

@amieiro please check out my suggestions on amieiro#3

Copy link
Member

@pedro-mendonca pedro-mendonca left a comment

Choose a reason for hiding this comment

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

I've added some suggestions to the PR in amieiro#3

@amieiro
Copy link
Member Author

amieiro commented Sep 14, 2023

I've added some suggestions to the PR in amieiro#3

@pedro-mendonca I am trying to apply this patch to my PR to review it. Thank you!

@amieiro
Copy link
Member Author

amieiro commented Sep 14, 2023

@pedro-mendonca I have applied your PR to my PR, but I can't see anything in the bubble, because it has the background and the text color set to white.

image

@pedro-mendonca
Copy link
Member

pedro-mendonca commented Sep 14, 2023

That doesn't seem like the CSS of my PR.

@pedro-mendonca
Copy link
Member

pedro-mendonca commented Sep 14, 2023

@amieiro I've consolidated the CSS for the inactive bubbles in amieiro@7583d11

imagem

imagem

@amieiro amieiro added the [Type] Enhancement A suggestion for improvement. label Sep 30, 2023
@amieiro amieiro self-assigned this Oct 5, 2023
Copy link
Member

@akirk akirk left a comment

Choose a reason for hiding this comment

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

From my perspective this is good to go! Tested it and the Inactive bubbles appear in the right places, and the Active markers are gone.

@amieiro amieiro enabled auto-merge (squash) October 5, 2023 13:50
@amieiro amieiro merged commit af4285a into GlotPress:develop Oct 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve the way how an active project is highlighted
5 participants