[3.2] Vertical panels

[brownsr]

Vertical panels

Thanks for comments and suggestions/corrections from Dalcde, JosephMcc, Lestcape and mtwebster

What this does

• Horizontal and vertical panels can be mixed freely
• Horizontal panels take precedence
• User functionality essentially unchanged.
• Panels display in bottom, side, top sequence so that shadow from one panel falls naturally on another
• Panels can be moved freely between horizontal and vertical formats
• Applets have to declare their suitability for placement in a vertical panel. This gives protection against 3rd party applets that are not coded to fit a vertical panel.
• Long applets like the panel launcher, the systray and the workspace switcher orient themselves correctly on vertical panels, and reorient automatically when dragged.
• CSS has been added to the default theme for left and right panels, boxes in vertical panels, panel launcher, window-list, the separator, and the general applet-box. Code uses the 'important' property for the new CSS so that existing themes should function.
• Margin can be added to the CSS so that panels can be indented at their ends
• If you mix horizontal and vertical panels the popup menus adjust to keep from covering any panel

The menu applet suppresses its label in a vertical panel, as it will not fit.
Calendar date display format is set to %H%n%M in a vertical panel, as it is all that will fit with a typical default font.

Note that there are some generally suitable applets that will need some simple configuration to look right, these are ones that present themselves as IconApplets but put additional information out on the screen. For example the popular 3rd party 'weather' applet will need the additional panel fields for temperature and condition turned off

What this does not do

Dynamic resizing of vertical panels when horizontal panels hide themselves
Changes to mint themes other than the default cinnamon theme. These are in separate PRs

Current Position

Stable, merged.
Known bugs:

• Corners [which are hardly used anywhere] can layer above shadow.
• One pre-existing corner/panel autohide bug [below].

Not tested:

Right to left text untested, as I do not read any languages of this nature.

Pre-existing bugs, still there:

Corner display and autohide do not play nicely with each other. Issue there in in 17.3 as well. In the production version the corner eats into the panel (http://imgur.com/6GsDyYo) as well as appearing to not be functional on bottom panels, and on redisplay everything except the proportion that eats into the panel is lost on redisplay. In this PR the corner is all outside the panel and this is all lost on redisplay at the moment.

Notes for 3rd party applet designers

Applets for placing in a vertical panel have to fit. In practice that means there is space for an icon, nothing else. Placing larger applets in a vertical panel disturbs the alignment of all other applets in that part of the panel, and it all will look very broken, so protection has been added to guard against that.

Applets based around IconApplet are assumed to be suitable for vertical panels and can be placed there. However if you maintain one of these then please do check they work OK - your applet may write additional information out to the screen that Cinnamon does not know about when the applet is loaded. This will mess up the central alignment unless suppressed.

All other applets need an explicit declaration in their code that they work in a vertical panel. If this is not done then a user will simply not be able to place them there from the applet manager, or by drag and drop in panel edit mode, and they will be turned off if moving a whole panel from a horizontal to a vertical position.

The mechanism for doing this is very simple, just place a call in your code:

    this.setAllowedLayout(Applet.AllowedLayout.BOTH);

Any sophisticated applet may well need logic that has different actions dependent on the type of panel it is in, so would need a call coded like this:

    on_orientation_changed: function (orientation) {
        this.orientation = orientation;

        if (this.orientation == St.Side.LEFT || this.orientation == St.Side.RIGHT) { // vertical
       ...
       } else { // horizontal
        ...
       }
...
    }

If you have an applet with a label that needs suppressing in a vertical panel, you will need code that explicitly shows or hides the label like this:

    on_orientation_changed: function(orientation) {
        if (orientation == St.Side.LEFT || orientation == St.Side.RIGHT)
            this.hide_applet_label(true);
        else
            this.hide_applet_label(false);
    },

If you have long multi-element applets like the window list, the panel launcher, the workspace switcher or the systray then it is likely you will have to intermediate a management container that can facilitate switching between horizontal and vertical modes. Take a look at the code in these standard applets as a start (github: Cinnamon/files/usr/share/cinnamon/applets) If you have an applet that changes its dimension then take a look at the spacer applet code for a starting point.

Where different CSS is needed for vertical and horizontal presentations then this has been done by including .vertical additional CSS. Again, take a look at the panel launcher or window list standard applets for how to use this - add 'vertical' style in a vertical panel, take it off again in a horizontal panel.

One last thing is to ensure that your code uses the current parameters and calls to init(). If your code does not include the panel height and orientation parameters and use them in an init call then it is likely your applet will a) come up the wrong size when added until the next Cinnamon restart b) orient off-centre in a vertical panel, until the next Cinnamon restart c) have sub-standard popup menu alignment . Take a look at the stock applets in github: Cinnamon/files/usr/share/cinnamon/applets if in doubt.

MyApplet.prototype = {
    __proto__: Applet.IconApplet.prototype,

    _init: function(metadata, orientation, panel_height, instance_id) {
        Applet.IconApplet.prototype._init.call(this, orientation, panel_height, instance_id);

Notes for theme designers

A number of .vertical CSS style variants had to be added, and there are a few cases in the 'panel' CSS where reference by name (#) had to be replaced with the css style (.) reference. In general there are not many changes though, and you can see the master set in the default cinnamon theme (github: Cinnamon/data/theme/cinnamon.css)

If you want to make something suitable for a vertical panel, the key thing is to avoid margin/padding to the left and right if at all possible - things in a vertical panel look best centred.

The boxes in a vertical panel are styled panelLeft, panelCenter, and panelLeft for the left panel (top to bottom order) and panelRight, panelCenter, panelRight for the right panel. This is because most themes are symmetric in the way they treat the two panel boxes either side of the central one.

The .panel-left and .panel-right css is inspected for margin-top and margin-bottom, and the left and right panels are shifted in top and bottom accordingly, as I had requests to allow vertical panels to be shifted inwards from the top and bottom. For consistency the same was done for margin-left and margin-right for horizontal panels.

[xtemp09]

When will it be implemented?

[brownsr]

Intended for cinnamon 3.2 at the moment
On 30 Jun 2016 1:50 p.m., "xtemp09" notifications@github.com wrote:

When will it be implemented?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#4996 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AGB5MS6V6crcycGQmDAZw91ketIQQx9lks5qQ7uKgaJpZM4HB-6q
.

[xtemp09]

Thanks, I was about to give up.

[brownsr]

Another (very trivial) PR of mine has been inadvertently caught up in this catch-up to the latest master, that will teach me to make even the smallest PR direct on a master branch ;) I can remove it later if it causes a problem, but I doubt it will.

[JosephMcc]

Is there some reason you can't just add a simple style class of "bottom, top, right, left" here and avoid the convoluted naming? Much easier to just use "window-list-item-box.right" instead of "window-list-item-box.window-list-item-box-right". Also stays more in line with what you typically see in gtk.

[brownsr]

Completely agree. I'd left it in line with what was there previously, but everytime I come back and look at this it jars horribly. I was thinking of making the changes you suggest anyway, so I'll do that now.

[brownsr]

@JosephMcc : Hopefully all your comments are acted on now

[mtwebster]

I tested this again - I have a request and a slight bug to report:

• Can you squash this down to maybe a handful of commits that make reasonable sense? Even less than 10 or 15 would be cool. As soon as you do this I'll merge it. Also, merging the settings revamp PR as well as one other merge last couple days has caused a couple if simple conflicts - my resolved merge is here: mtwebster@b4707c1 if you want to compare, but they're very minot

The bug - I think? - Adding the stock menu applet to a vertical panel works fine - I like that it just shows the icon, however it doesn't seem to declare itself as a vertical-compatible applet (by implementing getDisplayLayout()) - it just looks at the orientation and acts accordingly.

But, you check here - https://github.com/linuxmint/Cinnamon/pull/4996/files#diff-58e0680d2516e9e58237cf48a393a29bR350 - for what type of applet it is, and a TextIconApplet is an IconApplet, so we end up letting both of those types through (try weather@mockturtl). I think this is easily resolved by adding && !(applet instanceof Applet.TextIconApplet) to that if statement, and making the menu applet actually report that it's a well-behaved vertical panel applet.

[brownsr]

@mtwebster There are associated PRs against mint-y-theme and cinnamon-themes
Can you squash it all into one commit when you merge ? There appears to be a recent github facility to do that, from what I read. The gazillion contradictory tutorials on how to squash commits are doing my head in, as none of them seem to describe what to do with all the other people's commits I see, as I have brought it up to date with master to resolve conflicts a number of times. And I don't want to mess things up for you, of course.

Hope to find some time to do the squashing this weekend (13th). If I have problems I will try to merge --squash onto a new branch and will push that instead.

[collinss]

@brownsr I had to deal with this issue recently with my xlet settings pr. What you need is an interactive rebase. I found the instructions here to be quite helpful. Basically just checkout the branch (if not already there), git rebase --interactive HEAD~116, when the text file opens replace pick with "s" or "squash" for every commit you want to merge into the previous (all but the first if you want to squash down to a single commit), save and quit. After you do this, you will need to force push to origin as you've rewritten the history (I like to make a backup clone of my repository so I don't lose my git history if I make a mistake).

[brownsr]

@mtwebster Can you merge squash from what is here ? I've successfully rebased the smaller changes on mint-y-theme and cinnamon-themes but I appear to have met problems with my local git repository trying to create a squashed Cinnamon commit. I've tried completely removing my local repository and re-cloning from my github account to do it all again, but there must be configuration files associated that I have not reset properly, as git is not behaving as I would expect with a fresh clone. Basically I dare not now push to my github Cinnamon repository without risking destroying my one viable copy of this PR. If you can squash to one commit when you merge then that would be perfect.

[mtwebster]

I'll see what I can do tonight, worst case I may lose the 'merge' commit that auto-closes this PR.

I'm sure the ground will still shudder and we'll hear the singing of angels regardless, when this feature gets merged :)

[clefebvre]

I'd like to get this in as well. I created a slack channel for this. I don't have your email address to send you an invitation @brownsr :(

[markfilipak]

I'm not a developer. I'm just a hardware engineer. But I know what I like, and I greatly like vertical menus with vertical text -- it leaves more vertical space for more lines of text. The picture is of TextPad (a programmer's editor) running in a WinXP virtual machine hosted by Linux Mint Cinnamon. To cite a Linux example, XFCE also supports vertical panels with vertical text. Please do this in Cinnamon, and make it available to users. You will spread Joy. And thank you for your work on our behalf. -- Mark.