Use a glass pane behind our dialogs, make most modal

We now enable the glass pane behind our dialogs and mark it
with a 0.75 opacity so the page disappears while the error
is being presented.

Most dialogs are modal now and will only dismiss through
their own private close buttons.  This forces the user to
interact with the dialog rather than accidentally sending
it away by clicking elsewhere in the window.

Our error dialog no longer relies upon the DialogBox type
from GWT, but instead draws all of its UI itself.  This is
to avoid the dialog from looking ugly when it cannot load
the remaining resources for the borders.

Change-Id: Ieef4370368a28e31810e270c98f7877adc24061a
Signed-off-by: Shawn O. Pearce <sop@google.com>
This commit is contained in:
Shawn O. Pearce
2009-12-30 16:45:11 -08:00
parent e3e283d4ea
commit afdba93915
10 changed files with 84 additions and 50 deletions

View File

@@ -17,27 +17,35 @@ package com.google.gerrit.client;
import com.google.gerrit.client.rpc.RpcConstants;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.StatusCodeException;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwtexpui.safehtml.client.SafeHtml;
import com.google.gwtexpui.user.client.AutoCenterDialogBox;
import com.google.gwtexpui.user.client.PluginSafePopupPanel;
import com.google.gwtjsonrpc.client.RemoteJsonException;
/** A dialog box showing an error message, when bad things happen. */
public class ErrorDialog extends AutoCenterDialogBox {
public class ErrorDialog extends PluginSafePopupPanel {
private final Label text;
private final FlowPanel body;
protected ErrorDialog() {
super(/* auto hide */true, /* modal */true);
setText(Gerrit.C.errorDialogTitle());
super(/* auto hide */false, /* modal */true);
setGlassEnabled(true);
getGlassElement().addClassName(Gerrit.RESOURCES.css().errorDialogGlass());
text = new Label();
text.setStyleName(Gerrit.RESOURCES.css().errorDialogTitle());
body = new FlowPanel();
final FlowPanel buttons = new FlowPanel();
buttons.setStyleName(Gerrit.RESOURCES.css().errorDialogButtons());
final Button closey = new Button();
closey.setText(Gerrit.C.errorDialogClose());
closey.setText(Gerrit.C.errorDialogContinue());
closey.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
@@ -47,10 +55,17 @@ public class ErrorDialog extends AutoCenterDialogBox {
buttons.add(closey);
final FlowPanel center = new FlowPanel();
center.setStyleName(Gerrit.RESOURCES.css().errorDialog());
center.add(text);
center.add(body);
center.add(buttons);
setText(Gerrit.C.errorDialogTitle());
addStyleName(Gerrit.RESOURCES.css().errorDialog());
add(center);
int l = Window.getScrollLeft() + 20;
int t = Window.getScrollTop() + 20;
setPopupPosition(l, t);
}
/** Create a dialog box to show a single message string. */
@@ -95,4 +110,13 @@ public class ErrorDialog extends AutoCenterDialogBox {
body.add(r);
body.add(new Label(what.getMessage()));
}
public void setText(final String t) {
text.setText(t);
}
@Override
public void center() {
show();
}
}

View File

@@ -23,12 +23,14 @@ public interface GerritConstants extends Constants {
String menuSettings();
String signInDialogTitle();
String signInDialogClose();
String linkIdentityDialogTitle();
String registerDialogTitle();
String loginTypeUnsupported();
String errorDialogTitle();
String errorDialogClose();
String errorDialogContinue();
String notSignedInTitle();
String notSignedInBody();

View File

@@ -4,12 +4,14 @@ menuRegister = Register
menuSettings = Settings
signInDialogTitle = Code Review - Sign In
signInDialogClose = Close
linkIdentityDialogTitle = Code Review - Link Identity
registerDialogTitle = Code Review - Register New Account
loginTypeUnsupported = Sign in is not available.
errorDialogTitle = Code Review - Unexpected Error
errorDialogClose = Close
errorDialogTitle = Application Error
errorDialogContinue = Continue
notSignedInTitle = Code Review - Session Expired
notSignedInBody = <b>Session Expired</b>\

View File

@@ -84,6 +84,8 @@ public interface GerritCss extends CssResource {
String drafts();
String emptySection();
String errorDialog();
String errorDialogGlass();
String errorDialogTitle();
String errorDialogButtons();
String errorDialogErrorType();
String fileColumnHeader();

View File

@@ -16,6 +16,7 @@ package com.google.gerrit.client;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.History;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlowPanel;
@@ -25,12 +26,11 @@ import com.google.gwtexpui.user.client.AutoCenterDialogBox;
/** A dialog box telling the user they are not signed in. */
public class NotSignedInDialog extends AutoCenterDialogBox {
public NotSignedInDialog() {
super(/* auto hide */true, /* modal */true);
super(/* auto hide */false, /* modal */true);
setGlassEnabled(true);
setText(Gerrit.C.notSignedInTitle());
final FlowPanel buttons = new FlowPanel();
buttons.setStyleName(Gerrit.RESOURCES.css().errorDialogButtons());
final Button signin = new Button();
signin.setText(Gerrit.C.menuSignIn());
signin.addClickHandler(new ClickHandler() {
@@ -43,7 +43,8 @@ public class NotSignedInDialog extends AutoCenterDialogBox {
buttons.add(signin);
final Button close = new Button();
close.setText(Gerrit.C.errorDialogClose());
DOM.setStyleAttribute(close.getElement(), "marginLeft", "200px");
close.setText(Gerrit.C.signInDialogClose());
close.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
@@ -53,11 +54,10 @@ public class NotSignedInDialog extends AutoCenterDialogBox {
buttons.add(close);
final FlowPanel center = new FlowPanel();
center.setStyleName(Gerrit.RESOURCES.css().errorDialog());
center.add(new HTML(Gerrit.C.notSignedInBody()));
center.add(buttons);
add(center);
setWidth("40em");
center.setWidth("400px");
}
}

View File

@@ -30,6 +30,8 @@ public abstract class SignInDialog extends AutoCenterDialogBox {
*/
protected SignInDialog(final SignInMode signInMode, final String token) {
super(/* auto hide */true, /* modal */true);
setGlassEnabled(true);
this.mode = signInMode;
this.token = token;

View File

@@ -56,6 +56,7 @@ public class UserPassSignInDialog extends SignInDialog {
public UserPassSignInDialog(final String token, final String initialErrorMsg) {
super(SignInMode.SIGN_IN, token);
setAutoHideEnabled(false);
formBody = new FlowPanel();
formBody.setStyleName(UserPassResources.I.css().loginForm());
@@ -148,7 +149,7 @@ public class UserPassSignInDialog extends SignInDialog {
buttons.add(login);
close = new Button();
close.setText(Gerrit.C.errorDialogClose());
close.setText(Gerrit.C.signInDialogClose());
close.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {

View File

@@ -37,7 +37,8 @@ public class AbandonChangeDialog extends AutoCenterDialogBox {
public AbandonChangeDialog(final PatchSet.Id psi,
final AsyncCallback<ChangeDetail> callback) {
super(/* auto hide */true, /* modal */true);
super(/* auto hide */false, /* modal */true);
setGlassEnabled(true);
psid = psi;
addStyleName(Gerrit.RESOURCES.css().abandonChangeDialog());

View File

@@ -14,37 +14,14 @@
package com.google.gerrit.client.changes;
import com.google.gerrit.client.ErrorDialog;
import com.google.gerrit.common.data.ChangeDetail;
import com.google.gerrit.reviewdb.ChangeMessage;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwtexpui.safehtml.client.SafeHtmlBuilder;
import com.google.gwtexpui.user.client.AutoCenterDialogBox;
class SubmitFailureDialog extends AutoCenterDialogBox {
class SubmitFailureDialog extends ErrorDialog {
SubmitFailureDialog(final ChangeDetail result, final ChangeMessage msg) {
super(new SafeHtmlBuilder().append(msg.getMessage().trim()).wikify());
setText(Util.C.submitFailed());
final FlowPanel body = new FlowPanel();
final Widget msgText =
new SafeHtmlBuilder().append(msg.getMessage().trim()).wikify()
.toBlockWidget();
body.add(msgText);
final FlowPanel buttonPanel = new FlowPanel();
Button close = new Button(Util.C.buttonClose());
close.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
hide();
}
});
buttonPanel.add(close);
body.add(buttonPanel);
add(body);
}
}

View File

@@ -288,22 +288,45 @@
/** Error Dialog **/
.errorDialog {
margin: 10px 10px 10px 10px;
background: none;
border: none;
padding: 10px;
width: 600px;
color: white;
font-size: 15px;
font-family: verdana;
}
.errorDialogGlass {
opacity: 0.75;
}
@if user.agent safari {
.errorDialogGlass {
opacity: 0.80;
}
}
@if user.agent ie6 ie8 {
/* IE just doesn't do opacity the way we want, make our dialog
* stand out in a way that it can't be missed against the page
*/
.errorDialog {
color: black;
background: darkgray;
border: 10px groove lightgrey;
}
}
.errorDialogTitle {
font-size: 30px;
font-weight: bold;
margin-bottom: 15px;
}
.errorDialogErrorType {
font-weight: bold;
white-space: nowrap;
margin-bottom: 15px;
}
.errorDialogButtons {
width: 100%;
margin-top: 15px;
text-align: right;
}
.errorDialogButtons .gwt-Button {
margin-left: 2em;
}