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

Add Windows 10 style window titlebar #508

Open
wants to merge 3 commits into
base: master
from

Conversation

Projects
None yet
2 participants
@spikespaz

spikespaz commented Sep 23, 2018

I have added the basic SVGs for this, added to the settings menu, and created the theme setting. I'm not sure if I did it properly, it took a lot of guesswork since I've never used Node or React before. It works, with a few caveats.

  • The icon in the settings menu looks terrible. I couldn't figure out how to make it, because I don't understand very well how SVG viewboxes work in conjunction with width and height.

  • The titlebar buttons are on the left. I got them on the right in the correct position using text-align: right; right: 1px; in the browser developer tools on the .window-controls class, but could not figure out hoe to make the changes in the code itself. My attempt in the file components/Carbon.js can be seen below, added somewhere around line 219.

.container :global(.window-theme__sharp > .CodeMirror),
.container :global(.window-theme__win > .CodeMirror) {
  border-radius: 0px;
}

.container :global(.window-theme__bw > .CodeMirror) {
  border: 2px solid ${COLORS.SECONDARY};
}

.container :global(.window-theme__win + .window-controls) {
  text-align: right;
  right: 1px; /* Necessary to match Windows titlebar exactly. */
}

image

With the above CSS, the style is pixel-perfect to match Windows. Unfortunately the positioning is not.

This pull request needs work, but I'm not sure how to do it myself. I hope this addition is sufficient for the maintainers to work off of.

@now

This comment has been minimized.

Show comment
Hide comment
@now

now bot Sep 23, 2018

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

now bot commented Sep 23, 2018

This pull request is automatically deployed with Now.
To access deployments, click Details below or on the icon next to each push.

@mfix22 mfix22 requested a review from jakedex Sep 24, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment