Skip to content

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

Merged
amieiro merged 22 commits into
GlotPress:developfrom
amieiro:highlight-inactive-projects
Oct 5, 2023
Merged

Move the highlight label from the active projects to the inactive#1680
amieiro merged 22 commits into
GlotPress:developfrom
amieiro:highlight-inactive-projects

Conversation

@amieiro

@amieiro amieiro commented Aug 25, 2023

Copy link
Copy Markdown
Member

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
Copy Markdown

@amieiro Lovely

@ocean90

ocean90 commented Aug 25, 2023

Copy link
Copy Markdown
Member

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

amieiro commented Aug 25, 2023

Copy link
Copy Markdown
Member Author

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
Copy Markdown
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

amieiro commented Aug 25, 2023

Copy link
Copy Markdown
Member Author

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

image

@pedro-mendonca

Copy link
Copy Markdown
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

amieiro commented Aug 28, 2023

Copy link
Copy Markdown
Member Author

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

pedro-mendonca commented Aug 28, 2023

Copy link
Copy Markdown
Member

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

amieiro commented Aug 28, 2023

Copy link
Copy Markdown
Member Author

@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
Copy Markdown
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
Copy Markdown
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

pedro-mendonca commented Sep 3, 2023

Copy link
Copy Markdown
Member

@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
Copy Markdown
Member

@amieiro please check out my suggestions on amieiro#3

@pedro-mendonca pedro-mendonca left a comment

Copy link
Copy Markdown
Member

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

amieiro commented Sep 14, 2023

Copy link
Copy Markdown
Member Author

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

amieiro commented Sep 14, 2023

Copy link
Copy Markdown
Member Author

@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

pedro-mendonca commented Sep 14, 2023

Copy link
Copy Markdown
Member

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

@pedro-mendonca

pedro-mendonca commented Sep 14, 2023

Copy link
Copy Markdown
Member

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

imagem

imagem

Comment thread gp-templates/translations.php
@amieiro amieiro added the [Type] Enhancement A suggestion for improvement. label Sep 30, 2023
@amieiro amieiro self-assigned this Oct 5, 2023

@akirk akirk left a comment

Copy link
Copy Markdown
Member

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