Add Windows 10 style window titlebar

[spikespaz]

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. */
}

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.

[vercel]

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

[mfix22]

Closing this as wontfix. It is not that we don't want to support Windows users, it is just that the style doesn't fit in with the rest of Carbon.

[spikespaz]

@mfix22 So basically you don't want to support Windows users.

[nogweii]

I am confused about this decision as well, where does it not fit in?

[mfix22]

Sorry. To reiterate, we want to support it, I just want the design of the feature to fit it more with the design of the current components, meaning it fits the current aesthetic. For that reason, our team will be building out the SVGs for it 👍

Secondly, this branch has not been mergeable for months, so I thought you no longer wanted to champion this feature. It is apparent that is not true.

Going forward, please keep the discussion positive — there is plenty of room to argue your case for keeping the feature without strawman-ing our team.

[spikespaz]

@mfix22 I understand your point. You are correct, if you feel that the team could make better SVGs that "feel like Windows" and integrate with the existing style of Carbon, go for it.

To address your second point; yes, I agree, this PR is incomplete and should not be merged yet. That is why I asked for help.

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 how to make the changes in the code itself.

Basically I was requesting assistance with this, because I wasn't sure where to put the CSS that positions the titlebar buttons on the right of the window.

For your third statement, what negativity did you see? Neither me nor @evaryont understood the reasoning behind closing this PR with no further comment. Your statement seemed to be an oxymoron, contradicting itself without further reasoning. My apologies if any offense was taken. Perhaps my reply was rash.

[mfix22]

Understood, I appreciate you explaining yourself. I never meant for closing the PR to be a permanent resolution — we could always open a new PR or reopen this one.

I will look into supporting this feature while staying true to the Carbon aesthetic.

[gioragutt]

Make the controls picking a bit cleaner and open to additions of more controls.

[gioragutt]

Replace this with f.e an object:

const controls = {
  bw: <ControlsBW />,
  win: <ControlsWin />
}

{ controls[theme] || <Controls /> }

[binyamin]

@mfix22 just wondering what the status on this is? The age of this PR gave me the impression that this is not an active repo.

[mfix22]

@b3u this repo is still very much active, we have just had more important priorities to improving the application and code. We still want to support this, but in a way that stays true to the original style/brand/theme of Carbon.

My apologies for the delay. Are you waiting on the Windows theme yourself? Or were you more just concerned about how active the repo is? 🙂

[binyamin]

I had a PR I was going to make, and subsequently made; I was unsure about whether it would get merged. That's all.

[mfix22]

@b3u I am going to take a look at this feature tomorrow. If you have a version you want me to consider, please push up a PR 🙂