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

Improve align of icons in the header on the right side #645

Merged
merged 3 commits into from Apr 3, 2024

Conversation

nckrtl
Copy link
Contributor

@nckrtl nckrtl commented Apr 2, 2024

This PR adds proper alignment of the icons on the right side, before and after:
before-after

What I've done:

  • Extract the svg's and fix alignment in the view box. All svg content was not exactly centered within the view box. I fixed that in Figma, exported them and url encoded the SVG code. Now all icons don't have to be centered with arbitrary values like 6px 6px, instead they are now centered with the center value;
  • Applied proper hex code of #555 to improve uniformity
  • Set fix sizes + flex box props to properly align the history icon
  • Removed padding from the minimise/maximise icons

There was also a line of 1 pixel high separating some elements in header bar from the header bar bottom border div.phpdebugbar-header > div > * this was caused by float: left making the elements being targeted by this css to become 16.31px instead of 16px. Setting a fixed height fixes this.

I also had to adjust the padding on the widgets list item to nicely align them with the close icon:
Screenshot 2024-04-02 at 23 57 19

This PR might come across as being overkill on the spacing and stuff but its part of an extraction of the changes presented here: barryvdh/laravel-debugbar#1601

@erikn69
Copy link
Contributor

erikn69 commented Apr 2, 2024

It seems like you would have conflicts with #644

@nckrtl
Copy link
Contributor Author

nckrtl commented Apr 2, 2024

Partially I think, as my spacing change are still valid. But indeed best to wait for that one to get merged and I'll update this one.

@barryvdh barryvdh merged commit 043febc into maximebf:master Apr 3, 2024
@barryvdh
Copy link
Collaborator

barryvdh commented Apr 3, 2024

The open buttons looks empty. I think it was missing the viewbox, which I added in 1000304
(You can test this in the demo by enabling the open handler in the demo/bootstrap.php

$debugbar = new StandardDebugBar();
$debugbarRenderer = $debugbar->getJavascriptRenderer()
                             ->setBaseUrl('../src/DebugBar/Resources')
                             ->setAjaxHandlerEnableTab(true)
                             ->setOpenHandlerUrl('/')
                             ->setEnableJqueryNoConflict(false);

@barryvdh
Copy link
Collaborator

barryvdh commented Apr 3, 2024

Followup in barryvdh/laravel-debugbar#1603 which replaces the laravel icons (only change the fill in dark mode)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants