vscode icon indicating copy to clipboard operation
vscode copied to clipboard

Fix traffic light centering on macOS

Open klaussner opened this issue 1 year ago • 2 comments

Fixes #208226.

This PR makes two changes to the traffic light centering logic for macOS (see the linked issue for a screenshot of the problem):

  • The traffic light icons have a height of 12px. A margin of 2px is added at the top and bottom, so the total height for centering is 16px.
  • If the title bar height is odd (i.e., if the command center is enabled), the result of (options.height - 16) / 2 is also odd. In this case, Electron rounds up the value. To make the offset look better, the value is rounded down instead.

klaussner avatar May 10 '24 20:05 klaussner

Edit: These screenshots are out of date. See my comment below for an updated version.

Here are two screenshots showing the result (with and without command center enabled):

Fix with command center Fix without command center

klaussner avatar May 11 '24 17:05 klaussner

I made another small change to the traffic light position. In most Mac apps, the distance between the traffic lights and the window frame is the same horizontally and vertically. The positioning in this PR is based on an invisible margin around the traffic lights, shown in this image:

Traffic lights

Here are two updated screenshots of the final result (command center enabled on the left, disabled on the right):

Traffic lights

klaussner avatar Oct 18 '24 17:10 klaussner

@benibenj Would it be possible to include this in one of the next releases?

klaussner avatar Nov 05 '24 10:11 klaussner

I'll try and have a look at it this month.

benibenj avatar Nov 06 '24 12:11 benibenj