{"action":"created","issue":{"url":"https://api.github.com/repos/linuxmint/Cinnamon/issues/4996","repository_url":"https://api.github.com/repos/linuxmint/Cinnamon","labels_url":"https://api.github.com/repos/linuxmint/Cinnamon/issues/4996/labels{/name}","comments_url":"https://api.github.com/repos/linuxmint/Cinnamon/issues/4996/comments","events_url":"https://api.github.com/repos/linuxmint/Cinnamon/issues/4996/events","html_url":"https://github.com/linuxmint/Cinnamon/pull/4996","id":125852437,"number":4996,"title":"Vertical panels","user":{"login":"brownsr","id":6322481,"avatar_url":"https://avatars.githubusercontent.com/u/6322481?v=3","gravatar_id":"","url":"https://api.github.com/users/brownsr","html_url":"https://github.com/brownsr","followers_url":"https://api.github.com/users/brownsr/followers","following_url":"https://api.github.com/users/brownsr/following{/other_user}","gists_url":"https://api.github.com/users/brownsr/gists{/gist_id}","starred_url":"https://api.github.com/users/brownsr/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/brownsr/subscriptions","organizations_url":"https://api.github.com/users/brownsr/orgs","repos_url":"https://api.github.com/users/brownsr/repos","events_url":"https://api.github.com/users/brownsr/events{/privacy}","received_events_url":"https://api.github.com/users/brownsr/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":36,"created_at":"2016-01-10T23:12:30Z","updated_at":"2016-04-09T20:16:44Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/linuxmint/Cinnamon/pulls/4996","html_url":"https://github.com/linuxmint/Cinnamon/pull/4996","diff_url":"https://github.com/linuxmint/Cinnamon/pull/4996.diff","patch_url":"https://github.com/linuxmint/Cinnamon/pull/4996.patch"},"body":"Vertical panels\r\n--------------------\r\nThanks for comments and suggestions/corrections from Dalcde, JosephMcc, Lestcape and mtwebster\r\nDesign features\r\n---------------------\r\n• Horizontal and vertical panels can be mixed freely\r\n• Horizontal panels take precedence\r\n• User functionality essentially unchanged.\r\n• Panels display in bottom, side, top sequence so that shadow from one panel falls naturally on another\r\n• Panels can be moved freely between horizontal and vertical formats\r\n• As for horizontal panels, the centre box in a vertical panel positions with equal space between the applets in the top and bottom boxes\r\n• IconApplets can be placed in any panel.  All other 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.\r\n• Long applets like the panel launcher, the systray and the workspace switcher orient themselves correctly on vertical panels, and reorient automatically when dragged. \r\n• 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.\r\n\r\nThe menu applet suppresses its label in a vertical panel, as it will not fit.\r\nCalendar 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.\r\n\r\nNote 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\r\n\r\nWhat does it look like ?:\r\n----------------------------\r\n\r\nRecent snapshot  (28th Feb 16):  http://imgur.com/1H7Woqc  Launchers are on the left and window list on the right.  Another snapshot (28th Mar 16): http://imgur.com/wlylZTm  showing the effect of adding top and left margin to the css for left and right panels\r\n\r\nTo do:\r\n--------\r\n\r\nRight to left text untested, as I do not read any languages of this nature.\r\n\r\nBugs\r\n-------\r\nThere are minor alignment issues and non-ideal popup menus when moving a panel from top to side. Fine after a cinnamon restart.\r\n\r\npre-existing bugs, still there:\r\n-------------------------------------\r\n\r\nCorner display and autohide do not play nicely with each other. Issue there in in 17.3 as well, so not a regression.  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.  \r\n\r\nNotes for 3rd party applet designers\r\n-----------------------------------------------\r\n\r\nApplets 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.\r\n\r\nApplets 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, an example being the popular weather applet.  This will mess up the central alignment unless suppressed.\r\n\r\nAll 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.\r\n\r\nThe mechanism for doing this is very simple, just place a call to getDisplayLayout in your code:\r\n\r\n```javascript\r\n//\r\n//override getDisplayLayout to declare that this applet is suitable for both horizontal and\r\n// vertical orientations\r\n//\r\n    getDisplayLayout: function() {\r\n        return Applet.DisplayLayout.BOTH;\r\n    },\r\n```\r\nAny 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:\r\n\r\n```javascript\r\n\r\n    on_orientation_changed: function (orientation) {\r\n        this.orientation = orientation;\r\n\r\n        if (this.orientation == St.Side.LEFT || this.orientation == St.Side.RIGHT) { // vertical\r\n       ...\r\n       } else { // horizontal\r\n        ...\r\n       }\r\n...\r\n    }\r\n```\r\nIf 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)\r\n\r\nWhere 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.\r\n\r\nOne 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.\r\n\r\n```javascript\r\n\r\nMyApplet.prototype = {\r\n    __proto__: Applet.IconApplet.prototype,\r\n\r\n    _init: function(metadata, orientation, panel_height, instance_id) {\r\n        Applet.IconApplet.prototype._init.call(this, orientation, panel_height, instance_id);\r\n```\r\n\r\n\r\nNotes for theme designers\r\n----------------------------------\r\n\r\nA 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)\r\n\r\nIf 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. By default applets will be centred.\r\n\r\nThe 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.\r\n\r\nThe .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."},"comment":{"url":"https://api.github.com/repos/linuxmint/Cinnamon/issues/comments/207847965","html_url":"https://github.com/linuxmint/Cinnamon/pull/4996#issuecomment-207847965","issue_url":"https://api.github.com/repos/linuxmint/Cinnamon/issues/4996","id":207847965,"user":{"login":"lestcape","id":1389572,"avatar_url":"https://avatars.githubusercontent.com/u/1389572?v=3","gravatar_id":"","url":"https://api.github.com/users/lestcape","html_url":"https://github.com/lestcape","followers_url":"https://api.github.com/users/lestcape/followers","following_url":"https://api.github.com/users/lestcape/following{/other_user}","gists_url":"https://api.github.com/users/lestcape/gists{/gist_id}","starred_url":"https://api.github.com/users/lestcape/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/lestcape/subscriptions","organizations_url":"https://api.github.com/users/lestcape/orgs","repos_url":"https://api.github.com/users/lestcape/repos","events_url":"https://api.github.com/users/lestcape/events{/privacy}","received_events_url":"https://api.github.com/users/lestcape/received_events","type":"User","site_admin":false},"created_at":"2016-04-09T20:16:44Z","updated_at":"2016-04-09T20:16:44Z","body":"@brownsr that is really nice. Can be decide which panel layout commands the desktop?\r\n![panels](https://cloud.githubusercontent.com/assets/1389572/14406177/8f1dc5b0-fe65-11e5-91a2-514f8432d02e.png)"}}