Support of custom window controls layout

[sempasha]

According to the issue pantheon-tweaks/pantheon-tweaks#113 users will be able to configure any window controls layout with Pantheon Tweak. Theme architecture may require some changes when this feature will be implemented.

Draft solution

According to the mockup, each of window's buttons (close ⨯, maximize ⤢ and minimize ⤓) may be placed at one of six positions.

[1 2 3        window title        4 5 6]

There may be three folders close, maximize and minimize - one for each of buttons.
Inside button's folder there may be six stylesheets - one for each of possible button positions.

📁 close
  📜 1.css
  📜 2.css
  📜 3.css
  📜 4.css
  📜 5.css
  📜 6.css
📁 maximize
  📜 1.css
  ...
  📜 6.css
📁 minimize
  📜 1.css
  ...
  📜 6.css

After installation chrome folder will contains userChrome.css with optional close.css, maximize.css and minimize.css stylesheets.

📁 chrome
  📜 userChrome.css
  📜 close.css
  📜 maximize.css
  📜 minimize.css

userChrome.css stylesheet will import buttons stylesheets with CSS @import

@import "close.css";
@import "maximize.css";
@import "minimize.css";

Installation script will copy close.css, maximize.css and minimize.css according detected (or selected) window controls layout, e.g. when default elementary layout selected, script will

# place close button at first position
wget https://github.com/[theme]/close/1.css --output chrome/close.css
# place maximize button at sixth position
wget https://github.com/[theme]/maximize/6.css --output chrome/maximize.css
# remove minimize button, because there is no such button at default elementary layout
rm chrome/minimize.css

[Zonnev]

I have made some thoughts about this, but this is a good idea to do when Pantheon Tweaks finally comes with their new feature. Then I will also know what sort of layout they start from. They will probably make a new default layout showing (and hiding) all 6 buttons, 3 on each side like you showed. Right now I don't have such a layout to start from and Pantheon Tweaks neither. We have Windows, Ubuntu and macOS layout, but they are separate and I don't think they will use these layouts as default because they don't show 3 buttons on each side.

In short, we first need to know what the layout is Pantheon Tweaks will be using. Then I can work positioning the buttons from that point and we can roll out the css's in the architecture you provided.

Thanks for informing me about the coming new feature of Pantheon Tweaks :) I will save it for the future.

[sempasha]

Additional note about idea of windows controls placement.

There are only three buttons possible:

1. close ⨯;
2. maximize ⤢;
3. and minimize ⤓.

There are only six places you can put buttons on - three at left side of titlebar and three at right side:

[1 2 3     window title     4 5 6]

For Windows layout places 4, 5 and 6 are used:

[          window title     ⤓ ⤢ ⨯]

For MacOS layout places 1,2 and 3 are used:

[⨯ ⤓ ⤢     window title          ]

For Elememtary layout places 1 and 6 are used

[⨯         window title         ⤢]

And so on.

[Zonnev]

Note to self: there is a 4th button called .titlebar-restore, combine it in the maximize css files.