From: Christos Stathis Date: Fri, 25 Nov 2011 16:25:07 +0000 (+0200) Subject: First implementation of the new invitations dialog X-Git-Tag: v0.1~63 X-Git-Url: https://code.grnet.gr/git/pithos-web-client/commitdiff_plain/11c9e6f55ba9759087fcd1e9a0254fe84606c500 First implementation of the new invitations dialog --- diff --git a/src/gr/grnet/pithos/web/client/InvitationsDialog.java b/src/gr/grnet/pithos/web/client/InvitationsDialog.java index 5177b2d..f13648b 100644 --- a/src/gr/grnet/pithos/web/client/InvitationsDialog.java +++ b/src/gr/grnet/pithos/web/client/InvitationsDialog.java @@ -61,14 +61,9 @@ import com.google.gwt.user.client.ui.VerticalPanel; * A dialog box that displays info about invitations */ public class InvitationsDialog extends DialogBox { - - private final String WIDTH_FIELD = "35em"; - private final String WIDTH_TEXT = "42em"; - Pithos app; - TextBox name; - TextBox emailBox; - + VerticalPanel messagesPanel; + int rows = 0; /** * The widget constructor. */ @@ -84,7 +79,7 @@ public class InvitationsDialog extends DialogBox { } }); // Set the dialog's caption. - setText("Invite people (" + inv.getInvitationsLeft() + " invitations left)"); + setText("Invite friends"); setAnimationEnabled(true); setGlassEnabled(true); setStyleName("pithos-DialogBox"); @@ -94,67 +89,101 @@ public class InvitationsDialog extends DialogBox { VerticalPanel inner = new VerticalPanel(); inner.addStyleName("inner"); // Create the text and set a style name so we can style it with CSS. - HTML text = new HTML("You have " + inv.getInvitationsLeft() + " invitations left in your account."); - text.setStyleName("pithos-credentialsText"); - text.setWidth(WIDTH_TEXT); + HTML text = new HTML("You have " + inv.getInvitationsLeft() + " invitations left"); + text.addStyleName("pithos-invitationsLeft"); inner.add(text); - FlexTable table = new FlexTable(); - if (inv.getInvitationsLeft() > 0) { - table.setText(0, 0, "Name"); - table.setText(1, 0, "E-mail"); - } - name = new TextBox(); - name.setWidth(WIDTH_FIELD); - name.setVisible(inv.getInvitationsLeft() > 0); - table.setWidget(0, 1, name); + HorizontalPanel split = new HorizontalPanel(); - emailBox = new TextBox(); - emailBox.setWidth(WIDTH_FIELD); - emailBox.setVisible(inv.getInvitationsLeft() > 0); - table.setWidget(1, 1, emailBox); + VerticalPanel left = new VerticalPanel(); + left.addStyleName("pithos-sendInvitationsPanel"); + left.setVisible(inv.getInvitationsLeft() > 0); - table.getFlexCellFormatter().setStyleName(0, 0, "props-labels"); - table.getFlexCellFormatter().setStyleName(0, 1, "props-values"); - table.getFlexCellFormatter().setStyleName(1, 0, "props-labels"); - table.getFlexCellFormatter().setStyleName(1, 1, "props-values"); - inner.add(table); + HorizontalPanel sendLabelPanel = new HorizontalPanel(); + HTML sendLabel = new HTML("Send new invitations"); + sendLabel.addStyleName("pithos-sendInvitationsTitle"); + sendLabelPanel.add(sendLabel); + Image plus = new Image("images/plus.png"); + plus.addStyleName("pithos-addInvitationImg"); + sendLabelPanel.add(plus); + left.add(sendLabelPanel); - Button confirm = new Button("Send", new ClickHandler() { + messagesPanel = new VerticalPanel(); + messagesPanel.setSpacing(5); + left.add(messagesPanel); + + final FlexTable table = new FlexTable(); + left.add(table); + plus.addClickHandler(new ClickHandler() { + @Override public void onClick(ClickEvent event) { - sendInvitation(emailBox.getText().trim(), name.getText().trim()); + if (rows == 0) { + table.setHTML(0, 0, "Name e.g. John Smith"); + table.getFlexCellFormatter().setStyleName(0, 0, "props-labels"); + table.setText(0, 1, "Email"); + table.getFlexCellFormatter().setStyleName(0, 1, "props-labels"); + rows++; + } + table.setWidget(rows, 0, new TextBox()); + table.getFlexCellFormatter().setStyleName(1, 0, "props-values"); + + table.setWidget(rows, 1, new TextBox()); + table.getFlexCellFormatter().setStyleName(1, 1, "props-values"); + + Image delete = new Image("images/delete.png"); + delete.addStyleName("pithos-invitationDeleteImg"); + final int r = rows; + delete.addClickHandler(new ClickHandler() { + + @Override + public void onClick(ClickEvent event) { + table.removeRow(r); + } + }); + table.setWidget(rows, 2, delete); + + if (rows > 1) + table.getRowFormatter().addStyleName(rows, "pithos-invitationFormRow"); + + rows++; } }); - confirm.addStyleName("button"); - confirm.setVisible(inv.getInvitationsLeft() > 0); - inner.add(confirm); - HTML sentLabel = new HTML("Sent invitations"); + Button send = new Button("send invitations", new ClickHandler() { + @Override + public void onClick(ClickEvent event) { + int rowCount = table.getRowCount(); + + for (int i = 1; i 0); + left.add(send); + + split.add(left); + + VerticalPanel right = new VerticalPanel(); + right.addStyleName("pithos-sentInvitationsPanel"); + + HTML sentLabel = new HTML("Invitations sent"); sentLabel.addStyleName("pithos-sentInvitationsTitle"); - inner.add(sentLabel); + right.add(sentLabel); FlexTable sentInvitationsTable = new FlexTable(); - Image accepted = new Image("images/invitation_accepted.png"); - accepted.setAltText("Invitation accepted"); - Image resend = new Image("images/resend.png"); - resend.setAltText("Resend invitation"); - - HorizontalPanel legend = new HorizontalPanel(); - legend.add(new HTML("(")); - legend.add(accepted); - legend.add(new HTML(" = Invitation has been accepted)")); - legend.add(new HTML("(")); - legend.add(resend); - legend.add(new HTML(" = Send invitation again)")); - inner.add(legend); int row = 0; for (final Invitation i : inv.getSentInvitations()) { sentInvitationsTable.setText(row, 0, i.getRealname()); - sentInvitationsTable.setText(row, 1, i.getEmail()); + row++; + sentInvitationsTable.setText(row, 0, i.getEmail()); if (i.isAccepted()) - sentInvitationsTable.setWidget(row, 2, new Image("images/invitation_accepted.png")); + sentInvitationsTable.setWidget(row, 1, new Image("images/invitation_accepted.png")); else { Image img = new Image("images/resend.png"); img.addStyleName("pithos-resendInvitation"); @@ -165,35 +194,22 @@ public class InvitationsDialog extends DialogBox { sendInvitation(i.getEmail(), i.getRealname()); } }); - sentInvitationsTable.setWidget(row, 2, img); + sentInvitationsTable.setWidget(row, 1, img); } row++; } - inner.add(sentInvitationsTable); + right.add(sentInvitationsTable); + + split.add(right); + + inner.add(split); outer.add(inner); outer.setCellHorizontalAlignment(inner, HasHorizontalAlignment.ALIGN_CENTER); setWidget(outer); } - @Override - protected void onPreviewNativeEvent(NativePreviewEvent preview) { - super.onPreviewNativeEvent(preview); - NativeEvent evt = preview.getNativeEvent(); - if (evt.getType().equals("keydown")) - // Use the popup's key preview hooks to close the dialog when - // either enter or escape is pressed. - switch (evt.getKeyCode()) { - case KeyCodes.KEY_ENTER: - sendInvitation(emailBox.getText().trim(), name.getText().trim()); - break; - case KeyCodes.KEY_ESCAPE: - hide(); - break; - } - } - - void sendInvitation(String email, String realname) { + void sendInvitation(String email, final String realname) { PostRequest sendInvitation = new PostRequest("/im/", "", "invite", "uniq=" + email + "&realname=" + realname) { @Override @@ -203,7 +219,10 @@ public class InvitationsDialog extends DialogBox { @Override public void onSuccess(Resource result) { - app.displayInformation("Invitation sent"); + HTML msg = new HTML("Invitation to " + realname + " was sent."); + msg.addStyleName("pithos-invitationResponse"); + messagesPanel.add(msg); + } @Override @@ -213,6 +232,5 @@ public class InvitationsDialog extends DialogBox { }; sendInvitation.setHeader("X-Auth-Token", app.getToken()); Scheduler.get().scheduleDeferred(sendInvitation); - hide(); } } diff --git a/src/gr/grnet/pithos/web/public/images/delete.png b/src/gr/grnet/pithos/web/public/images/delete.png new file mode 100644 index 0000000..64d3651 Binary files /dev/null and b/src/gr/grnet/pithos/web/public/images/delete.png differ diff --git a/src/gr/grnet/pithos/web/public/images/plus.png b/src/gr/grnet/pithos/web/public/images/plus.png new file mode 100644 index 0000000..f0a44d2 Binary files /dev/null and b/src/gr/grnet/pithos/web/public/images/plus.png differ diff --git a/src/gr/grnet/pithos/web/public/pithos.css b/src/gr/grnet/pithos/web/public/pithos.css index f7f86ca..6ce4d2d 100644 --- a/src/gr/grnet/pithos/web/public/pithos.css +++ b/src/gr/grnet/pithos/web/public/pithos.css @@ -460,7 +460,7 @@ table.pithos-permList.props-labels { } /*button styles*/ -.pithos-dalogbox .button { +.pithos-dialogbox .button { } /*button position within the overlay content*/ @@ -514,10 +514,74 @@ a.pithos-tag { color: #4085a5; } -.pithos-sentInvitationsTitle { - font-size: 1.2em; +.pithos-invitationsLeft { + padding: 0 0 10px 0; + border-bottom: 1px solid #4085A5; +} + +.pithos-leftInvitationsNumber { + background-color: #4085A5; + padding: 3px; + color: white; + font-weight: bold; +} + +.pithos-sendInvitationsPanel { + margin-top: 10px; + border-right: 1px solid #4085A5; +} + +.pithos-sendInvitationsTitle { + font-weight: bold; + color: #4085A5; + margin-right: 10px; +} + +.pithos-addInvitationImg { + background-color: #4085A5; + padding: 5px; + cursor: pointer; +} + +.pithos-invitationResponse { + background-color: green; + color: white; + padding: 5px; +} + +.pithos-invitationResponse .user { + font-weight: bold; +} + +.props-labels .eg { font-weight: normal; - border-bottom: 1px solid #B0D0E0; + color: gray; +} + +.pithos-invitationDeleteImg { + cursor: pointer; +} + +.pithos-invitationFormRow { + border-top: 1px solid gray; +} + +.pithos-sendInvitationButton { + background: none; + background-color: #ff7f2a; + text-align: center; + height: auto; + padding: 8px; + border: none; + color: white; +} + +.pithos-sentInvitationsPanel { + margin-top: 10px; +} + +.pithos-sentInvitationsTitle { + font-weight: bold; color: #4085A5; }