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

Use size class for all icons, not just symbols #149

Conversation

MarkEWaite
Copy link
Contributor

@MarkEWaite MarkEWaite commented May 13, 2024

Use size class for all icons, not just symbols

Symbols do not require height or width but icons without height and width will render at their original size instead of rendering at the standard size for icons.

Fixes #148

Testing done

Confirmed that before this change, the following icon renders incorrectly as a 48x48 image:

addBadge(icon: '/images/48x48/light-grey.gif', text: 'large icon')

Confirmed that before this change, the following icon renders correctly:

addBadge(icon: 'symbol-star plugin-ionicons-api', text: 'a starred build')

Confirmed that after this change, the following icon renders correctly as a 16x16 image:

addBadge(icon: '/images/48x48/light-grey.gif', text: 'large icon')

Confirmed that after this change, the following icon renders correctly:

addBadge(icon: 'symbol-star plugin-ionicons-api', text: 'a starred build')

Submitter checklist

Preview Give feedback

Symbols do not require height or width but icons without height and
width will render at their original size instead of rendering at 16x16.

Fixes jenkinsci#148
@MarkEWaite MarkEWaite requested a review from a team as a code owner May 13, 2024 22:22
@mPokornyETM
Copy link
Contributor

my proposal are not mandatory, @MarkEWaite let me know if you want to change it or not.

@MarkEWaite
Copy link
Contributor Author

my proposal are not mandatory, @MarkEWaite let me know if you want to change it or not.

Thanks for your comment @mPokornyETM . I didn't see any proposed changes in your comment. Maybe your proposed changes are not yet submitted?

@mPokornyETM
Copy link
Contributor

Maybe your proposed changes are not yet submitted?

sorry, I mean my comments

@MarkEWaite
Copy link
Contributor Author

I've replaced indexOf with startsWith so that the code is clearer. Interactive testing of the failure case shows that the change is behaving as I had expected.

I'd like a review from @strangelookingnerd if time allows. However, I'd also like to resolve the bug before the end of the week if possible. My interactive testing of #130 did not detect that regression and I'd like to fix it promptly so that other users are not disturbed by it.

Copy link
Contributor

@mPokornyETM mPokornyETM left a comment

Choose a reason for hiding this comment

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

LGTM

<!-- Icons that are not symbols need height and width -->
<j:if test="${it.iconPath.indexOf('symbol-') != 0}">
<j:if test="${it.link == null}">
<l:icon src="${it.iconPath}" class="${it.iconClass}" style="${badgeStyle}" htmlTooltip="${it.text}" height="16" width="16" />
Copy link
Contributor

Choose a reason for hiding this comment

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

I am not taotally happy with hardcoded numbers. Are there no spacing in the design-library ?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That's a very good question. @janfaracik is there a better way to express this? I'm a novice with Jelly and even more of a novice with CSS and page layout.

Copy link
Contributor

Choose a reason for hiding this comment

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

@MarkEWaite I think we could get away with removing the width and height attributes and delegate the sizing to class here.
By removing the if check in

the icon would always use the class icon-sm and thus be sized correctly. No hardcoded size required.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks very much for the recommendation. That makes the code much simpler and avoids conditional logic in the jelly file. Implemented in 535e18f

@mPokornyETM mPokornyETM added the bug Something isn't working label May 14, 2024
@strangelookingnerd
Copy link
Contributor

I've replaced indexOf with startsWith so that the code is clearer. Interactive testing of the failure case shows that the change is behaving as I had expected.

I'd like a review from @strangelookingnerd if time allows. However, I'd also like to resolve the bug before the end of the week if possible. My interactive testing of #130 did not detect that regression and I'd like to fix it promptly so that other users are not disturbed by it.

I‘ll have a look at it later today, tomorrow latest.

@strangelookingnerd strangelookingnerd self-assigned this May 14, 2024
Uses the common way of specifying sizes now instead of explicitly
declaring height and width attributes of the image.

Simplifies the code dramatically and avoids conditionals in the jelly file.
@MarkEWaite MarkEWaite changed the title Set height and width for icons that are not symbols Use size class for all icons, not just symbols May 17, 2024
@strangelookingnerd strangelookingnerd merged commit e125932 into jenkinsci:master May 17, 2024
17 checks passed
@MarkEWaite MarkEWaite deleted the set-geometry-for-old-style-icons branch June 22, 2024 21:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Width and height are not set for large icons (addBadge)
3 participants