gCubeSystem
/
notifications
16
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Modal that shows user's settings made responsive too 

git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/user/notifications@126890 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
costantino.perciante 2016-04-08 12:55:54 +00:00
parent fd23914193
commit 15e810704a
9 changed files with 73 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/main/java/org/gcube/portlets/user/notifications/client/view/NotificationSettingsDialog.java
View File

@ -33,7 +33,6 @@ public class NotificationSettingsDialog extends Modal {
public static final String loading = GWT.getModuleBaseURL() + "../images/feeds-loader.gif"; public static final String loading = GWT.getModuleBaseURL() + "../images/feeds-loader.gif";
public static final String mailSentOK = GWT.getModuleBaseURL() + "../images/yes.png"; public static final String mailSentOK = GWT.getModuleBaseURL() + "../images/yes.png";
public static final String mailSentNOK = GWT.getModuleBaseURL() + "../images/warning_blue.png"; public static final String mailSentNOK = GWT.getModuleBaseURL() + "../images/warning_blue.png";
public static final int WIDTH = 950;
ArrayList<CategoryWrapper> myCategories = new ArrayList<CategoryWrapper>(); ArrayList<CategoryWrapper> myCategories = new ArrayList<CategoryWrapper>();
private VerticalPanel placeholder = new VerticalPanel(); private VerticalPanel placeholder = new VerticalPanel();
@ -44,11 +43,8 @@ public class NotificationSettingsDialog extends Modal {
public NotificationSettingsDialog(LinkedHashMap<String, ArrayList<NotificationPreference>> preferences, final NotificationsServiceAsync notificationService) { public NotificationSettingsDialog(LinkedHashMap<String, ArrayList<NotificationPreference>> preferences, final NotificationsServiceAsync notificationService) {
super(); super();
setAnimation(true); setAnimation(true);
setWidth(WIDTH);
setTitle("Notification Settings"); setTitle("Notification Settings");
//this is needed cuz i didnt figure out
placeholder.setWidth(WIDTH+"px");
placeholder.setHorizontalAlignment(HasAlignment.ALIGN_CENTER); placeholder.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);
add(placeholder); add(placeholder);
@ -58,8 +54,6 @@ public class NotificationSettingsDialog extends Modal {
myCategories.add(cat); myCategories.add(cat);
} }
save.setType(ButtonType.PRIMARY); save.setType(ButtonType.PRIMARY);
footer.add(save); footer.add(save);
footer.add(cancel); footer.add(cancel);

2
src/main/java/org/gcube/portlets/user/notifications/client/view/NotificationsPanel.java
View File

@ -65,7 +65,7 @@ public class NotificationsPanel extends Composite {
private VerticalPanel mainPanel; private VerticalPanel mainPanel;
private HTML notificationSettings = new HTML("<a style=\"padding-right: 15px;\" class=\"notification-btn\">Notification Settings</a>"); private HTML notificationSettings = new HTML("<a class=\"notification-btn\">Notification Settings</a>");
public NotificationsPanel() { public NotificationsPanel() {
notificationSettings.setVisible(false); notificationSettings.setVisible(false);

3
src/main/java/org/gcube/portlets/user/notifications/client/view/templates/CategoryWrapper.java
View File

@ -12,6 +12,7 @@ import org.gcube.portlets.user.notifications.shared.NotificationPreference;
import org.gcube.portlets.widgets.switchbutton.client.SwitchButton; import org.gcube.portlets.widgets.switchbutton.client.SwitchButton;
import com.google.gwt.core.client.GWT; import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.event.logical.shared.ValueChangeEvent; import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler; import com.google.gwt.event.logical.shared.ValueChangeHandler;
import com.google.gwt.uibinder.client.UiBinder; import com.google.gwt.uibinder.client.UiBinder;
@ -44,6 +45,8 @@ public class CategoryWrapper extends Composite {
public CategoryWrapper(String catName, ArrayList<NotificationPreference> preferences) { public CategoryWrapper(String catName, ArrayList<NotificationPreference> preferences) {
initWidget(uiBinder.createAndBindUi(this)); initWidget(uiBinder.createAndBindUi(this));
categoryLabel.setText(catName); categoryLabel.setText(catName);
getElement().getStyle().setMarginTop(10, Unit.PX);
//set the view depending on the model //set the view depending on the model
boolean atLeastOnePreferenceOn = false; boolean atLeastOnePreferenceOn = false;

33
src/main/java/org/gcube/portlets/user/notifications/client/view/templates/CategoryWrapper.ui.xml
View File

@ -4,24 +4,21 @@
xmlns:e="urn:import:org.gcube.portlets.user.gcubewidgets.client.elements" xmlns:e="urn:import:org.gcube.portlets.user.gcubewidgets.client.elements"
xmlns:b="urn:import:com.github.gwtbootstrap.client.ui" xmlns:g="urn:import:com.google.gwt.user.client.ui"> xmlns:b="urn:import:com.github.gwtbootstrap.client.ui" xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel> <g:HTMLPanel>
<div class="day-wrapper"> <b:Row>
<e:Span styleName="day-label" ui:field="categoryLabel" /> <b:Column size="2">
<div class="floatingRight"> <e:Span styleName="day-label" ui:field="categoryLabel" />
<table> </b:Column>
<tr> <b:Column offset="1" size="1">
<td> <b:CheckBox ui:field="portalCheckbox">Portal</b:CheckBox>
<b:CheckBox ui:field="portalCheckbox">Portal</b:CheckBox> </b:Column>
</td> <b:Column size="1">
<td> <b:CheckBox ui:field="emailCheckbox">Email</b:CheckBox>
<b:CheckBox ui:field="emailCheckbox">Email</b:CheckBox> </b:Column>
</td> <b:Column offset="1" size="2">
<td> <w:SwitchButton ui:field="switchButton" />
<w:SwitchButton ui:field="switchButton" styleName="paddingLeft" /> </b:Column>
</td> </b:Row>
</tr> <div class="day-wrapper"></div>
</table>
</div>
</div>
<g:VerticalPanel ui:field="categoryPanel"></g:VerticalPanel> <g:VerticalPanel ui:field="categoryPanel"></g:VerticalPanel>
</g:HTMLPanel> </g:HTMLPanel>

12
src/main/java/org/gcube/portlets/user/notifications/client/view/templates/NotificationPreferenceView.java
View File

@ -6,16 +6,16 @@ import java.util.ArrayList;
import org.gcube.portal.databook.shared.NotificationChannelType; import org.gcube.portal.databook.shared.NotificationChannelType;
import org.gcube.portal.databook.shared.NotificationType; import org.gcube.portal.databook.shared.NotificationType;
import org.gcube.portlets.user.gcubewidgets.client.elements.Span;
import org.gcube.portlets.user.notifications.shared.NotificationPreference; import org.gcube.portlets.user.notifications.shared.NotificationPreference;
import org.gcube.portlets.widgets.switchbutton.client.SwitchButton; import org.gcube.portlets.widgets.switchbutton.client.SwitchButton;
import com.github.gwtbootstrap.client.ui.CheckBox;
import com.github.gwtbootstrap.client.ui.Paragraph;
import com.google.gwt.core.client.GWT; import com.google.gwt.core.client.GWT;
import com.google.gwt.event.logical.shared.ValueChangeEvent; import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler; import com.google.gwt.event.logical.shared.ValueChangeHandler;
import com.google.gwt.uibinder.client.UiBinder; import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField; import com.google.gwt.uibinder.client.UiField;
import com.github.gwtbootstrap.client.ui.CheckBox;
import com.google.gwt.user.client.ui.Composite; import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget; import com.google.gwt.user.client.ui.Widget;
@ -28,8 +28,8 @@ public class NotificationPreferenceView extends Composite {
UiBinder<Widget, NotificationPreferenceView> { UiBinder<Widget, NotificationPreferenceView> {
} }
@UiField Span prefType; @UiField Paragraph prefType;
@UiField Span prefDesc; @UiField Paragraph prefDesc;
@UiField CheckBox portalCheckbox; @UiField CheckBox portalCheckbox;
@UiField CheckBox emailCheckbox; @UiField CheckBox emailCheckbox;
@ -41,8 +41,8 @@ public class NotificationPreferenceView extends Composite {
initWidget(uiBinder.createAndBindUi(this)); initWidget(uiBinder.createAndBindUi(this));
myPreference = toDisplay; myPreference = toDisplay;
updateViewValues(toDisplay); updateViewValues(toDisplay);
prefType.setHTML(toDisplay.getTypeLabel()); prefType.setText(toDisplay.getTypeLabel());
prefDesc.setHTML(toDisplay.getTypeDesc()); prefDesc.setText(toDisplay.getTypeDesc());
switchButton.addValueChangeHandler(new ValueChangeHandler<Boolean>() { switchButton.addValueChangeHandler(new ValueChangeHandler<Boolean>() {
@Override @Override

37
src/main/java/org/gcube/portlets/user/notifications/client/view/templates/NotificationPreferenceView.ui.xml
View File

@ -4,25 +4,22 @@
xmlns:w="urn:import:org.gcube.portlets.widgets.switchbutton.client" xmlns:w="urn:import:org.gcube.portlets.widgets.switchbutton.client"
xmlns:b="urn:import:com.github.gwtbootstrap.client.ui" xmlns:g="urn:import:com.google.gwt.user.client.ui"> xmlns:b="urn:import:com.github.gwtbootstrap.client.ui" xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel> <g:HTMLPanel>
<table class="single-notification-table"> <b:Row>
<tr> <b:Column size="2">
<td valign="TOP" style="width: 200px;" align="left"> <b:Paragraph styleName="user-notification" ui:field="prefType" > </b:Paragraph>
<e:Span styleName="user-notification" ui:field="prefType" /> </b:Column>
</td> <b:Column size="1">
<td valign="TOP" style="width: 60px;"> <b:CheckBox ui:field="portalCheckbox">Portal</b:CheckBox>
<b:CheckBox ui:field="portalCheckbox">Portal</b:CheckBox> </b:Column>
</td> <b:Column size="1">
<td valign="TOP" style="width: 60px;"> <b:CheckBox ui:field="emailCheckbox">Email</b:CheckBox>
<b:CheckBox ui:field="emailCheckbox">Email</b:CheckBox> </b:Column>
</td> <b:Column size="2">
<td valign="TOP" style="width: 150px;"> <w:SwitchButton ui:field="switchButton" />
<w:SwitchButton ui:field="switchButton" </b:Column>
styleName="floatingRight paddingRight" /> <b:Column size="3">
</td> <b:Paragraph styleName="user-notification-comment" ui:field="prefDesc" ></b:Paragraph>
<td valign="TOP"> </b:Column>
<e:Span styleName="user-notification-comment" ui:field="prefDesc" /> </b:Row>
</td>
</tr>
</table>
</g:HTMLPanel> </g:HTMLPanel>
</ui:UiBinder> </ui:UiBinder>

16
src/main/java/org/gcube/portlets/user/notifications/client/view/templates/SingleNotificationView.ui.xml
View File

@ -5,15 +5,17 @@
xmlns:b="urn:import:com.github.gwtbootstrap.client.ui"> xmlns:b="urn:import:com.github.gwtbootstrap.client.ui">
<g:HTMLPanel ui:field="mainPanel"> <g:HTMLPanel ui:field="mainPanel">
<b:Row> <b:Row>
<b:Column size="1">
<b:Column size="2"> <b:Image styleName="notification-photo" url=""
<b:Image styleName="notification-photo" url="" ui:field="notificationImage" width="30" height="30" />
ui:field="notificationImage" width="30" height="30" />
<e:Span styleName="user-notification-time" ui:field="timeArea" />
</b:Column> </b:Column>
<b:Column size="8"> <b:Column size="1">
<e:Span styleName="user-notification" ui:field="notificationText" /> <e:Span styleName="user-notification-time" ui:field="timeArea" />
</b:Column>
<b:Column size="10">
<e:Span styleName="user-notification-comment" ui:field="notificationText" />
<e:Span styleName="user-notification" ui:field="goApp" /> <e:Span styleName="user-notification" ui:field="goApp" />
</b:Column> </b:Column>
</b:Row> </b:Row>

2
src/main/java/org/gcube/portlets/user/notifications/server/NotificationsServiceImpl.java
View File

@ -93,7 +93,7 @@ public class NotificationsServiceImpl extends RemoteServiceServlet implements No
*/ */
public String getDevelopmentUser() { public String getDevelopmentUser() {
String user = "test.user"; String user = "test.user";
// user = "massimiliano.assante"; // user = "andrea.rossi";
return user; return user;
} }
public UserInfo getUserInfo() { public UserInfo getUserInfo() {

34
src/main/webapp/Notifications.css
View File

@ -1,8 +1,8 @@
table {
table {
border-collapse: separate !important; border-collapse: separate !important;
border-spacing: 0; border-spacing: 0;
} }
div.portlet-content { div.portlet-content {
padding-top: 0px; padding-top: 0px;
} }
@ -36,7 +36,7 @@ div.portlet-content {
text-decoration: underline; text-decoration: underline;
} }
a.link,a.link:active,a.link:visited { a.link, a.link:active, a.link:visited {
font-family: 'Lucida Grande', Verdana, 'Bitstream Vera Sans', Arial, font-family: 'Lucida Grande', Verdana, 'Bitstream Vera Sans', Arial,
sans-serif; sans-serif;
font-size: 12px; font-size: 12px;
@ -57,13 +57,13 @@ a.link:hover {
height: 38px; height: 38px;
} }
.day-wrapper { .day-wrapper {
max-width: 100%; max-width: 100%;
border-bottom-color: #DADADA; border-bottom-color: #DADADA;
border-bottom-style: solid; border-bottom-style: solid;
border-bottom-width: 1px; border-bottom-width: 1px;
padding: 15px 7px 3px; padding: 15px 7px 3px;
margin-bottom: 10px;
} }
.day-label { .day-label {
@ -83,12 +83,10 @@ a.link:hover {
border-bottom: 1px solid #EFEFEF; border-bottom: 1px solid #EFEFEF;
} }
.unread-notification { .unread-notification {
background-color: #e8effa; background-color: #e8effa;
} }
.no-notification-message { .no-notification-message {
line-height: 40px; line-height: 40px;
font-family: 'Architects Daughter', arial, sans-serif; font-family: 'Architects Daughter', arial, sans-serif;
@ -98,7 +96,7 @@ a.link:hover {
.notification-photo { .notification-photo {
padding: 2px; padding: 2px;
border: none; border: none;
margin-left: 5px; margin-left: 20px;
} }
.user-notification-time { .user-notification-time {
@ -106,7 +104,7 @@ a.link:hover {
font-family: 'Lucida Grande', Verdana, 'Bitstream Vera Sans', Arial, font-family: 'Lucida Grande', Verdana, 'Bitstream Vera Sans', Arial,
sans-serif; sans-serif;
font-size: 12px; font-size: 12px;
padding: 1px 10px; padding: 1px;
white-space: nowrap; white-space: nowrap;
} }
@ -118,6 +116,7 @@ a.link:hover {
.gwt-CheckBox label { .gwt-CheckBox label {
padding: 5px; padding: 5px;
} }
.user-notification { .user-notification {
color: #333; color: #333;
font-family: 'Lucida Grande', Verdana, 'Bitstream Vera Sans', Arial, font-family: 'Lucida Grande', Verdana, 'Bitstream Vera Sans', Arial,
@ -131,22 +130,24 @@ a.link:hover {
.user-notification-comment { .user-notification-comment {
width: 99%; width: 99%;
color: #666; color: #666;
font: italic 12px 'Lucida Grande', Verdana, 'Bitstream Vera Sans', Arial, sans-serif; font: italic 12px 'Lucida Grande', Verdana, 'Bitstream Vera Sans', Arial,
sans-serif;
border-color: #999; border-color: #999;
border-width: 1px; border-width: 1px;
letter-spacing: normal; letter-spacing: normal;
} }
.gwt-CheckBox { .gwt-CheckBox {
margin-right: 0; margin-right: 0;
padding-right: 0; padding-right: 0;
} }
.floatingLeft { .floatingLeft {
float:left; float: left;
} }
.floatingRight { .floatingRight {
float:right; float: right;
} }
.paddingRight { .paddingRight {
@ -160,3 +161,10 @@ a.link:hover {
.displayInline { .displayInline {
display: inline; display: inline;
} }
@media screen and (min-width: 1024px) {
.modal {
width: 950px !important;
margin-left: -480px !important;
}
}