isa/gnome-shell
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

loginDialog: use two column view if banner message long

Browse Source 
Frequently banner messages are longer than can reasonable
fit in a one column view, which leads to a smooshed layout.

This commit changes the layout to a two column view, with the
banner on the left and the prompt on the right, if the banner
message is long enough that it can't fit well above the prompt.
If there isn't enough space for two columns then we keep the
one column layout but add scrollbars.

https://bugzilla.gnome.org/show_bug.cgi?id=703972
This commit is contained in:
Ray Strode 2014-11-11 09:11:01 -05:00
parent 117a81e06f
commit 7b9be2188a
1 changed files with 52 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
js/gdm/loginDialog.js
View File

@ -537,6 +537,7 @@ const LoginDialog = new Lang.Class({
},
_onAllocate: function (actor, dialogBox, flags) {
let dialogWidth = dialogBox.x2 - dialogBox.x1;
let dialogHeight = dialogBox.y2 - dialogBox.y1;
// First find out what space the children require
@ -551,9 +552,11 @@ const LoginDialog = new Lang.Class({
let authPromptAllocation = null;
let authPromptHeight = 0;
let authPromptWidth = 0;
if (this._authPrompt.actor.visible) {
authPromptAllocation = this._getCenterActorAllocation(dialogBox, this._authPrompt.actor);
authPromptHeight = authPromptAllocation.y2 - authPromptAllocation.y1;
authPromptWidth = authPromptAllocation.x2 - authPromptAllocation.x1;
}
let userSelectionAllocation = null;
@ -570,7 +573,9 @@ const LoginDialog = new Lang.Class({
logoHeight = logoAllocation.y2 - logoAllocation.y1;
}
// Then figure out what extra space we can hand out
// Then figure out if we're overly constrained and need to
// try a different layout, or if we have what extra space we
// can hand out
if (bannerAllocation) {
let leftOverYSpace = dialogHeight - bannerHeight - authPromptHeight - logoHeight;
@ -584,8 +589,45 @@ const LoginDialog = new Lang.Class({
bannerAllocation.y1 += yShift;
bannerAllocation.y2 += yShift;
} else {
// recompute banner height to be constrained if there's no room for its
// requested height
// Then figure out how much space there would be if we switched to a
// wide layout with banner on one side and authprompt on the other.
let leftOverXSpace = dialogWidth - authPromptWidth;
// In a wide view, half of the available space goes to the banner,
// and the other half goes to the margins.
let wideBannerWidth = leftOverXSpace / 2;
let wideSpacing = leftOverXSpace - wideBannerWidth;
// If we do go with a wide layout, we need there to be at least enough
// space for the banner and the auth prompt to be the same width,
// so it doesn't look unbalanced.
if (authPromptWidth > 0 && wideBannerWidth > authPromptWidth) {
let centerX = dialogBox.x1 + dialogWidth / 2;
let centerY = dialogBox.y1 + dialogHeight / 2;
// A small portion of the spacing goes down the center of the
// screen to help delimit the two columns of the wide view
let centerGap = wideSpacing / 8;
// place the banner along the left edge of the center margin
bannerAllocation.x2 = centerX - centerGap / 2;
bannerAllocation.x1 = bannerAllocation.x2 - wideBannerWidth;
// figure out how tall it would like to be and try to accomodate
// but don't let it get too close to the logo
let [wideMinHeight, wideBannerHeight] = this._bannerView.get_preferred_height(wideBannerWidth);
let maxWideHeight = dialogHeight - 3 * logoHeight;
wideBannerHeight = Math.min(maxWideHeight, wideBannerHeight);
bannerAllocation.y1 = centerY - wideBannerHeight / 2;
bannerAllocation.y2 = bannerAllocation.y1 + wideBannerHeight;
// place the auth prompt along the right edge of the center margin
authPromptAllocation.x1 = centerX + centerGap / 2;
authPromptAllocation.x2 = authPromptAllocation.x1 + authPromptWidth;
} else {
// If we aren't going to do a wide view, then we need to limit
// the height of the banner so it will present scrollbars
// First figure out how much space there is without the banner
leftOverYSpace += bannerHeight;
@ -596,6 +638,7 @@ const LoginDialog = new Lang.Class({
// Then give all of that space to the banner
bannerAllocation.y2 = bannerAllocation.y1 + availableTopSpace;
}
}
} else if (userSelectionAllocation) {
// Grow the user list to fill the space
let leftOverYSpace = dialogHeight - userSelectionHeight - logoHeight;